Show Post Thumbnails in Feeds
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, for example:
$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.
About the author
Jeff Starr is a professional web developer and book author with over 15 years of experience. Jeff works with WordPress every day, designing themes, developing plugins, and securing sites. His books include Digging Into WordPress, WordPress Themes In Depth, and The Tao of WordPress.
17 responses
-
SlobodanCool. Thanks Jeff.
-
foxinniAwesome. Will have to integrate this soon!
Thanks
-
Scott CorganFinally, a straight foward answer to this. Why does everyone else seem to beat around the bush. Thank you.
-
CosminThis 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 :)
-
Jeff Starr Post AuthorSomething 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.
-
Jeff Starr Post Author
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..
-
Cosmin
Thanks a lot Jeff!
-
-
-
knicoGreat tip! Can you also add the values of the custom fields the same way?
Thanks
-
Jeff Starr Post Author
I think so.. check the links in the last paragraph in the post — they break it down in detail.
-
-
yeralt edebiyatHey but this is awesome! Is it working in 3.0?
-
Jeff Starr Post Author
Yes, it should work just fine :)
-
-
Ted MannThis 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.
-
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?
-
BarbaraWill 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.
-
Excellent tricks, thanks for another great tutorials @Jeff
-
FrostedWow! I’ve been going nuts trying to figure this out!! thank you so much!!!!
-
CindiThe 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.
