Flickr recently introduced a new badge generator with a lot of new features, including the ability to restrict the photos displayed to a certain set or group pool.
I started experimenting with whether it was possible to place badges into my weblog posts where appropriate. For instance, a post about a specific event could include a badge displaying photos from that event’s Flickr photo set or group pool.
My first attempts met with some trouble. The code that the Flickr badge generator creates comes in two sections: the CSS for style, and the HTML code for the badge. Unfortunately, the CSS block was causing issues, breaking validation (under XHTML Transitional, you can’t have a block inside a element) and doing something else that resulted in a random string of characters displaying instead of the badge.
After trying a few different forms of badge, though, I found that as long as I kept the same color and background choices (in step four of the HTML badge creator), the CSS code always stayed the same, and it was only variables in the Javascript call to Flickr that determined which photos were displayed.
So, I chose the style options that I wanted, created a badge, and put the CSS code into my stylesheet. I then took just the HTML code, dropped it into a post, and bingo — everything displays fine. As an example, here’s a random selection of images from the Utilikilts group pool:
| www.flickr.com
|
Other advantages — because the CSS now lives in the stylesheet, you can create different color combinations for different stylesheets (if you use a stylesheet switcher), and your Flickr badges will blend in with the rest of the design no matter which design you choose.
Not a mind-blowing tip, sure, but could be useful from time to time.