WordPress puts food on my table.

New in WordPress 2.9: Post Thumbnail Images

Many WordPress themes, especially those with “magazine-like” layouts, use an image to represent each post. It might just be on the front page. It might be alone, or alongside an excerpt. Until now, there was no standardized way to do this. Many themes would require you to tediously enter a Custom Field with the value being the URL you wanted to use. Often you had to do cropping yourself. With WordPress 2.9, theme authors can easily enable Post Thumbnail selection UI and call those image using simple template tags.

First, in the theme’s functions.php, declare that your theme supports this feature. This will enable the UI in the WP Admin.

add_theme_support( 'post-thumbnails' );

That will enable Post Thumbnail UI for both Post and Page content types. If you’d only like to add it to one, you can do it like this:

Next, you should specify the dimensions of your post thumbnails. You have two options here: box-resizing and hard-cropping. Box resizing shrinks an image proportionally (that is, without distorting it), until it fits inside the “box” you’ve specified with your width and height parameters. For example, a 100×50 image in a 50×50 box would be resized to 50×25. The benefit here is that the entire image shows. The downside is that the image produced isn’t always the same size. Sometimes it will be width-limited, and sometimes it will be height-limited. If you’d like to limit images to a certain width, but don’t care how tall they are, you can specify your width and then specify a height of 9999 or something ridiculously large that will never be hit.

Your second option is hard-cropping. In this mode, the image is cropped to match the target aspect ratio, and is then shrunk to fit in the specified dimensions exactly. The benefit is that you get what you ask for. If you ask for a 50×50 thumbnail, you get a 50×50 thumbnail. The downside is that your image will be cropped (either from the sides, or from the top and bottom) to fit the target aspect ratio, and that part of the image won’t show up in the thumbnail.

Now, you can make use of the template functions to display these images in the theme. These functions should be used in the loop.

has_post_thumbnail() returns true/false and indicates whether the current post has a manually-chosen Post Thumbnail (in the loop):

<?php
if ( has_post_thumbnail() ) {
// the current post has a thumbnail
} else {
// the current post lacks a thumbnail
}
?>

the_post_thumbnail() outputs the Post Thumbnail, if it exists (in the loop):

<?php the_post_thumbnail(); ?>

Those are the basics. How about some advanced stuff?

What if you want to use a small 50×50 hard-cropped image for the home page, but want to use a 400 pixel-wide (unlimited height) image on the post’s permalink page? You’re in luck. You can specify additional custom sizes! Here’s the code:

That’s it! set_post_thumbnail_size() just calls add_image_size( 'post-thumbnail' ) — the default Post Thumbnail “handle.” But as you can see, you can add additional ones by calling add_image_size( $handle, $width, $height, {$hard_crop_switch} );, and then you use that new size by passing the handle to the_post_thumbnail( $handle );

If you want your theme to support earlier versions of WordPress, you’ll have to use function_exists() to keep from calling these new functions in those versions. I’ve omitted that code to keep these examples as simple as possible. Here would be the functions.php example with the wrapper code:

There is one caveat for this feature in WordPress 2.9 — it only works fully for new image uploads. We can’t yet resize images on the fly, although I’m strongly considering it for a future version. If you call the template functions on a post that has a Post Thumbnail that was uploaded prior to your theme having declared the new sizes, you won’t be able to do hard-cropping, and the box-resize will be done in the browser. As a temporary solution, Viper007Bond has a great plugin that will go back and create missing image sizes for you: Regenerate Thumbnails.

I’m looking forward to see what kinds of sites you can build with this feature!

Thanks so much for the write up. Please can you help answer the following? I’m using wordpress 3.0 with Arras 1.5 I would like to insert my featured image for each post as a 80×80 thumbnail on the left hand side next to the post’s title. Not in the blog header and not in the post content but where the title appears. I’ve spend all day searching forums, plugins etc and nothing I have tried has been successful. All help would be greatly appreciated. Many thanks, Ali.http://www.alilochhead.com

So glad you did a simply worded step by step breakdown on how to incorporate this. Thanks so much for the information and your hard work to incorporate this feature in WP 2.9.

It does seem a little clunky still in its interaction…maybe I missed it in some official WP promotion, why do we have to enable through the functiosn.php file? Why isn’t it just available automatically? Or would it be if the line was in the loop in the theme file?

We didn’t want people to be confused by a “Post Thumbnail” meta box that had no effect on their blog. By making it opt-in, it will only show up on themes that support it. It’s also not something I expect every theme to incorporate. It doesn’t make sense for all layouts (which is why it’s not in the Default theme — tried to fit it in, there, and it was kludgey).

I also had grief, and no success, using this method for the sizings Mark. Both single and normal thumbs would register and display, but not seemingly working off the size declarations inside functions.php. Is there a common conflict that we should look out for …?

I eventually used the more force-feed method of declaring the sizes inline (directly in single.php and index.php), and it worked as expected.

I have the same problem, but not for all images, just some. I’m trying to find a pattern, but I can’t see anything common about their aspects. I even tried downloading one of the images I had problems with, a jpg, make it a little bit smaller in gimp and save it in png without changing the aspect, and upload, but it still didn’t insert the 50×50 image, just the original.

Any tips? I had this problem on 4 out of 10 images on the site I was testing.

My name is Freddy and I’ve wasted nearly a month of my life on this place😉 I found it after being recommended by a few friends who have been hanging out here for quite some time.

