Create a Drupal Photo Gallery Using Flickr, CCK & Views
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:
- Install/enable Views, CCK, and Flickr (including the Flickr field)
- Create new “Photo Set” node type
- Some theme overrides in template.php
- Drink a beer
- Implement an overlay/lightbox plugin of your choosing
- Use views to generate a page display for your new node type
- 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?
If you’ve got a question – drop me a comment. I’m all about spreading the Drupal/Flickr love.
Happy Drupaling ninjas!
| Attachment | Size |
|---|---|
| 3.56 KB |
Comments
Really steps 4 and 7 are the
I agree Dave!
Hi Chris, Nice tutorial! I
Thanks Eric – I plan on
Thanks Chris, this was very
I’m pretty new to working
Thanks for posting! As for
Thanks for posting! As for your questions, no - template.php is definitely not required. It is however, the place where you utilize the theme overrides I have listed in the post above. If you don't have one, just create it! It's just a php file where you can store your theme overrides, preprocess functions and custom functions of your own. You can read more about it on "Drupal.org":http://drupal.org/node/171194 - if you have any other questions, fire away.
Thanks. I’ll read up on it
andvines99 – the template.php
Thanks I’ll try that. Thanks
Thanks Chris! This really
Hi Chad – Thanks for reading!
Hi Chris, Thanks for the
Chad, You should be able to
Hey Chris! Thanks for the
Great tutorial! Is there a
HI Jamie – the flickr module
Chris, Thanks a million for
Hey there — yes I mean create
I’ve managed to get this
I believe you need to use the
Nice walkthrough. I’ve gotten
I don’t think the Flickr
Thanks for sharing your ideas
Thank you so much for putting
Thanks! Glad you found it
I love this idea. I’ve got a
hmm, Tiberius…that’s a tough
So I just tried entering the
Nevermind! I just realized
Hey Chris, thank you so much
Hi Stefan – you aren’t the
Like the others, I’m in the
I am not seeing any
I just figured out a problem
That’s a good distinction
Hi, I’m trying to just get
Hi Dave – this sounds more
Yes, i set them to public.
Thanks for the guide. This
jbb, did you be sure to
i have the same problem and i
I’m having issues getting
I’m having issues getting
Hi Brad – it sounds like
Thanks for the note. I
So I have this up and
Absolutely fantastic
Hi Chris This article is
Hi David – thanks for your
Pages