Setting a Fallback for Post Thumbnails in WordPress

by Ryan Cowles September 27th, 2012 

fallback

One of the countless things that I love about WordPress is how easy and efficient the process of adding new content is. All you have to do is provide the art and copy and your theme will take care of the rest. While this workflow is usually smooth, there are times the end user can miss a step or two. I've noticed when working on larger sites with multiple authors one of the most common things to slip through the cracks is setting a featured image. While this shouldn't break your theme, it can create layout inconsistencies or (shudder) broken images. Lucky for us, we can easily provide a fallback, and I'll tell you how.

WordPress Post Thumbnails

Post Thumbnails were introduced in WordPress 2.9 [Source: WordPress Codex] and have since become somewhat of a standard for theme developers. If a theme declares support for this functionality, it allows authors to set an image that will represent Posts, Pages, or Custom Post Types. How this image is utilized is completely dependent on the theme. A lot of themes will use a featured image to accompany excerpts, but that's just one example.

Setting A Fallback

If your theme uses Post Thumbnails, it is probably wise to set a backup. That way if you (or one of your authors) forgets to set a featured image before publishing a post it will not break the layout. One way to do this is by grabbing the first image from the post, and returning it if no post thumbnail exists. First, add the following to your functions.php:


//Call the first uploaded image in the post
function fallback_image() {
$files = get_children('post_parent='.get_the_ID().'&post_type=attachment
&post_mime_type=image&order=desc');
if($files) :
$keys = array_reverse(array_keys($files));
$j=0;
$num = $keys[$j];
$image=wp_get_attachment_image($num, 'thumbnail', true); //Set your image size and crop to true or false here
$imagepieces = explode('"', $image);
$imagepath = $imagepieces[1];
$fallback=wp_get_attachment_url($num);
$template=get_template_directory();
$the_title=get_the_title();
print "<img class='featured' alt='$the_title' src='$fallback' />";
endif;
}

Now, determine where in your theme the featured image is used (Hint: Check index.php, loop.php, home.php, etc.). Look for the call to get_the_post_thumbnail and replace it with the following:


<?php if ( (function_exists('has_post_thumbnail')) && (has_post_thumbnail()) ) { //If a featured image was set, return it
echo get_the_post_thumbnail($post->ID);
} else { //If it wasn't set, return the fallback
echo fallback_image();
} ?>

Note: I am assuming that your theme has already established support for Post Thumbnails. If it hasn't you'll need to add that functionality. Don't worry, it's easy. Just look to the Codex to learn how to enable support for Post Thumbnails.

Conclusion

This is just one way you can handle fallbacks for featured images. I have seen a lot of themes let allow you set a single default image, a company logo for example, as a fallback and that seems to work perfectly fine as well. The decision is ultimately up to you.

Sources

WordPress Post Thumbs Fallback
WordPress Codex

If you liked this post, you might also enjoy Helpful WordPress Code Snippets

Ryan Cowles

Ryan Cowles is a WordPress / Front End Developer living in Los Angeles, California. Along with a passion for building creative websites, he also enjoys photography, design, travel and the great outdoors. You can view his personal website by visiting http://ryanscowles.com. To see what he has been up to lately, check out his blog at Metacom Creative.

Ryan S. Cowles

You May Also Like

6 Responses to “Setting a Fallback for Post Thumbnails in WordPress”

  1. Donna says:

    Would love to see the code needed for setting a single default image if no images exist in the post, since many posts don't have any images, so using the first image from a post would still leave the problem. The combination: using first image if it exists, or a default image if it doesn't, would be ideal.

    • Ryan Cowles says:

      Hi Donna,

      Although it isn't exactly what you are looking for, I recently wrote about adding a fallback image based on post category. You can find a link below this reply. If I can find some free time perhaps I'll combine the two.

      Thanks for the feedback!

  2. arunincy says:

    Useful code!I have been searching for this,Thank you for Sharing this.

  3. The new thumbnail features is really very helpful for theme developers, before we used to use scripts like timthumb to accomplish creating thumbnail. It was vulnerable to many hacks

    • Ryan Cowles says:

      I remember the pre 2.9 days, when themes constantly used Timthumb. Although the script did serve its purpose, I also remember repairing blogs after the big Timthumb security hole ;) Needless to say, I've been a big fan of Post Thumbnails.