Image Handling In Drupal 7 Core

Yesterday afternoon I was given the opportunity to talk about some of the new image handling features in Drupal 7 at DrupalCamp Chicago. Overall the presentation went great, though it was a lot to cram in to a 45 minute presentation and probably a bit heavy for the end of a long day. However, lots of good questions were asked and overall it felt like people were as excited as I am about these new developments.

In review, we talked a little bit about the important role that images play in a websites content and how as it becomes increasingly easier for people to generate images with digital cameras, phones and the like that the technology they use to put that content on their website needs to keep pace.

We then did a quick review of all the different modules that are needed to achieve some sort of sane image handling in Drupal 6 ImageAPI, ImageCache, FileField, ImageField and more. All very powerful tools and a stellar method for handling images, but a lot of setup and configuration for someone that is new to Drupal. This raises the barrier to entry, and makes Drupal 6 a less likely choice for simple/quick websites. This however, has been rectified in Drupal 7 as all of the previously listed modules or some variant have been integrated with Drupal core.

Then we (or at least I) decided that this was really exciting.

We covered some terminology useful for talking about image handling with relationship to Drupal. Summarized below.

Image Fields : User interface widgets that can be attached to a content type and allow users to upload and display images along with their text content.

Image Styles : A set of actions for image manipulation that are combined together to form a display formatter that can be applied to an image and create an alternative version of that image. Think “thumbnail”.

Image Effects : Actions that can be performed on an image in order to alter some aspect of that image. Crop, Scale and Resize are examples of effects. Multiple effects can be combined together to create an image style.

After learning how to talk about images in Drupal we took a quick look at some of the user interface tools for dealing with the above three things. Adding an image field, creating/overriding an image style, and configuring image effects.

Then things turned towards to the code end of things. We looked at the process that Drupal uses to decide when to and how to generate a new image and the different HTTP requests involved in doing so. I even had some nice flowcharts, checkout the slides.

We looked at the different hooks that Drupal provides for allowing your code to interact with the Drupal image handling code. Including defining your own styles and altering those provided by other modules and when you might want to define something in code as opposed to in the database. Comparing with views and the ability it gives you to export your views to code and the benefits gained by doing so. Then we covered taking action when an image style is updated/saved or deleted. Finally we covered methods available for defining your own new image effects to supplement those available in Drupal core.

See the attached image_example.tgz for heavily documented example code related to the hooks mentioned above.

Finally a quick shout-out to the upcoming Media module which aims to bring the concept of image styles to all types of multimedia resources among other things.

I ended the session by giving everyone a homework assignment. While preparing for the presentation and writing the example code I found a couple of minor issues in the image documentation and code. Here are links to the relevant issues.

http://drupal.org/node/658068, http://drupal.org/node/658056 and http://drupal.org/node/656856

Lets get these fixed.

In retrospect I think the presentation would have benefited from some images that showed the difference between the Scale, Crop, and Scale and Crop effects. Difficult concepts to portray with words that would have only taken a simple image to make clear.