Create a Neat Flickr Gallery with SimplePie

Create a Slick Flickr Gallery with SimplePie

on Feb 25th 2009 with 69 comments

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.




final product

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.

<?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();
?>

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.

Step 3

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:

$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.

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:

<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

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.

function image_from_description($data) {
    preg_match_all('/<img src="([^"]*)"([^>]*)>/i', $data, $matches);
    return $matches[1][0];
}

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.

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

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.

<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>

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.

Step 6

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.

<link rel="stylesheet" type="text/css" href="style.css" />

Then insert these CSS rules into your “style.css” file:

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;
}

Then some style to be applied to each of the photo divs:

.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

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, also make yourself a “script.js” and include that in the same

way.

<script type="text/javascript" src="jquery-1.3.1.min.js"></script>
<script type="text/javascript" src="script.js"></script>

Step 8

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.

$(document).ready(function() {
    $('.photo').fadeTo(0, 0.5);
}

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.

$(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);
    });
});

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
changes here)

Step 9

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.

<link rel="stylesheet" type="text/css" href="thickbox.css" />

<script type="text/javascript" src="thickbox-compressed.js"></script>

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.

$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!

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!

  • Subscribe to the NETTUTS RSS Feed for more daily web development tuts and articles.


 
Enjoyed this Post?

Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!

By

Rollover to read this author's bio or click through to see a full list of posts by this author.

Japheth Thomson is currently the Technical Director for a design, development and training studio in Australia, running a small team of developers. Japheth has been developing websites for approximately 10 years, and specialises in PHP, MySQL, HTML, CSS and Javascript. He also enjoys working with WordPress and APIs, and does the occassional bit of training.  

Plus Premium
 
 
Add Comment

Discussion 69 Comments

Comment Page 2 of 2 1 2
  1. LuK says:
    August 3, 2009 at 9:17 am

    Thank you very much for the tutorial, just implemented it in an actual project where I mix together three news-feeds (state, national, international), I could get it done that the scroller shows the favicon of the original Website but this adds no functionality to it because it’s the same site that provides all three feeds, so the favicon is always the same and the user can’t see from which feed the post comes (wouldn’t it be practical to see if the news post is state-related, country-related or international-related?)…

    so I’m looking for a possibility to add either a custom favicon or a custom image, depending from which feed the post comes…

    for the image I use the feed-image like this:
    <img src=”get_image_url(); ?>” alt=”Feed Image” />

    now, instead of taking the feed image (which is also everytime the same and not the right size, so it gets blurred [is that the right word for an image that is out of proportions?=D]), I would like to add a custom image depending on the feed, but I don’t have that in dept knowledge of php =/, so maybe somebody in here knows how to do it…

    I would place the 3 custom images in some folder on the server.

    Reply
  2. Mullikin says:
    October 12, 2009 at 10:26 pm

    Excellent post looks like a neat way to get and display photos.

    Hose Reels

    Reply
  3. Dan says:
    October 16, 2009 at 1:17 am

    This is a great script, thanks for your time in creating it.
    I have implemented it and it works fine, however for a couple of photos i get the error message ”
    this photo is currently unavailable ” when the thumbnail is clicked on and no larger pic is shown, yet the thumbnail displays fine.

    I have a found a possible solution – does anyone know how to implement this into the script?

    Someone on the Flickr forum presented the answer:
    “I’m not 100% sure but I think it’s a combination of some slightly
    dodgy scripting and the fact that you’ve uploaded your photos is a low
    resolution. Flickr makes several sizes (square, thumbnail, small,
    medium and large) of your photos available with predictable URLs, and
    also makes the original size available with a different URL.

    The gallery script you’re using seems to be generating what would be
    the predictable URL for you ‘large’ size, rather than actually
    querying Flickr for the available sizes. That doesn’t work on your
    account since your ‘large’ size is actually your ‘original’, so
    nothing exists at the predictable URL for large – you’ve only actually
    got square, thumbnail, small, medium and original.

    You can probably fix it by either modifying the script so that it
    checks with Flickr for the URL of the largest available size for each
    individual photo, or by uploading your photos in a higher resolution
    so that Flickr does generate a ‘large’ size.”

    Reply
    • Milo says:
      November 3, 2009 at 10:02 am

      The reason for this is that Flickr doesn’t actually create a Large size if the image is too small (in my case under 1300px wide).

      The only workaround I found so far, was to switch

      ‘.’, // medium
      ‘_b.’, // large

      to

      ‘_b.’, // medium
      ‘.’, // large

      …however, that limits you to displating only medium sized versions. Instead, I just uploaded big enough pictures to Flickr and it works fine.

      I would like a proper solution though.

      Reply
  4. Jacob Louis says:
    October 17, 2009 at 1:53 pm

    This is awesome! I am so happy to find an alternative to flash for creating a flickr gallery my clients can update themselves. Thank you!

    I have a question though…

    When they uploaded a new photo it didn’t show up right away. Is there any way to make it update simple pie automatically without deleting the cache file?

    Reply
  5. Jacob Louis says:
    October 17, 2009 at 4:10 pm

    Does anybody know how I would add fancy zoom to this gallery?

    Reply
  6. John says:
    October 21, 2009 at 3:25 am

    Is it difficult to implement this into WordPress? I tried three times already and failed. :(

    I’m assuming I’d have to use WordPress’ built-in jQuery library…

    Anyone care to shine some light?

    Reply
  7. Dan says:
    November 4, 2009 at 1:41 pm

    Great Scirpt, I have used it on a few client sites. How would I go about implementing pagination via php or JQuery?

    Reply
  8. Mark says:
    February 21, 2010 at 10:12 am

    Hi,

    Thanks for this awesome tutorial. Ive got it all setup and working but ive got a really annoying problem I cant fix. Its only returning a maximum of 20 image results. Is there a way of configuring it so it will return as many images as there is in the set?

    Many thanks,

    Reply
  9. Blu says:
    June 24, 2010 at 4:59 pm

    @John , The functions have tu be in the function.php of wordpress and everything else in the loop where you want your photos to appear. So far so good…

    Now I need some help.

    I’m trying to get the description of the image as well as the image and I just can’t do it….I’m a php nwoob so any help is appreciated I thought of doing something like

    function text_from_description($data) {
    preg_match_all(‘/’, $data, $matches);
    return $matches[1][3];
    }

    But I’m kindda lost.

    Anyone?

    Reply
  10. louis says:
    December 9, 2010 at 6:39 pm

    its great!! any way of adding a prev and next image button? how would i go about doing that?

    Reply
  11. Ruben says:
    January 14, 2011 at 9:30 am

    Simply does not work at all.

    Reply
  12. yan says:
    February 10, 2011 at 8:53 am

    Thanks i used your exemple for my photo gallery at http://www.populee.com work without any issue ;D
    Congrats !

    yan

    Reply
Comment Page 2 of 2 1 2

Add a Comment

To add a code snippet to your comment, please wrap your code like so: <pre name="code" class="html">YOUR CODE</pre>. You can replace the class name with "js," "css," "sql," or "php." If there are any "<" or ">" within your code, please search and replace them with: &lt; and &gt; respectively.