Oct 07
28
Adding images to your blog posts with Flickr
Some of you might have heard of a website named Flickr. I like flickr its a cool little place to share your photos or store them online, anyhow…did you know that you can also access these pictures and add them to your blog posts?
The code below will show all images that have been tagged sunny
<p id=”flickr_badge_wrapper” align=”center”>
<script src=”http://www.flickr.com/badge_code_v2.gne?count=5&
display=latest&size=s&layout=h&source=all_tag&tag=sunny” type=”text/javascript”></script></p>
This how it looks when outputted to the blogpost 5 small horizontal images.
You can specify,horizontal,vertical by picture size and number too.
Here is the same keyword but larger and with only one image specified.
All you need to do is play with the variables size=s gives you small size=m gives you medium and size=l gives you large. Count specifies the number eg count=4 would show 4 images.
The downside is that it’s a little random, but if you want to show images from people who have ok’ed public distribution then it’s a handy little way of adding an extra dimension to your blog posts or pages.
Ifyou you’d like the images to look like those above then you’ll need to add the code below to your stylesheet or head of your post but do make sure to include the <style></style> tags if going via the head option.
#flickr_badge_source_txt {padding:0; font: 11px Arial, Helvetica, Sans serif; color:#666666;}
#flickr_badge_icon {display:block !important; margin:0 !important; border: 1px solid rgb(0, 0, 0) !important;}
#flickr_icon_td {padding:0 5px 0 0 !important;}
.flickr_badge_image {text-align:center !important;}
.flickr_badge_image img {border: 1px solid black !important;}
#flickr_www {display:block; padding:0 10px 0 10px !important; font: 11px Arial, Helvetica, Sans serif !important; color:#3993ff !important;}
#flickr_badge_uber_wrapper a:hover,
#flickr_badge_uber_wrapper a:link,
#flickr_badge_uber_wrapper a:active,
#flickr_badge_uber_wrapper a:visited {text-decoration:none !important; background:inherit !important;color:#3993ff;}
#flickr_badge_wrapper {}
#flickr_badge_source {padding:0 !important; font: 11px Arial, Helvetica, Sans serif !important; color:#666666 !important;}
