Featured images in RSS feeds

Showing featured images in combaination wirh a summary in your RSS feed

Featured images in RSS feeds
February 10, 2011 Johan Peijnenburg
In Software

Introduction

Defining the content of the RSS feed of WordPress blogs is often forgotten. By default, WordPress gives you two options to show images in your blog’s RSS feed:

  1. Show the full article including all images … so basically the post without formatting.
  2. Show a summary without an image … being the excerpt of the post.

What I was after myself, was something in between: a summary of the post together with the featured image. Or, even better, the first image of a post, because I do not always want to upload a featured image.

WordPress plugin’s

There are actually a couple of WordPress plugins that can help out here. I tested a number of them like the RSS Image Feed plugin, the WP RSS Images plugin, the Feed Thumbnails plugin, as well as the MediaRSS with Post Thumbnail plugin. The first two plugin’s fetch the first image include in a post and include it in the feed. The last two fetch the featured image of the post.

These plugin’s all work. Unfortunately not in a way I wanted it. All these plugin’s include the image as and enclosure (attachment). The image shows up nicely when viewing the feed in a browser, however they don’t as soon as you view the feed through Google reader or something like the MobileRSS reader on the iPhone. In these case the only thing you see is a hyperlink for the image.

Hacking the theme a bit

In the end I ran into the following piece of custom code that can be included in the functions.php file of a WordPress theme:

function insertThumbnailRSS($content) {
global $post;
if ( has_post_thumbnail( $post->ID ) ){
$content = '' . get_the_post_thumbnail( $post->ID, 'thumbnail', array( 'alt' => get_the_title(), 'title' => get_the_title(), 'style' => 'float:right;' ) ) . '' . $content;
}
return $content;
}
add_filter('the_excerpt_rss', 'insertThumbnailRSS');
add_filter('the_content_feed', 'insertThumbnailRSS');

In addition, I modified the code a bit to style the image, by replacing:

style' => 'float:right;'

by:

style' => 'margin:0 20px 20px 20px; float:right;'.

By applying these changes to my theme, the featured image now shows up nicely in all RSS readers I have tested. Feeds in Google Reader look like this for instance:

Conclusion

For now I am happy with how things look in RSS readers. I would prefer to just install a plugin that does the job for me however and I would also prefer it to fetch the first image instead of the featured image to give me a bit more flexibility. So please do let me know if you know a good plugin or know how to hack the above code to fetch the first image instead of the featured image!

Special thanks goes out to my colleague Dave Pattinson (www.davepattinson.com) for helping me with testing my RSS feed!

Comments (12)

  1. Dave Pattinson 9 years ago

    Thanks so much for working on this!!! I look forward to trying it out!!!!

  2. Mike Bretherton 8 years ago

    Great tip, thanks for sharing!
    Mike

  3. Kris Nelson 8 years ago

    Just what I was looking for, super easy, too. Well done, and thanks for posting!
    – Kris

  4. PaulO 7 years ago

    I see a function.php (with a lot of ‘define’) and a theme_functions.php (with a lot of functions).
    Do uou mean the last one, theme_functions.php ?

    regards,
    PaulO

    • Author

      Hi PaulO,

      It probably will not matter, as I expect that the first one contains a call to the second one. If function.php is part of the theme folder, I would just use that one and add the code on top.

      Cheers,
      Johan

  5. Tammy 6 years ago

    Hi Johan,

    Thanks for the tips.

    I am not a techie [person at all, so please bear with me. Where can I find the theme’s functions.php file? I can’t seem to find it anywhwre. Is it under editor or settings?

    Also where do you include the code: at the beginning or at the end?

    Thanks for your help.
    Tammy

    • Author

      Hi Tammy,

      You should be able to find the file in your theme directory on your host. You should connect to it via FTP, open the file in an editor, edit it and save it again. Make sure to make a backup before you do so!

      The code should be included at the start of the file, as described in the post.

      Cheers,
      Johan

Pingbacks

  1. […] Find out how to  Show featured images in your RSS feed […]

Leave a reply

Your email address will not be published. Required fields are marked *

*