I am a writer, graphics artist, photographer and just about anything else that comes up around the office. Aside from the above interests i’m really into scifi as I know that is so much more out there to be discovered, and a feeling that the universe is just teaming with life.

Well, I hope that I get to know more people here, share some experience and start learning. Have a greay day!

I can only get WordPress to display square thumbnails. It lets me do the image editing and saves in the right aspect ratio, but in the Edit Post page sidebar and live on my site it appears as a square thumbnail no matter what.

nevermind, just realized its possible in 2.9.2
just doesn’t delete the original thumbnail file
for instance, if ur thumbnail is called:
myimage-125×125.jpg
and u edit the thumbnail, wp will create an updated copy with the changes u made, named like so:
myimage-125×125-e8573489573.jpg

and it does this for all other images if u chose the radio button to edit all image sizes (and not only the thumbnail).. a bit of a waste of space if u plan on editing a lot of image files soon after uploading them (as the originals will never be used).

The trick is to find the meta_value stored under “_thumbnail_id”, which is an array, where ID stores the attachement ID, then you can grab the attachment using that ID and the wp_get_attachment_url() function.

I will have to work on a simple function like get_post_thumb($ID) that should make that easier. But works for now.

What if you want the thumbmnail to appear on the index.php but not on the single.php. I’ve implemented the code you’ve suggested within my functions file and within the loop of the index.pph file and it plonks a thumbnail on my main blog page which is what I’m after, but it also plonks the same thumbnail on the single blog post page – is there a way to disable this?

I’m running into an issue with 2.9 trying to get the thumbnail piece working that when I specify the add_theme_support( ‘post-thumbnails’ ); the ability to see / select any photos through the add image or media library (either ones from before the change or after). If I comment out the line they still exist.

At first glance I thought this was going to make life much easier but I think it still needs some ironing out… Lets say I want the post image to be 630px wide on the single post and 200px wide on the index. If I upload a lovely crisp jpeg measuring 630px wide, on the single page the processed image(630 px wide not resized at all) looks very nasty and blurry. I understand that the main use of this is for thumbnails, but if it takes an image of the same size and renders it ugly as all hell I’m going to stick with timbthumb until this starts looking a little sharper.

On our blogs that already have many posts that were made with earlier versions of WordPress, how do we make all those posts use an image that is associated with that post? This is so we wont have to manually and pick a thumbnail for each post, that would be extremely time consuming.

Remove lines 4 and 5. You’re adding support for both, then just for posts, then just for pages (so now posts don’t have it). Just do it like in line 3 and it adds it for both. If you want to specify, pass in an array with all the ones you’re supporting it for.

Warning: Cannot modify header information – headers already sent by (output started at /nfs/c04/h03/mnt/64590/domains/albotas.com/html/wp-content/themes/atahualpa344/functions.php:3) in /nfs/c04/h03/mnt/64590/domains/albotas.com/html/wp-includes/pluggable.php on line 868

So here’s a little issue I found. Hopefully I can explain it in a way that makes sense.

If I go to an old post and click on the “set thumbnail” link, and then go to my gallery to choose a photo that I have already uploaded for that post. Then when it creates the icon it scales it down to fit within the 100×100 parameters. But in my functions file I am telling it to hard code it and crop the image to exactly 100×100 pixels.

But if I take that same image, drag it to my desktop, re-upload it and choose “Set as thumbnail” then it will work for me. Is this some small glitch in WordPress?

For former posts (ancient blogs), I have created a plugin which filters the_post_thumbnail function. If not WP 2.9 thumbnail exists, the plugin looks for the first image uploaded via the post (belonging to the post). Then if none is found, it scans the content for the first image fount in the content itself.
Information and download here : http://www.fairweb.fr/en/my-wordpress-plugins/fw-post-image/

However, I haven’t been able to get the class variable to work. I tried combining Mark’s with the class variable in this way:
the_post_thumbnail(‘single-post-thumbnail’, array(‘class’ => ‘pic fl’ ));
With no success. And I tried changing the CSS from .pic.fl img to .pic .fl with no success.

The only way I seem to be able to include everything is to:
<a href="” rel=”bookmark” title=”Permanent Link to “> $the_title_attribute )); ?>
But I thought the post thumbnail attribute would eliminate the need for all this. Btw, the array title attribute doesn’t work but it needs to be there for the a title attribute to work. Weird.

@Erin, my plugin does not do anymore than the core function appart from the fact that it takes the image source in different places. I’m sure the title attributes works, class works but not alt. Permalink do not seem to exist in the core function (I’d like it to).

I’ll check on my plugin if it can be better. If you have any suggestion on it, please leave a comment on the plugin page.

Thanks for the great write up! I’m super geeked about this new functionality, but seem to be hitting a roadblock. It seems as though it should be easy enough to get the caption/link/etc associated to the thumbnail, but I just can’t find *anything* on the web about how to go about doing this. I just need to be patient I suppose, with this being so new and the documentation not even being complete yet. Thanks again for the great article!

Hi there, this is a great feature, and one that has a great deal of potential. If I can offer a suggestion:

The images in my blog are all watermarked, and have a border around them. Cropping them to a fixed size will create an odd looking thumbnail. So my suggestion is to allow the image to be cropped *before* resizing, so that a border and/or watermark can be removed from the image before it is resized for the thumbnail.

… but… I was excited about using this feature in my new theme, but I have run into a problem in that the hard crop function crops from top & bottom, or from sides.

It would be so fantastic if, in future versions, you could select the crops for thumbnails (a la facebook profil pics for example) or at least select to crop from top left, or crop from center, or crop from bottom right etc…

