How to add / integrate a flickr gallery to Wordpress without a plugin

0
January 18th, 2010

If you’re like me and don’t like installing one more plugin for everything you need on your Wordpress installation, then here’s a solution for you if you want to integrate a Flickr gallery on your blog. Of course Wordpress plugins are great, but there are a lot of things that can be done without them. And the cool part is you can do it even better than the plugins, because custom codes will let you do exactly what you need and like.

Fortunately, Wordpress uses the SimplePie class 1.2, which allows you to easily parse a RSS feed with a simple fuction ( fetch_feed() ), which is already integrated in Wordpress. So, let’s see hat can we do with the so-simple SimplePie class. First, you ave to create a new file called flickr.php in your theme folder. After that, just copy the following code in the flickr.php file:

<?php

class flickr

{
/**
* Function that removes double-quotes so they don't interfere with the HTML.
*/
function cleanup($s = null)
{
if (!$s) return false;
else
{
return str_replace('"', '', $s);
}
}

/**
* Function that returns the correctly sized photo URL.
*/
function photo($url, $size)
{
$url = explode('/', $url);
$photo = array_pop($url);

switch($size)
{
case 'square':
$r = preg_replace('/(_(s|t|m|b))?\./i', '_s.', $photo);
break;
case 'thumb':
$r = preg_replace('/(_(s|t|m|b))?\./i', '_t.', $photo);
break;
case 'small':
$r = preg_replace('/(_(s|t|m|b))?\./i', '_m.', $photo);
break;
case 'large':
$r = preg_replace('/(_(s|t|m|b))?\./i', '_b.', $photo);
break;
default: // Medium
$r = preg_replace('/(_(s|t|m|b))?\./i', '.', $photo);
break;
}

$url[] = $r;
return implode('/', $url);
}

/**
* Function that looks through the description and finds the first image.
*/
function find_photo($data)
{
preg_match_all('/
]*)>/i', $data, $m); return $m[1][0]; } } ?>

The code above will take care of our Flickr RSS feed, so now all we have to do is integrate it into our Wordpress theme. Fortunately you can include it anywhere you want, like the index.php, footer.php, sidebar.php or single.php. After you’ve decided where do you want to put your gallery, edit the specific file and add the code below:

Wordpress Flickr Gallery

Wordpress Flickr Gallery

get_item_quantity(20); 

// Build an array of all the items, starting with element 0 (first element).
$rss_items = $rss->get_items(0, $maxitems);
?>

No items.

';
else

// Loop through each feed item and display each item as a hyperlink.
foreach ( $rss_items as $item ):
  $url = flickr::find_photo($item->get_description());
  $title = flickr::cleanup($item->get_title());
  $full_url = flickr::photo($url, $full);
  $thumb_url = flickr::photo($url, $thumb);
?>

You are almost done now, there are just a few more things to do. Search the above code and replace "your-flickr-feed" with your actual Flickr RSS feed URL.

If you don't know how to find your Feed URL, then go to "Your Photostream", scroll down to "Subscribe to <<your name>>'s photostream and copy the geoFeed URL. After that edit the get_item_quantity() function and set how many photos you want displayed.

If you want to restyle the way it displays the gallery, change the class="your-image-class" to whatever you want and then add it to your style.css and modifiy it the way you like it.

That's all. And, as always, feedback is highly appreciated !

with the helop of woorkup

Leave a Reply