Help / The Help Forum

Brent Cameron    says:

I use the same badge, and while all of my photos are displaying, there's a blank geotag image bumping everything down.

I'm guessing the Flickr guys added it to the script, so until they discuss it I'm not sure how to get rid of it.
Posted 45 months ago. ( permalink )

Brent Cameron    says:

I edited the badge code manually to output 7 photos, and it's always worked before. Is the Geotag a new feature to the script?
Posted 45 months ago. ( permalink )

EcoVelo    says:

Hi Zack,

I manually edited the code to display 4 photos. It's been working perfectly for over a month, then today, with no changes made to the code, the space for the 5th photo showed up.

Thanks,
Alan
Posted 45 months ago. ( permalink )

EcoVelo    says:

Satelliteshine,

I looked at your site and I see you're suffering the same issue; at least now I know it's not just me.. :-). I haven't heard anything about a Geotag being added to the script, but if it's so, I'd love to know if there's a way to eliminate that option.
Posted 45 months ago. ( permalink )

stooter83    says:

Yes,
I am having this issue too. I am in the midst of building a new site which has three different badges on it I have tried everything, changing css, placing source java in a blank html page... nothing works and it worked earlier today so something happened. This is kinda lame I was getting ready to launch please fix. Thanks
Posted 45 months ago. ( permalink )

EcoVelo    says:

Well, I figured out what's happening, but I don't know how to fix it (yet).

When I run the script in a browser I get a 1x1 pixel GIF spacer (see this link and look at the title: geo.yahoo.com/p?s=792600102&t=80e8dabea11a78c3150db21.... (That URL is embedded in the javascript.)

Because I'm styling my photos with CSS using "height" and "width", it's resizing the 1x1 pixel spacer to the same size as my other images, hence the blank space that's the same size as my other photos. This is obviously something new that was added to the script today, probably for some new feature to be added later.

IT WOULD SURE BE NICE TO HEAR FROM AN ADMIN ON THIS.

I'll post back here if I come up with a workaround..

ARRRG.
Alan
Posted 45 months ago. ( permalink )

stooter83    says:

Yeap that's what I pretty much found out too. I style my images the same... css to determine thumb size. I know... this is annoying i gotta get some sleep its 10 here i check this thread in the morn to see if anyone gonna has come up with a solution.

Is there anyway to block certain images?

Michael
Posted 45 months ago. ( permalink )

Brent Cameron    says:

This string:

var b_txt = '';

Brent Cameron    says:

It refuses to show up since code or pre tags aren't allowed here, but it's a little longer than what I posted above :p
Posted 45 months ago. ( permalink )

EcoVelo    says:

Got it - thanks.

No we need to figure out a workaround.. :-)
Posted 45 months ago. ( permalink )

Brent Cameron    says:

Yeah, or the dev team could not add shit unannounced and without offering an option to disable it :p
Posted 45 months ago. ( permalink )

EcoVelo    says:

That's asking a bit much.. ;)
Posted 45 months ago. ( permalink )

EcoVelo    says:

Thanks Kevin!
Posted 45 months ago. ( permalink )

Magnus Jepson says:

We are seeing the same problem in all our WordPress themes and other blogs

See Verle's blog for an example

veerle.duoh.com/
Posted 45 months ago. ( permalink )

teddy-rised    says:

Hey there, I've got the same problem out of the blue too! Looks like sticking back to the old code doesn't help with the problem either. I've checked Veerle's CSS and she seems to have updated her styling for the Flickr images to circumvent the problem. I don't know which part of the style helped (is it the height, padding, margin or whatsoever, I'm not sure) but looks like her code worked in negating the effect of the first blank gif on your layout.

#flickr a img {
float:left;
margin:0 0px 8px 8px;
background:#3f4e4e;
padding:4px;
width:62px;
height:62px;
}

This is her code. Use it as a referrence only :)
Posted 45 months ago. ( permalink )

teddy-rised    says:

Oh I've figured where the problem lies:

The blank gif image that the Flickr javascript has inserted is not wrapped by <a></a> tags, so yeap instead of styling div#flickr img{ ... } you can go ahead and style div#flickr a { ... }, assuming that you're wrapping the code with <div id="flickr"></div>

Nice workaround Veerle!
Posted 45 months ago. ( permalink )

EcoVelo    says:

That's the fix. Thanks much!
Posted 45 months ago. ( permalink )

Hands at Work says:

can somebody explain the fix a bit more, i actually found veerle's site first and followed the instructions to a tee and can't get rid of the that empty image.

Can someone put their css verbatim for me to read? this is mine and it is putting the blank image on top.