Do you think the functionality is likely to be extended to offer us more control over the cropping of thumbnails?

Thanks Mark, great stuff here. I have a few questions if you have the time.

Is it possible to add more than one of the post thumbnail boxes to the editor screen?

Can the location it appear in be modified?

Can the title given the box be changed?

Can a paragraph of text be added to give instruction on its usage? (below the box for example)

I want to use this for an attorney website project I am working on- the image will be used as the various attorneys profile pics on their profile page. These attorneys are most definitely NOT confident around websites and I need to make it as easy for them to use as possible.

Being able to change the location and title of the post thumbnail box and add some instructive text would go a long way to making this easier for them. I am used to working with metaboxes (which of course allow me to easily do all of the above) But I am not sure how to achieve similar results with this post-thumbnail-box.

I appreciate you may not have time to answer in detail, but if you could point me to some documentation (couldn’t find anything in the codex) it would be helpful.

Today is my birthday and what I’d really like is to understand custom fields. Some say it’s easy and some say otherwise. I tried following your post, but I’m still not clear. Can you point me to an easy to understand beginner’s tutorial? Is there a definitive source for custom fields? I’ve search with Google and read post after post and WP’s own codex, but still need more. Thanks!

happy birthday😀 you can fill a custom field when you write a new post. and when you want to display this entry (in the code of you theme) you can use this field to display this post different or do something else. its easy if you understand it😀

Hi,
Thanks for the great tutorial! I’m having a problem though and was hoping someone may have the answer! I have followed Mark’s directions to the letter and everything works fine except it will not hard crop. Yes, I know the image has to be newly uploaded, and I have tried a million test posts with different images, but works great, except for hard crop, any suggestions?
Thanks!

Thank you very much. I have been developing a site for a couple of months, got stuck on thumbnails (didn’t want to use a plugin), went on holiday for six weeks, came back and gosh darn it you went and included the functionality in the core! Much needed and much appreciated – thanks!

1) If you define multiple handles (say 10 different image sizes) in functions.php, does wordpress generate all 10 sizes upon upload even though you may only use only 3 or 4 of the handles for that post within your theme? If so, that will slow down processing time and makes for a giant increase in files / storage. So DOES WP GENERATE ALL 10? or only when that post is utilized within the theme? How do I check this?

2) Hard crop doesn’t seem to work. And as stated above, it would be ideal to specify from what point to crop (i.e., from top left, or crop from center, or crop from bottom right etc)

I’m not a coder, so I may be way out of line asking about this, but I can’t wrap my head around the thumbnails code. I used the “Regenerate Thumbnails” plugin to get the size I wanted, but I’m not sure exactly what code to paste in functions.php or where to put it. I have the custom field in my UI, but I thought WordPress was now generating thumbnails automatically.

Something’s supposed to go in the loop, but I’m not sure what that means either.

Thanks for the great tutorial! It was the perfect introduction to the_post_thumbnail.
I implemented on a theme of mine, and I am now facing a small issue:I would like to display the caption of the image below it. Is there an array to call the caption when calling the_post_thumbnail?

I can re-crop the thumbnail in the image editor and it displays the right way in the media gallery, however, when I select “Use as thumbnail” the image added to the thumbnail — both in the Edit Post panel and live on the site — is the thumbnail as it was originally generated. Regenerating the thumbnails with the plugin doesn’t seem to help. Oddly, everything works fine for cropping regular-sized photos.

Prior to stumbling on this article, I wrote my own meta box for post thumbnailing. It shows default thumb in the meta box, then when you click on it, brings up media library window where you can choose actual image, then when thickbox closes it substitutes default image in meta box with one that has been chose.

After I found out that there is default feature for this in wp 2.9, I though woa, what a waste (my job that is), but then when I activated it and looked at new default meta box, first thing that came to my mind was – maybe it’s broken? What’s the point of a link in metabox just bringing up media library window and then inserting thumb not in a hidden field or something, but into the editor? What if I do not want a thumb do be there, should I delete it manually? And why it is not shown in the meta box itself?

Thanks for the clearly written, step-by-step instructions for those of us who break our blogs nearly every time we try to follow instructions written for professional coders. This worked the very first time, and that never happens!

Omg! I spent three months learning WordPress and its implementation of OOP from the ground up and pulled my hair out trying to get images working properly. Then this comes along, just as I finish my project!

My next project is coming along nicely, and I’ve managed to very easily slot the functions into the main funciton file and the theme function file.

I use WP 2.9.1, and I updated function.php in my theme like the instructions. The USE AS THUMBNAIL button isn’t load in my Post Thumbnail facilities, I don’t see it in “From URL” tab. What’s happened? It’s only load in “Media” tab, not in “From URL” tab.

Can I use an external image url as my post thumbnail without upload it into my server? I use free image hosting such as Photobucket etc. to host my images.

Yes, I know it, I must use Set Thumbnail through POST THUMBNAIL widget, right?

If we wanna choose an image as thumbnail, we click on USE AS THUMBNAIL option, right?
The problem is: I couldn’t find USE AS THUMBNAIL option at FROM URL tab, I only found it at MEDIA LIBRARY tab. So, I can’t use an external image url as post thumbnail.
Do you understand my problem?

Can I use an external image url (FROM URL tab) instead of MEDIA LIBRARY as my post thumbnail? I need that condition because I use external image hosting like Photobucket.

