Drupal images; why they suck and what you can do about it

Drupal sucks; images

It's a well-known frustration that the core image management within Drupal isn't great (to put it mildly). Compared to CMS' such as wordpress it falls very short, there are however a few modules you can install and configure to help manage images better within your site. 

Managing images

Image management doesn't really exist in Drupal core, one way to improve this is with the media module. I've mentioned the media module before in a post about improving the content editors ux, it's a module that allows you to more easily manage images uploaded to the site. With this installed you can reuse images without needing to upload them again, search uploaded images and easily switch between all images and only images you've uploaded. It's a little rough around the edges but works wonders in making image management easier.

Due to its growing popularity there's a range of modules that now integrate with it - more information can be seen on the project page. Looking onwards to Drupal 8 there's a current project set up (media entity) which is looking to combine and build on the media solutions developed for Drupal 7.

View the module here.

Uploading multiple images

You know the drill, you want to add two or more images but in order to do so you have to upload them one at a time. It's slow, it's tedious, it's 2014 - there should be a better way! Well there is (kinda).

The easiest way I've found to do this multiupload imagefield widget, this allows you to select multiple images when browsing files and clicking 'upload' uploads them all. The downside with this being no integration with Media, and you'll more than likely need to increase your file upload limit as if the sum of all files exceeds the limit you'll get an "An unrecoverable error occurred." error. This module also hasn't been tested with IE and is only reported to work with IE10+ so may not be for everyone.

 

In looking for alternatives there is the Media Multiselect module, but is only in sandbox and requires patching (I'm currently putting together more thorough details on this). Integrating with plupload you can upload multiple images on node creation using Media as well as selecting multiple images within the 'library' and 'my files' tabs. However use with caution, as with any sandbox module it's liable to break with updates and is not guaranteed to be maintained.

The only thing that comes close is using the Bulk Media Upload. Integrating with plupload again you can mass upload images and files under 'content', but still requires you to select them one at a time on node creation. Note: as on Media-aplha-4 this is included by default.

Responsive images

There are a few ways to help make images more responsive within a site, mostly relaying on css to resize the image which means still loading a large image on a mobile screen. The Picture module can help deal with this. A D7 backport of the D8 core responsive_image module, Picture allows you to easily add responsive images to your site, by making use of breakpoints, either through adding them in the CMS or importing from a custom theme. With this you can map image styles to different breakpoints allowing images with different styles to be displayed when needed. You can read more in the documentation where there's also plenty of screenshots and a demo site to go alongside.

View the module here.

Image cropping and focus points

There are a few modules out there that allow you to edit images in one way or another before displaying them to the user. The two popular options involve manually cropping an image when uploading it, or selecting a focus point on the image for Drupals autocrop to focus on.

My preferred method of the is the latter, for two reasons:

  1. Easier for CMS users - There's less work involved in this method, though doesn't produce as accurate results.
  2. Less memory intensive - Cropping images on the fly in Drupal requires a fair amount of memory (at least in the couple of examples I've seen), for lower spec hosting this wouldn't work or would cause real issues.

A module I've used a few times for this is focal point. It allows you to place a crosshair on an image after uploading it for Drupal to focus on. A bonus with this is that it works great with the Media module. You can see some examples of it below:

Inserting an image and adding the focal point (when using the Media module you'll need to edit the image to add the focal point). Below are a few examples of images and the output - click on each image to open it in a new tab.

View the module here.

The end bit

This is just a few modules available, as ever with Drupal there are many more. The choice will always depend on what you and your users need, a careful balancing act. Are there any modules you think are a must for managing images? If so let me know in the comments. See you next time!