Build Your Own RSS Thumbnail Gallery

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. Snap Shots via Snap.com — You’ve probably seen this annoying little tool in action already. Ordinarily it pulls down snapshots of URLs as you’re hovering over a link. But I wanted my images displayed on the page with no user action required. So 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 Snap 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 feed.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, create two new subfolders: /uploads/ and /cache/. Set their permissions so they are readable, writable and executable for all.

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 later in the summer. If for some reason the package will not install, give me some details about your host server.

Popularity: 2% [?]