On May 25th, 2008 milburn wrote…

Flickr Photos on WordPress

I’ve got a new blog so I need a way to display some cool images at the bottom of the page. Anyone who has dealt with WordPress before will tell you it’s not made for dealing with images. I’ve decided to counter my fears and sign up to Flickr.

Flickr offers a range of ways for developers to integrate images with their website. I have mashed my Flickr photostream with my blog and got a wall of images at the bottom of the page. It was actually remarkably painless to set up, Flickr helps simplify the uploading, classifying and exporting of images.

I’ll give you a little tutorial of how I acheived the photo wall at the bottom of my blog.

  1. Find the pictures you want and upload them to Flickr.
  2. Organise your pictures, give them meaningful descriptions tags and put them into sets.
  3. To make a simple HTML Flickr Badge you need to go to the following url and follow the steps http://www.flickr.com/badge.gne
  4. Choose the content you want which can be either one of your sets or all your photos.
  5. Choose the layout options but click select orientation to “none”
  6. Don’t worry about picking colours we will style it with our own later.
  7. You will get some code generated which looks like this<style type="text/css">
    #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_badge_uber_wrapper {width:150px;}
    #flickr_www {display:block; text-align:center; 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 {background-color:#ffffff;border: solid 1px #000000}
    #flickr_badge_source {padding:0 !important; font: 11px Arial, Helvetica, Sans serif !important; color:#666666 !important;}
    </style>
    <table id="flickr_badge_uber_wrapper" cellpadding="0" cellspacing="10" border="0"><tr><td><a href="http://www.flickr.com" id="flickr_www">www.<strong style="color:#3993ff">flick<span style="color:#ff1c92">r</span></strong>.com</a><table cellpadding="0" cellspacing="10" border="0" id="flickr_badge_wrapper">
    <script type="text/javascript" src="http://www.flickr.com/badge_code_v2.gne?show_name=1&count=3&display=latest&size=t&layout=v&source=user_set&user=26963457%40N02&set=72157605251403235&context=in%2Fset-72157605251403235%2F"></script>
    <tr>
    <td id="flickr_badge_source" valign="center" align="center">
    <table cellpadding="0" cellspacing="0" border="0"><tr>
    <td width="10" id="flickr_icon_td"><a href="http://www.flickr.com/photos/26963457@N02/sets/72157605251403235/"><img id="flickr_badge_icon" alt="tomontoast's Germany 2007 photoset" src="http://l.yimg.com/www.flickr.com/images/buddyicon.jpg#26963457@N02" align="left" width="48" height="48"></a></td>
    <td id="flickr_badge_source_txt">tomontoast's <a href="http://www.flickr.com/photos/26963457@N02/sets/72157605251403235/">Germany 2007</a> photoset</td>
    </tr></table>
    </td>
    </tr>
    </table>
    </td></tr></table>
    <!-- End of Flickr Badge -->
  8. Get rid of all the HTML and CSS fluff until you get down to the meat which makes this work:<script type="text/javascript" src="http://www.flickr.com/badge_code_v2.gne?show_name=1&count=3&display=latest&size=t&layout=v&source=user_set&user=26963457%40N02&set=72157605251403235&context=in%2Fset-72157605251403235%2F"></script>
  9. Put that tag wherever you want your images to appear. This bit of JavaScript creates a set of divs each with class=”flickr_badge_image” inside each div is an image nested in a link.
  10. Finally apply some sweet CSS to make the photo gallery look cool. If you’ve got some experience with CSS I’m sure you can apply your own styling but if you’re a bit stuck this is what I use on my blog:a img {
    border:none;
    }
    .flickr_badge_image a{
    text-align:center;
    border:1px solid #433d33;
    margin:0 10px 10px 0;
    width:85px;
    height:85px;
    float:left;
    }
    .flickr_badge_image a:hover{
    width:95px;
    height:95px;
    margin:-5px 5px 5px -5px;
    border:1px solid #ef702e;
    }
    .flickr_badge_image img{
    margin-top:5px;
    }
    .flickr_badge_image a:hover img{
    margin-top:10px
    }

That was fairly easy and depending on how you set it up when you change your photos on Flickr the photos on your website will change.

You can leave a comment, or trackback from your own site.

Leave a Comment

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

Proudly powered by WordPress with plane theme by me! | © 2007 - 2019 Thomas Milburn | Valid CSS and HTML