This is one of my favourite code snippets at the moment.
It enables WordPress post thumbnails (feature image), adds a new image size (thumbnail, medium and large are included by default in WordPress and their sizes can be set in the WordPress media settings), then it creates a function that when called displays the Thesis Post Image thumbnail, or the feature image, or the first image attached to the post.
In Thesis this code goes in custom_functions.php.
add_theme_support('post-thumbnails');
add_image_size('feature_image','215','110',true);
function custom_thumb($classes='thumb',$size='thumbnail',$thesis_thumb=false) {
global $post;
$post_image = thesis_post_image_info('thumb');
$post_thumb = get_the_post_thumbnail($post->ID,$size,array('class'=> $classes));
$images =& get_children(array(
'post_parent' => $post->ID,
'post_type' => 'attachment',
'numberposts' => 1,
'post_mime_type' => 'image',
'orderby' => 'ID',
'order' => 'ASC')
);
if ($post_image['output'] && $thesis_thumb == true)
echo '<a href="'.get_permalink().'"><img class="'.$classes.'" src="' . $post_image['url'] . '" alt="Thumbnail image ' . get_the_title() . '" /></a>';
elseif ($post_image['output'] && $thesis_thumb == false)
return false;
elseif ($post_thumb)
echo '<a href="'.get_permalink().'">'.$post_thumb.'</a>';
elseif ($images) {
foreach ($images as $image)
$img = wp_get_attachment_image_src($image->ID, $size, false);
echo '<a href="'.get_permalink().'"><img class="'.$classes.'" src="' . $img[0] . '" alt="Thumbnail image ' . get_the_title() . '" /></a>';
}
else
return false;
}
New Image Size
In the second line, add_image_size('feature_image','215','110',true);
the first argument is the name of the image that you would normally use in the_post_thumbnail()
and get_the_post_thumbnail()
to use that image size. The second argument is the width, third height, and fourth is whether the image is hard cropped: true means the the image will be scaled and then cropped to exactly those dimensions, false means the image will be proportionally scaled to fit within those dimensions.
Using the function
Parameters
The new function custom_thumb()
accepts 3 optional parameters. The first are any classes that you want to apply to your thumbnail image (such as alignleft
to float the image left). The second argument is the image size, which defaults to thumbnail, but you can use medium, large, full or any additional sizes you have added. The third parameter is whether you want to display the Thesis Post Image thumbnail or not; the default is false (do not display Post Image thumbnail), true will display the Post Image thumb. If you call the function in a Thesis teaser you will want to leave the Post Image thumbnail off (false) because it is automatically displayed by Thesis, but if it’s in a full post, post excerpt or custom loop you can turn the $thesis_thumb
option on.
Call custom_thumb()
To use custom_thumb()
in Thesis with the default options you can insert the function directly via a hook. E.g., add_action('thesis_hook_before_teaser','custom_thumb');
For the full list of Thesis hooks please visit the user manual.
To use the function with parameters other than the defaults use it within another function. E.g.,
function add_my_custom_thumb() {
custom_thumb('thumb aligncenter','feature_image',true);
}
add_action('thesis_hook_before_post','add_my_custom_thumb');
Prefer the feature image over Thesis thumbnail
To use the WordPress Post Thumbnail when one is assigned preferentially over the Thesis Post Image thumbnail change this chunk of the function
if ($post_image['output'] && $thesis_thumb == true)
echo '<a href="'.get_permalink().'"><img class="'.$classes.'" src="' . $post_image['url'] . '" alt="Thumbnail image ' . get_the_title() . '" /></a>';
elseif ($post_image['output'] && $thesis_thumb == false)
return false;
elseif ($post_thumb)
echo '<a href="'.get_permalink().'">'.$post_thumb.'</a>';
to
if ($post_thumb)
echo '<a href="'.get_permalink().'">'.$post_thumb.'</a>';
elseif ($post_image['output'] && $thesis_thumb == true)
echo '<a href="'.get_permalink().'"><img class="'.$classes.'" src="' . $post_image['url'] . '" alt="Thumbnail image ' . get_the_title() . '" /></a>';
elseif ($post_image['output'] && $thesis_thumb == false)
return false;
Adapting custom_thumb() for other themes
If you want to use the custom_thumb()
function with any other theme, paste the code in your theme’s functions.php and remove $post_image = thesis_post_image_info('thumb');
and
if ($post_image['output'] && $thesis_thumb == true)
echo '<a href="'.get_permalink().'"><img class="'.$classes.'" src="' . $post_image['url'] . '" alt="Thumbnail image ' . get_the_title() . '" /></a>';
elseif ($post_image['output'] && $thesis_thumb == false)
return false;
and change elseif ($post_thumb)
to if ($post_thumb)
.
Mike Macias | The Mobile Fanatics says
Thanks for the tutorial. I’m going to give it a shot asap.
So this functionality is essentially the same as this: http://thesistut.com/store/wor.....ge-thesis/
Correct?
kristarella says
Mike — Not exactly… it doesn’t auto-populate the Thesis Post Image, or provide any admin options, or add an image thumb in the admin post list. In essence it adds a similar level of convenience, but with this you have to control it via PHP whereas the plugin provides multiple admin options.
Craig Grella says
I struggled through hacking my own code for this very same functionality (plus I added some that adds a stock logo if no image or thumb is present).
But my code was not nearly as neat as yours and it took me hours to figure out.
Thanks for this.
As a follow up, how would this be modified to use this with custom post types?
kristarella says
Craig — You shouldn’t need to modify it much or at all for custom post types, you can just use
custom_thumb();
in your custom post type loop, or to use a hook you’d use a conditonal tag:Where “book” is the post type.