#flickr {
width:200px;
height:128px;
padding:0px 0 0 0px;
}
#flickr h2 {
position:absolute;
left:-300px;
top:-300px;
}
#flickr a img {
float:left;
background: #000;
margin:0 0px 0px 0px;
padding:0px;
width:62px;
height:62px;
}
Posted 45 months ago. ( permalink )

amber {♚} says:

I'm having the same issue.

My CSS:

#flickr { }

#flickr .flickr { }

#flickr img {
width: 160px;
height: auto;
display: block;
background: #DFD8B9;
border: 1px solid #142026;
margin: 4px;
padding: 5px;
}
Posted 45 months ago. ( permalink )

Jayel Aheram    says:

Seeing the same problems, by the way.

This seems to be the problem -->

<img src="http://geo.yahoo.com/p?s=792600102&t=132346be6d785849fe7d822772cbd69a&r=http%3A%2F%2Fwww.aheram.com%2F&fl_ev=0&lang=en&intl=us" alt="" height="0" width="0">

I do not know why it seems to be including my website's address in its code. Is there a purpose for this?

EDIT: (Oh, I just read people's posts above. The fix is actually quite straightforward and I was actually going to publish it.)

For anyone having problems still, the fix is to style for "a img" not "img".
Posted 45 months ago. ( permalink )
Jayel Aheram edited this topic 45 months ago.

teddy-rised    says:

Yeap spot on Jayel :) just apply the styling to div#flickr (or whatever class or id you gave to the div that wraps around the Flickr script) a img { ... } this targets the images that are linked. The transparent gif isn't linked and so it will not have any affect your flickr photos display.

To make sure everything works well, you might want to add this:

div#flickr a {
margin: 0 !important;
padding: 0 !important;
}

This makes sure that the styling above overrides any margin or padding declaration made on links.

@HandsAtWork: Here's my CSS:

div#flickr a img {
background: #a4b6d2;
float: left;
margin: 0 4px 4px 0;
padding: 4px;
width: 75px;
height: 75px;
}

div#flickr a img:hover {
background: #ffffff;
}

The last one involves using pseudo-class, which might not work for IE 6 and below.
Posted 45 months ago. ( permalink )

Andy Knight    says:

I have my flickr badge wrapped in a div tag with an id of flickrfeed. So I changed my CSS from this:

#flickrfeed img { ... }

to this:

#flickrfeed a img{ ... }
Posted 45 months ago. ( permalink )

t.sullivan photography    says:

Just wanted to chime in that I'm seeing the same issue! Since a fix doesn't seem to be forthcoming, I'm went ahead and altered my CSS to address the issue. Unfortunately, my images are still off by 1px now, but it's better than it was.

Sort of unrelated, but I wonder what the thought process was behind allowing 1,3, or 5 images in the badge? At least with even numbers you have the ability to format them into even rows (which is why I changed mine to pull 4 images).
Posted 45 months ago. ( permalink )

Jayel Aheram    says:

I doubt it is Flickr's intention to limit you to merely 1, 3, or 5 images in a badge. Most likely, the default number was arbitrary and made for people who are not willing (or not knowledgeable enough) to edit the the code itself. Flickr could have easily specified 1, 5, and 10.
Posted 45 months ago. ( permalink )

alexbarrow    says:

I am having the same problem. I updated my CSS to #flickr a img as stated before. It solved the blank placeholder img problem but there is still a problem, my dimensions have been messed up. There now appears to be an inexpicable margain on the top of the photos. Before, at its current dimensions, 344px was plenty to contain 10 pictures but now they bleed over, easy fix but visually, the new larger gap at the top bothers me, any ideas?

thanks.

www.alexbarrow.com
Posted 45 months ago. ( permalink )

b.p.    says:

thanks the styling tweak worked!

the strangest thing is that when i use display=random now, it only shows the same 1 photo, but when i set it to display=latest, it shows a sequence properly. anyone see it with theirs?
Posted 45 months ago. ( permalink )

tomodea says:

Adding this code to your CSS will hide the offending 1px image within the latest web browsers. This way you don't have to muck up your existing CSS and if flickr makes a fix, then just remove this line.

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

As stated above div#flickr should be changed to whatever element class/id that you wrapped around your flickr images.
Posted 45 months ago. ( permalink )

Ireneღ says:

I noticed this same problem (a fifth empty block) on my site just now and the "a img" CSS fix worked perfect for me. Thanks! Who needs Flickr admin when I have you guys? :)
Posted 45 months ago. ( permalink )

Hands at Work says:

tomedea. THANK YOU THANK YOU THANKYOU

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

got rid of that annoying empty image.
Posted 45 months ago. ( permalink )

Hands at Work says:

I just finished reapplying these settings to all my badges, and then bam out of nowhere I lost the padding/borders around all the images in the badge. is flickr still making changes?
Posted 45 months ago. ( permalink )

Hands at Work says:

