Image and Image Exact Sizes vs. Imagefield and ImageCache

Introduction

Suppose you have a site such as an e-commerce site, and you want to upload an image for each product. Suppose further that you have several sizes you want that image to be displayed in, depending on where you are in the site. For example, you might want to have a thumbnail displayed in a product listing, a larger version on the product page itself, and a middle size for displaying in a custom View. And finally, suppose that you'd really rather have Drupal take care of this resizing for you and not have to upload 3+ images for each product you create, so you can spend more time slacking off at work and less time clicking buttons. ;)

There essentially are two different ways to have Drupal do this:

1. Use the Image and Image Exact Sizes modules.

2. Use the imagefield and imagecache modules.

This article will compare and contrast these methods, so you can pick the one most appropriate to your needs (or both!). Read on to find out more!

Image and Image Exact Sizes

The main difference between Image and imagefield module is that Image module stores images as nodes. That means that each product you create will have two nodes created for it: the product itself and the image attached to the product.

The first step (after enabling the image, image_attach, and image_exact modules is to go to administer >> settings >> image and enter the sizes you want for each image:

Next, you'll want to go to administer >> settings >> image_exact and check off the options for which sizes you wish image_exact to enforce:

Note that these settings will apply to each image that you create, regardless if they belong to a product or not.

Creating images first and then creating the product and then linking the two together would be a tedious process. Fortunately, Image module comes with a great little helper module, image_attach which allows you to attach an image to any existing node type. Here's a screenshot from a CCK "product" node's configuration page when image_attach is enabled:

When enabled, this causes an upload field to appear when you create a node:

After you submit the node, the system will automatically create your image node and resize the images appropriately in the background for you. This will create a number of images:

• example.png - the original image
• example.thumbnail.png - the thumbnail-size image
• example.preview.png - the preview-size image
• example.XXX.png - an additional image for each size you have defined.

Note that currently, image_attach only supports attaching one image per node.

Finally, Image module's Views integration allows you to display the image at whatever size:

imagefield and imagecache

imagefield module is different, in that it allows you to add an "image" type field to any CCK node type:

This aspect gives imagefield two important advantages:

1. As many different images can be attached to the node as you want; you could create an image field for product image, another one for "action shot," etc. 2. Each image field may also have multiple images attached to it. So instead of being limited to one image per product, you may now attach 3-4 images that show different views of the product.

The disadvantage is that this module may only be used with CCK types, unlike image module which may be used for any node type.

Unlike Image Exact Sizes which supports resize action only, imagecache supports cropping, scaling, and resizing, so its interface is a bit more complex than that of Image Exact Sizes.

The action starts at administer >> imagecache, where you create a namespace for a set of rules, and then apply one or more actions to each namespace. Actions may be weighted, so for example you could crop an image to 500x500 before resizing it to 200x200.

Here's a screenshot of some actions as an example:

And here's a screenshot of the node/add/content_product page:

Now. The thing to watch is that by default, the original sized image is shown when you view a product node. This can be HUGE. ;) The answer is to put some custom code in your theme to take advantage of the resizing. Here's a sample node-content_product.tpl.php:

  
  <div class="node<?php if ($sticky) { print " sticky"; } ?><?php if (!$status) { print " node-unpublished"; } ?>">
    <?php if ($picture) {
      print $picture;
    }?>
    <?php if ($page == 0) { ?><h2 class="title"><a href="<?php print $node_url?>"><?php print $title?></a></h2><?php }; ?>
    <span class="submitted"><?php print $submitted?></span>
    <span class="taxonomy"><?php print $terms?></span>
    <div class="content">
<pre>
  <code class="language-php">
// Rather than printing $content, we can print fields individually.
print '<p>'. $node->field_description[0]['view'] .'</p>';
// Here we're printing out the imagecache-manipulated image.
print theme('image', 'files/imagecache/product_images/'. $node->field_product_image[0]['filepath']);