Inserting A Picture Into Your WordPress RSS 2.0 Feed

|

I use NetVibes for my browser home page and RSS feed reader and I’ve noticed over time that some of the feeds that I subscribe to have pictures embedded within their feed summary. Why doesn’t my feed have a picture in it? I thought that this was really neat because it gives you a quick visual queue as to what the article may be about. It is also eye-catching so that among 5 or so feeds on a page you are instantly drawn to the one with pictures. So how can you get a picture into your feed?

RSS 2.0 Specification

The RSS 2.0 specification has an <enclosure> element available at the <item> level. This element can specify various types of media that you want attached to your feed item. In our case we want that to be an image. The element should look something like this:

<enclosure url=”[URL To Media File]” length=”[Size Of Media File]” type=”[Mime Type Of Media File]” />

All three attributes are required:

  1. url – This tells the feed reader where the media file is located
  2. length – This is how big the media file is in bytes
  3. type – This is the standard MIME type of the file

WordPress Action Hooks

So, how do I get this information into my RSS 2.0 feed? Luckily the good folks at WordPress have included a little action hook in the file that generates your feed. So all we have to do is write a function and hook the action! For my purposes I was writing a new theme so I just included all of this in my functions.php file. You could modify the functions.php file of your existing theme or this could actually be made into a plugin.

First we have the function that does the heavy lifting. The first thing I do in my function is get the image URL. For my purposes I store the image URL in a custom field attached to each post. I also include a default image inside my theme in case I forget to supply an image for a post.

global $post;

// Get Highlight Image
$hImage = get_post_meta($post->ID, 'Highlight Picture', true);
if(strlen($hImage) == 0) {
  $hImage = get_bloginfo('template_url') . "/images/highlight_default.png";
}

Next I calculate the MIME type of the file. Now there are some really cool functions out there that actually look inside the file to get to the real MIME type. I don’t really need to be that sophisticated since I’m in control of the image so I’ll just use the file extension. I’m supporting PNG, GIF and JPEG (default) image formats.

// Get MIME Type
$pInfo = pathinfo($hImage);
$ext = $pInfo['extension'];
if($ext == 'png') {
  $sMime = 'image/png';
}
else if($ext == 'gif') {
  $sMime = 'image/gif';
}
else {
  $sMime = 'image/jpeg';
}

The final piece of information we need is the filesize. That is a quick and simple function call if you have the absolute path to the file. I found a good function to get that information on the PHP site.

// Get file size
$iSize = filesize(url2filepath($hImage));

Now just echo out the enclosure element.

echo '' . "\n";

The action hook looks like this and should come outside of the function you define. The first argument is the action hook in WordPress. The second argument is the name of our function.

add_action('rss2_item', 'action_rss2_image');

Putting it all together we have.

function action_rss2_image()
{
  global $post;

  // Get Highlight Image
  $hImage = get_post_meta($post->ID, 'Highlight Picture', true);
  if(strlen($hImage) == 0) {
    $hImage = get_bloginfo('template_url') . "/images/highlight_default.png";
  }

  // Get MIME Type
  $pInfo = pathinfo($hImage);
  $ext = $pInfo['extension'];
  if($ext == 'png') {
    $sMime = 'image/png';
  }
  else if($ext == 'gif') {
    $sMime = 'image/gif';
  }
  else {
    $sMime = 'image/jpeg';
  }

  // Get file size
  $iSize = filesize(url2filepath($hImage));

  echo '' . "\n";
}
add_action('rss2_item', 'action_rss2_image');

Conclusion

This article describes part of the reason I love WordPress so much. They were so thoughtful to leave so many useful and meaningful hooks into the platform and that makes my job as a web developer that much easier. Oh and by the way, the above trick won’t work on every RSS reader. That is implementation specific as to whether the reader decides to display the image or not. All you can do is server it up to them.