Here is my code, i never changed anything really, then all of my badges at once lost all of its banner, now they are all squished together



#flickr {
width:250px;
height:128px;
padding:0px 0 0 0px;
}
#flickr a img {
float:left;
background: #000;
margin:0 0px 8px 8px;
padding:4px;
width:86px;
height:86px;
}
div#flickr img[src*="http://geo.yahoo.com"] { display:none }
Posted 45 months ago. ( permalink )
Hands at Work edited this topic 45 months ago.

teddy-rised    says:

@HandsatWork: Do you have a link to the problematic display of the code? Seeing it would make it easier to troubleshoot it :) I tested your code on my Flickr badge and it seems to work perfectly fine.
Posted 45 months ago. ( permalink )

nathancolquhoun    says:

www.handsatwork.org

i realized just now that for a moment it will show my badge exactly how i want it and then all of sudden it switches it back while its loading....maybe this isn't a flickr thing? now sure.
Posted 45 months ago. ( permalink )

tomodea says:

@HandsatWork: Your site has multiple style blocks being written out onto your homepage that are causing conflicts.

Check the source of your homepage and you'll see the multiple styleblocks. You need to remove the conflicting/multiple styles blocks.
Posted 45 months ago. ( permalink )

themeekshall    says:

just had the same issue occur - thanks for the 'a img' fix guys
Posted 45 months ago. ( permalink )

nathancolquhoun    says:

i'm using square space, so it must be something that happened when i made the change, thanks for your help everyone!
Posted 45 months ago. ( permalink )

teddy-rised    says:

tomodea Hey thanks! I was just about to reply to HandsatWork's question and your answer popped it :)

nathancolquhoun Just follow tomodea's instruction and remove conflicting blocks. It is highly encouraged that you place all your style in one common stylesheet. This is because web standards encourage us to separate styling from content ;) and it helps to pin-point problems as well. Good luck!
Posted 45 months ago. ( permalink )

nathancolquhoun    says:

hey sorry for the confusion, i'm both hands at work and nathancolquhoun, just was under two different accounts, didn't realize that i was posting as both

sqaurespace makes it very confusing to find out where all the different stylesheets are....we're trying to move our site away from it, but haven't got there yet. thanks teddy and tomodea!
Posted 45 months ago. ( permalink )

teddy-rised    says:

nathancolquhoun I've figured out a workaround, although it's not very elegant :) just add "!important" to the properties defined for your Flickr images, i.e:

background: #ffffff !important;

and etc. It will override other attributes assigned.

[Edit] Oh and I've written a post regarding on how to fix the bug. It's over here. Thanks tomodea for the super lightweight and efficient fix!
Posted 45 months ago. ( permalink )
teddy-rised edited this topic 45 months ago.

nathancolquhoun    says:

teddy-rised - you are brilliant...the !important stuff worked like a charm....thanks so much!! i never knew that actually affected anything, just thought it was like a comment...

this is great!
Posted 45 months ago. ( permalink )

happeningfish says:

tomodea, your fix worked perfectly for me. frosted cupcakes for you!
Posted 45 months ago. ( permalink )

huw1000    says:

Really annoying that the flickr dev's snuck in this change without considering the consequences - need to wise up a bit I think.

Thanks to everyone in the thread for the detective work on a fix I had my CSS sorted nice a quick :)
Posted 45 months ago. ( permalink )

alexbarrow    says:

tomodea,

solved my problem too, thanks. the a img fix works but still applies things like padding to the non existant image. this clears everything.
Posted 45 months ago. ( permalink )

berklieblog    says:

Flickr Dev's = thanks for nothing. Next time, assuming you'll learn to be proper Dev's like at Google, create a NEW badge code version that doesn't ruin the installed user base's code. Amateurs.

Here's a tip. Go from this:

badge_code_v2.gne

To something like this:

badge_code_v3.gne

And let everyone know that there's an alternative to the proven "v2"... don't change an already existent v2. God... amateur hour.
Posted 45 months ago. ( permalink )

teddy-rised    says:

berklieblog I agree - they should either inform us before hand or get a new version of the badge code. It's just absurd that they changed it overnight without even announcing it, forcing us to crack our brains over possible workarounds :(
Posted 45 months ago. ( permalink )

Brian Einarsen    says:

Thanks a bunch. This fix worked great for me. I am using single image badges, one for a bigger image (latest moblog-tagged) and three smaller (random moblog-tagged).

