An image gallery

I need to create an image gallery for the new Logan Square Walks website.  I surfed around and this page seemed like the easiest approach for what I wanted -- a simple non-nested gallery composed of images that used a neato javascript-powered viewer.

I followed all the steps:

  1. I installed the cck, contemplate, filefield, imageapi, imagecache, imagefield, thickbox, transliteration, and views modules.
    $ for mod in cck contemplate filefield imageapi imagecache imagefield thickbox transliteration views; do -noconfirm install module $mod; done
  2. Enabled all the modules I installed.
  3. Set up a 'thumbnail' imagecache preset.
  4. Created a new content type "Image Gallery" with an additional file field taking an unlimited number of items.
  5. Edited the Display Fields for this new content type and set the images to not display on a teaser ("hidden") and to use Thickbox on full node.
  6. Created an node of this content type and uploaded a bunch of images.
  7. Set up the contemplate for the Image Gallery type and set the body to be this:
    <p>Click on image thumbnails for larger versions.</p>
    <div class="field field-type-filefield field-field-images">
      <div class="field-items"><?php foreach((array)$node->field_images as $imageview) { ?>
        <div class="image-gallery-item">
          <?= $imageview['view'] ?><br />
          <?= $imageview['data']['title'] ?>
    <? } ?>
    <div id="image-gallery-end">&nbsp;</div>
  8. Added these styles to my css:
    /* for image gallery items */
    .image-gallery-item {
      float: left;
      margin-right: 5px;
    #image-gallery-end {
      clear: both;
  9. Added a 'fullsize' imagecache preset.  Configured the thickbox module to link to this preset (at /admin/settings/thickbox).

See the results.  Works great, was fast and easy to set up.  Thanks to Adam at Primal Media!

Free Tag:


I noticed that using this technique the thickbox gallery popup was loading the original image into the shadowbox.  If the original images were very large, this was causing long loading delays. 

I saw that someone else had this issue and a change was put in.  I modified the steps above to include the configuration of the thickbox module to link to a fullsize imagecache preset (step 9).


Updated this post to reflect the migration of the script to  Read more in my post on converting the Drupal Script Library to use Git.

Updated this post to reflect the migration of the to  Read more in my post on converting the Drupal Script Library to use Drush.