Implementing Flickr Slideshow Links By Theming Flickr.module
I've implemented a "slideshow" feature on the photosets in the Photography section of this site (and in blog posts that feature photosets). This feature links to Flickr's built-in slideshow by theming the output of the Flickr module for Drupal:
In this Drupal recipe, we will look at how this was achieved.
Step 1: Review Flickr.module's theming functions.
Lets first open the flickr/flickr.module file and search for "theme_" to see what theming functions it provides. As of version 6.x-1.1, I see the following theme functions:
- function theme_flickr_photo($p, $size = NULL, $format = NULL, $attribs = NULL)
- function theme_flickr_photo_box($p, $size = NULL, $format = NULL, $attribs = NULL)
- function theme_flickr_photos($uid, $photos)
- function theme_flickr_photoset($ps, $owner, $size, $attribs = NULL)
By looking through the code (or examining the page output with Firebug), it looks like theme_flickr_photoset() is generating the #flickr-photoset div that holds all of the photos in a photoset, so lets override it to put a "view as a slideshow" link at the top. While you have this file open, select all of the theme_flickr_photoset() function (from the function declaration to the closing bracket) and copy it to your clipboard.
Step 2: Create a theme override.
Now go to the theme for your site, open up template.php, scroll down to the bottom, paste in theme_flickr_photoset(), and change the function declaration to the following (changing "YOURTHEME" to the name of your current theme):
function YOURTHEME_flickr_photoset($ps, $owner, $size, $attribs = NULL) {Now flush the theme registry (by either visiting the Themes page, or simply clearing all caches). The next time Flickr.module calls theme('flickr_photoset'), our new theme override will be called instead of the built in theme function. But so far it still looks exactly the same as the original, so next, lets customize it.
Step 3: Customize the new theme override.
After doing a quick examination of the parameters passed to the theme_flickr_photoset() function (using dpm($ps), dpm($owner), etc.), I added the following to the new theme function:
<?php
$output .= "<div class='flickr-photoset'>\n";
/*** NRD - BEGIN custom theme code.*/
// Build a link to this photoset on Flickr
$flickr_photoset_url = 'http://www.flickr.com/photos'.'/'.
$ps['owner'].'/'.
'sets'.'/'.
$ps['id'];
// Output a link to the slideshow feature on Flickr
$output .= '<div class="flickr-slideshow">'.
l("View complete photoset as a Slideshow (on Flickr)",
$flickr_photoset_url.'/show',
array('attributes' => array('title' => 'Flickr Slideshow'), 'absolute' => TRUE)
).
'</div>';
/*** NRD - END custom theme code.*/
?>This code first builds a link to the photoset on Flickr, and stores it in $flickr_photoset_url. It then uses this url to output a div containing nothing but a link to the Flickr slideshow.
Load a page containing a Flickr photoset, and you should see the new link! Add some CSS to style this link and you are done!
Review
So to review, you should copy the code from theme_flickr_output() and merge the slideshow code above into it via a new theme override function YOURTHEME_flickr_output(). As of flickr-6.x-1.1, the complete override should look something like this:
<?php
/**
* Override the flickr_photoset template.
*
* @param $ps
* An array of variables about the photoset.
* @param $owner
* The flickr owner id.
* @param $size
* Size to display photos (for theme_flickr_photo() call).
* @param $attrib
* Attribute array (for flickr_img() call).
*/
function YOURTHEME_flickr_photoset($ps, $owner, $size, $attribs = NULL) {
if (module_exists('flickr_sets')) {
$output .= "<div class='flickr-photoset'>\n";
/*** NRD - BEGIN custom theme code.*/
// Build a link to this photoset on Flickr
$flickr_photoset_url = 'http://www.flickr.com/photos'.'/'.
$ps['owner'].'/'.
'sets'.'/'.
$ps['id'];
// Output a link to the slideshow feature on Flickr
$output .= '<div class="flickr-slideshow">'.
l("View complete photoset as a Slideshow (on Flickr)",
$flickr_photoset_url.'/show',
array('attributes' => array('title' => 'Flickr Slideshow'), 'absolute' => TRUE)
).
'</div>';
/*** NRD - END custom theme code.*/
$photos = flickr_set_load($ps['id']);
foreach ((array) $photos['photoset']['photo'] as $photo) {
//insert owner into $photo because theme_flickr_photo needs it
$photo['owner'] = $owner;
$output .= theme('flickr_photo', $photo, $size);
}
$output .= '</div>';
return $output;
} else {
$img = flickr_img($ps, $size, $attribs);
$output = theme('pager', NULL, variable_get('flickr_photos_per_page', 20));
$photo_url = flickr_photoset_page_url($owner, $ps['id']);
$output .= "<div class='flickr-photoset'>\n";
$title = is_array($ps['title']) ? $ps['title']['_content'] : $ps['title'];
return l($img, $photo_url, array('attributes' => array('attributes' => array('title' => $title), 'absolute' => TRUE, 'html' => TRUE)));
}
}
?>
RSS Feed
Comments
#1 Update
Submitted by Eric Weik on Sun, 01/17/2010 - 22:19.
Update: I made a minor change to the code (removed the 'rel' attribute in the call to l()). It was leftover from when I was experimenting with some lightbox integration. It didn't break, but it didn't need to be there either.
#2 Related Tutorial
Submitted by Eric Weik on Tue, 02/02/2010 - 17:26.
For a complete tutorial on implementing a photo gallery with Drupal, Flickr, CCK, and Views, check out Chris Free's article Create a Drupal Photo Gallery Using Flickr, CCK & Views.
-Eric
Post new comment