Great new feature for 2.9 Mark🙂 In 2.8 we’d needed a secondary thumbnail size with the ability to auto generate if not existing, and fall back to a default img if there was no attachment associated with the post at all. I called them post toenails and used the intermediate_image_sizes filter and some fresh code to put it all together.

Looking forward to plugging this new stuff in and taking it for a spin🙂

Hmm…
I use limited server space, so I need to use a minimal amount of filesize in my server.
Do you know what the best way to compress an image without loosing too much image quality? I converts my pictures from *.jpg and *.png into *.gif but it’s not too significant.
– If I use MediaLibrary, the function.php is converts the image with resize or crop? How each way works?
– How about if I upload a an image that has width-height below the minimal width-height in function.php? What’s the consequences?

I hear ya Mossack!😉
I am new to WP but not programming and web, so this is a learning thing for me too.
The postthumbnailtemplate php file should/might have that info.
I am trying to get the thumbnail function to not throw that sizing tag on the end. I think that is why I cannot get the image to link itself to a bigger size image

I upload my thumbnail that has 300x275px size. So the resize/crop function isn’t do anything to that image. See at my http://www.mossackanme.web.id/tutorial/ and do right-click on my headline thumbnail, the image URL should the image itself (not followed by the cropped size).

Another idea : How can I make Featured post list as slideshow like Arthemia Premium? I have more than 4 Featured post, but only 4 of them is diplayed on my homepage.

It does not look like you have the jQuery carousel running? Are you using the same exact featured effect?
On the Arthemia theme it has a jQUery carousel and it has the function called in the code too. I don’t see it on yours right off?

For the Post Thumbnail cropping, do you have the one simple theme support call in your function.php file?
That is all I had to do and it does the cropping

Hmm…need an emergency help…
Please see my http://www.mossackanme.web.id/tutorial/
My blog title is same at every pages! Whoaaa…
I don’t know what’s happened…
Can you help me?
I’ve added some code to show 5 colorfull category on the sidebar like ArthemiaPremium. Send me a blank e-mail to mossack [dot] anme [at] gmail [dot] com and I’ll send you my sidebar.php.

I’m having the same problem as Tracy. Hard-cropping does not work for me – it just does the standard box-resize.

Digging into the code, it doesn’t seem like there’s any place where any cropping is actually going on. I’d expect one of the functions to call image_resize() but I honestly do not see the code anywhere. From waht I can tell it just calls the intermediate resize function which basically box-resizes it.

Mark: Are there any plans to implement a feature where you can choose multiple thumbnails for a post/page? I was hoping that was possible with this new feature, but it seems it’s not. I think it could be really useful on some themes. Thanks!

Hi, I love your step-by-step directions. I just edited a blog for a client: http://bit.ly/cat2Ye (shortened the url) but the home page layout adjusted drastically to show only a snippet of each post and no image. How can I incorporate thumbnails (on a separate page – not the home page) AND keep my original layout?

Please help🙂, high-traffic blog and now it’s stuck (I’m wary of deleting all my new code with hopes that I can ‘fix’ the issue to keep thumbnails too)

Thanks for the detailed breakdown on th thumbnail function and feature now available in wordpress. I have added this all into a new theme I am working on and its working great… when I have selected a thumbnail in the post.

I had some problems creating a default thumbnail to appear on the index when no thumbnail had been selected but got round this but for the life of me I cannot seem to make the default thumbnail link to the post title where it is being called.

Building of this statement If –> Else I got an image to appear but cant get it to link to the post title. Anyone able to help at all? Here is the code I was messing with

Congratulations about your post, really.
It is very detailed and about a new feature!
Helped me a lot.

I was just wondering if there is a way to configure that the default thumbnail of posts uses the thumb image of wordpress with default size. I believe WordPress will improve that if it isn`t already working that way🙂

Congratulations about your post, really.
It is very detailed and about a new feature!
Helped me a lot!

I was just wondering if there is a way to configure that the default thumbnail of posts uses the thumb image of wordpress with default size. I believe WordPress will improve that if it isn`t already working that way🙂

Wow, it is about time they add this tag to wordpress. It is sooo useful. I have always used the custom fields to achieve the post thumbnail affect, I will for sure be using this one in my next project.

“There is one caveat for this feature in WordPress 2.9 — it’s only works fully for new image uploads. We can’t yet resize images on the fly, although I’m strongly considering it for a future version”

It would be great! actually I create a new website (available but not communicated). Visitor are able to create their own post (with TDO-mini form). I use theme similar to this one : http://www.studiopress.com/demo/lifestyle.html. It uses thumbnails for post in home page and big thumbnail for the “fetured content”. Actually i try with Post Thumb Revisited. It’s working but i take to much time to process (without it my home takes less than 1 sec to load, with it more than 4 sec.

I fact on the fly it checks if the thumbnail already exists for the posts, if not it parses the posts for image or video and create the thumbnail on the fly or put the default image (normal or video default image).

If it can be doned at core level with a lightweight manner it will be great. For now i cannot release my new website because it takes too much to load the page.

Do you think Mark, this will be in the next release of WordPress (3.0) ?

Regards, Joan.

