Customize Thesis: Add Flickr Sidebar Photos

Spread it!

Share

Email This

This tutorial is for those lucky users who run their sites on Wordpress using the Chris Pearson’s Thesis theme. If you haven’t learned about thesis take a few minutes to visit our review of the thesis Wordpress theme.

How do we display Flickr Photos in the Sidebar?

There has been some questions on the thesis support forums on how to easily integrate Flickr into the sidebar of your thesis theme. Our goal today is implement an easy system to pull down the most recent photos from a user’s photo stream and display them in our sidebar. We’ll add thickbox to give it that extra umph.

For those who own Thesis, lets jump right in.

Many users of thesis love its flexibility, ease of use, and future compatibility, but sometimes you really have to get your hands dirty under the hood to make it do some great things.

Objectives:

• Display a block of flickr photos from our flickr user photo stream or the public photo stream in the sidebar.
• Add flexibility to search via tags.
• Gracefully expand images when clicked on via jquery and thickbox.

Required Downloads

To complete this tutorial you need a couple of downloads. Grab these, We’ll use them during this post.

• FlickrRSS | Home Page
• Thickbox | Home Page

Background Knowledge:

To use this tutorial you will need a little background knowledge of thesis hooks and CSS. All of the code you need to display flickr photos in your sidebar are included in this post however if you may need to customize it to fit your specific needs. It is also expected that you know how to customize your custom.css and custom_functions.php.

Please Note This is an Old tutorial. The examples used have changed.

Step 1.

To get started go ahead and get flickrRSS installed be either downloading it from the link above or installing it via the wordpress admin area. Once you have it installed make sure it is activated. You don’t need to customize anything with the flickrRSS panel, we do all the dirty work within the hooks.

Step 2.

Next drop the thickbox javascript into the custom folder of the thesis theme.

Step 3.

Ok now that you have both the plugin and javascript ready its time to edit you custom_functions.php file.

We are going to add two hooks. The first hook will add the needed javascript to the wordpress header. The second hook is the part that does the dirty work and pulls in the flickr photos.

Once you have added both of these hooks to your custom_functions.php file make sure you upload it to your server.

First Hook – Thesis Header Hook:

function thesis_add_flickr_thickbox(){ ?>
<link rel="stylesheet" href="<?= bloginfo('template_directory');?>/custom/thickbox.css" type="text/css" media="screen, projection" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script src="<?= bloginfo('template_directory');?>/custom/thickbox.js"></script>
 
<?
}
 
add_action('wp_head', 'thesis_add_flickr_thickbox');

Second Hook – Thesis Sidebar Hook:

function thesis_add_flickr_rss(){
 	if(function_exists('get_flickrRSS')){
		get_flickrRSS(array(
		'num_items' => 9,	# Number of Photos to Show
		'type' => 'user', # favorite, set, group, user, public
		'id' => '77721533@N00',	# Ex. 77721533@N00
		'default_title' => 'Your Default Title',
	//	'tags' => 'Cars', 	#specify your Tags - Not required
 
		#### you can leave these
		'before_list' => '<div class="flickrfeed"> <h3>Flickr Photos</h3>',
		'html' => '<a href="%image_medium%" title="%title%" class="thickbox"><img src="%image_square%" alt="%title%" /></a>',
		'after_list' => '</div>'
 
		#### Cache Images for more info visit http://eightface.com/wordpress/flickrrss/
	//	'do_cache' => 'true',
	//	'cache_path' => '',
	//	'cache_uri' => ''	,
		));
	}
 
}
add_action('thesis_hook_after_sidebars', 'thesis_add_flickr_rss');

Step 4.

Now that you have the photos being pulled in, its time to style them!
Open your custom.css file and drop in the following code. This basic css will display images in 3 wide rows, feel free to customize it however you see fit. This style works with the default thesis theme.

CSS Code:

.custom .flickrfeed {
	padding-left:1.1em;
	padding-right:1.1em;
	font-size:1.3em;
	line-height:1.385em;
	margin-bottom:2.769em;
}
.custom .flickrfeed h3 {
	font-size:1em;
	line-height:1.385em;
	margin-bottom:0.692em;
	color:#555555;
	font-variant:small-caps;
	letter-spacing:2px;
}
.custom .flickrfeed img {
	padding:1px;
	border:3px solid #DDDDDD;
	margin-right:5px;
	width:80px;
}

Additional Feature! Pull in Photos based on tags.

Interested in just showing photos in the sidebar based on tags, replace the “Second Hook” with the code below. Don’t forget to change your tags.

function thesis_add_flickr_rss(){
 	if(function_exists('get_flickrRSS')){
		get_flickrRSS(array(
		'num_items' => 9,	# Number of Photos to Show
		'type' => 'public', # favorite, set, group, user, public
	//	'id' => '77721533@N00',	# Ex. 77721533@N00
		'default_title' => 'Your Default Title',
		'tags' => 'Cars', 	#specify your Tags

		#### you can leave these
		'before_list' => '<div class="flickrfeed"> <h3>Flickr Photos</h3>',
		'html' => '<a href="%image_medium%" title="%title%" class="thickbox"><img src="%image_square%" alt="%title%" /></a>',
		'after_list' => '</div>'
 
		#### Cache Images for more info visit http://eightface.com/wordpress/flickrrss/
	//	'do_cache' => 'true',
	//	'cache_path' => '',
	//	'cache_uri' => ''	,
		));
	}
 
}
add_action('thesis_hook_after_sidebars', 'thesis_add_flickr_rss');

Final Customizations

If you are interested in using some of the features which have been commented out please check out the flickrRSS Home Page.

All done!

That’s it! You’ve done it, that wasn’t near as hard as you expected right? The flickr photos should be displaying in the sidebar, don’t forget to change the code within the 2nd hook to your user id. If you need help finding your user id, check out idGettr. We hope you have found this post useful, if you have anything to add please drop it in the comments below.

Article by Nick Reese

Nick Reese is a full time internet marketer living in Austin Texas. When Nick isn't managing web properties he enjoys biking, wakeboarding, and drinking tea. You can read more from Nick Reese on his website and follow him on Twitter @nickreese.

Nick has written 25 awesome articles for Art of Blog.