Quick Tip: Displaying only one CCK image in your teaser

For my Drupal 6 web site,  Green Ninja Active City Guides, I have several CCK content types that all have multiple images. Each of these uses the same field, (field_pictures), and I use jQuery Gallery Formatter to create a scrollable picture gallery on my Race, Park, and Trail content types.

I’m getting larger amounts of photos on some of my nodes now, for instance, the Cactus Rose 50 Mile and 100 Mile Race page, and that’s starting to slow performance. The jQuery Gallery Formatter really slows down my pages, so I switched my teaser views to just display the images with the node. That works great for nodes with one or two images, but looks horrible on pages like San Antonio Trail Running - where users have to scroll through all thirty of the Cactus Rose photos to get to the next race.

Ideally, CCK Imagefield would have a display option like “first image” or similar. The problem, as discussed on drupal.org here: http://drupal.org/node/430604 is that the CCK formatters don’t take configuration parameters, so to add this, the formatter would have to double the number of formatters in the drop down box. ImageCache already adds formatters for each image size you support, as do several other modules.

As that solution isn’t available to me, I went ahead and created my own solution by modifying my node-race.tpl.php.

First, I changed my Display Settings on Race to exclude my Pictures field from $content so the entire list doesn’t get displayed. Check the first “Exclude” checkbox for your field, but not the second - that will exclude the images from your full node display as well.

Next, I made a slight modification to my node-race.tpl.php file. Decide where on your display you would like the thumbnail to go and add this code:

  <?php print $field\_pictures\[0\]\['view'\]; ?>

replacing field_pictures with field_NAMEOFYOURCCKFIELD.

That’s all you need to do! Clear your cache if you’re running into difficulties seeing the change.