5 Flares Twitter 3 Facebook 1 Google+ 0 Email -- Email to a friend 5 Flares ×

Occasionally you may need to display featured images in sizes other than WordPress’ default thumbnail, medium and large sizes. That’s quite easily solved with the add_image_size() and the_post_thumbnail() functions. Unfortunately, there are still 2 problems to be solved:

  • Some posts may not have images at all, or the author forgets to attach a featured image
  • Previous posts don’t have featured images

Here’s a solution that 1) resizes the featured image to the right size, 2) uses the first image in the post if a featured image is not set and 3) falls back to a default image if none of the above are true.

TimThumb

TimThumb is a popular script that crops and resizes images and then caches them that is used in many WordPress themes. Download the script from the project page and save it as timthumb.php in your wp-content folder.

The script’s purpose is to resize images that are not hosted on your website, and therefore unable to be resized by WordPress. By default it only resizes external images from a few ‘safe’ sources, e.g. flickr.com, but you can override that by setting define ('ALLOW_EXTERNAL', TRUE); in the script. Please read up on the TimThumb documentation.

Theme customization

functions.php

In your theme folder, add the following code to your functions.php file. If your theme doesn’t have a functions.php file, simply create it and save it into your theme folder. 

add_image_size( 'featured-thumbnail', 95, 66, true );

// Figure out which image to be shown
function featured_image_thumb() {
	global $post, $posts;
	// If a featured image has been set, use the
	// featured-thumbnail size that was set above with the
	// class of 'optional_img_class'
	if (has_post_thumbnail() ) {
		the_post_thumbnail('featured-thumbnail',
		array('class' => 'optional_img_class') );
	}
	// If a featured image is not set, get the first image in
	// the post content
	else {
		$first_img = '';
		ob_start();
		ob_end_clean();
		$output = preg_match_all('/<img.+src=[\'"]([^\'"]+)[\'"].*>/i', $post->post_content, $matches);
		$first_img = $matches [1] [0];

		// Define a default fallback image in case a featured image
		// is not set and there are no images in the post content
		if(empty($first_img)){
			$first_img = get_bloginfo("template_url").'/images/default.jpg';
		}

		// Generate the HTML code to display the image and resize
		// the image with timthumb.php
		return '<img class="optional_img_class" src="'. get_bloginfo("template_url") . '/timthumb.php?src=' . $first_img .'&w=95&h=66" alt="" />';
	}
}

Code for grabbing the first image courtesy of WpRecipies.com: How to: Get the first image from the post and display it

In your theme

Call the featured_image_thumb() function in your theme, e.g. 

<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
	<a class="featured-image" href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>">
		<?php echo featured_image_thumb(); ?>
	</a>
<?php endwhile; endif; ?>

Don’t forget to regenerate your previously uploaded images

The add_image_size() function only works on images that are uploaded from this point forward. You can force WordPress to regenerate the images again with that specific size by using the Regenerate Thumbnails plugin.

Related posts:

  1. Can you drastically change how WordPress looks in 10 minutes? The Headway theme can!
  2. Theme Frameworks: A Glimpse Into The Future Of WordPress Themes [WordCamp Malaysia Presentation]
  3. PicApps gives bloggers access to licensed photographs for free
  4. Simple form validation with FBJS on Facebook Page Tabs
  5. WTOTW: Find out where an image came from with TinEye