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.
Once you strip away the extraneous HTML, the Flickr Badge itself is external JavaScript call which does this:
b_txt = '
<div class="flickr_badge_image" id="flickr_badge_image1">
<a href="http://www.flickr.com/photos/clagnut/4504183/">
<img src="http://static.flickr.com/4/4504183_619bbaaf2d_m.jpg"
alt="A photo on Flickr" title="Coventry Old Cathedral"
height="180" width="240"></a></div>'
document.write(b_txt)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:
badgeDiv = document.getElementById('flickr_badge_image1');
badgeA = badgeDiv.firstChild;
badgeIMG = badgeA.firstChild;
badgeTITLE = badgeIMG.title;And then I just write the title to the page:
document.write(badgeTITLE);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.
Photography · DOM | JavaScript · Flickr
Matthew Pennell wrote:
Don’t let Jeremy see all that document.write stuff!
A slightly more robust solution would be to grab a reference to the image itself instead of using firstChild.firstChild:
badgeDiv = document.getElementById(‘flickr_badge_image1’);
theImage = badgeDiv.getElementsByTagName(‘img’)[0];
badgeTITLE = theImage.getAttribute(‘title’);
At least then if they change their markup, you’ll still be grabbing the first image in the div, which will presumably always be your random photo.
Scott Johnson wrote:
I haven’t tried this, but can’t you do:
Scott Johnson wrote:
It looks like the site ate my quotes in the above example, but you get the idea. :)
Rich wrote:
Matthew – you’re right, getting the first image in the way you suggest should cope better with minor changes in code. I’m not so sure how evil the document.write is in this case, although I suppose it wouldn’t be too hard to create a proper text node.
Scott – yes you could get the text by joining all the objects together like that. I separate them for clarity. But in this case, I refer you to Matthew’s suggestion.
Richard Stephenson wrote:
Great idea Richard, but I thought “Why just leave it at one image?”.
Why not pull all of the images out of the badge and turn it into a slideshow?
Add a bit of slayeroffice crossfade
http://slayeroffice.com/code/imageCrossFade/
and you get a Random Flickr Badge Slideshow Crossfade Thingy like this; http://www.donkeymagic.co.uk/slideshow/flickr.htm