Perhaps you noticed in the top right of the page I’ve added my flickr photos. This is auto-updating, as soon as I upload new images to flickr they appear here on my site as well. And its super easy.
First head over to http://www.flickr.com/badge.gne, We are going to use the HTML Badge for this. On the next step we have a few options about the type of content you’d like to display. You can choose to display all of your public photos and video or perhaps just your content with a specific tag associated with it. You can even limit it to only display content within a specific flickr set. You even have the option to display all public content from everyones uploads, and yes you can specify specific tags for this as well.
To get the layout I use, select not to display your portrait, leave the number of images to display at 3 (4 isn’t an option we will override this in the next step anyway). Choose to display your most recent images, (or you can opt to display random images) Select Square for the size and for orientation select None (Because you want to style it yourself).
Go ahead and skip the Colors step because we are going to style this ourselves with a bit of CSS. Don’t worry what it looks like at this step, in fact we only care about one thing on the next step, the bit of code I highlighted in the image. However we need to change this code just a bit to load 4 images instead of 3 and to make the code Valid. First lets replace all the & with & and then we need to adjust count=3 to count=4 your end code will look somewhat like this (This will pull MY 4 images not yours be sure to get the code from the flickr page to pull your images).
src="http://www.flickr.com/badge_code_v2.gne?count=4&display=latest&size=s&
layout=v&source=user&user=14897087%40N04"></script>
Now that we have the little bit of code we need, lets get it ready to place in the WordPress sidebar. WordPress Widgets are also known as “sidebar accessories” which are WordPress Plugins or add-ons to your WordPress blog sidebar. Developed by Automattic for WordPress and WordPress.com blogs, WordPress Widgets allow the easy addition of design elements, gadgets, content, images, and more to your WordPress sidebar to personalize your blog without knowing HTML, PHP, or any code. Many WordPress Plugins now come with a Widget version to allow easy addition to the sidebar. One Widget type is Text which allows us to input our own HTML or Plane text, We are going to use this Widget type.
<script type="text/javascript" src="http://www.flickr.com/badge_code_v2.gne?show_name=1&count=4&display=latest&size=t&layout=v&source=user&user=14897087%40N04"></script>
</div>
Now that we have the Basic code put together, we need to style it, so we need to add some CSS to the WordPress CSS file, Don’t worry its not as hard as you think, WordPress has a built in editor for doing this. (The following Instruction’s assume your running the latest and greatest Version of WordPress, If your not UPGRADE! if you don’t know how, Use the Contact link at the top of the page or leave a comment to get ahold of me, I offer WordPress Upgrades as a service, contact me for more details)
Select Appearance from the Left Sidebar, then select Editor, okay we are going to edit the Style-Sheet at the bottom. Once the editor is up scroll all the way to the bottom and Paste the following code in.
width:165px;
height:150px;
margin-left:12px;
}
#flickr a img {
float:left;
margin:0 0px 8px 8px;
background:#3f4e4e;
padding:4px;
width:62px;
height:62px;
}
