DiggingIntoWordPress

by Chris Coyier & Jeff Starr

Show Post Thumbnails in Feeds

Posted by on

One of the nice things about using WordPress’ new post-thumbnails feature is that they provide tons of flexibility in terms of where and how you display your post thumbnails. By design, post thumbnails are not included within post content, so they will not be displayed in your blog posts unless you call them specifically with the proper template tag:

<?php the_post_thumbnail(); ?>

When included within the loop, the_post_thumbnail() will output the markup for the post’s thumbnail, linked to a full-size or pre-sized version of the image. Of course, there are a few more awesome things that you can do with the_post_thumbnail. Now that we’ve seen how to include thumbnails in post content, let’s do it for feed content..

Display Post Thumbnails in Feed Content

To include post-thumbnails in your feeds, we need to filter WordPress’ feed functionality and inject the required template tag into both feed-excerpt and full-feed content:

// show post thumbnails in feeds
function diw_post_thumbnail_feeds($content) {
	global $post;
	if(has_post_thumbnail($post->ID)) {
		$content = '<div>' . get_the_post_thumbnail($post->ID) . '</div>' . $content;
	}
	return $content;
}
add_filter('the_excerpt_rss', 'diw_post_thumbnail_feeds');
add_filter('the_content_feed', 'diw_post_thumbnail_feeds');

Include that code in your active theme’s functions.php file and your feeds will display the post thumbnail before each post. To display the post thumbnail after the post content, a slight adjustment is made to the fourth line of the function:

$content = $content . '<div>' . get_the_post_thumbnail($post->ID) . '</div>';

The <div> will prevent the post text from wrapping around the post thumbnail, but theoretically its removal would enable the post content to wrap around the image:

$content = get_the_post_thumbnail($post->ID) . $content;

As easy and flexible as it is working with the_post_thumbnail(), there may be situations where you need more control over the appearance and functionality of your posts’ attached images. Fortunately, WordPress’ custom fields and image-attachment functionality enable just about any custom configuration you can imagine.

17 Responses

  1. Slobodan June 8, 2010

    Cool. Thanks Jeff.

  2. Awesome. Will have to integrate this soon!

    Thanks
    M

  3. Scott Corgan June 8, 2010

    Finally, a straight foward answer to this. Why does everyone else seem to beat around the bush. Thank you.

  4. Cosmin June 8, 2010

    This solves half of my problem.

    Can you please tell us how to modify the code you wrote so that the thumbnail in the RSS links to the post?

    Thanks :)

    • Something like this should work:

      $content = $content . '<div><a href="' . wp_get_attachment_image_src($post->ID, 'large') . '">' . get_the_post_thumbnail($post->ID) . '</a></div>';

      Try it as the fourth line of code in the function.

    • Er, wait – that code is going to link to the full-size (large) version of the thumbnail. Linking to the post is even easier:

      $content = $content . '<div><a href="' . the_permalink($post->ID) . '">' . get_the_post_thumbnail($post->ID) . '</a></div>';

      Same idea, different template tag..

  5. knico June 8, 2010

    Great tip! Can you also add the values of the custom fields the same way?

    Thanks

    • I think so.. check the links in the last paragraph in the post — they break it down in detail.

  6. yeralt edebiyat June 30, 2010

    Hey but this is awesome! Is it working in 3.0?

  7. Ted Mann July 9, 2010

    This is a phenomenally useful tutorial. Do you know of a way to pull in the post image attachment if a post thumbnail hasn’t been set? I admin a photoblog where the photographers keep forgetting to set their post thumbnails, and I was hoping to just pull the images they uploaded to the post for the rss thumbnail images.

  8. I second Ted’s enquiry. I also have a site which has multiple community uploads but no thumbnails set so the ‘thumbnail’ used is simply the first image in the post. Is there a way to work with this?

  9. Will this approach work only with full feeds or with partial feeds also. I prefer using a partial feed but would LOVE to figure out how to get my post image — either in thumbnail or full sized form — into it. I’m striking out so far on that mission.

  10. Excellent tricks, thanks for another great tutorials @Jeff

  11. Frosted August 18, 2010

    Wow! I’ve been going nuts trying to figure this out!! thank you so much!!!!

  12. The code worked great. I am setting up a campaign on Mailchimp. Without this code, no images. With the code I get images but on gmail the ads on the right side (not part of email, these are ads that show every time I open an email) take up so much room that the email and images get squished and distorted.

    Looks great on my iPad.

    Can I send the images with a maximum size? Will this help? How do I adjust the code?

    Your book, Digging into WordPress and this site along with CSS-tricks make me look like I know what I’m doing. Thanks.

Comments are closed. Contact us with any critical information. Thank you!

Code is poetry