This website is created with Jekyll. I’ve done a lot to customize it from the original Jekyll Bootstrap, starting with Bootswatch, and more recently with plugins. On my photography pages I have photo albums. Previously, I used the Picasa Webalbum Integrator which did a great job. I wanted to be able to do something cleaner, though, now that I’m using Jekyll.

I was already using the fancyimage tag by Patrick Paul for automated thumbnail generation, which used fancybox to display images when clicked. It had support for galleries, but only for a pre-existing list of links to images. See his post for full usage instructions. Note that thumbnails, once generated, are not automatically deleted if they are not referenced, so it’s good practice to clear the folder every once in a while, and they’ll just regenerate next time you run Jekyll. While this worked out-of-the-box to generate the thumbnails for me, he doesn’t describe how to load up Fancybox. Luckily, great documentation already exists for that. If, like me, you’re using a version of jQuery on your site other than that used by Fancybox, you’ll get to learn about jQuery’s noConflict magic. This allows you to use multiple versions of jQuery if necessary.

1 <script language="Javascript" type="text/javascript">
2   var fancy = jQuery.noConflict();
3   fancy(document).ready(function() {
4       jQuery(".fancybox").fancybox();
5   });
6 </script>

To match PWI’s automatic album inclusion, I found Michael Scherer’s picasa album tag Jekyll plugin. If you have problems running it, make sure you have Nokoguri installed. In his original script, there’s also a typo that caused the closing gallery tag to not be included. See my pull request for the fix if it hasn’t been merged already.

My setup in _config.yml:

    thumbnail_size: 0  
    gallery_tag: div  
    gallery_class: gallery  
    a_rel: fancybox  
    a_class: fancybox  

To use it, just grab the RSS url of any public Picasa album.


12 January 2013