Published in Brighton, UK

Clagnut

Displaying titles for Flickr Badges

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.

31 January 2006

§ Photography · DOM | JavaScript · Flickr

5 comments

Related photos

  • Tsunami photography exhibition

Next

Previous

Related posts

Keywords

Machine tags

Comments

  1. 1

    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.

    Matthew Pennell
    Matthew Pennell’s Gravatar
    31 Jan 2006
    15:40 GMT
  2. 2

    I haven’t tried this, but can’t you do:

    badgeTitle = document.getElementById(flickr_badge_image1).getElementsByTagName(img)[0].getAttribute(title);

    Scott Johnson
    Scott Johnson’s Gravatar
    31 Jan 2006
    20:50 GMT
  3. 3

    It looks like the site ate my quotes in the above example, but you get the idea. :)

    Scott Johnson
    Scott Johnson’s Gravatar
    31 Jan 2006
    21:27 GMT
  4. 4

    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.

    Rich
    Rich’s Gravatar
    1 Feb 2006
    08:48 GMT
  5. 5

    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

    Richard Stephenson
    Richard Stephenson’s Gravatar
    9 Feb 2006
    10:55 GMT

Add your comment

Comments are now closed on this post. If you have more to say please contact me directly.

Outside interest

Top Referrers