#flickr_l img {
float:left;
width:200px;
height:150px;
background: #ffffff !important;
}
#flickr_l a img {
float:left;
width:200px;
height:150px;
}
div#flickr_l img[src*="http://geo.yahoo.com"] { display:none }
#flickr_rl img {
float:left;
margin:7px 7px 3px 0px;
width:62px;
height:47px;
background: #ffffff !important;
}
#flickr_rl a img {
float:left;
margin:7px 7px 3px 0px;
width:62px;
height:47px;
}
div#flickr_rl img[src*="http://geo.yahoo.com"] { display:none }
#flickr_rc img {
float:left;
margin:7px 7px 3px 0px;
width:62px;
height:47px;
background: #ffffff !important;
}
#flickr_rc a img {
float:left;
margin:7px 7px 3px 0px;
width:62px;
height:47px;
}
div#flickr_rc img[src*="http://geo.yahoo.com"] { display:none }
#flickr_rr img {
float:left;
margin:7px 0px 3px 0px;
width:62px;
height:47px;
background: #ffffff !important;
}
#flickr_rr a img {
float:left;
margin:7px 0px 3px 0px;
width:62px;
height:47px;
}
div#flickr_rr img[src*="http://geo.yahoo.com"] { display:none }
#galleri_l img {
float:left;
}
Posted 45 months ago. ( permalink )

Salemcito says:

This is driving me crazy!

I have badges in like a hundred blogs and sites that, right now, thay all look plain awful. I won´t be changing the code for the sites one by one by hand!!!!

And worst part is that now everybody will think i screwed up something when i did nothing bad, except to trust in flickr.

I can loose clients for this crap... :( Should I sue? :P

Isn't there a working solulion flickr side and not my own CSS side???
Posted 45 months ago. ( permalink )

ColleenM    says:

Salemcito "I can loose clients for this crap... :( Should I sue? :P"

Well, since you agreed not to use your Flickr account for commercial purposes, I doubt you'd be able to sue for commercial losses.
Posted 45 months ago. ( permalink )

bbarnard says:

The fix

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

is a nice one for browsers that support the attribute selectors but according to my Web Design in a Nutshell they are not supported in M$ Internet Explorer v6.

You may need to use the div#flickr a img selector and do some hack to avoid messing up your geometry.
Posted 45 months ago. ( permalink )

teddy-rised    says:

bbarnard The best fix is the combination of both, just in case :) I use both methods, heh!
Posted 45 months ago. ( permalink )

amber {♚} says:

This worked. Thanks!
Posted 45 months ago. ( permalink )

elana's pantry    says:

the BEST solution is located at veerle.duoh.com/blog/comments/fickr_badge_w3c_valid/
Posted 45 months ago. ( permalink )

usedweb says:

Thank you!
Posted 45 months ago. ( permalink )

teddy-rised    says:

elana's pantry Veerle's solution is by styling images that are wrapped in tags :) I use a combination of both fixes to make sure everything works just fine heh!
Posted 45 months ago. ( permalink )

Sujeet P says:

Thanks to Andy Knight's suggestion, I'm back in business.. Now I just need to edit my CSS file on 31 more sites. :(
Posted 45 months ago. ( permalink )

matt    says:

For the people who have to fix a few dozen different sites by hand, I'd suggest looking into a different deployment strategy. Alternately, writing your own code if it's something you rely on that heavily. A Flickr badge is the work of an afternoon for anyone with the wits to code a web page.
Posted 45 months ago. ( permalink )

teddy-rised    says:

Zander Chance But it's just inserting one line of CSS statement for the fix... should be manageable right? Good luck!
Posted 45 months ago. ( permalink )

MonieLove says:

Awesome... I've been looking for this fix for days now. Changing my CSS from #flickr img to #flickr a img worked like a charm!
Posted 45 months ago. ( permalink )

fishsaucey says:

Great thanks! It was driving me nuts.
Posted 45 months ago. ( permalink )

Signalkuppe (now at 35mm)    says:

just erased the tag using jquery

$('img[@src*="http://geo.yahoo.com/"]').remove();

squishies    says:

Used Andy Knight's method... worked like a charm =)

thanks!
Posted 45 months ago. ( permalink )

teddy-rised    says:

.schill Hey thanks for fixing the bug and explaining it at the same time :) I think it displays just fine without any of the fixes now!
Posted 45 months ago. ( permalink )

bigwavedave000    says:

I load my Flickr images on several sites at the bottom of the page then relocate them to place holders in the page with some Yahoo API to avoid page loading delays. But this method negates the "absolute positioning and hidden" solution when they're relocated.

Veerle's solution works great with my setup but I also use a different slideshow badge that needed another solution. I altered that JavaScript file to skip the first image, which worked for a few days, then the beacon image showed up again. Now I see why, it was moved to the last image in the markup. I again had to alter the JavaScript to now ignore the last image. I really think these code revisions without any sort of timely notice should stop. Is it that difficult to let the community know what's going on?

Part of why I chose to pay for Flickr pro was the vast API included. I think the way these changes were handled detracts from the otherwise excellent API at Flickr.
Posted 45 months ago. ( permalink )