To help make it as easy as possible for family members to see new pictures from the Collinge household I decided to set them up with Netvibes homepages, each containing a widget to display the latest photos from Picasa Web Albums. Picasa Web Albums provide an RSS feed that you can subscribe to which is a good start.. but I couldn’t find a way to display them just as I wanted.
The spec is to display the latest images, over as many columns as the user specifies.. and have the images resize to fit the width of the widget. They pretty much get displayed in a grid style layout.
Step 1) Get the URL for Picasa Web Albums (or whatever service you’re using) and make sure it works. The first gotcha here was that Picasa Web Albums has a limitation which means that images > 800px will not be embedded. They’ll result in a 404 File Not Found. To get around this, append ?imgmax=800 to the RSS’s URL.
Step 2) The feed for Picasa Web Albums is sorted in ascending date order.. I wanted it in descending date order so that the latest photos show first. To do this I chose to re-format the feed using Yahoo Pipes.. it’s a way of tinkering with a feed an invaluable for times when you need to do something simple like this.
Picasa gives you an Atom-based feed which seems to be causing a few issues with my code.. it basically makes the images go into a different node from the one I expected.. and I’ve been unable to work out exactly where it’s putting them. The best way around this is to simply run the RSS feed through a simple Yahoo Pipe; I’ve published one which sorts the images in date descending order. Use that and copy the RSS feed it generates.
Step 3) Create a new widget using UWA so that it works with Netvibes and iGoogle. This is relatively simple.. just requiring a bit of coding to make it happen. As usual I’ve tried to make the code as generic as possible & driven by user preferences. The user can specify which node in the JSON object (returned from the RSS feed) contains the image to display.. useful when dealing with non-standard image enclosures. It will default to the first enclosure at item.enclosures[0].url
The finished widget is published here.
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:widget="http://www.netvibes.com/ns/" >
<head>
<title>Multi-Image Display</title>
<meta name="author" content="Matt Collinge" />
<meta name="email" content="do-not-email@mt2009.com" />
<meta name="description" content="Display multiple images from an RSS feed. Useful for feeds like those from Picasa Web Albums" />
<meta name="version" content="1.0" />
<meta name="website" content="http://eco.netvibes.com/widgets/298784/multi-image-display" />
<meta name="keywords" content="image, rss, picasa, web album, picture, multiple, display, grid" />
<meta name="autoRefresh" content="15" />
<meta name="apiVersion" content="1.2" />
<link rel="stylesheet" type="text/css" href="http://www.netvibes.com/themes/uwa/style.css" />
<script type="text/javascript" src="http://www.netvibes.com/js/UWA/load.js.php?env=Standalone"></script>
<style type="text/css">
.imageDisplay {
margin:0;
padding:0;
}
</style>
<widget:preferences>
<preference name="title" type="text" label="Title" defaultValue="Multi-Image Display" />
<preference name="url" type="text" label="RSS Feed" defaultValue="" />
<preference name="limit" type="range" label="Number of images to display" defaultValue="10" step="1" min="1" max="50" />
<preference name="columns" type="range" label="Number of columns to use" defaultValue="2" step="1" min="1" max="8" />
<preference name="imagenode" type="text" label="Node in RSS Feed Containing Image" defaultValue="item.enclosures[0].url" />
</widget:preferences>
<script>
var BasicRSSReader = {};
BasicRSSReader.feed = false;
widget.onLoad = function() {
if (widget.getValue('url') === '' || widget.getValue('url') == undefined) {
widget.setBody('Please edit the preferences and enter the URL of the RSS feed where you want to take images from.<br><br>. Use a feed re-formatter like Yahoo Pipes if you need to tinker with a 3rd party RSS feed.');
} else {
widget.body.addClassName('imageDisplay');
widget.setTitle(widget.getValue('title'));
UWA.Data.getFeed(widget.getValue('url'), BasicRSSReader.display);
}
}
BasicRSSReader.display = function(feed) {
var bodyHTML = '';
if (feed) BasicRSSReader.feed = feed;
var imageWidth = widget.body.getDimensions().width / widget.getValue('columns');
var imageCount = 0;
var columnCount = 0;
bodyHTML += '<table border=0 cellpadding=0 cellspacing=0>';
for(var i=0; i < BasicRSSReader.feed.items.length; i++) {
var item = BasicRSSReader.feed.items[i];
if (imageCount >= widget.getValue('limit')) {
bodyHTML += '</tr>';
break;
}
if (columnCount == 0) {
bodyHTML += '<tr>';
}
bodyHTML += '<td><a href="' + item.link + '"><img src="' + eval(widget.getValue('imagenode')) + '" width="' + imageWidth + '" /></a></td>';
columnCount++;
if (columnCount == widget.getValue('columns')) {
columnCount = 0;
bodyHTML += '</tr>';
}
imageCount++;
}
bodyHTML += '</table>';
if (imageCount==0) bodyHTML = 'Unable to load feed.';
widget.setBody(bodyHTML);
}
</script>
</head>
<body>
<p>Loading...</p>
</body>
</html>
Endpoint 101 