Flickr badge code issues

September 15, 2008 at 7:48 pm

I've been using a Flickr badge on my site for quite some time now to display four thumbnails from my Flickr photostream. However, all of a sudden, without any warning it started to misbehave and I found the badge displaying five thumbnails with the first being an unclickable blank white image.

I was scratching my head for quite sometime about this problem. I hadn't changed the code on my page so something was definitely amiss. But surely Flickr wouldn't change the baseline code without at least informing people, right? Well, apparently, yes they would!

Upon running the script it appeared Flickr had suddenly embedded a nasty 1x1 spacer gif to the code (check it out - http://geo.yahoo.com/p?s=79260010). Because I use custom CSS styling for the width, height and styling of my thumbnails this spacer gif was being resized to the same dimensions as my thumbnail images - hence the fifth blank white image.

This definitely meant that the Flickr badge script had been updated by the Flickr developers; some new feature they are working on to be added at a later date more than likely. However, it is very surprising they have added it without any warning or thought to the implications it may have on their user's websites. What probably should have happened was that Flickr released an update to the badge that people could migrate to. Hindsight is a wonderful thing.

So, to the fix

However, I have managed to implement a patch of sorts. The fix is pretty simple and works with the latest browsers. I simply added the following code to my stylesheet to hide the offending 'geo' spacer image:

#flickr img[src*="http://geo.yahoo.com"] { display:none }

I'm not sure about how far back the legacy browsers support this method - IE 6 in particular - but the beauty is that I just needed to add one line of code that doesn't really infringe on my CSS. It is more than likely Flickr will make another change to fix this oversight in the near future - when this happens all I have to do is remove this line from my CSS file.

Filed under:

Code,

Data

Comments (7)