Flickr Photo Gallery

March 18, 2009

Recently Sibylle asked me if we could add a photo gallery to her piano studio web site, so that she might be able to display pictures there. I started to look at various examples but wasn't really excited about any of the templates I had found, until I read the Create a Slick Flickr Gallery with SimplePIE on Nettuts.com.

The tutorial shows how to use the SimplePIE RSS reader to dynamically pull pictures from your Flickr account and make a nice gallery page on your website. Want new pictures on your website? Just add new pictures to the collection or set you used as the source for the RSS feed.

I was able to get Sibylle's photographs page working in relatively little time. The one stumbling block (once I got the example page provided working with her style sheet) was dealing with pictures of varying sizes. The RSS feed from Flickr contains links to all the available image sizes for each image in the set. The gallery page uses the thumbnail size image for display; when that image is clicked the large image size is shown in a modal window. Not all of the images in the set had a large size, so clicking on their thumbnail resulted in an "image not available" message from Flickr.

Since I had the URLs for all the image sizes, I decided to see if I could test the results for the large image URL, and if it wasn't available, substitute the URL for the medium image size. The gallery page uses PHP to manipulate the images, so I did come Google searches and discovered the curl function. Using that function I was able to capture the HTTP response header from Flickr when the large image URL was used as the request. Parsing that response using the string position function, strpos, I was able to determine if the image existed or was unavailable.

The php code that does this image pre-fetch is shown below. $fullurl is set to the large image size URL by the time this code is reached. $notavailable is set to the image not available URL from Flickr, or http://l.yimg.com/g/images/photounavailable.gif. If strpos returns a value greater than zero the image isn't there, and we set $fullurl to be the medium sized URL from the $img collection.

// make sure the full size image exists
$timeout = 2;
$ch = curl_init();
// set the URL we are interested in
curl_setopt($ch, CURLOPT_URL, $full_url);
// bring back the HEADER
curl_setopt($ch, CURLOPT_HEADER, 1);
// and just the HEADER please
curl_setopt($ch, CURLOPT_NOBODY, 1);
// don't show results in browswer
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
// time out after the value set above
curl_setopt($ch, CURLOPT_CONNECTTIMEOUT, $timeout);
$output = curl_exec($ch);
curl_close($ch);
// test the result
if (strpos($output,$not_available) > 0) {
    $full_url = select_image($img, 3);
}

Now her gallery page automatically adjusts the modal window to display the large image if it is available, or the medium sized image if it is not. A slick Flickr gallery made even slicker.

If you are interested it the full source listing of the page, please leave a comment with a working email address and I'll be happy to send it to you.

Author's profile picture

Mark H. Nichols

I am a husband, cellist, code prole, nerd, technologist, and all around good guy living and working in fly-over country. You should follow me on Twitter.