Add Default Images to Many Popular Magazine Style Themes

I have recently answered a couple of questions in the WordPress Support Forums dealing with adding default thumbnails to posts in a few “magazine style” themes. These themes have been really popular for as long as I can remember and they all seem to have a similar method for displaying thumbnails next to a post excerpt on the theme’s front page.

The thumbnail is added via Custom Field. If you log into WordPress and navigate to the Add New Post screen, you will see that there is a Custom Fields box when you scroll down a bit. The magazine style themes that I have come across allow you to enter a Custom Field Name/Value pair to associate an image to the current post which will display next to the excerpt on the blog’s front page. This usually looks something like:

This system works very well and has been adopted by many theme authors. But what happens when no image path is entered as a Custom Field? What if an invalid path is entered into the Custom Field? Well, this depends on how the theme was coded…

The first forum post that I answered was from tyankee whom had the following problem with the Monezine Theme:

…when you don’t add that custom field to the post, a black image shows up. I’d like a default image to show up…

This is rather easy to correct, lets take a look at the code which displays the thumbnail. The following was taken from lines 22 and 23 of the current version’s index.php file (this code is inside The Loop).

<?php $screen = get_post_meta($post->ID,'screen', true); ?>
<img src="<?php echo ($screen); ?>" width="160" height="100" alt=""  />

This code has three possible outcomes:

1. A valid image url will be echoed – An image will be displayed on the page.
2. An invalid image url will be echoed – No image will be displayed.
3. An empty string will be echoed – No image will be displayed.

We can improve this code by defining a default image url and adding a bit of logic:

<?php // License: GPL
$custom_field_name = 'screen';
$default_image_url = 'http://example.com/my-default-image.jpg';

$post_specific_image_url = get_post_meta( $post->ID, $custom_field_name, true );

if( !empty( $post_specific_image_url ) && $image_data = @getimagesize( $post_specific_image_url ) )
	$image_url = $post_specific_image_url;
elseif( !empty( $default_image_url ) && $image_data = @getimagesize( $default_image_url ) )
	$image_url = $default_image_url;
else
	$image_url = '';

if( $image_data )
	print '<img src="' . $image_url . '" width="' . $image_data[0] . '" height="' . $image_data[1] . '" alt="" />';
?>

This will only print a result if an image url is defined (either as a Custom Field or as the value of $default_image_url) and if that url points to a valid image file.

If you are using a magazine theme which utilizes this or similar functionality, feel free to use the code I posted above.