How To: Flickr Slideshow Badge

I love flickr and I’ve always yearned for a unique and interesting way of displaying my recent flickr photos on my site. Yeah, I could always just grab the standard flickr badge and style it up nicely with some CSS kung fu but in the end it will still be a bunch of thumbnails. Then there’s flickr’s flash badge which is more interesting. However, you can’t customize that badge much. The only thing I’m left with is a home-bakedâ„¢ solution.

Meet Monoslideshow

Several months ago I ran across a powerful flash and fully customizable slideshow package called Monoslideshow. It can be adjusted to do really just about anything. Unfortunately, for that expansive feature set, it’s not free. At the moment, it will run you one-time cost of $20 but in my mind that was a triviality.

This isn’t the slideshow.. just an image of it running.

Details

Monoslideshow is configured by an XML file where you usually tell it the location of the images to be displayed. Instead of using images on your server, you can give the slideshow your flickr RSS feed. The idea behind this flickr slideshow badge is that it a) won’t slow down page loading since the flash loads first, then it dynamically grabs photos from your flickr feed and b) will be something that can be placed in a blog sidebar and when hovered over, display the title and details of each particular image.

Here’s an example image of how the slideshow badge is setup to work on my site.

Left to Right: the image, hovering over the image displays details, image transition.

Making It

After you’ve purchased monoslideshow, extract the contents to a folder on your server – for this example, we’ll name that folder slideshow. The main files you actually need are the XML file, the flash SWF file, and swfobject.js. The last JS file checks to see whether the user has Flash installed and is necessary.

However, before we do anything else let’s reduce the size of swfobject.js; it’s a bit larger than it needs to be. Just open it up in any code editor, copy everything and run it through the JavaScript Compressor. Take what the JS compressor gives you and replace the contents of swfobject.js with that, then save.

Rename the XML and SWF file to slideshow.xml and slideshow.swf, respectively. Open up slideshow.xml in your favorite code editor and replace its contents with the lines below.

<?xml version="1.0" encoding="utf-8"?>
<slideshow><album size="medium" imageTransition="bubblesBlend">
<flickr><![CDATA[YOUR_FLICKR_FEED]]></flickr>
</album></slideshow>

Replace YOUR_FLICKR_FEED with your actual flickr feed which can be found on your flickr.com/photos/username page (there’s a feed link near the footer on the left).

Another thing of importance is the album size attribute. This determines the quality of the picture grabbed from the flickr RSS feed. If you have a very small slideshow badge (to be determined later), you can get away with setting the album size to “tiny”, “thumbnail” or “small”. The smaller the images grabbed from the feed, the faster the images can be displayed. However, if you want crisp looking images and a larger slideshow badge, stick with the “medium” attribute which is good for up to 500px wide, after that it will just get scaled up. If you want to go even larger than that for some reason, there are also the “large” and “original” attributes.

The imageTransition attribute determines the transitions between images as you can imagine. You can choose from the following transitions: “blend”, “leftToRight”, “rightToLeft”, “topToBottom”, “bottomToTop”, “leftToRightBlend”, “rightToLeftBlend”, “topToBottomBlend”, “bottomToTopBlend”, “leftToRightFadeOutBackwards”, “rightToLeftFadeOutBackwards”, “topToBottomFadeOutBackwards”, “bottomToTopFadeOutBackwards”, “pinhole”, “pinholeBlend”, “fadeInOut”, “bubbles”, “bubblesBlend”, “photoFlash”, and “noTransition”.

There is also a linkToImage=”true” attribute setting that when you click on an image, it takes you to the appropriate flickr page but that does not work at the moment. If you’re reading this months later, try using it and see what happens. Save slideshow.xml now.

Create a new file called flickr.php. This file is where the actual code that creates the slideshow will reside and this file will be included on the pages where the slideshow will be displayed. Copy and paste the following code into this flickr.php file.

<script type="text/javascript" src="/path/to/slideshow/swfobject.js"></script>
<div id="slideshow">
<p><small>Please install Flash and turn on JavaScript.</small></p>
</div>
<script type="text/javascript">
// <![CDATA[
var so = new SWFObject("/path/to/slideshow/slideshow.swf", "slideshow", "180", "100", "7", "#ffffff");
so.addVariable("dataFile", "/path/to/slideshow/slideshow.xml");
so.addVariable("kenBurnsMode", "random");
so.addVariable("showLogo", "false");
so.addVariable("showControls","false");
so.addVariable("showImageInfo","onRollOver");
so.write("slideshow");
// ]]>
</script>

Before you save it, change the path to swfobject.js, slideshow.swf and slideshow.xml to accurately reflect their location on your server. To be safe, I recommend using absolute paths such as http://yoursite.com/slideshow/slideshow.swf, or wherever your slideshow folder is stored.

Also, you can adjust the size of the slideshow badge by editing the first JavaScript line above that reads:
var so = new SWFObject("/path/to/slideshow/slideshow.swf", "slideshow", "180", "100", "7", "#ffffff");
Where you see “180″ and “100″, those are the width and height, respectively, in pixels of the slideshow. Change that to the size you want your badge to be.

The other variables in the JavaScript determine actions of the badge. You can find a detailed listing of what each of these does and many more in the monoslideshow manual (warning: PDF link). Now you can save flickr.php.

In the event that a visitor of your site doesn’t have javascript or flash enabled, the polite “please install flash and turn on javascript” warning will be displayed.

Placing it on Your Website

Now that the slideshow is built and configured, all you have to do is find an appropriate place to put it on your website and paste this line of code:

<?php include('/path/to/this/slideshow/flickr.php'); ?>

Once again, edit the path to reflect the location of the flickr.php file on your server; it if doesn’t work out, using the absolute path is always a good failsafe. If you’re so inclined, wrap the include in a div, slap on a title and style away. Here’s how I presented it in my sidebar (with “sb-module” being some styling predefined in my CSS):

<div class="sb-module">
<h2><span style="color:#0063dc;">flick</span><span style="color:#ff0084;">r</span></h2><br/>
<?php include('/path/to/this/slideshow/flickr.php'); ?>
</div>

Save it and check out your new flash flickr slideshow badge! If you want to show others how you made it feel free to add the follow line after your PHP include:

<small><a href="http://paulstamatiou.com/2007/03/20/how-to-flickr-slideshow-badge">Make your own flickr slideshow badge</a>.</small>

If you use WordPress and only want the badge to appear on certain pages, take a look at conditional tags. For example, if you only wanted the flickr slideshow badge to appear on your homepage, you would wrap the include in a conditional tag.

<?php
if(is_home()){
include('/path/to/this/slideshow/flickr.php');
} ?>

Customization

As I briefly mentioned above, the monoslideshow manual (warning: PDF link) has several pages dedicated to the various configuration options for monoslideshow. You can adjust things like the font, image scaling, image transitions and many more so if you want an even more unique badge, browse through the manual. Hope you like your new flickr slideshow badge!

Tagged as: Flickr, How To's, Internet, Yahoo!

PaulStamatiou.com runs on the Thesis Theme for WordPress

Thesis is the search engine optimized WordPress theme of choice for serious online publishers. If you’re a blogger who doesn’t understand a lot of PHP, Thesis will give a ton of functionality without having to alter any code. For the advanced, Thesis has incredible customization possibilities via Thesis hooks.

With so many design options, you can use the template over and over and never have it look like the same site. The theme is robust and flexible enough not only to accommodate a site like PaulStamatiou.com, but also to enable the site to run far more efficiently than it ever has before.

• Take the Thesis Video Tour