Fuddland

Cutting to the chase: I’ve knocked up a PHP script which takes any Flickr photostream RSS or Atom feed and makes a Flickr “badge” out of it, with some extra bits thrown in to make it all worthwhile.

Download the script. Updated version available. Edit it and fill in the required details. Upload it to your server. Cross fingers. [You’ll also need MagpieRSS. Grab it, extract it, stick it somewhere on your server. No need to change any of its settings. Just remember where you put it so you can tell the Flickr script. Oh, and create a writable directory for the cached feed.]

---

Here’s a bit more detail. In order to display a Flickr photostream on a remote webpage, most people use the so-called Flickr badge code, which is Javascript-based, which obviously doesn’t work in browsers which have Javascript unavailable or disabled; it has a few other drawbacks too:

• It’s restricted to the three smallest image-sizes available [square, thumbnail, small].

• There’s no local caching of the ‘stream, so Flickr’s servers are queried every time a request is made, slowing down the rendering of the page.

• It’s not that obvious how to create a badge for someone else’s ‘stream, as the badge-generator only creates one for the ‘stream of the person signed in.

• You can’t easily manipulate the final code to make custom title text for the anchor [<a>] tag of each image, and the <img /> tags have no width or height attributes specified.

Starting with my ever-popular Audioscrobbler script [no kidding, the vast majority of non-regular visitors come to that page — of course, I’ve only actually seen a couple of people implement it, but that’s not the point!], I’ve managed to use the very-useful MagpieRSS to parse any Flickr RSS feed and output the images just like a Flickr badge. It looks essentially the same but has a couple of advantages over the standard badge:

• Local caching of a feed — once MagpieRSS fetches the Flickr feed, it can save a copy on the local server and only checks for new entries after a user-specified time period; if you only post to Flickr once or twice a day, this could be set relatively high, speeding up the rendering of your page and easing Flickr’s server load a little [okay, a very little].

• You can use any of the available image sizes, from squares right up to the original images; for square- or small-sized images, the image dimensions are known so are added to the <img /> tags, so the browser knows what size the images are before they’re downloaded [it stops the rest of the page jumping around as the images fill out].

  At the moment I’m not sure how to get/compute the dimensions of the alternate image sizes without telling PHP to query each image on the Flickr server individually [not exactly a speedy or efficient process] — it’d be handy if the small-sized image was always, for example, half the width of the medium-sized image, etc., but that doesn’t appear to be the case.

• The anchor tag’s title attribute contains the date and time that the image was uploaded to Flickr. [I like things to appear when I hover over stuff. It’s always so disappointing when nothing comes up.]

  

• The image titles are put into their alt attributes. There’s no perfect way to ensure correct alt text is there, since no Flickr fields are specifically designed [or used, in general] in the same way as alt text; people use the description field more like a title attribute. But having a generic alt="Flickr image" or even alt="" seemed rather unhelpful, so I opted for the image title.

• But the best thing [I think] is that you can create a badge using any Flickr RSS photostream feed [I think], be it your own photostream, someone else’s, a feed of photos with the same tag or from the same group pool. Wherever there’s a URL for a photostream, this script should be able to extract the images into a badge. So you could have a nice-looking badge made up of images tagged “sunset”.

Instead of just a series of <img /> tags, an ordered list can be generated by uncommenting four lines in the main body of the script [hopefully it’s fairly obvious which four lines: the ones with <ol>, <li>, </li> and </ol> in them].

Bug-fixes, improvements or suggestions are welcome.

Update 1: Now with extra-tasty added support for Flickr Atom feeds.

Update 2: A few more bells and whistles added. Images can now be cached in a local directory, but are deleted as they drop out of the photostream to stop unnecessary build-up of unused files. Furthermore, image dimensions are now grabbed for all sizes, and added to the <img /> tag.

And just for bsag, if either cache directory is unwritable [and caching is enabled], the script will not attempt to download the feed at all.

