If one were to go to my homepage they would see my flickr feed on the right hand side, maybe below if they’re surfing on a tiny lil screen or have insanely high resolution.

When I relaunched my portfolio about three weeks ago, the flickr feed looked just as it does now. But behind the scenes a few things have changed. Namely the way I am pulling the feed in, and more recently my edition of litebox.

What follows is how I was able to achieve this and why I decided to do it.

1. Using Magpie RSS instead of parsing my own RSS.

As much as I liked the script I had for parsing the flickr RSS feed (which I am running through a feedburner account, for url validation), it was slow. When I added the last.fm feed, it made my pages load even slower. I had seen a similar project from a guy I work with using Magpie RSS. Magpie has a caching feature, so it looks to the cache for data, versus the RSS feed. I decided to hack through it and see if I could get it working.

Switching my del.icio.us feed over was no problem. However, flickr’s RSS proved to be a bit trickier. My co-worker is really the one who helped me get it working as I get a bit confused when it comes to php. I decided to post his solution online cause it’s brilliant.

The following is the code to pull in a flickr feed through Magpie RSS, and publish it wherever you like.


<?

$rss = fetch_rss(’link to your flickr feed’);

$items = array_slice($rss->items, 0, “9″); // pull 9 items

foreach ($items as $item) {

$title = $item['title'];
if(preg_match(’‘, $item['description'],$imgUrlMatches)) {
$imgurl = $imgUrlMatches[1];
$imgurl1 = str_replace(”m.jpg”, “s.jpg”, $imgurl);
$imgurl2 = str_replace(”m.jpg”, “o.jpg”, $imgurl);
$href = $imgurl2;
echo “<li><a href=\”$href\” rel=\”lightbox\”><img src=\”".$imgurl1.”\” alt=\”$title\” /></a></li>”;
}
?>

This solution is a bit of hack that is necessary due to flickr’s output and the particular attributes that don’t play well with Magpie RSS.

Here’s the trick:

The script first grabs the url in description, such as, “http://static.flickr.com/22/183469245_0eb6ba1a42_m.jpg.”

It then scans for m.jpg, and swaps it out with the other flickr photos that work for thumbs, or for the full size picture.

Using what is echoed out in php for this particular circumstance won’t work as this script also utilizes litebox, which brings me to phase two.

2. Incorporating flickr and litebox.

Since I first launched this portfolio, I was not satisfied with the fact every time a visitor clicks on a photo, they were whisked away to flickr.com. Not because I don’t like flickr, because I have come to love flickr, but because it kind of killed the whole user experience for my website. It’s the shock of jumping into the cold flickr pool, a bit overwhelming.

And then I stumbled upon litebox. And then came the idea, why not integrate flickr with litebox and keep the whole eleven3 user experience fluid. This part did not take as long due to the fact it’s a matter of putting the right files in the right place on your server, and linking to the main image (where the m.jpg replace from the first part of the post comes in).

You can see it all in action on the homepage by clicking the logo at the top of the page.

Get the scripts for litebox and the scripts for Magpie RSS. You will be set.

Good luck.

Popularity: 11% [?]