Back in February, I wrote a quick tutorial on how you can leverage Views, CCK and the Flickr module to create a photo gallery in Drupal. It is by far the most popular post on this humble site of mine (garnering about 36% of my traffic). Long story short, the Flickr module was updated (for the better) and the tutorial was outdated. The technique I described in the original tutorial was no longer correct. So, people following it (trusing that I knew what I was talking about) couldn’t replicate the results. This post is long overdue but I hope it helps clear things up on how to get the same results with the new Flickr module.
I recently whipped up a simple site for a cross country team I help coach that demos this functionality nicely. Here is an example gallery page – this is what we’ll be creating.
For the most part, the technique is the same, but I’ll run through all of the steps quickly below:
- Download and install Views, CCK and the Flickr modules
- Enable Views, CCK and the following Flickr modules
- Flickr
- Flickr Sets
- FlickrField (under the CCK package)
- Configure the Flickr module settings at Site Configuration > Flickr
- Enter your Flickr API Key and Shared Secret (you can get yours here if you don’t already have one)
- Save your changes. Doing so should return your Flickr ID and populate it for you inside of Drupal. If not, you can get yours using this nifty tool
- Create a new content type to house your photo galleries from Flickr, I called mine “Photo Gallery”.
- Important – Add the Flickr field for capturing the photo set id:
- Under manage fields for your new content type, select Flickr Photo as the type NOT FLICKR PHOTO SET – the photo set field only returns the primary or cover photo for the entered photo set. If you want a gallery of all of your images, you need to select the Flickr Photo Field type. Go ahead and save the changes and customize the field as you see fit. I made mine required. This is where most of the confusion came from – I believe this was a change from the module I used when I originally wrote the tutorial up.
- Now, head over to the “Display Fields” tab. You can make changes here as to how your field will display your images. I left the defaults, but you need to click “save” either way. Apparently, this forces your images to begin displaying on your nodes.
- Create some nodes. When you do so, you’ll see “Item Type” is an option under the Flickr Photo Set field we created earlier. Be sure to select “photoset” and then fill out the ID of the set you’re adding to your site. The ID of your photoset can be found in the URL of that gallery following “sets” – excluding the slashes, of course.
Your nodes should display the photos in your Flickr sets immediately. You’ll likely want to style them up a bit. Here’s what I added to my theme’s CSS:
div.flickr-photoset div.flickr-photoset-img {
float: left;
margin: 0 12px 12px 0;
}
div.flickr-photoset, div.flickr-photoset-meta, div.field-field-season {
float: left;
clear: both;
}
And here is the theme override I used in my template.php file to add the rel attribute and a class of “fancybox” to each image. This allowed me to use my favorite lightbox style plugin: Fancybox This override also links to the original size of the photo, so you get a much larger display than the default.
<?php
function yourTheme_flickrfield_photoset($img, $photo_url, $formatter, $photo_data, $node) {
$output = '<div class="flickr-photoset">';
if (
module_exists('flickr_sets')) {
$photos = flickr_set_load($photo_data['id']);
foreach ((array) $photos['photoset']['photo'] as $photo) {
//insert owner into $photo because theme_flickr_photo needs it
$photo['owner'] = $photos['photoset']['owner'];
$title = is_array($photo['title']) ? $photo['title']['_content'] : $photo['title'];
$img = flickr_img($photo, $formatter);
$original = flickr_photo_img($photo, 'b');
if (
arg(0) == 'node' && arg(1) == $node->nid) {
$output .= '<div class="flickr-photoset-img flickr-photoset-img-'. $formatter .'">'. l($img, $original, array('attributes' => array('title' => $title, 'rel' => 'photos', 'class' => 'fancybox'), 'absolute' => TRUE, 'html' => TRUE)) .'</div>';
} else {
$output .= '<div class="flickr-photoset-img flickr-photoset-img-'. $formatter .'">'. l($img, 'node/'. $node->nid, array('attributes' => array('title' => $title), 'absolute' => TRUE, 'html' => TRUE)) . '</div>';
}
}
} else {
$title = is_array($photo_data['title']) ? $photo_data['title']['_content'] : $photo_data['title'];
if (arg(0) == 'node' && arg(1) == $node->nid) {
$output .= '<div class="flickr-photoset-img">'. $img .'</div>';
} else {
$output .= '<div class="flickr-photoset-img">'. l($img, 'node/'. $node->nid, array('attributes' => array('title' => $title), 'absolute' => TRUE, 'html' => TRUE)) . '</div>';
}
}
$output .= '</div>';
$output .= '<div class="flickr-photoset-meta">';
$output .= '<p>'. $photo_data['description']['_content'] .'</p>';
$output .= '<cite>'. l(t('Source: Flickr'), $photo_url) .'</cite>';
$output .= '</div>';
return $output;
}
?>Like I said before, this post was long overdue…I hope this clears up any confusion the other post might have caused.
Comments
Hi Karl – if you’re using the fancybox module you’ll want to use Fancybox 1.3.1 – this is what the module recommends. You’ll also need to add “.fancybox” to the activation code to properly activate the effect on those links. That code must include the preceding period. This will target any element with the “fancybox” class. Looking at your setup, it looks like you’re almost there!
function yourTheme_flickrfield_photoset($variables) { $img = $variables['0']; $photo_url = $variables['1']; $formatter = $variables['2']; $photo_data = $variables['3']; $node = $variables['4']; $output = '<div class="flickr-photoset">';And also it would be useful if you add the explanation about the “.fancybox” jQuery selector to the end of the article!!