ps: TDO-mini-Form works too but too heavy (without it 27 SQL queries at home page, with : 838 SQL queries!! . It adds 4 sec on the home page load! even if TDO-mini form is only used in a dedicated page😦

Hi everybody !
I was trying to show thumbnails in my post excerpts.
I’m trying to get the easiest and more authomatic way for showing them.
This is my plan: to show a thumbnail with the same name as the post id + jpg (or gif or so on).
Does anybody know what should I do for getting it?

hey I can’t add this new feature on wordpress sites hosted on windows server 2003, iis6, php 5.3.2, wordpress 2.9.1. I get no thumbnail UI on post editor page and if I use “the_post_thumbnail();” function i get errors. I successfully use the same code and themes on a linux server. Any ideas why this may be.

I am trying to use this method to add a thumbnail, but when clicked, I want to use the “rel=”lightbox” to evoke the lightbox plugin for the larger version (say the single page sized-version). In order to do that, I must link to the image.

I have tried adding something like

<a href="” rel=”lightbox”>

but of course the_post_thumbnail( ‘single-post-thumbnail’ ) includes much more than just the image name.

I’ve used this feature to make a custom template for a failblog. Implemented for both images and videos extensively. Site can be found at http://www.failorfunny.com

However, I used the default thumbnail sizing technique rather than hardcoding it. Thing is, I made that theme when WP2.9 just came out. I wish this post was out earlier. Defining multiple thumbnail attributes is just so much easier!

Does anyone know how to make the THUMBNAIL a link to the full size image and not just the post?
I have the thumbnail setup to link to the post on most pages, but on the actual singlepost I just want to have the image linked to a full size image.

Will there be customized thumbnails cropping capability in the next update? I’ve resorted to regenerate my own thumbnails since currently the thumbnail generation seems to favor the middle part of an image.🙂

I’ve chozen the username morSoymbozy due to the fact it entails a letter from each particular person from my spouse and children,mother, father and brothers. As it is possible to see I have a rather big spouse and children whom I love most. I thank them everyday for putting up with me.

My real name is Andrea, Nice to meet you all.

Simply just popped in to say hello to everybody. This can be my 1st time here and I encounter it all as highly remarkable!!! I’m as new a newbie as they arrive about the world wide web but I’m so glad I found this website where I consider I can talk and study with other people right here during the community.

I have three wonderful kids, two girls and a boy. The girls are both 9 and my boy is 12. I was blessed adequate to receive them with my partner whom I adore deeply.
I am searching forward to seeing us all grow like a community and to become taking part as significantly and as fine as I individually can.

Iv used the thumbnail function on a few sites and it works great. I’ve run into one issue though, well not really an issue. Let me explain.

I’m using the thumbnail tag on an index page for two sections that use two different size images. One needs to have a specific size image and the set_post_thumbnail_size works for this, but it also re sizes the second thumbnail. Is there a way to decipher between the two sections?

I am new here within a forum. My actual name is Jeanine Dulore. It can be nice to meet you all. I’m a the mother of four children and better half to a fantastic partner Mike. I’m looking forward to take part in the forum.

Great post, thanks for you help! I’ve referred to your code about a dozen times for various projects in the last few weeks. Finally gotten around to documenting myself so I don’t have to keep coming back!

One thought though – the example you use is a perfect square (50×50). For noobs it might be worth changing that to 50×75 so it’s easier to tell which is height and which is width in your examples.

I have it working…sorta. I’m totally stuck and there seems to be a lack of documentation on the Codex for this feature so here goes.

The small 160×160 thumbnail for article listings/search views works fine. It crops it, all’s groovy. The issue comes when I go to format the image for the single.php article details view. It crops, but then scales down even further for some reason.

Screenshot:

NOTE: every time I re-test this I’m completely deleting the image from the media section and re-uploading the image entirely. I also have the re-create thumbnails plugin so I know it’s not caching.

Is there any way to access the path of one of these images instead of having it output an image tag? I need specifically the path itself…nothing more.

We’re intending to pass it into flash via a flashvariable and need the path instead of the actual image tag. I could strip it out via strstr() but that’s messy and could break later with a WordPress core upgrade.

I really liked this feature, and wrote a plugin “Generate Post Thumbnails”, that will automatically generate post thumbnails using post images. I hope this will be helpful as it was for me with my already existing blog posts.

Would anyone happen to know why I cant get this working for Page thumbnails? I’m trying to list child pages using this code. (the 2nd one, in ‘post format’). Switched out all instances of ‘content’ with ‘excerpt’ and used Andrew Oz’s Excerpt Editor which is seriously cool.

sorry about the somewhat random question. I thought it was a thumbnail issue, but it was the php on the template page… this code works if anyone is trying to display child pages with an excerpt & thumb: http://wordpress.org/support/topic/297090

i really like the way u explain everything in snippets!! So much more efficient than those markup’d and overdosed examples!!!

I tried to change the media folder to “wp-content/uploads/%category%/%postname%/” like the post-permalink setting. What happend i got 2 folder with the names %category% and %postname%, is there a way to make this happen or will it be supported someday?

Any idea why in the media library deleted images still are in the file system?

Okay I have been trying to figure this thing out with no luck. Here is my problem. I have an autoblog that uses wp robot plugin. The plugin post images, but does not save them to the server. Which I like because its one less image to host. However the problem that I am running into is that on magazine type themes; the thumbnails for amazon,articles,youtube,and yahoo answers do not show up on the front page or in the sliders of themes like solostreams wp clear or woo themes gazette or the arras theme.

I have tried the get image plugin to no avail. is this possible to make this happen?

Hi, Im using videoflick 2.2 theme and I uploaded the thumbnails normally using the simple thumbnail uploader on the home tab. They worked. Yesterday i lost my blog url address and got locked out of my own website thankfully managed to get it back and now the thumbnails are gone. Whenever I try to upload a thumbnail it refreshes and says ‘ Post Updated’ but the thumbnail doesn’t work. Any ideas?

hey, I’m trying to get this new feature to work, and I can get it to display the images just fine, however I need to just get the URL as the image styling etc is handled somewhere else.

I’m trying to get the Post Thumbnail to work with the YARPP plugin, and I need to be able to retrieve only the URL of the post thumbnail. I did see some code somewhere in this section on how to do it, but it’s giving me a complete headache!

The array($with,$height) did not work, it returns a square thumbnail. Added set_psot_thumbnail and add_image_size in funtions.php.. didn’t crop correctly, some thumbs were 135×80, while i want 186×80..
I was forced to do it this way:
the_post_thumbnail( ‘joint-thumbnail’, array(‘class’ => ‘alignleft post_thumbnail’, ’style’ => ‘width: 186px; height: 80px;’));
The inline CSS was the only way, because CSS would not override the element style, IMG had a width and height attribute in html.

Hi, sorry if this has been asked before, but is there a way to not hard-code the thumbnail size values into the functions.php? What kind of code could be used for the thumbnail function to pull from the values in the WP media settings for thumbnails?

Great feature, and excellent information here, thank you Mark! I have the same problem as MichaelC. Since enabling this, I get intermittent server 500 errors or blank pages when saving posts/pages. I can’t see a pattern to it. Any advice?

By the way, can you put more light on how can we modify the alternate text of the thumbnail at code level? By code level I mean not going to the backend and editing the alternate text of the original image🙂

Thanks for the information. Exactly what I was looking for. I really love the direction that WordPress is taking this. I’ve been duplicating these features using plugins every which way, but this is fantastic to have a way that is built right into the application.

I wish there were more ways to customize the custom fields. I use Magic Fields (and previously Flutter) and I really love how it adds the UI for the different types of custom fields. This image upload is another great step in that direction.

I followed your tutorial, and I got the thumbs and I want a custom size like w=180 h=115 but for some photos I get a square thumb like w=115 h=115, if I change the settings and put w=115 h =180 I still get a square thumb with w=115 h=115, seems to overwrite the bigger setting and make a square thumb, tried regenerating the thumbs and nothing worked
Any help is appreciated

I’m trying to add a featured image to my post, but pressing “crop” does nothing. When I save the featured image, WP ignores my selection, auto-selecting a portion in the center of the image instead. Ideas?

I used a tutorial by one of the support staff on itunes to create a magazine style home.

I am also going to use Remote Publishing on my site have have it all working to a point. I can create the posts automatically with the php i have wrote but i was wondering f you know if there is any way i can use XML-RPC publishing protocols to add a featured image/thumbnail to the post???

I used a tutorial by one of the support staff on itunes to create a magazine style home.

I am also going to use Remote Publishing on my site have have it all working to a point. I can create the posts automatically with the php i have wrote but i was wondering f you know if there is any way i can use XML-RPC publishing protocols to add a featured image/thumbnail to the post??? cvdscvdf

Thanks for the great tutorial. I have everything up and running with WP 2.9.2. but it does not work at all with WP 3.0.. The theme works otherwise jsut fine. ALso when I am trying to add the thumbnails according to the tutoria to new theme running on WP 3.0 I have no luck.. The new theme on the other hand works like charm on 2.9.2.

What kind of shit is this? I pasted the code and, yes, now I have thumbnails in my excerpts… but all other post’s images are also shown as thumbnails! If you release some code, be sure it fucking works! What a crap and waste of time.

Thanks for this post my friend. I recently started with a bare bones theme and I’ve been building it up from scratch. This helped a great deal. I was able to tweak your code to get the size and effect of thumbnail that I needed for the site that I was working on. Thanks again.

Hi I just noticed that when you use:
add_image_size
It doesn’t give you an option for hard cropping an image? then found a WP forum thread that said it was due to images being uploaded prior to the change in dimensions,, after using the Plugin by Viper007Bond thumbs were resize again, yay! Still,,, shouldn’t that be important ? dynamic resizing? I know its an overhead, but it must be considered important no?

I think, post-thumbnail is powerful, but it also seems to be underused. I myself, already know the concept long ago since WordPress 2.9 out, but only have managed the concept right just now, of course after reading your post.

I have a small issue – I figured out that if you use WordPress image editing tools to (lets say) crop the image, and then use image as Post Thumbnail Image, generated image then doesn’t reflect those edits (like crop etc.)

Could you shed the light how to make WP to generate post thumbnails with edits, made using WordPress image editing tool?

Hi loved your post but I have a question, and I cannot understand why nobody else has asked it, as it’s driving me crazy…

How do I set a featured image to be one of the other image size options instead of the original sized option?

For example: I upload images that are 600 pixels wide, wordpress also generates a ‘medium’ sized image that is 300px wide (which I set in the media settings panel of the dashboard). I would really like to use the medium sized option as my feature image, not the original image. This would save lots of bandwidth, how can I do this?

Hi, really good post. But I am not sure what I am missing. I just downloaded Wordpres 3.0 with default “Twenty Ten” theme enabled but the “Post Thumbnail” admin panel is not visible.
Please help me fix this.
I searched on google and everywhere it says to put add_theme_support(‘post-thumbnails’); in functions.php

I’m trying to get hyper links color changed in Amazing Grace them, I think you have left a comment there with your link to this blog. Can you please help me to figure out how to make pages and posts hyper links in blue instead of green color and sidebars to leave as it is in green? I ‘m still stack on how to create a variable in order to change it.

I’d like the first image in the article at the top to become a thumbnail automatically, and the ability to have a link to the article to see the remaining images, or to have the remaining images become thumbnails automatically as well.

Automatic thumbnail options with automated cropping would make things much easier.

Simply, amazing. Much easier to code than manually extracting the first image on each post to use as a temporary thumbnail. Plus it has other added benefits for being an optional, hand chosen thumb with the proper alt text. My clients will love it. Thanks a lot!

Awesome! This is just awesome! Thanks dude! I was using a hack to make it work ( tags in the excerpt) and just updated all the files with this solution so the editors dont have to mess with html (they think its too complicated =P)

What happened? This sounds like a great idea, but apparently it’s gone all crazy since you posted this. With the Twentyten theme and 3.0.1 I can’t make any of what you describe work, even though most of what you say to do has, apparently, already been done in that theme. I have to downgrade to 2.9.2 to make it happen. According to this post http://www.keleko.com/2010/setting-up-post-thumbnails-in-wordpress-3-0-with-twenty-ten/ one must jump through some serious hoops to make it fly with current versions.

I used a tutorial by one of the support staff on itunes to create a magazine style home.

I am also going to use Remote Publishing on my site have have it all working to a point. I can create the posts automatically with the php i have wrote but i was wondering f you know if there is any way i can use XML-RPC publishing protocols to add a featured image/thumbnail to the post???

Hi there!
I’ve got some questions about this great function:
At first, it works great, but on my homepage there are of cause not only the thumbnails being displayed, but also the pictures being used in the first paragraph till the more-tag. I would like to remove this pictures, because they look really ugly on the homepage and destroy the formatting as well.
The second question is, how to format the thumbnails. I would like to add a float:left, but I’m too silly for finding the right class.
Hope, you can help me with this. Thanks!

2) To make each image a hyperlink and put it at the start of each entry, rather than the end, edit the plug-in code for list-category-posts/list_cat_posts.php
function lcp_display_post
remove the clause if ($atts[‘thumbnail’]==’yes’){ … } towards the end and insert a new second line of
if ($atts[‘thumbnail’]==’yes’){
$lcp_output .= ‘ID) . ‘”>’ . lcp_thumbnail($single) . ‘‘;
}

