You can see the latest version here: http://nbe.me/demo
The previous version is here: http://nbe.me/olddemov3
The previous previous version is here: http://nbe.me/olddemov2
You can download the source for the page here: http://nbe.me/demo/d.zip

There was a bug in the Google Ajax Slideshow code which meant that when you clicked on an image, instead of redirecting your browser to the source of the image, the slideshow would redirect your browser to the URL of the current page.

I’ve fixed that bug, thanks to some excellent advice from jgeerdes at https://groups.google.com/forum/#!msg/google-ajax-search-api/Ljom17bulZc/UYg2154Nwp0J

Enjoy!

In this article about using slideshows in wordpress I showed you how to embed slideshows in WordPress blog posts and sidebars using the Google Ajax Feed API.

I prefer to use this facility to pull in Image feeds from Flickr.

The problem with the images in these feeds is that they’re either too large or too small.

The MediaRSS specification has a <media:thumbnail> tag which lets you have a thumbnail image in your feed. That’s great, but the image size of the thumbnail is 75×75 pixels, which is useless for a nice looking slideshow. It ends up looking terribly blurry with no detail.

The Google Ajax Feeds API tries to get around this by letting you specify a “thumbnailTag” in the slideshow options object. Basically, you set this to “content” to tell the API to look for the image in the “content” section of the feed, rather than the <media:thumnail> section. This is also great, but the problem is that Flickr uses the LARGE (or even worse, ORIGINAL) image size in this section. So you get nice large detailed images in the feed, but they’re so large that they take ages to load, and your slideshow sits there for ages saying “Loading….” while it grabs the huge images and chews up your audiences bandwidth.

So I wrote a simple PHP screen scraping utility which grabs the Flickr feed, and changes the ImageUrl…_L.jpg to ImageUrl….M.jpg – in other words, it modifies the feed to include the medium size image rather than the large size.

Medium sized images are fine for slideshows, and they load quite quickly.

Here’s the PHP code:

<?php
date_default_timezone_set('UTC');
$uri="";
$first_var = "1";
foreach($_GET as $variable => $value)
{
if ($variable == 'uri')
{
$uri = $uri . $value;
}
else
{
$uri = $uri . "&" . $variable . "=" . $value;
}
}
header("Content-Type: application/xml; charset=ISO-8859-1");
$ch = curl_init() or die(curl_error());
curl_setopt($ch, CURLOPT_URL,$uri);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
$data1=curl_exec($ch) or die(curl_error());
$data1=str_replace("_s.jpg","_m.jpg",$data1);
$data1=str_replace('height="75"', "",$data1);
$data1=str_replace('width="75"', "",$data1);
echo $data1;
echo curl_error($ch);
curl_close($ch);
?>

Just save this in a file named FlickrRSS.php in the top folder of your wordpress directory. Then instead of using your flickr RSS feed, pass the feed as a query parameter to the PHP utility.

You’ll need to change the &lt; and &gt; tags in the file to < and >.

So if your feed URL was this:
http://api.flickr.com/services/feeds/photos_public.gne?id=YourFlickrUserNumberlang=en-us&format=rss_200

Use this instead
http://YourBlogUrl/FlickrRSS.php?uri=http://api.flickr.com/services/feeds/photos_public.gne?id=YourFlickrUserNumberlang=en-us&format=rss_200

This will change the <media:thumbnail> tag to point to the lager sized image, so your slideshows will load quickly, and look nicer

In this article about using slideshows in wordpress I showed you how to embed slideshows in WordPress blog posts and sidebars using the Google Ajax Feed API.

I prefer to use this facility to pull in Image feeds from Flickr.

The problem with the images in these feeds is that they’re either too large or too small.

The MediaRSS specification has a <media:thumbnail> tag which lets you have a thumbnail image in your feed. That’s great, but the image size of the thumbnail is 75×75 pixels, which is useless for a nice looking slideshow. It ends up looking terribly blurry with no detail.

The Google Ajax Feeds API tries to get around this by letting you specify a “thumbnailTag” in the slideshow options object. Basically, you set this to “content” to tell the API to look for the image in the “content” section of the feed, rather than the <media:thumnail> section. This is also great, but the problem is that Flickr uses the LARGE (or even worse, ORIGINAL) image size in this section. So you get nice large detailed images in the feed, but they’re so large that they take ages to load, and your slideshow sits there for ages saying “Loading….” while it grabs the huge images and chews up your audiences bandwidth.

So I wrote a simple PHP screen scraping utility which grabs the Flickr feed, and changes the ImageUrl…_L.jpg to ImageUrl….M.jpg – in other words, it modifies the feed to include the medium size image rather than the large size.

Medium sized images are fine for slideshows, and they load quite quickly.

Here’s the PHP code:

<?php
date_default_timezone_set('UTC');
$uri="";
$first_var = "1";
foreach($_GET as $variable => $value)
{
if ($variable == 'uri')
{
$uri = $uri . $value;
}
else
{
$uri = $uri . "&" . $variable . "=" . $value;
}
}
header("Content-Type: application/xml; charset=ISO-8859-1");
$ch = curl_init() or die(curl_error());
curl_setopt($ch, CURLOPT_URL,$uri);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
$data1=curl_exec($ch) or die(curl_error());
$data1=str_replace("_s.jpg","_m.jpg",$data1);
$data1=str_replace('height="75"', "",$data1);
$data1=str_replace('width="75"', "",$data1);
echo $data1;
echo curl_error($ch);
curl_close($ch);
?>

