Drupal: Using imagecache with Views and CCK imagefields

A while ago, Angela Byron of Lullabot wrote an article comparing Image and Image Exact Sizes with CCK Imagefield and Imagcache.

The examples given in the article are clear, but if you are using views, you will need to do some more stuff to get what you want.

What my client wanted was the ability to upload a picture of any size, and have a preset size of it appear in one place, and another in another place.

These business requirements translate to two different views that end up as blocks on the front page, using the same content type.

Here are the steps necessary to do this:

First, create the views with the CCK imagefield field in it. For this particular case, we needed the title, author, timestamp, text and tags.

Follow the instructions in Angela's article on how to create presets. In my case, I needed two of them, both of type scale, one for 122 pixel width, and the other for 68 pixel width. By the way, imagecache refuses to work if you give it only a width, so enter something in the height as well.

Then use the views theme wizard, select the view, and click Generate Theme. This will give you two snippets per view. One goes in the template.php for the theme, the other goes in a file called views-list-something.tpl.php.

Now, you need to change the image field in the view from something like:

<div class="view-field view-data-field_image_fid">
  <?php print $field_image_fid?>
</div>

To this:

<div class="view-field view-data-field_image_fid">
  <?php $file = _imagefield_file_load($node->node_data_field_image_field_image_fid); ?>
  <?php $img = theme('imagecache', 'width122', $file['filepath']); ?>
  <?php print l($img, "node/$node->nid", null, null, null, false, true); ?>
</div>

The key here is the obscure field $node->node_data_field_image_field_image_fid which was impossible to guess, but with some print_r()s it was revealed to be the one to use. This field holds the file ID of the image, and can be used for the imagecache retrieval.

Now, for the other view, repeat the steps above, with a different preset to get a different image size for the other view.

When the views are placed in blocks, they will show different sized scaled image, and the original remains the same.

Enjoy ...