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 < and > 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 🙂
How can I get this to work for Picasa?
Flickr is really a great way to share photos on the net, the photo resizing feature of Flickr is what i like,:`
Greg, it can be done in the same way for Picasa. Look at the difference between the URL for the thumbnail and the main image, and adjust the php code to change one to another. The thumbnail will have a string like “s288” towards the end. The main image will have something like “s512” or “s1024”. You’ve just got to replace one with the other. Let me know if you need a hand.
Hmm is anyone else experiencing problems with the images on this
blog loading? I’m trying to figure out if its a problem on my end or if it’s the blog. Any responses would be greatly appreciated.
Hi PC
Thanks for bringing this to my attention.
I’ve fixed the problem.
I had some scripts in my header that got lost when I upgraded my theme. I had to put them back in the new header.
Perhaps one day I’ll make a plugin from all this stuff to save the hassle of manually adding back the scripts when I upgrade the theme.
Neil