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

The old blog was at http://techmusings.blogspot.com

I’m still trying to come to grips with WordPress.  Somethings in Blogger were much easier (such as slideshows), but I think WordPress looks much nicer.

Please let me know what you think, and if you’ve got some suggestions, I’d really like to hear them.

Rather that re-invent the wheel, I thought I’d upload a few links that explain what it’s all about.

1. The official Twitter Help Resources / Getting Started

2. How to Use Twitter Without Twitter Owning You – 5 Tips (Tim Ferriss)

3. How to Use Twitter (Darcy Logan, includes great short video)

4. Newbie’s guide to Twitter

5. Twitter Fan Wiki (Sort of like Wikipedia for Twitter)

6 HashTags

Actually HashTags deserve a post all of their own. I’ll post something about that later.

I hope these links help. The bottom line for Twitter I think is to follow people who have something interesting to say. Don’t just follow anyone, because then the interesting comments will get drowned out with “noise”.

And the converse is that it’s important make your posts useful. Say stuff that will be interesting to people who follow you. Here’s some examples of people who post some really great twitter articles:

@Astro_Mike An Austronoaut tweeting from orbit
@tferriss Author and blogger on lifestyle design
@612brisbaneMy local ABC radio station

Oh, and if you’re interested, I’m on twitter as @NeilEnnis

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.

So it’s a bit of a mixed bag.

Which is fine by me. My attention gets pulled all over the place, and I get interested in lots of different things. A bit like Homer Simpson walking through a shopping mall

But it could make life hard for my readers, so I recently added a little Javascript widget that makes the blog change its appearance depending on what interests you. Coupled with judicious use of blogger labels, it works wonders.

It’s the same blog, but it changes shape depending on how you get to it.

Have a look at these two different links to see what I mean.

First if you’re interested in Postcards go to the blog via the URL: http://neilius.blogspot.com/search/label/Postcards?pcd=1.

Second if you’re interested in Ten Pound Poms go to the blog via the URL: http://neilius.blogspot.com/search/label/Ten%20Pound%20Poms?tpp=1.

(Hint for the uninitiated “Ten Pound Poms” were migrants who came to Australia from Britain between 1950 and 1971).

There are two cool bits to this.

The first is that you get a totally different set of links at the top of the blog depending on how you view it. I do this by adding some query string parameters to the URL. (The “?pcd=1” or “?tpp=1” parts of the URL).

Secondly, using labels in the URL lets me control what articles appear when you visit. (That’s what the “/search/label/…” bit of the URL is all about).

You might think using query strings on your URL is a messy way to get to your blog. But it’s really easy to set up a domain and (using something like ZoneEdit’s “webforward”) point that domain to a more complex URL.

For example, http://TenPoundPoms.com and http://Postcards.NeilEnnis.com both point to the same blog, but I’ve used ZoneEdit to add different parameters to the URL query string.

A small Javascript widget at the top of the blog looks at the query string, and decides what sort of links to display. Basically it’s saying “If you’ve come here to look at postcards, I’ll show you some postcard links. But if you’re interested in Ten Pound Poms, then I’ll show you some different links instead.

Here’s the code. The Orange section is a javascript function to pull the query parameter out of a url. The Green section controls what gets displayed when people are interested in “Ten Pound Poms”. The Blue section is what gets displayed when people are interested in “Postcards”.

<script>
function gup( name ){ name = name.replace(/[\[]/,”\\\[“).replace(/[\]]/,”\\\]”); var regexS = “[\\?&]”+name+”=([^&#]*)”; var regex = new RegExp( regexS ); var results = regex.exec( window.location.href ); if( results == null ) return “”; else return results[1];}
</script>
<script>
var tpp_param = gup( ‘tpp’ );
var pcd_param = gup( ‘pcd’ );
if(window.location.href == ‘http://neilius.blogspot.com/search/label/Ten%20Pound%20Poms’)
      tpp_param = ‘1’;
if(window.location.href == ‘http://neilius.blogspot.com/search/label/Postcards’)
      pcd_param = ‘1’;
if(tpp_param == ‘1’)
{
      document.write(‘<div id=”tpp-info” class=”sidebar section”>’);
      document.write(‘<h2 class=”title”>Ten Pound Poms</h2>’);
      document.write(‘<a href=”http://neilius.blogspot.com/search/label/Ten%20Pound%20Poms?tpp=1″>Home</a> Ten Pound Poms | ‘);
      document.write(‘<a href=”http://neilius.blogspot.com/2008/07/about-tenpoundpomscom.html?tpp=1″>About</a> Ten Pound Poms | ‘);
      document.write(‘<a href=”http://neilius.blogspot.com/2008/08/links-for-ten-pound-poms.html?tpp=1″>Links</a> for Ten Pound Poms<br/>’);
      document.write(‘<a href=”http://neilius.blogspot.com/2008/08/migrant-ships.html?tpp=1″>Migrant Ships</a> – How we got here<br/>’);
      document.write(‘<a href=”http://neilius.blogspot.com”>Musings</a> – Back to the main blog’);
      document.write(‘</div>’);
}
else if(pcd_param == ‘1’)
{
      document.write(‘<div id=”pcd-info” class=”sidebar section”>’);
      document.write(‘<h2 class=”title”>My Postcards</h2>’);
      document.write(‘<a href=”http://neilius.blogspot.com/search/label/Postcards?pcd=1″>Home</a> – My Postcard Blog | ‘);
      document.write(‘<a href=”http://neilius.blogspot.com/2008/05/about-my-postcards.html?pcd=1″>About</a> My Postcards | ‘);
      document.write(‘My Postcrossing <a href=”http://www.postcrossing.com/user/Neilius” target=”_blank”>Profile</a><br/>’);
      document.write(‘<a href=”http://postcrossing.com” target=”_blank”>Postcrossing</a> – A great way to send and receive postcards<br/>’);
      document.write(‘<a href=”http://flickr.com/photos/magictyger/sets/72157604961465429/” target=”_blank”>Postcard Collection</a> at Flickr<br/>’);
      document.write(‘<a href=”http://neilius.blogspot.com”>Musings</a> – Back to the main blog’);
      document.write(‘</div>’);
}
</script>

What was also nice was the BlogThis! facility that let you convert the new BuzzNet entry into a Blog Entry here at Blogger.

After I upgraded to Blogger’s new gmail accounts, I was unable to use the BlogThis! facility at BuzzNet.

I’ve been stuffing around with this for ages, and every time I tried to get BuzzNet to talk to Blogger I got errors, and it wouldn’t retrieve a list of Blogs.

Eventually I gave up in disgust and tried Flickr.Com.

It works! Perfectly! Easily!

I created a new Flickr account, told it that I had a Blogger account, and it directed me to a page at Google which let me authorize Flickr to update my blog.

Now I can email a photo to a Flickr address, and it automatically creates a new Blog entry for me.

Next time I go on a cruise, I’m all set to upload my new photos every day without spending hours trying to figure out all the HTML references.

I am a very happy camper. If anyone else has this problem with Buzznet – forget them – just upgrade to Flickr and make your life easier.

Here’s a code snippet which reads the contents of one web site, does some changes it, and re-publishes it on your own web site.

Make sure strURL has the “http://” at the front of it, and be sure to take acount of the fact that any relative references in the source web will still be relative in the target web.

Dim objRequest As WebRequest = System.Net.HttpWebRequest.Create(strURL)

Dim objResponse As WebResponse = objRequest.GetResponse()

Dim sr As StreamReader = New StreamReader(objResponse.GetResponseStream())

Response.Write(Page, SomeTransformationOf(sr.ReadToEnd()))