Note that the call to set_post_thumbnail_size in functions.php may have no effect in some themes, such as K2.
Then you need to go to the templates (blocks/k2-loop.php and /single.php), and set the size in the existing the_post_thumbnail(…) call.

Hi, is there anyway I can remove the post title from showing up, leaving just the thumbnail? Im running an events site and the title isnt too necessary, and the combination of both makes it look a bit odd

Hi Mark, thanks for this post. I’ve used post thumbnails on posts but havent tested it out with pages yet. I didnt know you could turn off one or the other, so thanks for that!
Great post. really clean blog too.

Great guide man, thnx! Do you know if there is a way to alter the thumbnail selection of an image after you have uploaded it? My client has a lot of different images and sometimes she wants to crop it right and sometimes left..

I’m have trouble uploading post thumbnail images in my Lifestyle theme. I have Dynamic Content Gallery that works well. I have the featured images working well but can’t seem to get the post thumbnail images to appear.
Any help is truly appreciated

WordPress allows you to set a custom link for an image. Does any one know how to display the featured image with that link? The idea is to click on a featured image and go to an external website as set in the image link box; not the post and not the file.

Thanks Mark, the article is fine but a suggestion, if you can elaborate with some screenshots it would have been much better because the beginners like me can not really get the exact thing we are searching and obviously every requirement is not the same as you post, so it could have helped me much better if you’d have posted some screenshots in the post,

