Quality Peoples

This tutorial covers how to add Flickr slideshows to your blog entries, it’s WordPress-centric, since that’s the blog system I use, but you can definitely apply this to any of the other blogging systems.

Usually, I post individual photos to blog entries, like this one. With individual photos, when you click the image link, it takes you to the photo’s page on Flickr. Sometimes, I post photo sets (groups of images), this is an example of a photo set . Unlike individual images, I wanted the ability to be able to view the photo set directly from within my site, as opposed to linking back to Flickr.

I spent about a week implementing various forms of what’s generally called the “Lightbox”, a modal window that displays content over the current page, similar to popup windows (but without the navigation hassles associated with them). Here is a pretty extensive list of the various different kinds of Lightboxes. I tried to implement just about every one on this list and their corresponding WordPress plugins (most of these have wp plugins that were written by 3rd party plugin writers). Some didn’t fit my aesthetic standards, some didn’t have the functionality I wanted, some contain javascript libraries that I couldn’t get to work correctly, were too large in k size or conflicted with other js libraries. It would take me far too long to give a full and proper rundown of each implementation, and it would be boring. So, for this tutorial, I’m explaining how mine works (and mine alone).

I stumbled upon a Lightbox implementation called Lightwindow. It’s author is wicked smaht, it supports every kind of media (images, flash, webpages, external webpages, etc..), it uses scriptaculous and protoype (2 standard js script libraries), it’s skinnable, it works in most browsers and platforms, yada yada… For my uses, I needed to be able to load external web pages from Flickr and make the whole thing look good without being intrusive. Lightwindow did the trick, perfectly.

So now for the tutorial:

1. Go to the Lightwindow site and download the files and install them, per the author’s instructions. He has tons of good info on his site and cleanly beaks down how to implement whatever media you’d like to. If you run WP, here’s a link to a Lightwindow plugin for WP.

2. Then go to the Flickr photo set page you’d like to feature. I take a screen grab of the photo set thumbnails, crop it in photoshop and save as jpeg. it usually looks something like this.

3. I start a new blog entry and upload the screenshot to my server, using WP’s upload feature, I then add the screenshot to the blog entry (”show: full size”, “link to: none”). The code in my entry now looks something like this:
<img src='http://qualitypeoples.com/wp-content/uploads/2007/07/croton.jpg' alt='croton thumbnail' />

3. Now, you should be able to call the Flickr slideshow through Lightwindow from within a blog post, here’s the code that I use:
<a href="http://flickr.com/photos/edfladung/sets/72157601074443987/show/?no_back=1" title="NYC July 07" caption="NYC July 07" class="lWOn"><img src='http://qualitypeoples.com/wp-content/uploads/2007/07/croton.jpg' alt='croton thumbnail' /></a>
Since WP has no built-in pasteboard thingy that you can keep snippets on and then one-click insert them into blog entries, I just go back to the last entry I made with the Lightwindow call, copy and paste it into the new entry. don’t forget to add the trailing </a>. low-tech.

4. Change the code to match your own set: The 72157601074443987 number is the Flickr photo set number and you will need to change this to your corresponding photo set. Flickr slideshows have a back button and I’m cool with that, but if someone clicks the back button, they go to the flickr site, from within the Lightwindow. This isn’t butters, so I add the ?no_back=1 part (I got this from Flickr’s popup slideshow call). Change both the title="NYC July 07" and caption="NYC July 07" code to describe your photo set, these will appear in Lightwindow. And lastly, the class="lWOn" is what used to call the Lightwindow javascript.

5. If you’re feeling perky, you can give a some kind of summary of what kind of content the viewers can expect from the slideshow. I also provide 2 text links at the bottom of my page. One links to the Lightwindow slideshow and the other links to the photoset’s page on Flickr. It usually looks like this: slideshow | photoset. and the code looks this:
<a href="http://flickr.com/photos/edfladung/sets/72157601073174265/show/?no_back=1" title="NYC July 07" caption="NYC July 07" class="lWOn">slideshow</a> | <a href="http://flickr.com/photos/edfladung/sets/ 72157601073174265/">photoset</a>

6. Lastly, you can click “save and continue editing” and choose to preview your blog entry to make sure you got everything right, or you can just wing it and publish it.

And your done.

A word of note: Flickr has a “no leeching policy”. Their guidelines state that photos must link back to their respective photo pages. And I fully agree with this policy. With photosets I choose to display them with Lightwindow, rather then linking directly to the set, so the viewer doesn’t have to leave my site. This is why I have the text links at the bottom of the entry, so a viewer can choose to go to the Flickr photo set page to view the set. I further rationalize this because 99% of my outgoing links are to Flickr, so I’m driving them most of my traffic. I really hope they are cool with this.

technorati tags: flickr, slideshows, lightbox, lightwindow, wordpress, how-to, plugin