ThickBox and Flickr Module
As some of you may have noticed I have added a little JavaScript to change the behavior of viewing images on the site. Many of the images posted here are living on my flickr account and the initial behavior when they were clicked was to jump to flickr. I found this behavior annoying, so took measures to change it. I would like to take some time to describe exactly how this was done by augmenting the flickr module's behavior. If you don't care to note the technical details, but want to know just what changed, then I encourage you to click on some of the images on the page. Not all are being hosted on flickr, so not all will have this behavior. And, of course, please post comments on any bugs you encounter.
As for the modifications, it is almost not worth writing about. I do so just so that it may help someone out down the line. In esence all we are doing is implementing the ThickBox JavaScript. Instructions on how to do this are detailed there. The JavaScript is going to be looking for the link anchor tag with class = "thickbox" and the href in my case, pointing to an image. So something like:
<a class="thickbox" href="path to my image"></a>
Now the images I am using are coming from flickr using a block and a filter provided by the flickr module. What we are looking for now is the theme_ function to override. I assumed there would be only one function, namely this one from flickr.module:
<?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('title' => $title), NULL, NULL, TRUE, TRUE);
}
?>This seems like it would be our winner, and really it should be, but I found a funny call in flickr_filter.module and flickr_block.module:
<?php
//From flickr_filter.module :
function theme_flickr_filter_photo($p, $size, $attribs) {
return theme_flickr_photo($p, $size, NULL, $attribs);
}
//From flickr_block.module :
function theme_flickr_block_photo($p, $size = NULL) {
return theme_flickr_photo($p, $size);
}
?>Seems trivial right. Well because theme_flickr_photo is called directly here, it means that we can't override using, mytheme_flickr_photo. Instead we have to override the two theme functions posted above, making things a bit redundant in our theme's template.php file:
<?php
function mytheme_flickr_block_photo($p, $size = NULL) {
//$sizes is an array of sizes for the photo $p
// and the link to that size on farm.static.flickr.com
$sizes = flickr_photo_get_sizes($p['id']);
$img = flickr_img($p, $size, $attribs);
//change the $photo_url to the link to the larger size on farm.static.flickr.com
$photo_url = $sizes[3]['source'];
$title = is_array($p['title']) ? $p['title']['_content'] : $p['title'];
//add class="thickbox" to the link before returning.
return l($img, $photo_url, array('title' => $title, 'class'=>'thickbox'), NULL, NULL, TRUE, TRUE);
}
function mytheme_flickr_filter_photo($p, $size, $attribs) {
//same as above
$sizes = flickr_photo_get_sizes($p['id']);
$img = flickr_img($p, $size, $attribs);
$photo_url = $sizes[3]['source'];
$title = is_array($p['title']) ? $p['title']['_content'] : $p['title'];
return l($img, $photo_url, array('title' => $title, 'class'=>'thickbox'), NULL, NULL, TRUE, TRUE);
}
?>The code in these functions are essentially the same as that of theme_flickr_photo from above, with a couple of small changes noted in the code. flickr_photo_get_sizes is a function from flickr module and will return an array of all possible sizes of the image as well as their url on farm.static.flickr.com so we can link directly to the image instead of a flickr page.
And with that ThickBox should be active on your Drupal site with the images from the flickr module.
I keep getting an error when
I keep getting an error when trying your code. Did I install the the patch right? I put it under the flickr module folder. Also the code you posted above:
<?phpfunction theme_flickr_photo($p, $size = NULL, $format = NULL, $attribs = NULL) {
$sizes = flickr_photo_get_sizes($p['id']);
$img = flickr_img($p, $size, $attribs);
$photo_url = $sizes[3]['source'];
$title = is_array($p['title']) ? $p['title']['_content'] : $p['title'];
return l($img, $photo_url, array('title' => $title, 'class'=>'thickbox'), NULL, NULL, TRUE, TRUE);
}
?>
It is suppose to be in the template.php file in the current theme I am using correct?
I found your idea very interesting. It's great, I can't believe that this is not already build into the flickr module already.
Patches
Correct, the above code goes in the template.php file of the theme you are using.
As for the patch it was rolled in the directory that the flickr folder is in. So in my case sites/all/modules. To apply the patch check out the Drupal Handbook page on this issue.
Update
In regard to the issue with the theme function mentioned in the above post; I have submitted a patch to the flickr module's issue queue on d.o and it should be committed in the near future. Thus with the patch you no longer need the two functions in your template.php file as noted above, but only one:
<?phpfunction theme_flickr_photo($p, $size = NULL, $format = NULL, $attribs = NULL) {
$sizes = flickr_photo_get_sizes($p['id']);
$img = flickr_img($p, $size, $attribs);
$photo_url = $sizes[3]['source'];
$title = is_array($p['title']) ? $p['title']['_content'] : $p['title'];
return l($img, $photo_url, array('title' => $title, 'class'=>'thickbox'), NULL, NULL, TRUE, TRUE);
}
?>
Post new comment