Hi there, I added the code to my functions.php and my main index.php file. I get the thumbnails displaying on my homepage so it is working. The problem is that when I try to publish a new post the post.php file does not seem to load. Can anyone help me?

Hi,
Need help badly. My product pictures dont show up in full in the website pages. Dont know how to getthem all look uniform and in the same size. Mt website designer isnt of much help. I need the jewelry pics to be of the same size.
Can you walk me thorugh it please. I am not super tech savvy. ANd am using wordpress

i installed this plugin in my website and i used thumnail feature.so the thumbnails are at displaying a part of the image,but they are not auto resizing i want the plugin to be like that. can you tell me what more i have to do for auto resizing of images

By my research, shopping for consumer electronics online can for sure be expensive, but there are some tricks and tips that you can use to help you get the best deals. There are always ways to uncover discount deals that could help to make one to hold the best electronic products products at the lowest prices. Good blog post.

Hi Mark, I change the line into the “functions.php” as you spoke to show the thumbnail only in my pages and do not show it in my posts. When I changed to “add_theme_support( ‘post-thumbnails’, array( ‘page’ ) );” my config box (in posts page) is disappeared. Can you help me on this? Thanks and sorry for my english🙂
P.S. my template is Evolve.1.2.5

When will they make featured images a standard feature? not sure if it’s just some of the templates I use, but that helpful feature isn’t available a lot of the time. Really reduces time spent manipulating thumbnails, etc.

That’s a great tutorial! However that doesn’t do the trick for me…
On my blog I currently use custom fields to show up the images on the pages. When I replace the line: <img src="/” alt=”” class=”left” width=”300px” height=”270px” />
with:

the image does show up but the text, just right to the picture, does disappear. I assume / know that this has something to do with the Class=”left” element, but what ever I’ve tried I couldn’t get it right!😦 I’m doing something wrong?

