On the Clagnut home page, in the middle column, I display a random photo. It used to be this was pulled from a photo archive on my own server, but a while ago I switched to choosing a random photo from my Flickr photostream through use of a customised Flickr Badge. I wanted to display the title below the photo, but Flickr badges don’t show photo titles, so I turned to a simple bit of DOM scripting for a solution.
From this you can see the script simply writes a div containing a linked image; the only place the image title exists is in the alt attribute. And so DOM scripting comes to the rescue. The code spat out by the Flickr script includes a div with a handy id of
flickr_badge_image1. So starting from there we can drill down through the DOM and get hold of that pesky alt text:
And then I just write the title to the page:
The above code is not particularly robust as it clearly depends on Flickr not changing the id or the code it spits out, that aside it works reliably (update: see Matthew Pennell’s comment for a better way of getting the text). At this juncture I should point out that using the Flickr API to get this information is a more robust method, however that involves learning the API and writing code to parse the back-and-forth. Even though classes such as phpFlickr can make life easier, it’s all a bit much for a random photo on a personal site.
So there we are, a simple bit of DOM scripting to expose some otherwise unavailable information. Next up, I will discuss a solution for making the photo scale within my liquid layout.