Flicker Module and Thickbox
As you may know I have the Flickr module enabled on this site. I use it to host images from my Flickr photostream instead of uploading them directly to this server. This module also provides functionality to display the Flickr pool that you can see at the far right. It's a handy module if you use Flickr, and it works fairly well. However, there is one qualm I have with the Flickr module, each image is displayed as a link that will take you off-site to the Flickr page. I found this very annoying and disruptive to the "flow" of the site, but that's what theme functions are for and part of the charm of Drupal.
This is really a pretty simple themeing problem, but I think it may be helpful to others, so here is how to integrate the Flickr module with Jquery's Thickbox plugin. I should mention that I am running Drupal 6.x. I decided to use the Thickbox functionality mainly because the user will never leave the page when viewing pictures. Thus no reload or "break" involved in their viewing of the content of this site. To do this you will first need to download the necessary files for the Thickbox plugin:
- thickbox.js or thickbox-compressed.js
- thickbox.css
- macFFBgHack.png an image for a CSS hack for FF for Mac
The next step is to tell Drupal that you are adding a new stylesheet and javascript. There are several ways to do this, but as I want this functionality to be loaded on every page, I decided to do this in my theme's .info file. Only two lines are need to be added here:
scripts[] = thickbox.js
stylesheets[all][] = thickbox.cssOkay, simple so far. This step is probably the most complex, but not very. We will need to override the theme function in the flickr module that outputs the linked images. This function is
<?php
function theme_flickr_photo($p, $size = NULL, $format = NULL, $attribs = NULL){
$img = flickr_img($p, $size, $attribs);
$photo_url = flickr_photo_page_url($p['owner'], $p['id']);
$title = is_array($p['title']) ? $p['title']['_content'] : $p['title'];
return l($img, $photo_url, array('attributes' => array('title' => $title, 'class' => 'thickbox'), 'absolute' => TRUE, 'html' => TRUE));
}
?><?php
function phptemplate_flickr_photo($p, $size = NULL, $format = NULL, $attribs = NULL) {
$img = flickr_img($p, $size, $attribs);
//replaces $photo_url and links directly to the flickr farm
$thickbox_img = flickr_photo_img($p);
$title = is_array($p['title']) ? $p['title']['_content'] : $p['title'];
//links href is changed to the new $thickbox_img
// and the 'thickbox' class is added
return l($img, $thickbox_img, array('attributes' => array('title' => $title, 'class' => 'thickbox'), 'absolute' => TRUE, 'html' => TRUE));
}
?>
changed?
Maybe the flickr module has changed for Drupal 6? I don't think the function is themeable. I couldn't get it to work in any case.
For the better I believe.
It's working fine for me on D6. In fact the themeing functions have a notable improvement from the D5 release of this module. Before anything, you might make sure that the Flickr block bug in D6 is not affecting you. Another option, if you can't wrestle thickbox into working, is to use lightbox. I have heard that they have built in flickr.module compatibility that works quite nicely.
Version?
May I ask what version you are using? I have the alpha from April 2nd, and I don't see the function theme_flickr_photo.
6.x-1.0-Alpha1
Also using the alpha from April 2nd. The theme_flickr_photo function is on line 202 of flickr.module.
thanks
Great, thanks much I had been looking in flickr.info.
Do you think there would be a way to link to the flickr page from thickbox? At the bottom there is "close or esc key" and I think it might be nice to be able to visit the flickr page too if desired.
Appreciate your help very much.
This is great! Thanks for
This is great! Thanks for sharing. It was simple to get it working on my Drupal 5 site.
Cheers,
David
Post new comment