Hello there. I am Terry and I am a full-time undergraduate based in Singapore. I take photos, write a blog and design websites.

And no, I'm not a teddy bear.

Fix for buggy Flickr badge JS

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

Buggy Flickr Badge JS - Image displacement

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. }
  7. div#flickr img:hover {
  8. border: 4px solid #ffffff;
  9. }

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. }
  7. div#flickr a img:hover {
  8. border: 4px solid #ffffff;
  9. }

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. }
  9. div#flickr a img:hover {
  10. background: #ffffff;
  11. }

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!

Buggy Flickr Badge JS - Problem corrected with CSS

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!

Burn after reading » Now you're done reading. What's next?

Related

Related posts that might interest you:

Popular

Posts that are popular among visitors:

Share it

If you've enjoyed the post, or think that it might be useful to others, do share in on a social network site that you're using. Thank you!

  • Digg
  • del.icio.us
  • Facebook
  • Mixx
  • Google Bookmarks
  • StumbleUpon
  • Technorati
  • LinkedIn
  • Reddit
  • Design Float
  • Identi.ca
  • Live
  • Ping.fm
  • Print this article!
  • Twitter
  • Netvibes
  • HackerNews
  • Slashdot

13 responses to “Fix for buggy Flickr badge JS” » Leave a response

  1. AliceResponse

    Hello! Had the same exact problem, and today my flickr badge was all misaligned, just like yours… I fixed changing my css so that it puts border and padding to the images that are links only as in your suggestion #1 . What I was wondering was what the heck is that thing they put in there? :(

    Alices last blog post..One more wordpress site

  2. BrandyResponse

    You’re my hero, Teddy!

    Brandys last blog post..*pinch* for a new month.

  3. negaraku.netResponse

    Fix for buggy Flickr badge JS…

    Flickr changed their Flickr badge JS unexpected yesterday, which involves appending a blank transparent gif to the start of the badge. The change, seemingly small, will wreck havoc in your template if not fixed. I’ve posted 3 easy and painless fixes…

  4. AmarilysResponse

    This should definitely help a lot of people!

    The whole change didn’t really affect my layout…I wasn’t even aware of the change.

    The whole code that they give you actually looks really weird to me…I dunno…maybe it’s just me.

    Hope you’re having a great day Teddy :-)

  5. ChongxResponse

    cheeem stuff which i will never decipher(: no wonder my blog is still a new blog!!
    hahaahh!! whee

    Chongxs last blog post..3rd Sept

  6. Pieces of the puzzle, coming together. @ ShadesOfMe.orgResponse

    [...] code. Why fix something that looked fine? There’s a CSS fix. Teddy wrote a tutorial here. Of course, Failbook had to jump into the same bandwagon, and change their layout – which I hate [...]

  7. AaronResponse

    Thanks Teddy!

  8. Raúl OrtasResponse

    Thank you! This helped me a lot. I’ve used the Workaround #2 (adapting it to my css) and it works like a charm!

  9. JennResponse

    Workaround #2 worked perfectly for me. Thank you!

    Jenns last blog post..webhostingrating.com

Leave a Response » Share your thoughts or Return to top

Your name is required. Why?

  • So that I can address you personally (which I'm more than happy to do).
  • Everyone loves their name to be called, right? Nobody wants to be referred to as 'a certain someone' or Mr X (X-Men members aside).
  • If your post too much spam, your name will be imprinted on a personalised voodoo doll, completely free of charge. I'm just joking!

Your email is needed. Why?

  • Your email is, and will, never be given out to any third party under any conditions (except for people sneaking up behind me when I'm on WP admin).
  • So that I can contact you personally in case of certain issues that I wish to address personally.
  • If you post too much spam, I'll email the same spam you've posted 10 times back to you, completely free of charge.

You can always leave a personal URL behind

  • It can be anything - most people put their blog URL, their facebook page, their Twitter URL, their MySpace or etc.
  • I give love back by saying NO to no-follow. All of your webbie links are dofollows instead.

Twitter. Twitter. Twitter.

  • What is Twitter?: Twitter is a social networking and micro-blogging service that enables its users to send and read other users' updates known as tweets. Tweets are text-based posts of up to 140 bytes in length.
  • What is my Twitter ID?: To get a Twitter ID, you simply have to sign up for an account at Twitter.com. Your ID will be in the format of your profile's URL - http://twitter.com/[userid].

Comment notes

  • Gravatar: You can register for one at Gravatar.com
  • XHTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="" highlight="">
  • Codes: Wrap them up with <code></code> tags.

Hello Easter Egg hunter! You've discovered the magic of the Konami Code!

Yea. You probably know what the Konami code is before getting to this page. So now what? Here is a randomised YouTube video on my favourites list... which includes Rickroll, if you're luck enough to get it.

You are currently watching MythBuster's Rube Goldberg Machine. Loving it? You can even watch the video in its full screen glory :)

The Konami Code:
Konami Code sequence