Also, can this be used with timthumb.php as I’m using this one to shrink the pictures as well.

I do not determine if I’m in the suitable place markjaquith.wordpress.com to publish my question however I’m not really so accustomed to forums, apologies beforehand if it’s not with this I had to publish .

This is my personal difficulty. I actually absolutely need to get a website for that business I’m going upward however i can not afford to pay for us a web site two thousand as well as three thousand euros.

So is it possible you advise us connected with style and design application cost-free web site i try and get by or perhaps, from most severe, the companies that can produce our web page regarding really low-cost?

I read so many reviews of the DeLonghi 15 Bar pump espresso maker and they were so overwhelmingly great that I bought it. I’ve been using it for about a week and I love it. I went from a steam machine to this one, and the CREMA is such a thick and beautiful golden, and the coffee hot. I’ll leave a couple of tips as I read from others that helped me the most.
1. Read and follow the brief and very clear directions in the booklet. Run clear water through to clean the inner workings.
2. Preheat that machine for 15 minutes, and put hot water in your cups while you’re waiting. The heated top is not that hot, but is a little helpful, the heating with hot water from the tap is best.
3. Don’t forget to use the tamper, to get the crema. When you do it, place the holder under the tamper and make a smooth motion to the right- sort of “swirling” the coffee into a smooth top.
4. I steam the milk for cappucino first, so set the steamer button, and do that so that your coffee is hot when you add the milk and foam. If you do it the other way, your coffee is cooling as you are frothing!
5. People have complained about the placement of the milk frothing device. Really no big deal- you can pull it out a bit, and once your frothing pot is in place, the device does the rest, very little need for moving it around- I was amazed.
6. Enjoy a delicious and hot cup of coffee. I know that ILLY is expensive, but I do think it makes a great cup. Lavazza is a reasonably priced alternative.
I hope my comments have helped.
PS If one other person complains about the plastic parts- like the drip tray or water holder I’ll scream. If the whole thing was stainless steel the unit would be twice as expensive. The important parts are steel and that’s what makes it affordable
Good luck and I hope this helps.

Hi Mark,
Is the core functionality you describe above the same as this plugin:http://www.evilgenius.anshulsharma.in/cgview/
I want to create a video gallery in WordPress, using thumbnail images to link to the full post instead of a typical excerpt or whatever. Think of just a grid of thumbnails. That’s what I want to show for just one category on my site. Is this possible with your tutorial or do I need the plugin?

The way this is written, if you aren’t careful, you might take the author to mean that adding both of those lines (with post and page, respectively) will add support for pages and posts. But note that immediately after providing this code, Mark said to “DELETE” the one you don’t want to support.

Just thought I would share this, since I spent several minutes trying to figure out why NO post types were supporting featured images.

This is what i am having in my theme “cover wp” theme under function.php but no thumbnails are showing up with the post, i tried to remove this and add your code but nothing worked, please kindly go through my code and let me know why itsn’t showing up

And that’s it? I have a plugin for generating and sizing thumbnails, so will it be okay if that’s all I put in the editor? Also, where do I paste it in? I’m scared to edit because the only other time I tried, I created an irreversible fatal error.

If I want text to appear next to the thumbnail and continue down the side of the thumb. Is this possible?
So the thumbnail isn’t just taking up part of the width or the post and leaving the side bare.
This is my blog. http://www.strictly-porn.com and as you can see the images take all the space.

You really make it seem really easy with your presentation but I find this topic to be actually one thing that I think I would by no means understand. It sort of feels too complicated and extremely large for me. I’m having a look ahead on your next post, I’ll attempt to get the hold of it!

I don’t even know the way I ended up right here, but I thought this publish was once good. I don’t know who you might be however definitely you’re going to a famous blogger for those who are not already. Cheers!

This is great stuff – I can’t believe I’ve only just discovered this functionality! I’ve been using and customising WP for 5+ years and missed this improvement. Anyhow, now that I’ve found it I naturally want to use it. However, one issue I have is that my previous solution relied upon the ‘featured’ image thumbnail being part of the excerpt. I then go on to use that excerpt elsewhere and use preg_match to get the thumbnail SRC. I can see two ways to solve my problems – either being able to call something like the_post_thumbnail() outside the loop with post_id as a parameter, or a way to build a loop that provides, chronologically, 4 posts before and up to 4 posts after the current post.

Hello There. I found your blog the use of msn. This is a really well written article. I will be sure to bookmark it and come back to learn extra of your helpful info. Thanks for the post. I will certainly return.

I’m not sure what it is called but for some reason how I post Blogs changed on me and for the life of me can’t figure out how to get it back to the way it was..

I used to be able to be able to post a blog and have the option to copy past a doc from Microsoft Word, also when I uploaded photos to my blog I had the option to edit them in the blog to desired location and size, so now all I have is one option for my blog posting. I think it is called HTML?

Sorry for sounding like such a newb, but the other option was just easier for me to post a blog, now when I insert a photo everything is in code and makes it more difficult for me to do my work..

Thanks for any help anyone can offer or hopefully get me back to the way I was..

Thanks for the great tutorial. I have everything up and running with WP 3.0. but it does not work at all with WP 3.0.. The theme works otherwise jsut fine. ALso when I am trying to add the thumbnails according to the tutoria to new theme running on WP 3.1 I have no luck.

Ask a WordPress Dev

Do you have an interesting WordPress-related question? Submit your questions, and I'll periodically pick the best one and answer it here on my blog! It can be anything from usage tips to hardcore WP development questions.