Build Your Own RSS Thumbnail Gallery, Part II

If you’re keeping score, the last version of this project came to the attention of a higher-up at Snap.com who had problems with the way Snap’s functionality was being cannibalized. So I took it down, but in researching better ways to generate screenshots I stumbled upon a service called WebSnapr which accomplishes exactly what I needed to bring the project back to life.

Like Snap, WebSnapr generates screenshots, but unlike Snap it does not attach a lengthy Terms agreement. Granted, WebSnapr has not yet accumulated the sheer volume of screenshots that has Snap.com, and they tend to retrieve a little more slowly. But less hacks are required, implementation is easier and I can rest easy knowing it’s an open source project which encourages developers to experiment rather than penalizing them for it.

I will now reprint the original tutorial with a few changes made, re: Snap vs. WebSnapr:

—————

Back in May, I put together a little tool dubbed Screenshots in Syndication (SiS). The purpose was to have my own personal inspiration gallery for moments of designer’s block or for when clients needed help deciding on a design genre: “corporate”, “ultra-clean”, “ornate”, and so forth. Places like CSSDrive, WebCreme and DailySlurp are great for this purpose ordinarily, but I wanted my own gallery adapted to my own tastes.

I didn’t have much time to explain the technology back in May when it was originally released for download, but I got a handful of emails from people curious about the usefulness of SiS. I’ll try to cover that now in more detail.

The live demo

A demo of the final product looks like this. Check out the links in the right-hand navigation: “Inspiration”, “WebDesign” and “Flash”. Each one is a del.icio.us tag I’ve subscribed to via RSS, but they could be feeds from any RSS-enabled site of your choice. The SiS tool simply browses the feed, takes screenshots of each link contained therein and displays them all on the page as thumbnails.

So using SiS to subscribe to a feed like this one gives me a nice visual of what the del.icio.us community considers inspirational. Even better, if you’re a Firefox user with the del.icio.us extension installed, you can add items to your gallery with one-click bookmarking and tagging.

What Technologies are used?

1. WebSnapr — This is a free service which takes a snapshot of every URI requested. To weave this functionality into the RSS, I got my friend to write some…
2. Custom PHP — I won’t pretend to understand every line of what my friend wrote for this project, but it’s essentially the magic glue holding everything together. It grabs the WebSnapr URLs, determines info about the mimetype (image/jpg) and pulls the target images onto the page. But how is the RSS handled?
3. SimplePie — This is an excellent XML-parsing tool that looks at my feeds and scrapes vital info like titles, descriptions, and in our case, screenshots.

What’s the code look like?

Every feed (ex: “Flash”) requires that you create a separate page (ex: “flash.php”). At the tippy top of the document — that is, above even the doctype — is PHP which looks like this:

<?php
  require('php/simplepie.inc');
  $feed = new SimplePie();
  $feed->feed_url('http://del.icio.us/tags/flash');
  $feed->cache_location('cache/');
  echo $feed->get_image_exist();
  $feed->init();
$feed->handle_content_type();
  ?>

For your part, all you’ll need to edit is the feed_url bit, and remember, you can pull content and screenshots from any RSS-enabled site out there.

In addition to the chunk of PHP above, each page will reference a file called feeds.php. This is what pulls the thumbnails and titles you see in the left column of your gallery:

<?php if ($feed->data) { ?>
<h1><?php echo $feed->get_feed_title(); ?></h1>
 <?php
  $max = $feed->get_item_quantity(500);
  for ($x = 0; $x < $max; $x++) {
  $item = $feed->get_item($x);
  $url = $item->get_permalink();
  //$clean_url = preg_replace("/http:\/\/|\/$/", "", $url);
  ?>
  <a href="<?php echo $url; ?>"><img src="thumbnail.php?show_img=1&url=<?php echo urlencode($url); ?>" id="thumbimg" /></a>
  <h2><a href="<?php echo $url; ?>"><?php echo $item->get_title(); ?></a></h2>
  <?php } ?>
  <?php } ?>

How do I set up my own gallery?

Unzip the package and dump the contents on your server in a folder named something like /screenshots/. Inside that folder is a another folder called /uploads/. You’ll need its permissions set to group Readable, Writable and Executable (0777).

Download

That’s it. Feel free to scrap the default feeds and subscribe to whatever sites you wish.

the Next step

I actually browse my own inspiration gallery a few times a week at this point. It’s been a great visual aid to keep my favorite sites in check. “What was that one site with the green masthead?”, “Where did I see that one swooshy logo?”. Text-based bookmarking is one thing, but visual aids are vital if you surf thousands of sites a month.

If you choose to install SiS, let me know what other features you’d like to see. I’ll be working on a v2.0 sometime this Fall. If for some reason the package will not install, give me some details about your host server.

Popularity: 1% [?]