Image handling in Drupal

tagged with

Being able to accurately control the size and dimensions of images is vital for any modern website. Nowdays, different media types are commonplace because broadband has become ubiquitous. Because of this, websites have the opportunity to show off far superior and more interesting pages to the average visitor. But being able to handle images on the fly is not something that is necessarily too easy to do - unless you have a well designed web platform.

Drupal 6 requires us to make use of the excellent ImageCache contributed module in order to properly apply effects and styles to class of images. Site prebuilder distributions all come with this module built in and as of Drupal 7, much of this functionality is included in core (about time).

Here's how it works:

  1. download and enable the ImageCache module (if necessary)
  2. Go to ImageCache under Site building and select the Add new preset tab
  3. Supply the new present with a suitable name (one that relates to it's purpose - for example, blog_thumbnail, or small_list_image) and click Save preset
  4. Select the style/actions you would like to apply and configure each one accordingly (for example, you might want to restrict the width of images to 200px. In this case, use the scale style and set the width parameter to 200)
  5. Repeat the last step with different styles until the image displays exactly as you require and click Save preset

This preset is now available pretty much anywhere images are displayed in Drupal. You can apply it to images in content and views quite easily. For example, let's assume that you needed the 200px width preset to apply to all images shown in blog posts:

  1. Click on Content types under Content Management
  2. Select edit for the blog entry type (or whichever type you wish to work on)
  3. Click on the Display fields tab and select the relevant Image field
  4. Select the preset from the dropdown list in the full node (you might wish to make a separate preset for teasers) andd Save the changes

Now any blog images are displayed using the assigned ImageCache preset. In the same way, images in Views can be controlled by configuring the display options in the field outputs for any images shown. A good example of this are the two blog posts shown in the right hand column of the Site prebuilder website.