Photo gallery using ImageCache & Views

One of the biggest problems I have with Drupal is getting a half-way decent image gallery.  I've tried many different options, but until recently I just couldn't find something that worked for me the way I wanted it to.

Some of you might be saying, "But what about just using the Drupal Image module?  Sure, it works, but I like to use ImageCache to resize and tweak my images - and if you've tried to get the Image module gallery to use ImageCache images then you'll know its a dead-in-the-water idea (although I would love someone to prove me wrong).  The Image module uses its own resize code based on the servers image processing toolkit (Admin - Site Configuration - Image Toolkit), which works fine for simple photo galleries - but what if you want to use the advanced features of ImageCache to, say, add a watermark to all your photos & thumbnails?  I do this quite often to help protect the photo ownership. 

Ok, so here's a gallery I've created using my method.  This one is in development for the St. Matthew's Scout Group (http://www.stmatts.co.nz).  First the overview page for the gallery:

Then a shot of one of the galleries:

And lastly a view of a photo, using Thickbox to make it look good.

How did I achieve this?  First you need the modules: Views, CCK, ImageAPI, ImageCache, ImageCache Actions and Thickbox.  These are the basis for building an image gallery that will look good, work well and allow you to dynamically change the way the photos look to the end user.  And before I go any further, I'm assuming a level of knowledge of Drupal here that might be unreasonable - so if I have glossed over or skipped any steps then please let me know with the comment section at the bottom of the page... I'll pad things out as neccessary to make this as useful as possible to those who need it.

Ok, so set up a new content type called Photo Gallery (or something that makes sense to you).  Add a new field called image, or photo, or something to suit your needs - as per normal ImageCache setup.  For my needs, I generally make this a compulsory field (it is an image gallery after all - its going to look pretty boring without at least one image in it), then I set the number of images to unlimited, and turn on the description field (its printed below each image using the code provided below).  If you are worried about having too many images, set a maximum size - I find people get bored adding photos long before the page gets too big.

Now we need to theme the gallery page - its going to look a bit ugly with just a single column of pictures.  I like to theme directly by editing the node templates (The contemplate module can be used, but if all your theming is in one place then it makes things easier to manage long term).  The simplest way to do this is to copy the default template (node.tpl.php) to a new one (node-photo_gallery.tpl.php - or replace photo_gallery with whatever you called the new content type) then edit it to suit your needs.  The following code will print the body text at the top of the page, then lay the images (as many as are in the node) in a table with 4 columns.  This should replace the section that normally prints $content:

<div class="content">
  <?php print $node->content['body']['#value'];?>
  <table width = 100%><tr>
      <?php
        $i = 0;
        while ($node->field_photo[$i]) {
          if ($i % 4 == 0 && $i != 0) print('</tr><tr>');
            print('<td>'.$node->field_photo[$i]['view'].'<br>'
              .$node->field_photo[$i]['data']['description'].'</td>');
        $i++;
        }
    ?>
  </table>
</div>

This is pretty much it for the gallery pages... but now you will want a master page that lists the galleries... this is where the views module comes in handy.  We will use it to create a new view which takes the first image from each node with our photo_gallery content type and makes a tidy master page.  To do this, go to Site Building - Views - Add and make the following changes:

and then create a page view and change it as follows:

This is pretty much all that is needed.  If you need more details then leave a comment below, and let me know if this helped you in any way.

Steve

Acknowledgement:
http://www.primalmedia.com/blog/building-better-drupal-photo-gallery

I searched a long time to find the basis for what I wanted to achieve (which seemed like a simple thing to ask for), and Primal Media's basic outline of the gallery they built for the toy shop in this article was just what I needed to get me going in the right direction.

<Stay Tuned - more to come>