Adding Featured Images to a WordPress Post or RSS Feed
Every post on this blog has a “featured image” – the last few have been screenshots of my blog for the various tutorials I’ve been writing or a photo of the BlogWorld banner to talk about my speaking acceptance, but the one thing that always bothered me was that any time you used a featured image it wouldn’t show up (by default) in your theme or RSS feed. Featured images make inserting graphics dummy-proof; the size is set automatically and all you have to do is hit upload – it takes care of all of the re-sizing for you.
Setting Up Featured Images
For those of you who do not use featured images in your site, it’s fairly straight-forward. A few simple lines of code in your functions.php file and you’ll see the new option added to your writing screen:
[code]
add_theme_support( ‘post-thumbnails’ );
add_image_size( ‘blog-thumbnail’, 290, 133, true ); // Permalink thumbnail size
add_image_size( ‘single-thumbnail’, 610, 263, true ); // Permalink thumbnail size
add_image_size( ‘rss-thumbnail’, 590, 254, true ); // Permalink thumbnail size
[/code]
These sizes are what I use for my own blog. There’s three custom image sizes set: one for the blogroll page (two column), one for the single article or portfolio entry, and one that’s a little smaller for my RSS-driven newsletter (more on that in a bit).
Inserting a Featured Image Into a Post
The concept remains the same no matter what page template you’re working on, but my single.php page contains this code:
[code]
<span class=”single-thumbnail”>
<?php if ( has_post_thumbnail() ) { the_post_thumbnail( ‘single-thumbnail’); } else { ?>
<img src=”<?php bloginfo(‘template_directory’); ?>/images/large-default.jpg” />
<?php } ?>
</span>
[/code]
Now, what I’ve done here is fairly complex looking, but it’s actually simple to understand. The IF statement checks to see if a featured thumbnail has been set. If so, it displays the predetermined size (in this case, single-thumbnail). If not, it falls back to a default image and displays it instead. The span tag allows even the default image to be styled as I want it to (on this blog, it’s a 10px solid stroke).
Drop this in anywhere between your IF_POSTS and ENDIF tags, and you should be good to go.
Inserting a Featured Image Into an RSS Feed
Unfortunately, unlike the template, there’s not a file you can edit to add things to your RSS feed. You have to do it via your functions.php file since editing core files is against best practices. However, it’s fairly straightforward:
[code]
function featuredtoRSS($content) {
global $post;
if ( has_post_thumbnail( $post->ID ) ){
$content = ” . get_the_post_thumbnail( $post->ID, ‘rss-thumbnail’, array( ‘style’ => ‘margin:0; border: 10px solid #202020’ ) ) . ” . $content;
}
return $content;
}
add_filter(‘the_excerpt_rss’, ‘featuredtoRSS’);
add_filter(‘the_content_feed’, ‘featuredtoRSS’);
[/code]
This creates a new function ‘featuredtoRSS’ and adds it to the $content variable defined in $post by WordPress. In other words, it appends your featured thumbnail onto already created content, appending it to the end of “the_excerpt_rss” and “the_content_feed” rss tags. Now, if you refresh your feed, you’ll see your nice thumbnails showing up for all to see (and it keeps you from having to actually insert photos into your site).
“But Mitch, I Have Lots of Images Already – Do I Have To Reload Them All To Get The New Sizes?”
No! That’s the joy of plugins. Download and install Viper007Bond’s “Regenerate Thumbnails” plugin and run the script. It’ll take a few minutes if you have a lot of photos, but it will create photos for every size imaginable (or at least defined in your functions.php file)