You may have heard a bit of news about a new thumbnail feature for themes coming to WordPress 2.9. Yes, you’ll be able to easily upload a post thumbnail. However, it’s not just thumbnails. The image will have various sizes. So, I’m going to refer to this feature as the post image feature.
In this tutorial, I’ll be covering the various things you can do with the post image feature. Some things will be specific to end users while others will be useful for theme and plugin developers.
One important thing to note is that this new feature is an image-based representation of a post. The image itself is directly tied to your post. You shouldn’t think of it as something different than that.
How does an end user make use of this feature?
First, your theme must add support for it. Otherwise, you won’t be able to use it. At this point, let’s assume that your theme does support it. I’ll go over instructions for theme authors later.
To use this feature, you must be within the post editing screen of your WordPress admin. On this screen, you’ll see a new meta box labeled “Post thumbnail” (or “Page thumbnail” for pages). There’ll be a link to “Set thumbnail,” which will allow you to use the media uploader to load a new image.
It’s not just for thumbnails
Even though it is called “post thumbnails,” we can technically use the feature for all sorts of things (e.g., feature images, medium-sized images for the front page, etc.).
By default, WordPress gives you several image sizes each time you upload an image. These image sizes are:
- Thumbnail
- Medium
- Large
- Full (the image you uploaded)
Some plugins even extend this by allowing more intermediate sizes. The important thing is that you understand that more than thumbnails can be used here.
How to add support for the post image feature in a theme
Theme authors, I’m going to make this simple for you. You only need one line of code to turn this feature on for your users. Add this to your theme’s functions.php file:
add_theme_support( 'post-thumbnails' );Or, you can register support for specific post types. For example, let’s suppose you wanted to add thumbnail support for both the post and movie post type but not for the page post type. You’d use this instead:
add_theme_support( 'post-thumbnails', array( 'post', 'page' ) );Of course, that one line doesn’t actually add anything to the front end for you. You’ll need to call the image somewhere within The Loop in your template files. For example, you might want to add thumbnails to your category archives. You’d do this by adding this line of code:
<?php the_post_thumbnail( 'thumbnail' ); ?>Or, maybe you have a section on a special template that calls for medium-sized images:
<?php the_post_thumbnail( 'medium' ); ?>Or, a huge sliding feature area on your front page and need the full-sized image:
<?php the_post_thumbnail( 'full' ); ?>That’s all there is to it. As a theme author, you can hand over some powerful functionality to your users with just a couple of lines of code.
The rest of this tutorial will focus on developer features and some options for using older images.
Checking if the post has an image
Sometimes, you may need to check if a post has an image. There’s a function for that called has_post_thumbnail(), which will return true or false based on whether there’s an image.
In this example, we’ll check if there’s an image. If there’s not, we’ll show a default image instead.
<?php
if ( has_post_thumbnail() )
the_post_thumbnail( 'thumbnail' );
else
echo '<img src="default-image.png" alt="Example Image" title="Example" />';
?>Getting the post image ID
Maybe you need to write your own custom script but still want to allow users to upload their own images. You can grab the post image ID and use it. This ID is saved as the meta value for the meta key _thumbnail_id. It is the ID of the attached file.
You only need to call the function in your code like so:
$image_id = get_post_thumbnail_id();How to return the image instead of displaying it
In some scenarios, you might want to return the post image for use in your PHP code instead of displaying it.
Here’s an example of that functionality:
$image = get_the_post_thumbnail( $post->ID, 'thumbnail' );How to filter the image size
Some plugin developers may want to filter the image size (or maybe even child theme authors). The post_thumbnail_size filter hook is available for that. The filter function below is for changing the thumbnail size to medium.
Add this PHP code to your theme’s functions.php file or your plugin file:
add_filter( 'post_thumbnail_size', 'my_post_image_size' );
function my_post_image_size( $size ) {
$size = 'medium';
return $size;
}Changing the HTML output of the post image
There may be some scenarios where you’ll want to change the HTML markup of the displayed image. In this example, I’ll show you how to wrap the image with a link to the post.
Add this PHP code to your theme’s functions.php file or your plugin file:
add_filter( 'post_thumbnail_html', 'my_post_image_html', 10, 3 );
function my_post_image_html( $html, $post_id, $post_image_id ) {
$html = '<a href="' . get_permalink( $post_id ) . '" title="' . esc_attr( get_post_field( 'post_title', $post_id ) ) . '">' . $html . '</a>';
return $html;
}What happens to my old images/thumbnails?
If you’re like me and many others, you may have been using custom fields to add images to your posts for years. If you switch to this new method, everything will be lost.
I’ve got a solution for this problem: The Get the Image plugin.
Version 0.4 will be released when WordPress 2.9 is out. Not only will support be added for the new WordPress post image feature, but you won’t lose all of the hard work you’ve put in. The plugin will have the ability to check for post images in five different ways (in the below order):
- Custom fields.
- New post image feature.
- Attached image.
- Scan the post for images.
- Default image.
For those of you already using this plugin or a theme of mine that includes the script, you’ll only have to upgrade the plugin or theme. The feature will be turned on for you by default, so you will be able to start using the new feature without touching anything but an upgrade button.
Have fun with your new post images
I hope this tutorial has given you an in-depth look at the post image feature. There are some limitations, but on the whole, this feature will make things much easier for end users compared to the currently-available methods.
If you’re a user of my Get the Image plugin or Hybrid theme, look out for an update within a few days of WordPress 2.9. You’ll be able to start using the post image functionality soon.
Thanks for this – I have a new WP magazine-style project coming up for which this will be ideal. Now I just have to hope that WP 2.9 is released in time for when I have to start the project!
Hey Justin – that’s a pretty good round up. Thanks for linking to me too
I agree entirely that this is a cool feature, and I will be making use of the ‘get_the_post_image’ function in my future themes, however for the actual resizing and cropping I think I will stick with TimThumb… for the time being at least
Any idea why we now need to add the add_theme_support( ) function into our themes? I was using a trunk install and was surprised when it suddenly stopped working on upgrading after they required that function to be added. I can’t see what purpose it serves though.
EDIT: I think I now know the answer. It’s so that the post thumbnail option doesn’t appear in the admin panel unless the theme supports it. That does make some sense, I just didn’t click until now.
BTW, in the code block under “Checking if the post has an image” the code says it’s a link, but I think you intended to be an IMG tag.
Andy Towler — It shouldn’t be too much longer before WordPress 2.9. The first beta was just released, so I suppose it depends on how the bug squashing goes.
Ben — Yep, the resizing and cropping is definitely best done by TimThumb at the moment. The only alternate solution to that would be for a theme to set its own intermediate image sizes and have a button for users to click to generate those from old attachments. I’m not sure how feasible it is to do this, but it’s something I plan on looking into.
Personally, I’ll probably keep using custom fields and the Get the Image script.
Ryan — I imagine the idea was to cut back on the number of support queries such as, “My post thumbnail isn’t showing!!!”
Thanks for pointing out the image tag issue. Updated.
“I imagine the idea was to cut back on the number of support queries such as, “My post thumbnail isn’t showing!!!” ”
Yeah. I could imagine the WordPress.com support forum getting inundated if they introduced that without adding support into EVERY theme on their site.
I have sites of my own that don’t use thumbnails too and I imagine my post writers would also get confused by a strange thumbnail box that didn’t do anything whatsoever.
I have probably used your Get The Image plugin on just about every theme I’ve done in the past month or two, so obviously the need is there for built-in post image support for WordPress.
There’s still a problem with the media uploader, though, which could keep this system partially crippled. Sometimes I upload an image and insert it into the post but it’s NOT saved in the post’s gallery. WordPress’s post image feature probably won’t have the “image scan” feature that your plugin thankfully does, so hopefully they fix this with 2.9.
Nice writeup!
This looks like a great feature that will save lots of time manually assigning thumbnails & working w/ 3rd party plugins.
Kudos to WP for including this in 2.9 – very much looking forward to using it.
This is a long-needed addition to the WP core. I’ve used the custom field technique for some time, and it worked, but I thought it really should be part of WP out of the box. Looks like it will be soon enough! Thanks for the overview. Will keep the information in mind when I look at updating my site’s theme.
That’s pretty cool, I started to play with this feature in a theme I was working on, but I updated 2.9-rare a a few days back and that features magically disappeared…
Got to play with it just enough though, may check the update, could be back by now..
Dan Philibin — The first work I done on the Get the Image plugin was way back in 2007 (way before it was a plugin). Ever since then, I’ve used the script for just about every project I’ve worked on. But, even with its ease-of-use, some users still have trouble.
I’ve also ran into the media uploader issue you’ve described. It happens on one of my sites frequently. I hope a fix is in the works for its issues.
Cory Howell — Definitely. I think this will be an extremely common feature in most WordPress themes soon.
Grant Palin — I’m so accustomed to using custom fields that I’m not sure if I can make the switch out of habit. Even after developing my Get the Image plugin, I still use the custom field technique most of the time.
The Frosty — Make sure you add support for
post-thumbnailsin your theme as described in the post. It should work in the latest from trunk.Thanks for the summary. But… bah. I’m just finishing a site that could have done with this. What I’m doing is getting people to upload an image through the upload / insert popup, making the image title something like “featured”, then just saving changes (not inserting into post). So the image is attached to the post, with a specific title – I just use the normal WP attachment functions to grab the thumbnail of it.
I’ll probably try and streamline things with this feature in the future, but out of curiousity, do you know if this new feature is separate from the “attachment” system? Is this image stored in the Media Library?
Will the new post images adhere to the image sizes we’ve defined in Settings > Media. From your (outstanding) article I gather that’s a Yes, which is unfortunate since our feature panel uses a non default image size (and for which I use the unrivaled Get The Image plugin with custom fields). I’ll probably leave it like we have now, although I might take advantage of this new feature to recode the theme slightly and have the feature box use the medium image. Adding a feature image is a lot of manual work right now and thus an unnecessary burden to our authors. The new Post Image feature makes this a whole lot simpler for them and I’ll just to need to add some extra code.
Will definitely wait for the new Get The Image, since I’ll still be needing that
Thanks Justin for both this explanation and your plugin(s)!
Nice that WordPress finally made that feature! Regarding that with the old thumbnails will be lost. Isn’t it possible to do something like this?
($thumbnail is the custom field value)
I’ve been wondering when you might have some words about this new feature. I’m also curious if you have any development credits for getting this feature into WordPress 2.9.
Is this feature built in the WP 2.9 version or we need to manually tweak the theme? Thanks, it is cool feature indeed and I love it too
This is awesome. Thanks for posting up the codes for it too – will definitely help when I launch a couple themes in the next two months.
If I added the codes ahead of time to the functions.php file and added an if/else for the posts to either use this code or the default custom field code, would that break the theme if people use it with 2.8.6? I’m just thinking if I release the themes ahead of time before 2.9 comes out, I’d like to have this already built in.
Thanks
Steve Taylor — That’s exactly the feature that my users love so much with my Get the Image script. They just upload an image (don’t have to put it in the post), and they have thumbnails.
The image itself isn’t separate from the attachment system, but the new method requires fewer database queries.
Jean-Paul Horn — Yes, they are attachments just like any other image uploaded.
Jay — There’s a myriad of ways to keep using the old images. I prefer using the Get the Image script since it’s extremely lightweight and doesn’t clutter my template files with anything more than one line of code.
Jason Pelker — Nope, I don’t get any credits for this one. When I first looked at the feature, I thought it was similar to one of the features in my plugin. But, once I dug a little deeper, I saw how much better this is.
Tinh — Please take a few minutes and read through the post. Everything is explained there.
Mike Smith — You only need to check if the function exists for backwards compatibility:
Excellent write up as ever Justin.
I’m just wondering… how (if even possible), would you make it so the thumbnail is linked to article for navigation purposes
My theme came with “get the image” plugin built it
I’ve implemented the code above on a mirror test site of my site, replacing the following code…and although the images are appearing fine, they are obviously not clickable. And unfortunately my php knowledge is not good enough to work out the code i need. Can you point me in the right direction.
sorry – my code got dropped… i don’t know the command to show code, it’s clearly not backtick as i’ve become used to.
I’ve currently tested the Wordpress 2.9 Beta-1 but can’t found that Post Thumbnail Meta Box in the post editing screen. Anyone know why ???
great info.. but any know how to auto resize image..? not large to small. but from small to large post inside. thanks
I guess it is going to work pretty similar to the feature like i have on my template, if so it is absolutely great.
I especially like the feature with usage of default picture i am missing that part on my template.
Nice tutorial, I could follow it quite easily and will probably not get down to testing this feature until 2.9 is officially out due to my sheer laziness. This means one less plugin to themes who want to have a custom post thumbnail.
My site also could’ve used this. Oh well. I’ve been using a plugin called Smart Image for a while now. It doesn’t use custom fields though. Come to think of it, it’s pretty much exactly like the new WP feature. It’s just not built-in obviously.
Ade — There’s an example of this in the post.
Faizal — Please read the section in the post about adding support for this feature in your theme.
Agung — Find a plugin that resizes images.
Morten — Yeah, users of my Get the Image functionality have been enjoying basically the same thing for a long time now.
Darran — I’ve always just built the functionality straight into the theme. It keeps me from having to worry about whether an extra plugin is updated.
Jessi — It seems sort of like the Get the Image plugin, only with fewer options for getting an image.
I was trying to figure out that function, so thanks for the code, it worked perfectly.
I also made a tutorial with a step-by-step guide on how to implement the post_thumbnail feature into the loop to make a gallery site.
http://a.parsons.edu/~zeravivm/f09/osd/author/mraduka/
Before reading your post, I had so many queries regarding how to post the image feature in Wordpress. But, now, I don’t think that I have any doubts regarding that. Thanks for the information.
Ok, this is a painter-needs-to-build-her-own-damn-website dream come true. At least I think – could you use this feature to more effectively whip up a site like this?
@Justin
That is great news from all wordpress bloggers, i picked my template as my pages basically is about travelling, and pictures in that case is a must have.
The number of visitors, which pictures can create totally surprised me, the tricky part is to get them on the page, not just having them look at the images they found in Google.
Anyway great news, that the new Wordpress feature will work similar to the Get the Image functionality.
Morten
Hi Justin,
I always like your post and it is so simple and concise to learn some new feature on wordpress.
Thank you.
Great information, thanks for sharing. The code is really helpful as I am planning an upgrade once 2.9 is released. I’m a first time visitor and wanted to say this looks to be a very useful blog. Your work is much appreciated!
Justin,
Thanks for the step-by-step. Frankly, I’m not the most technically inclined person but based on your explanation I think that I will be ready to use Post Thumbnail once I upgrade to WP 2.9. Hopefully, both will be as “easy” as I would hope.
Thank you for the informative post, as always. Looking forward to the upgrade.
john — You’re welcome. I’m glad I explained it in an understandable manner.
Ridgely — Yes, definitely. That’s exactly the type of use where this feature would come in handy.
KokPinLab — You’re welcome. I’m glad you liked the tutorial.
Jake — Well, welcome to my blog.
I probably spend more time writing about WordPress features than actually using them myself.
Kelli — Provided your theme has support for them, it should be as easy as simply uploading an image.
Ashley Lekov — Me too. There’s quite a few new, useful features I’m looking forward to.
i try the beta of wp 2.9 but icant find any Page thumbnail box !!!
“you’ll see a new meta box labeled “Post thumbnail” (or “Page thumbnail” for pages).”
where is the post thumbnail.
Ohhhhh, i understand now “add_theme_support( ‘post-thumbnails’ );” at the first i thought the function used only for theme support!!!! not for the admin post or page editing
And I am so satisfied with the auto thumbnail script in your hybrid theme… with an easy single clicks any articles will have customized image thumbs
Justin, you talking about Get the Image plugin, that help do not lose old thumbs. Are there some way to resize these old thumbs?
For example, i use 100×100 px thumbs and now want to enlarge them to double-size.
Added the code bit to my themes function.php file at the last line 434 and no activation. Emptied cache. Different browsers. Still not there. Curious… 2.9-beta-1. This is the most complete, easy to follow article I’ve found though. Good work.
Justin thanks for the great article – I’v got this implemented in an upcoming revision of a fairly large magazine site I manage. I have a question tho – you don’t happen to have an easy way to get just the URL of the post image (by size) do you? These functions get the entire IMG tag, but I’d like just the URL to the image itself.
Well, it breaks some stuff in older installations, but its a very nice new feature in wordpress 2.9
greeting, darila
Hi Justin,
there is a typo in the code block under the paragraph “Changing the HTML output of the post image”. At the end of the second line, there is a ; instead of a {
Thanks for your helpful posts.
I tried it out, and it looks like the only thing that the Post Thumbnail write panel adds is the ability to just embed an image in your post. I thought it would have been a separate feature, where in previews only the post thumbnail would be displayed or some different type of functionality. But it only gives you the ability to insert an img tag in your posts. Does it do more? What’s the reason behind the hype?
It’s great that they are implementing this feature into wordpress finally. As time has progressed and thousands of blog themes have been developed, a ton of them are including thumbnails next to the posts and excerpts. It is not exactly easy to hand-code this all the time, especially for inexperienced developers. I can also see this feature being great for portfolios and case study pages!
I really love to use wordpress and as stated here there are so many blog themes avilable and these things should have in mind while using wordpress. This post makes those very well aware who just have to use this but are not aware of it well.
But Matt M., it’s as easy as simply typing in your post content…
Thanks Justin,
I had written something similar on my blog (in french) http://weblog.fairweb.fr/archives/2009/12/05/wordpress-2-9-la-vignette-dun-article-en-natif/ and just linked back to your post as it is much more detailled.
I’ve also written a plugin http://wordpress.org/extend/plugins/fw-post-image/ where I used your idea (and a couple of lines of code) of scanning the post content. Feel free to extend it as you wish or, if your plugin does something different, take some of my code if you find it helpful. Do not hesitate to contact me by email.
Myriam
Thanks for the write up Justin. I was curious if it worked on pages as well as posts. Just added the code and it does.
Just a small note. The WordPress Team has renamed those new functions. instead of _image all functions end with _thumbnail. So has_post_image becomes has_post_thumbnail.
moshe ovadia — This is a theme-specific feature, so your theme must support it for it to work at all.
Andri — Me too. I’m not even sure if I’ll be using this feature.
brainsolid — I’ve seen a plugin once that resizes older images, but I can’t remember what it was.
Doug Bedient — I’m not sure if it works with Beta 1. I recommend using the latest trunk.
Suzanne — You can use this code:
darila — Yes, it’ll break in older version of WordPress.
Aldo — Thanks. I updated the article.
bob — This has nothing to do with inserting images into the post (though you can certainly do that). I would suggest reading through the article again as it explains “the reason behind the hype.”
Matt M. — Portfolios and case studies can definitely make use of this feature.
jamee — I’m just hoping most of those thousands that currently use post images will be updated.
Fairweb — Get the Image already does what that plugin does and more.
Devin — It’ll work with any post type. Actually, I just updated the post to show how to add it only for specific post types.
Kretzschmar — Yeah, I just updated the post. I hate that they’re using thumbnail in the function name rather than
imagebecause it doesn’t accurately represent what the function does.I searched for get_the_image plugin in the WP extends but did not find any new update. When do you intend to release it ?
It’s updated now. I had to wait until WordPress 2.9 was released before I officially updated it.
One example of a plugin that already supports 2.9 is the AutoNav plugin ( http://wordpress.org/extend/plugins/autonav/ ). It uses the “post thumbnail” when it creates a table of child-pages… so if you have a page, “Cruises” and each of its child pages (Tahiti, Hawaii, etc.) has a post-thumbnail, you would get a set of images like a menu of them.
I still enjoy your Get The Image plugin
But this features also useful
I’ll probably always use Get the Image. It just offers up many more options and provides nice backwards compatibility with several ways of grabbing post images.
Marry Christmas and happy New Year 2010 from croatia.
This was really a great tutorial, considering every aspect I would say. I’ve copied it and will use it. It will help me right away. Thanks
Yesssssssssssssssssssssssssss!!! I was using Post Thumbs Revisted for the last year or so, but it wasn’t working properly after I upgraded to the latest WP. Soooo, I tried numerous other plugins, but none of them met my client’s needs. With the plugin you suggested, coupled with WP 2.9 and your custom code, it all works like a champ now. So stoked!!! Thank you so much for your WP wisdom.
Happy New Year!!!
You’re welcome. I’m glad the plugin and the post have been helpful.
Thanks for the review. Now I’m just finishing a site that could have done with this. What I’m doing is getting people to upload an image through the upload / insert popup, making the image title something like “featured”, then just saving changes .
Thank a lot for sharing youre good thought……….
LOVE the potential of this – especially with being able to edit separate crops for the separate photo sizes. Square thumbnails for product galleries with more appropriate non-square for detailed photos.
Having a strange quirk that when I put the add_theme_support( ‘post-thumbnails’ ); in my functions.php file and refresh in the admin, any time I try to select a photo from the media library it shows no results. Remove the line and the list of photos does show. Any thoughts?
“What happens to my old images/thumbnails?”
why dont use the old AND new method? if there is a special-field declared then use it. if not use the new method no prob
There’s about three different “old” methods of grabbing images. I prefer to just use one function call rather than 4
if/elsestatements, each with their own functions.“How to return the image instead of displaying it” thx that helped me very much that was the problem i’m searching for!
Thanks for the write up Justin. I was curious if it worked on pages as well as posts. Just added the code and it does.
Justin, a very good read! Wasn’t aware of the possibility to edit the HTML output. That’s really handy…!
Thanks.
Does anybody know if we can have next and previous thumbnails for navigation on posts and what the code would be?
(This article was very helpful and was an asset for me setting up my website for post thumbnails.)
I am replying to my question. A plugin has been developed that works as a widget and shows the next/ previous thumbnails. It also has several other nice options. The name of the plugin is called “Post Navigation Widget”. It can be downloaded from from the Wordpress Pligin Directory.
Its a lot of nice features in 2.9 version od wordpress
I was searching for how to return the image instead of displaying it and found it here, thanks…
greetings, nagradne igre
Great post. I’ve been using the Get the Image plugin on most of my sites making for a smooth transition to 2.9. Check out my latest post for an updated detailed walk through of the new Image Editing features. Uploading and Editing Images in WP 2.9
Thanks
~ Ruth
This was really a great tutorial, thanks!
Thanks for helpful post.
Thanks for the lovely article. One thing I cant figure out is how to get the thumbnail to act as a link to the ful size image? Not to the post.
Thanks again
Nice article, do you know how you can return the filename rather than the ID of an image being used?
I want to return the filename of an image being used on a main page, then modify it so I can use it to call another image for the subpages depending on what template is being used for the sub pages (i.e. main page thumb = “image-wide”; sub page thumb = “image”-narrow).
Unfortunately I can’t just resize and re-use the image as it won’t fit the templates.
Thanks,
Sorry, to clarify… I thought that your instructions under “How to return the image instead of displaying it” ($image = get_the_post_thumbnail( $post->ID, ‘thumbnail’ );) would do this but it doesn’t seem to, it just displays a thumbnail version on my page.
I justin. Thanx for this article.
I would like to extract the post thumbnail url to use it with css.
How can i do that ?
is there a function like “the_post_thumbnail_url”
Thanx for help.
Sorry to annoy you seemed to be something like that :
Wrote that little function that works fine.
[code]function get_post_thumbnail_url( $post_id = NULL ) {
global $id;
$post_id = ( NULL === $post_id ) ? $id : $post_id;
$image_id = get_post_meta( $post_id, '_thumbnail_id', true );
$image_url = wp_get_attachment_image_src($image_id);
return $url[0];
}[code]
I’m sorry last line is :
“return $image_url[0];”
until now I still use wordpress 2.8
not dare to upgrade
btw, thanks for the tutorial
I am trying to plug-in my own code to make the WP post thumbnails link themselves to the article.
I already added in the archives pages and templates page the ability to do this.
But on my single post page, I want that image to link to a full size.
Right now I have only
<a href="#" rel="nofollow">and I am not sure what the tags are to pull those full size images in, any thoughts?Thanks
I like the code under ‘Changing the HTML output of the post image’. It automatically adds the title (alt post title) to an image. But I want to get rid of this….
It’s impossible
Justin,
Do you know if there is a way to add a rollover effect to post thumbnails?
Justin,
Is there a way to use the_post_thumbnail(); outside of the loop?
I’m a newbie at this wordpress programming and I still can´t figure how to display my pages and subpages using this. All I see here is code for Posts not pages.
I still don’t understand what it means to be ‘in the loop’. I am not a programmer. I am still begging to learn these things.
Can anyone help me with the code for displaying subpages inside a page?
Hi Justin, great tutorial. We will use the thumbnail feature within our new theme. Thx!
Justin, I thought this might be useful to your readers.
Next & Previous Post Titles With Thumbnails: http://wordpress.org/support/topic/368725
Using the built-in wordpress thumbnail feature seems to add *many* extra queries when I used it in my loop. I think I’ll go back to my custom field solution.
I use the debug queries plug-in from time to time, and I found out that my queries nearly doubled to 40-something after using the built-in thumbnail feature.
Anyone uncover something similar to this?
I especially like the feature with usage of default picture i am missing that part on my template.
Thanks for amazing guide to wordpress thumbnails… specially “How to return the image instead of displaying it”.
“Changing the HTML output of the post image
In this example, I’ll show you how to wrap the image with a link to the post”
using it and it is great … but i wonder if it is possible to limit this feature only to archive pages … or rather – to exclude single posts from it, since when image appears in single post there’s no need to link to same single post …
Great post, and a lot of comments, congrats…
Found how to return the image…
greetings, Križarjenje
Thank you for this great explanation. I has always many problems with images.
Hi everybody !
Thanks to the author for this hopeful article !!
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?
Thanks a lot in advance !
I think after adding this line in my theme
add_theme_support( ‘post-thumbnails’ ); I am getting attachment url in place of post url after uploading image and in popup image edit window. There is option for none, file url and post url but I am getting attachment url as post url …. my permalink is like /%year%/%monthnum%/%post_id%.html
Any one got same problem ?
hi all ..
I have a problem. I write a post. Insert thumbnail and click on publish but that does not save the thumbnail. I have to write the post, publish it and THEN insert the thumbnail. Am I doing something wrong or is this the default behavior?
Nice tutorial, The thumbnail looks good. thanks for sharing
This has been very helpful.
Thanks
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.
Right now we’re using:
the_post_thumbnail(’some-special-size-here’);
I have tried this as well but it still outputs the image tag with it…
$image = get_the_post_thumbnail( $post->ID, ‘some-special-size-here’ );
I found that parsing the URL out works, but it’d be great if Wordpress could add built-in functionality to grab just the URL instead of forcing us to use the IMG tag.
http://polymathworkshop.com/shoptalk/2010/03/19/get-the_post_thumbnail-direct-path-for-wordpress/
Any idea if this works 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.
When I try to plug in the code for the thumbnail, it doesnt show.
Any idea what I might be doing wrong?
Wow…you saved light years of me trying to figure out these thing by myself.
This post is GOLD…thank you for sharing
How do you add lightbox or thickbox (example rel=”lightbox” or class=”thickbox”) to the thumbnail?
Great stuff you had here. Those were really helpful tips for me although Wordpress 2.9 is an old version and there are new version for this. I am hoping it works with the latest version. The feature was very useful for beginners like me. Thank you.
Hey Justin, I’m a fan of this add on support for uploading images.
It works great for me but I tried something which I had no idea why.
I set my user role as Contributors and when I try to click Set Thumbnail, nothing happens!
Could you figure this out? Should I change the user role to Author?
Look forward to hear from you, Justin. =)
I added the code under “Changing the HTML output of the post image” and it works great except the image title is the title of the image NOT the title of the post. If I mouse over the very bottom right of the image it has the post title but the rest of the image is the title tied to the image itself.
Anyone have any ideas on how to fix this? Any way to trim the $html string off after “title=’ ” and add in the Post Title so that the image will have the correct data?
Here is how the page source reads currently:
Yeah, struggling with this bit too. You can always just change the title of the image as a workaround.
These are really one of my big questions few months ago when I was still new with wordpress and I don’t know some features and uses of it. Until, I got into your site and you really have so many important lecture/ideas for beginners like me and everyday visit to your site provides me new ideas in improving what I really want to do in my life. Thank you.
I must say you’ve created a very helpful source for beginners like me. Although I knew some part of it there are still facts and codes which I learned from you. Thanks a lot.
Hi there.. thanks for the info..
i’m wondering?? how do i get the ‘thumbnail’ to show up in this query??
iv tried a few things but nothing seams to working
Kindly
Hi Justin, nice explanation!
I have just one question, is there a way to remove the post thumbnail from the image gallery of the post?
The reason I’m asking this is because all my posts have an image gallery and I don’t want to have the post thumbnail inside this gallery.
Hope you can help me!
Thanks
I’m also wondering about this..
Without this function this new feature is rather worthless since you could just have used thumbnailversions of an image as a thumbnail.
I have got a question regarding this the_post_thumbnail I got it working, it is a great new feature, but I now face an issue when I want to add a new size of thumbnail.
It works perfectly and creates a new thumbnail for all new posts, but it does not create a new thumbnail size for the old posts. How can I solve that issue?
Thanks for your help!
I tried , but i cannot get any effect of this modification in my site.
Great posting on the image feature, I just noticed about it lol.
How can I pull the image meta data for PHP?
1) Let’s say I want to assign $width_of_the_image variable to check that image is under or over certain size.
2) Then I can compare this size to my set values and give the image a proper class to handle the output nicely.
Maybe a tutorial?
Here is some nasty code that worked for me:
Hi Justin,
thanks, this article helped me a lot.
Like Bob – April 26, 2010, i would also like to put a lightbox on the image.
How do you apply the extension (.jpg or .png or.gif) to the image?
Is there a way to set a SET size for these post thumbnails?
Is there any plugin that does this work? There’s no thumbnail how ever i tried.
Is there a way to pull the featured image URL for use in the head? Here is what I would like to do – Im trying to add something like this to the head of my single.php pages –
However, this doesnt work. All I need is to point it to the URL. Any ideas? Thanks.
Hey Hackadelic,
I was thinking of some sort of anchor and “a” name situation. i have done this before with an accordion, but it was out side of wordpress.
Regards
fff
Luke
Im looking for a way to have two featured images.
One for the thumb nail and a 2nd one for a Call to action slider im making.
I would like my client to be able to upload an image just like the featured image works, and have two area on the left side for images.
I have been googleing for hours ;c )
I understand custom post types and taxonomies, i have written several plugins. Just looking for a push in the right direction.
Thanks and great post.
Hi Justin,
Thanks for the great explanation. I am not an expert and therefore allow me one question.
I would add some text to the title prior to the name of the picture. Something like:
Click here to get to the picture ‘ + post_title + ‘
What would I have to add to the function.php to achieve this?
Thanks & Bests
Thorsten
is there anyway of using this to just produce the url for the featured image?
i need to use the the featured images twice one in a thumbnail with a seperate style and an alignment to the one on the post.
is there a way of extracting the image location from the ID?
was a little confused by the html editing section of this post :S
Hi Justin, hoping you can point me in the right direction for a problem I’m having.
I’m using the plugin on a site that requires transparent thumbnails due to the design. I’ve tried Gif and PNG files, and the thumbnails lose the transparency and show up as black. I’ve searched for a solution online, but have not been able to find one.
Hoping you might now the fix?
Thanks
Hi Justin, found the solution to my problem, so posted again in case others have the same issue. I discovered the PNG files have to be saved as 24bit – the resolves the black background.
That was ALMOST everything I needed to know about the post image feature.
Now I just need to know if I can change the alt tag for the image. I’ve seen people that say I can’t, but I don’t like that word. I’ve also seen the codex page for the_post_thumbnail and the default attribute Wordpress assigns to it. Can I somehow use this information to change it?
Your response is GREATLY appreciated.
Dallas
Fantastic post, that was really really useful. Thanks alot – now I know my way around adding featured post thumbnails!
great post, its was what i need for my WP website. thanks very much and now i know how to adding post thumbnails…..!
Thanks a lot for clear instructions. Now I will use thumbnails at archive pages
Hey, thanks for the info.
-But, how do i get an image to resize, only to fit its smallest side in the box? (thus, fitting inside but cropping a little it’s larger side)…
Sort of the reverse of hard crop.
Thanks.
Hi Justin,
In my search to find out how can I fix my problem, I found your site. I’m just starting to layout my site and I came across some issues. Under my archives menu, I made a few sub-menus linking to some of my test post. When you click on any of the sub-menu. It only displays some on my text and none of my photos. You have to click again on the heading of the post to display the entire post. Is their a way to display my entire post with images, as soon as I click on the sub-menu links. Here is a sample of a site who does just what I want to do http://www.munroephotography.com/blog/
Thanking You In Advance!
-Mike
Perfect!!!!!!!!!!!!!!!!!!!
Thank you a thousand time
Happy new year!
thanks for the detailed explanation…
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.
Ever get a response about this?
Hi guy’s
i spend some time to figure out how to show featured images from PAGES within a loop, where it seems you have to use
get_the_post_thumbnailinstead, here’s what i found if anyone should be puzzeling with the same issue.Hi Justin,
Thanks for guide to wordpress thumbnails…
Regards Frank
If you must have an image on “home” (as autofokus) place this in your functions.php
and call
echo_cover_image_url(get_the_ID(), 'large')from the loop.Reg:
get_post_thumbnail_id()Hi Justin,
I want to display an image only if set through featured image. Esle, diaply nothing.
But it takes an image from the post to display there.
Is there any other method.?
Thanks for getting me started with WordPress and images, Justin.
I’ve since tossed together a primer on WordPress and images. It’s not as thorough as your article but I think some might find it helpful.
http://www.chiefalchemist.com/primer-wordpress-and-working-with-images/
Let me know what you think. Maybe I should present it a bit differently?
Brilliant script – just love it! Thank you.
One tiny problem, though.
The script is set to call thumbnails and my WP media is set for thumbnails to be sized to width =150.
My photos uploaded are already sized at 150, BUT your script is pulling the photos to 213 so everything is distorted.
Any suggestions – thx again for the wonderful script.
The idea is to click on a featured image and go to an external website as set in the image link box..!
[...] Everything you need to know about WordPress 2.9′s post image feature [...]
Brilliant! Absolutely brilliant! Good explanation also for germans! Thanks a lot for that!
So, I can’t get the “Post Thumbnail box” to appear in my theme. I placed the code :
into my theme’s function.php file but it won’t show up in my posts panel. What am i doing wrong?