Just save this in a file named FlickrRSS.php in the top folder of your wordpress directory. Then instead of using your flickr RSS feed, pass the feed as a query parameter to the PHP utility.

You’ll need to change the &lt; and &gt; tags in the file to < and >.

So if your feed URL was this:
http://api.flickr.com/services/feeds/photos_public.gne?id=YourFlickrUserNumberlang=en-us&format=rss_200

Use this instead
http://YourBlogUrl/FlickrRSS.php?uri=http://api.flickr.com/services/feeds/photos_public.gne?id=YourFlickrUserNumberlang=en-us&format=rss_200

This will change the <media:thumbnail> tag to point to the lager sized image, so your slideshows will load quickly, and look nicer

To the right you can see a screen shot of three RSS feeds as seen on my iGoogle page. Two of them are good, one of them is not so good. Can you tell the difference?

They’re all really specific in nature. The first one just shows breaking news as reported by the ABC. The second shows recent posts made be people about cruises in Australia via the CruiseCritic.com message boards, and the third shows new posts to the “General Cruise Discussions” section of the OzCruiseCritics message boards.

With the ABC feed, whenever there’s a new story, it appears at the top of the list, pushing older stories off the bottom of the list.

Same with the Cruise Critic feed (the 2nd one). As a new post is received on a particular subject, that subject goes to the top of the list, pushing older ones off the bottom.

The problem with the third feed (“General Cruise Discussions”) is three-fold:

1. The name of the feed doesn’t do OzCruiseCritics justice. Anyone casting a quick glance at the feed doesn’t know where it’s from. With the first two feeds on this example, it’s quite plain who’s supplying them, but not the third feed.

2. The discussion topics are not formatted properly. The name of the feed is repeated in each of the item descriptions. E.g. you see “General Cruise Discussions :: Re: Queensland Cruise” and “General Cruise Discussions :: Re Snorkelling”. This is redundant. We already know what feed the item is coming from by looking at the title of the feed. Each of these items should have a more concise description. In this case they should be “Queensland Cruise” and “Snorkelling”.

3. You can’t see it from the picture, but take my word for it, whenver someone replies to a topic on the OzCruiseCritics feed, it generates a new feed item. So if I was to reply to the “Snorkelling” discussion, the feed would end up looking like this:

General Cruise Discussions :: RE: Snorkelling
General Cruise Discussions :: RE: Queensland Cruise
General Cruise Discussions :: RE: Snorkelling

I think that is crowded and difficult to read. What should really happen is that if an item is updated, it goes to the top of the list, and the old version of that item is removed from the list. So the feed should look like this:

Snorkelliung
Queensland Cruise

These suggestions might seem pedantic, but the whole aim of RSS is to get your content read. Whish means the info needs to pack as much punch as possible, with as little clutter as possible. The reward for this is that your message gets out, more people hear what you say, and you get more traffic to your site.

I didn’t realize it, but it already does this.

Just key in the search words, followed by site:yourdomain.com

For example, if you want a feed of all images of the planet Saturn from Nasa.gov, just type in:
Saturn site:nasa.gov

Or for a feed of all images of Antarctica from NationalGeographic.com, type in:
Antarctica site:nationalgeographic.com

How cool is that?

If you don’t know what an RSS feed is, perhaps you should read this, or this. I love RSS because it’s an easy way to let other people know what you’re doing, and to find out news that is of specific interest to you. This blog (like almost all others) has an RSS feed. Most news sites and picture sharing sites have RSS too. This makes it easy for you to show their content on your website, or to view their content in an RSS reader.

If you don’t know what MediaRSS is, you might want to read the specification. Basically, it’s for a special type of RSS feed that contains media, such as pictures, video, and music. These feeds are cool because pictures, videos and music are much more entertaining than plain text. You can do more with them. For example, there’s a slideshow on the right hand side of this blog that updates every few seconds with pictures of hi-tech gizmos. It’s based on a Media RSS feed.

My favourite Media RSS application is John’s Background Switcher. It updates the wallpaper on your computer desktop with pictures from a Media RSS feed.

My only problem with Media RSS is that the biggest source of images on the web (Google Images) doesn’t serve up their image searches as an RSS feed. Which means that while you can search for images at google, you can’t automatically feed them into a media RSS application.

That’s where ObSrv comes in. It converts a Google Image search into a Media RSS feed.

Here’s how:

1. Go to http://obsrv.com/
2. Type a few search words in the box. (Hint. If you want, do an advanced search in Google Images, and copy the Google Images URL into the box instead).
   
3. Press ENTER or click on the “GO” button.
4. ObSrv will give you the link to your feed.
   
5. Click on the link to open the feed in a new window, or copy the URL for the feed from the textbox.

Here’s some links to some applications that you can use with RSS Image Feeds:

John’s Background Switcher (Windows desktop background switcher)

Vuvox (Slideshows)

Feed Reader

RSS Popper

What’s Next?

I’ll be adding functionality to ObSrv as time permits. My next task is to get it to convert any webpage containing images into an RSS Image Feed.