STOP! This tutorial is outdated. An updated tutorial has been posted here.
Save yourself the confusion and head over there!

There’s an almost infinite number of ways to create a photo gallery with Drupal. I’ve tried many different approaches but never really been all that happy with the results. I’ve finally found a solution worth sharing/repeating. Here’s what we’ll be creating using Views, CCK and the Flickr module.

The flickr module is great right out of the box. It exposes some handy blocks for displaying recent photos and photosets as well as random photos, etc. What it doesn’t do however, is give you a block/page to browse all (or some) of your photosets. What if you only want to display one photoset but not another? What if you want to relate a photo or set to other nodes within your Drupal site? Well, out of the box, the flickr module doesn’t give you this option. So how do you fix this? Well, you use the Flickr CCK field that comes packed with the module – thats how!

Here’s the rundown of what you’ll need to do:

1. Install/enable Views, CCK, and Flickr (including the Flickr field)
2. Create new “Photo Set” node type
3. Some theme overrides in template.php
4. Drink a beer
5. Implement an overlay/lightbox plugin of your choosing
6. Use views to generate a page display for your new node type
7. Drink another beer and enjoy your gallery!

The flickr module requires that you apply for a Flickr API key. Don’t worry, its free and you can get yours here. Add your API Key and Shared Secret to your installation at Admin > Settings > Flickr. You’ll also want to set a Default Flickr User Id on this page. If you don’t know yours off-hand (and who would?) you can get yours using idGetter.

Note: As my good pal @mrtnyeti pointed out, you must enable the Flickr Sets module that ships with the Flickr module as well. Without it, this technique won’t work.

All right, so once you’ve got Views, CCK and Flickr all enabled and ready to do your bidding, you need to create a new node type – call it whatever you want, I’m calling mine: Flickr Photoset

Now add a flickr field to this node type. Call this one whatever you want as well. I’m calling mine Flickr ID. Once you’ve got this done, create a few nodes – you’ll see you can specify a photo or a photoset. For this example, we’ll only be using photosets. You can grab the ID of a photoset by visiting that photoset on Flickr and grabbing the number following “sets” in the URL.

Note: You may not see anything being pulled from flickr after creating a node of this type. The quick fix is to head over to the “Display Fields” tab under the content type administration section. Click save without making any changes and you should see some output from Flickr.

Once saved, you’ll see that the default output really isn’t all that helpful or interesting. We don’t get the desired result at all. That’s where theme overrides come in. In this first override, we’ll alter the default output for a flickrfield photoset. Add the following code to template.php.

<?php
function phptemplate_flickrfield_photoset($img, $photo_url, $formatter, $photo_data, $node) {
  if (arg(0) != 'node') {
    $options = array('html' => true);
    return l($img, 'node/'.$node->nid, $options);
  } else {
    return theme_flickr_photoset($photo_data, $photo_data['owner'], $formatter);
  }
}
?>

Credit where it’s due: PETER TÖRNSTRAND got me started on the right path for this tutorial. I’ve made one alteration to his override though. I threw in a conditional for non-node pages – this way we get a simple thumbnail link on pages that aren’t node pages. Things like views pages or taxonomy term feeds. Once you’ve got that override in template.php, you should see a complete photoset being rendered when viewing the node – with the thumbnails linking to their homes on Flickr.

We can take it one step further though. Instead of linking directly to Flickr, we can pull the image asset into our page and display it using a trendy lightbox. I prefer the ColorBox jQuery plugin, but you can use whichever plugin you want. Just adapt the following theme override to suit your needs:

<?php
function phptemplate_flickr_photo($p, $size = NULL, $format = NULL, $attribs = NULL) {
  $img = flickr_img($p, $size, $attribs);
  $photo_url = flickr_photo_img($p, NULL, $format);
  $title = is_array($p['title']) ? $p['title']['_content'] : $p['title'];
  return l($img, $photo_url, array('attributes' => array('rel' => 'photos', 'title' => $title), 'absolute' => TRUE, 'html' => TRUE));
}
?>

Note: If you’re going to use ColorBox like I am on this site, you’ll need to upgrade your jQuery to 1.3 – the current version of Drupal (6.15) doesn’t ship with this version. I spent way too much time trying to debug this…but I digress.

If you need help installing the jQuery for your lightbox plugin, see my post on “How to Add Custom jQuery” from my Drupal 101 series.

The last step is to create a simple view to display a listing of your new node type. I set one up at “/photos”. I’ve attached the exported version of my view to the bottom of this post.

So, why is this solution better than what ships with the Flickr module? One word: Flexibility. Like I mentioned at the start of the post, you don’t have much control over what output you get with the Flickr module. This method allows you to not only choose which photo sets you display on your Drupal site, but also ways to tie your flickr sets to other nodes or data on your site. You could for example, add a node reference field to this node type to tie photo sets to other node types (pages, stories, events, etc.). You could also leverage other modules like Views or Taxonomy to create simple searches or browse pages. Get my drift?

My Gallery

If you’ve got a question – drop me a comment. I’m all about spreading the Drupal/Flickr love.

Happy Drupaling ninjas!