Getting more out of ImageCache

ImageCache is a wonderful module that most of us know and love for automatically cropping and resizing images on our Drupal sites, but you may not be aware of some of its more obscure potential. Here’s a rundown of some modules, tips, and hidden gems that make it a must-have.

Cropping to square images with a white background

When cropping your imagecache preset to a nice, tidy square, inevitably your first attempt looked something like this:

You may have been dismayed to not find an option to fix this in ImageCache itself. But don’t give up – ImageCache Actions can handle this with its canvas background feature. Install the module, enable the included ImageCache Canvas Actions module, and you’ll have a whole pile of new actions available to your presets.

Add the “Define Canvas” option, set the color to #ffffff (or whatever your page background is), and then the cropping will nicely fill out with white instead of black.

Serving up leaner thumbnails by converting file formats

Another great trick with the ImageCache Actions module is to convert file formats, especially if you are using large, non-lossy PNG files for your original images. That’s great when someone clicks on the huge zoomed version of your beautiful image, but not so great when you end up with 70k thumbnails! JPG is a much better file type for displaying smaller thumbnails in a more compressed format.

Simply select the “Change File Format” option to add a JPG conversion to your ImageCache preset. You can also tweak your JPG quality settings under your image toolkit’s options in the ImageAPI preferences.

Easily inserting images with different presets in content

There are countless ways to handle images in content in Drupal 6, but a nice lean alternative is the Insert module. This gives you the flexibility of being able to position images anywhere in content with the power of images as fields and ImageCache presets. Works great with WYSIWYGs too!

After installing the module, you can select which ImageCache presets should be available to insert. Then when uploading your images to fields, an Insert button is available to automatically insert all the necessary HTML to embed that image in the content. You can also have CSS classes be added to any inserted image tags. We do this here on our site to automatically style images with a certain border and margins.

If you’re using Insert, you probably want to disable image fields from displaying on the content type, otherwise they’ll show up twice. But with this approach, you can still harness the power of image fields by being able to reference them directly in views as usual.

Using ImageCache for user profile pictures

Drupal’s core profile module gives you some basic image resizing capabilities, but that’s not too helpful if you want to be able to use different sizes of user pictures in different parts of your site. ImageCache Profiles to the rescue! This module does exactly what it sounds like, and allows you to use ImageCache presets for user profile pictures, giving you more flexibility for using these in views or other content displays.

Apply dynamic text to images

Again using the ImageCache Actions module, you can overlay text on an image. It allows you to enter PHP snippets, so you can get fancy with things like the node title or other data added as an overlay. For example, here’s a snippet to add the price (from an Ubercart product) to the image:

$price = round($node->sell_price, 1); return "$$price";

I hope this post has given you some ideas about how to do even more with ImageCache on your site! Got any other favourite tips and tricks? Share them in the comments!