Fix for buggy Flickr badge JS

Yep, you didn’t read it wrongly – the javascript which Flick gave you to insert your personalised Flickr badge is indeed buggy! It just happened over the afternoon – the Flickr badge JS has some new modifications which will potentially affect the layout of your blog.

The crux of the problem

If you have the script, look into the source of the script. The follow is the badge code for my script, after following Veerle’s simple steps of converting the code to make it XHTML valid:

<script type="text/javascript" src="http://www.flickr.com/badge_code_v2.gne?count=4&amp;display=random&amp;size=s&amp;layout=x&amp;source=user&amp;user=44742295%40N00">

Highlight everything between the inverted commas after src=, then copy + paste it to your address bar. You should arrive at a page which displays something like this:

var b_txt = '<img src="http://geo.yahoo.com/p?s=792600102&t=ad64ee1b82b556e2adac6caee93c4ae5&fl_ev=0〈=en&intl=sg" width="0" height="0" alt="" />';

// write the badge

document.write(b_txt)
//document.write(b_txt.split('< ').join('<'))

You will notice that Flickr Badge JS has sneakily appended the HTML code of including an empty gif at the start of your Flickr badge. And to my horror, the addition of that innocent-looking transparent gif screwed up the design of the main page of my blog.

Distorted layout

Image displacement is observed.

As you can see from the image to the right, the usual styling I’ve applied to my Flickr images has caused the transparent gif to affect the position of the rest of the images such that the last one is pushed off the container. I’ve set a definite height and overflow: hidden to the container such that content overflows will not affect the rest of the content.

The little blue square at the top right hand corner is the cause of the problem – since I’ve set the width of the container such that the images fit snugly into it, any additional space will cause the images to be pushed to the subsequent row. Thus in the screenshot, the second image (that photo of a shrimp salad) which should appear on the first line was pushed to the second row. This causes the last image to be positioned way off the fixed dimensions of the container.

Workaround #1 – Excluding the transparent gif

If you’d scrutinise the irritating image the Flickr badge JS has inserted in, you will realise that while other displayed Flickr photos will be wrapped around the link tag:

<a href="ImagePageURL" title="ImageDesc"><img src="ImageURL" title="ImageDesc"></a>

… while the miserable little pain-in-the-ass transparent gif is just an unlinked image. The unlinked image is where this first workaround is taking advantage of. My old CSS styling for the images were (simplified for presentation purposes):

1. div#flickr img {
2. border: 4px solid #a4b6d2;
3. float: left;
4. margin: 0 4px 4px 0;
5. padding: 0;
6. }
8. div#flickr img:hover {
9. border: 4px solid #ffffff;
10. }

The problem is immediately clear – I’m assigning a 4px border to the transparent gif too! This will create an 12px wide unnecessary space (4px for left border, 4px for right border and 4px for the margin), thus pushing the second, fourth, sixth and etc to the next row. To circumvent the problem:

Method 1: You’ll just need to change your code such that the border only targets linked images (since the transparent 1x1px gif is not linked).

1. div#flickr a img {
2. border: 4px solid #a4b6d2;
3. float: left;
4. margin: 0 4px 4px 0;
5. padding: 0;
6. }
8. div#flickr a img:hover {
9. border: 4px solid #ffffff;
10. }

Method 2: Alternatively, if you’re reluctant to use the ‘border’ attribute but wishes to add borders to your images, Veerle‘s has got a neat workaround for it. I’ve used the concept behind her workaround and modified it a little for personal use:

1. div#flickr a img {
2. background: #a4b6d2;
3. float: left;
4. margin: 0 4px 4px 0;
5. padding: 4px;
6. width: 75px;
7. height: 75px;
8. }
10. div#flickr a img:hover {
11. background: #ffffff;
12. }

Her method is to pre-define the size of the image, then assign a fixed padding to them and then define the background colour. This creates borders around the images. The img:hover property is a pseudo-class – whenever you hover your cursor over that image the background changes colour.

*Disadvantage of Method 1 and Method 2 (both are under Workaround #1): This is merely a stop-gap measure – this means that if Flickr ever does edit their sneaky Flickr badge javascript, you might need to think of an alternative workaround. For example, if Flickr links the transparent gif, this workaround will not work. This brings us to the second fix.

Workaround #2 – Targeting the transparent gif

Another workaround will be directly targeting transparent gif by stopping the browser from displaying properly. This workaround is kindly provided by tomodea.

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

This fix is painless and easy :) what you’re doing if you place this in your stylesheet is that you’ll be instructing the browser not to display images from http://geo.yahoo.com, which is where the transparent gif is hosted at.

*Disadvantage of Workaround #2: If Flickr changes the image URL, you’ll have to modify the image source. More importantly, if Flickr switches the image source to a php file which randomly picks transparent gif from various place (which is unlikely unless Flickr is ought to be evil), this fix will not work.

Fixed!

Problem corrected with CSS (:

After applying any of the methods describe above, your problem will be fixed for the moment being. The screenshot to the right shows the product of the three fixes – since they basically do the same thing, there’s no point posting three separate screenshots.

I’ve tested the three methods on my blog in various browsers – Firefox 3, Safari 3, Opera 9 Google Chrome 0.2 and IE 7. All fixes seem to work fine, but I cannot guarantee there’s no problem for people using IE6 and below – and if you’re still using IE6, please upgrade to IE7 as it’s for free (even if you’re using a pirated copy of Windows). There’s simply no reason hanging your dear life onto IE6.

For the moment being, the size of the transparent gif is set to height=0px and width=0px, if you do look at the badge script. I hope the Flickr team wouldn’t mess with the dimensions or life will be hell for us :razz:

If you have any questions or problem with the fixes, or have any cooler CSS workarounds, feel free to post them in your comment! Thanks!