I’ve wanted to write a tutorial for quite some time now, and APIs have always been a particular interest of mine. So with my wife’s recent foray into photography, I decided a Flickr tutorial would be first cab off the rank! Using RSS, Flickr and jQuery all together was pretty fun too.
Ok, so we’re going to be touching on a number of technologies for this tutorial. We’ll be using
an RSS feed from Flickr, a bit of PHP, and some jQuery to make things nice and interactive! We’ll
use SimplePie to handle the RSS feed, as it
makes life much easier, and can be used in any other projects where RSS feeds are involved.
Step 1
Create a file called “index.php”, and start it out with a fairly basic HTML structure to house
the various components of our Flickr feed.
<body>
<div class="page-wrapper">
<div class="header">
<h1></h1>
</div>
<div class="album-wrapper">
</div>
<div class="footer">
</div>
</div>
</body>
Pretty standard stuff, note that we’ve added classes for the header and footer, but more
importantly, the album-wrapper. This is the div where we will output all the images that come in
from our Flickr feed.
Step 2
Make two new folders called “includes” and “cache”, then download href="http://simpliepie.org/" target="_blank">SimplePie and copy it in to the “includes” folder. SimplePie cleverly stores a cached version of your Flickr feed locally to help speed up future visits. Note: If you’re not doing this on Windows, don’t forget to make sure the “cache” folder is writeable. Inserting this code into the very top of your “index.php” file gives us access to the SimplePie library to handle the RSS feed for us. Also, the second and third lines create a new feed object based on the RSS URL for your Flickr feed. Now we can start littering our HTML with snippets of PHP to output information from our Flickr feed. Some of the key function SimplePie provides are: Each item returned by get_items() also has it’s own get_title() etc. to retrieve it’s various elements. For a full list of the functions available to SimplePie, check out the href="http://simplepie.org/wiki/reference/start" targt="_blank">SimplePie documentation. So the first functions we’ll call in our script will be the title and heading: Before we can begin looping through the photos in the feed, we need to write two short functions. The first one locates the image tag within the description of a photo in the RSS feed. You can write this function between the existing PHP tags at the top of the script. The second function allows you to select the size of the image to retrieve from Flickr, but adjusting the filename in a image tag. This function should also be placed between the existing PHP tags at the top of the script. Now we can loop through the photos in the RSS feed, and output them. We will use a for loop to go over each item in the feed. To explain this bit of code, as we loop through we output a new div that we can style later. Inside each div, we use the functions we wrote previously to get a particular image size (I chose square for ease of styling). We’re also outputting the title of each photo before outputting the photo itself, and the date beneath each photo. Now it’s time to give the album some style! So firstly to give some basic structure to the base HTML structure, I’ll set some fonts, widths, margins etc. Also a little style to sort the alignment of the Flickr feed’s icon image. Don’t forget to link your stylesheet file in the head section of your HTML first of all. Then insert these CSS rules into your “style.css” file: Then some style to be applied to each of the photo divs: Now to add a bit of interactivity, we’ll bring in some jQuery. I think it’d be nice to have a hover effect, and the ability to click an image and see a larger version. Include the jQuery script file, which you can get the latest version of from target="_blank">jquery.com way. The first bit of jQuery to add into your “script.js” file, is a $(document).ready() to handle everything you want jQuery to do, after the document has loaded. This will fade each div with the class “.photo” to 50% as soon as the document is fully loaded and ready. Next we’ll make the images light up when the mouse hovers over them. These extra 5 lines tell jQuery to make each photo, on hover, fade to 100%, and when the mouse goes off again, fade back to 50%. (Thanks to Mike Schneider and Simon in the comments for some It’d be nice to make the thumbnails clickable, so you can view a larger version of the images. To do this, we’ll use Thickbox, built on jQuery. Download Thickbox, and then include it in the head of your “index.php” file, as shown above. Once they’re included, edit the following lines to work out the URL to a full image, and add in a link with a class of ‘thickbox’. This activates Thickbox, and it should just work, I’ve also added title which provides a caption. That’s it! You should now have a script that displays a Flickr feed for you, and allows you to click them and see a larger version. Enjoy!
<?php
require_once('includes/simplepie.inc');
$feed = new SimplePie('http://api.flickr.com/services/feeds/photos_public.gne?
id=28211532@N07&lang=en-us&format=rss_200');
$feed->handle_content_type();
?>
Step 3
$feed->get_title(); // Returns the title of the RSS feed
$feed->get_image_url(); // Returns the image for the feed, in the case of Flickr, the user's
avatar
$feed->get_items(); // Returns an array of the items in the feed, in the case of Flickr, the
photos with their descriptions etc.
<title>Flickr Album: <?php echo $feed->get_title(); ?></title>
<h1><img class="feedIcon" src="<?php echo $feed->get_image_url(); ?>" border="0"
alt="<?php echo $feed->get_title(); ?>" /> <?php echo $feed->get_title();
?></h1>
Step 4
function image_from_description($data) {
preg_match_all('/<img src="([^"]*)"([^>]*)>/i', $data, $matches);
return $matches[1][0];
}
function select_image($img, $size) {
$img = explode('/', $img);
$filename = array_pop($img);
// The sizes listed here are the ones Flickr provides by default. Pass the array index in the
$size variable to selct one.
// 0 for square, 1 for thumb, 2 for small, etc.
$s = array(
'_s.', // square
'_t.', // thumb
'_m.', // small
'.', // medium
'_b.' // large
);
$img[] = preg_replace('/(_(s|t|m|b))?\./i', $s[$size], $filename);
return implode('/', $img);
}
Step 5
<div class="album-wrapper">
<?php foreach ($feed->get_items() as $item): ?>
<div class="photo">
<?php
if ($enclosure = $item->get_enclosure()) {
echo '<h2>' . $enclosure->get_title() . '</h2>'."\n";
$img = image_from_description($item->get_description());
$thumb_url = select_image($img, 0);
echo '<img id="photo_' . $i . '" src="' . $thumb_url . '" />'."\n";
}
?>
<p><small><?php echo $item->get_date('j F Y | g:i a'); ?
></small></p>
</div>
<?php endforeach; ?>
</div>
Step 6
<link rel="stylesheet" type="text/css" href="style.css" />
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
background-color: #222;
width: 960px;
margin: 0;
font-size: 0.75em;
}
.page-wrapper {
background-color: #444;
text-align: left;
width: 960px;
margin: 0 auto;
padding: 20px;
position: relative;
top: 30px;
left: 30px;
overflow: auto;
}
.page-wrapper h1 {
font-size: 1.8em;
}
.page-wrapper h2 {
font-size: 1.2em;
color: #222;
}
.page-wrapper .feedIcon {
vertical-align: middle;
padding: 0 10px;
}
.album-wrapper .photo {
width: 200px;
background-color: #666;
text-align: center;
vertical-align: middle;
float: left;
padding: 10px;
margin: 10px;
}
.album-wrapper .photo img {
border: none;
}
.album-wrapper .photo small {
color: #aaa;
font-size: 0.9em;
}
Step 7
<script type="text/javascript" src="jquery-1.3.1.min.js"></script>
<script type="text/javascript" src="script.js"></script>
Step 8
$(document).ready(function() {
$('.photo').fadeTo(0, 0.5);
}
$(document).ready(function() {
$('.photo').fadeTo(0, 0.5);
$('.photo').hover(function(e) {
$(this).stop().fadeTo('slow', 1.0);
}, function(e) {
$(this).stop().fadeTo('slow', 0.5);
});
});
changes here)Step 9
<link rel="stylesheet" type="text/css" href="thickbox.css" />
<script type="text/javascript" src="thickbox-compressed.js"></script>
$full_url = photo($url, 'full');
echo '<a href="' . $full_url . '" class="thickbox" title="' . $enclosure->get_title() .
'"><img src="' . $thumb_url . '" alt="' . $enclosure->get_title() . '" />
</a>'."\n";
Complete!
Enjoyed this Post?
Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!
Pingback: You are now listed on FAQPAL
Pingback: Extending SimplePie to Parse Unique RSS Feeds « Feed Reader (Beta)
Pingback: Flickr Gallery in SMF Tinyportal Page using Simplepie | aiwazz thinktank
Pingback: Creating a Slick Flickr Gallery with SimplePie « I’m still waiting for. To be the one I’m waiting for.
Pingback: zanshin.net » Flickr Photo Gallery » Blog Archive
Pingback: PHP Thumbnails van Flickr set displayen? - 9lives
Pingback: 14 Tutorials to Get You into SimplePie - The Designed
Pingback: links for 2009-10-25 :: Dynamick
Pingback: Creating a Slick Flickr Gallery with SimplePie | Abram John A. Limpin