Update 3: Improved the efficiency, by about three nanoninniseconds, of the loop which deletes expired cached images. This should be the last update, as I can’t think of anything else I need to tweak.

Update 4: The number of image servers recently went into double figures, which broke the RegEx in the script. Replaced it with a new expression [which will be fine until they add the hundredth server].

For those interested, I replaced /photos[0-9].flickr.com/, which matched only photos1.flickr.com, photos2.flickr.com, …, photos9.flickr.com, with /photos\d\d?.flickr.com/, which matches photos1.flickr.com, …, photos99.flickr.com.

Update 5: Image dimensions are now computed on-the-fly; it didn’t add a significant overhead to the script after all.

Update 6: Updated version available — adds the ability to apply special effects to the images.

Update 7: Bah. Flickr people changed the URLs of the thumbnails without telling me! Script updated to reflect new locations of thumbnail images.

#1

bsag | 2005 / 04 / 08 – 18:14

Nice! I’d use it myself but I’ve banned myself from using MagpieRSS. It’s my fault rather than the fault of MagpieRSS, but I’ve been temporarily banned twice (eek!) from grabbing del.icio.us fields because in moving files between servers, I failed to notice that the cache had become unwritable, so that MagpieRSS was polling the feed rather than the cache every few seconds. I don’t trust myself with it now ;-)

#2

David | 2005 / 04 / 08 – 19:09

Re #1: Word on the street [and by “street”, I mean “the Flickr forums”] is that the official badges will soon offer more options, such as badges for groups or specific tags, so you should be able to use those if you so desire. They’ll still be Javascript-based of course, not accessibility-friendly PHP like my script is. :)

You could have debugging turned on in MagpieRSS [by uncommenting a line in the script], which I think would output an ugly error message in place of the badge if the cache directory was unwritable. Perhaps then you’d have enough notice to fix it before you got banned. ;)

#3

dave | 2005 / 04 / 09 – 19:01

Nice, I wrote a similar script a month or two ago. Yours looks a bit better. I’ve been focusing more on my WordPress plugin instead.

#4

David | 2005 / 04 / 09 – 20:50

Re #3: Thanks, I’ve seen a couple of other versions out there but yours is the only one I’ve seen which caches the images locally as well as the feed, something that I could add to mine. Although I guess that using at least some of Flickr’s bandwidth is okay, especially since I’ve bought a Pro account. ;)

#5

bsag | 2005 / 04 / 10 – 11:18

Re #2: I hadn’t heard the word on the forums, but that sounds like a nice idea, though as you say, it’s a bit less flexible using Javascript rather than PHP. I hadn’t thought about debugging, but I probably would have still been banned if I hadn’t seen the errors for a few minutes :-).

#6

David | 2005 / 04 / 10 – 11:34

Re #5: You could always hack the script to make it foolproof: it could first check if the directory is writable [using the cryptically-named is_writable()], and if it’s not, don’t fetch the feed. Actually, I might even add this in myself, once I’ve sorted out this image caching [which is working fine, but I want it to delete the older images from the server once they’ve dropped out of the ‘stream, and that’s proving tricky].

#7

clair | 2005 / 04 / 10 – 18:48

Woot! It works!

#8

David | 2005 / 04 / 10 – 18:54

Re #7: Of course it works! :P [Cool!]

#9

clair | 2005 / 04 / 10 – 21:15

I wasn’t suprised that your bit worked, I’m just amazed that I managed to get it working on my site. All this new fangled php stuff is beyond me, I learnt my web skills back when it was just good old fashioned html.

#10

Sparticus | 2005 / 04 / 25 – 17:58

Awesome stuff! I hacked it a bit so that each image had a unique id tagged along to it but otherwise it just worked. Thanks!

Commenting on this post is closed. Thanks to all those who left comments. If you'd still like to say something about this entry, feel free to email me.