Customizing a post with a fresh and unique thumbnail is a nice touch as it adds just a bit more personality to the post, rather than having the same ole’ images or not having images at all. Here on WordPress Vibe, we have thumbnails for each post, which both Dre and I really like (and we hope you like them too :). Here’s a short tutorial on how to achieve similar results.
First, you need to decide what resolution you want your thumbnails to be. For this tutorial, we will be using what we use here on WP Vibe, which is 150px by 150px.
Step 1: Create Your Custom Thumbnail Image
What we do here is we build a separate image that is 150×150 and upload to the specific post. Then we grab the link URL of the thumbnail image you just uploaded and copy it.
Then close out of that box and head back to the post. We have a custom field called “thumb” which we use, but you can use whatever value you want.
Paste that link into the custom field as the value, such as below:
Next, the actual code to make the magic work.
Step 2: Integrate the Code
First, we check to see if the user has input anything into the “thumb” custom field for the post, which would be pointing to the thumbnail image.
<?php
$thumb = get_post_meta($post->ID, "thumb", true);
if ($thumb != "") { ?>
<a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>" rel="nofollow">
<img src="<?php $values = get_post_custom_values("thumb"); echo $values[0]; ?>" alt="<?php the_title(); ?>" class="alignleft" /></a>
<?php
the_excerpt();
?>Second, if the “thumb” field is empty, we run a loop to go through a specified folder of images for our categories.
<?php
$newthumb = "news.png";
$category = get_the_category();
$catid = $category[0]->category_nicename;
$okCats = array( 'news', 'interviews', 'resources', 'reviews' ); //Maybe even filter this so it can be extended
if ( in_array($catid, $okCats) ) {
$newthumb = strtolower($catid) . '.png';
}
?>The first bit of code, $newthumb = “news.png”; is to set a default thumbnail, in case you have a category that doesn’t have a specific thumbnail. Next, we grab the current category for the post. Next, we naturalize the name so it’s all lowercase and easy for the server to process.
Next, we build the array of categories that we have. For us, we have “news”, “interviews”, “resources”, etc etc.
We have images made for each category so that it knows what to display for that category.
If an image doesn’t exist for one of the categories, it will go bac and use the default news.png which we previously specified. Now, to actually use the thumbnail link which was just built.
Step 3: Building the Thumbnail Link
Here is the PHP code which actually displays the image now for each category.
<a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>" rel="nofollow"> <img src="<?php echo get_stylesheet_directory_uri(); ?>/images/thumbs/<?php echo $newthumb; ?>" alt="<?php the_title(); ?>" class="alignleft" /></a>
All the Code Together
Here is what everything looks like together.
<?php
$thumb = get_post_meta($post->ID, "thumb", true);
if ($thumb != "") { ?>
<a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>" rel="nofollow">
<img src="<?php $values = get_post_custom_values("thumb"); echo $values[0]; ?>" alt="<?php the_title(); ?>" class="alignleft" /></a>
<?php
the_excerpt();
} else {
$newthumb = "news.png";
$category = get_the_category();
$catid = $category[0]->category_nicename;
$okCats = array( 'news', 'interviews', 'resources', 'reviews' ); //Maybe even filter this so it can be extended
if ( in_array($catid, $okCats) ) {
$newthumb = strtolower($catid) . '.png';
}
?>
<a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>" rel="nofollow">
<img src="<?php echo get_stylesheet_directory_uri(); ?>/images/thumbs/<?php echo $newthumb; ?>" alt="<?php the_title(); ?>" class="alignleft" /></a>
<?php the_excerpt(); } ?>
In the end, you have a way of ensuring you always have a thumbnail appropriate to the post category, and the option to customize per post
Any comments or suggestions, please feel free to leave them in the comments.
Nice extension of the thumbnail feature found in so many themes.
Yeah, there a number of plugins that do exist, but this is more of a custom solution as it’s more difficult to get a custom solution from a plugin.
That could be improved a little using TimThumb.
How do you think TimThumb could improve this tutorial?
You could use something like this http://pastebin.com/f6396c766 and you are not constrained anymore by the width and height of the imagine.
Do not always judge people by the link behind their name.
I see what you mean. For how I do the thumbnails, I like to know exactly how the thumbnail is going to look though, and don’t leave anything to chance. I’ve used TimThumb in the past, and on some sites I still do use it, but I’m not always 100% satisfied with how the thumbnails turn out.
The method I described above will provide users 100% control over how the thumbnail will look, despite it being a little extra work on the user’s part.
Good tip still, thanks Eugen!
Timthumb would allow to resize images on the fly and not have to open photoshop every time.
but now with WP 2.9, part of this code is obsolete. and beside, having to copy/paste image URL in a custom field is a pain. the new thumb function of WP is much better…
<?php if ( has_post_thumbnail() ) { the_post_thumbnail(); } else { $newthumb = "news.png"; $category = get_the_category(); $catid = $category[0]->category_nicename; $okCats = array( 'news', 'interviews', 'resources', 'reviews' ); //Maybe even filter this so it can be extended if ( in_array($catid, $okCats) ) { $newthumb = strtolower($catid) . '.png'; } } ?>Right, it will let you do it on the fly, but again, it won’t always give you exactly what you want (with TimThumb).
But you are also correct, the new features with 2.9 will indeed allow you to edit on the fly.
When I get a chance, I’ll write another tutorial that let’s you edit on the fly and use those as the thumbnail instead.
Thanks!
add example please.
thank!
Hi Peter, any of the category pages listed in our main navigation will show you a list of posts.
When you see a thumbnail that has the WPV logo and the category name, that is a default thumbnail called using this method.
Thank.
he ido un paso mas adelante.
Hoy he creado esta función para agregar una imagen automaticamente dentro del loop del index.
function iconcat()
{ // extraemos el nombre de la categoria
$category = get_the_category();
$nombrecat = $category[0]->cat_name;
//quitamos la tilde
$nombretcat = trim(strtolower(sintilde($nombrecat)));
//quitamos los espacios
$nombretcat = str_replace(‘ ‘, ”, $nombretcat);
//imprimimos la imagen
echo ”;
}
gracias. su articulo me ha servido de inspiración. el ejemplo lo pueden ver en mi web (seccion tutos)
Peter,
Sorry, this is an English blog, so we can’t respond in Spanish. If you can leave a comment in English, we’ll try our best to respond to you regarding your question.
oh! Sorry.
I’ve gone one step further.
Today I created this function to automatically add a picture within the loop of the index.
function iconcat()
{
$category = get_the_category();
$nombrecat = $category[0]->cat_name;
//quitamos la tilde
$nombretcat = trim(strtolower(sintilde($nombrecat)));
//quitamos los espacios
$nombretcat = str_replace(‘ ‘, ”, $nombretcat);
//imprimimos la imagen
echo ”;
}
thanks. your article has inspired me.
the example you can see on my website (section tuts)
Wonderful tutorial… I will tried this method
please man I can’t make it work as yours, I tried and tried an could’nt do anything, I’m a completely noob and didn’t understand where I had to put things, I didn’t realise if I had to put it in the single.php or the index.php or …?? well, I put all your code in the loop but all was terrible and the function you put for the images, I couldn’t realise where they are located, please could you help me or send a tutorial more especific? here is my index.php:
<img src="/images/mainimage.jpg” class=”mainimage” alt=”Main image” title=”Main image” />
<a href="” rel=”bookmark” title=”Permanent Link to “>
written by
<?php next_posts_link('’) ?>
<?php previous_posts_link('’) ?>
Not Found
Sorry, but you are looking for something that isn’t here.
please man I need some help I just want you to show me what do I have to put and where to have my posts the same as yours