The Ultimative Guide For the_post_thumbnail In WordPress 2.9

WordPress-Christmas-18WordPress 2.9 RC1 is released and the new post thumbnail function will not change until the final version hopefully.
I was chatting a little bit with Sergej Müller last night and we were trying some things out. We found out the following things:

Edit: Some little changes, see Matt's comment.

You can provide 4 picture formats to the function (change the width and height values to your need):

// the thumbnail 
the_post_thumbnail(array(100,100)); 

// medium resolution
the_post_thumbnail(array(300,200));

// large resolution
the_post_thumbnail(array(600, 400));

// original
the_post_thumbnail();

You can set how the images should align. It is also possible to assign an own class:

//  left align
the_post_thumbnail(array(100,100), array('class' => 'alignleft'));

//  right align
the_post_thumbnail(array(100,100), array('class' => 'alignright'));

//  center
the_post_thumbnail(array(100,100), array('class' => 'aligncenter'));

// align right and the class  'my_own_class'
the_post_thumbnail(array(100,100), array('class' => 'alignright my_own_class')); 

The 3rd possibility is the control of the images size with an array of height and width:
For this purpose we suppose that the settings for thumbnail is 150x150, for medium 300x200 and for large 600x400.

// thumbnail scaled to 60x60 pixel
the_post_thumbnail(array(60,60), array('class' => 'alignleft')); 

// original thumbnail
the_post_thumbnail(array(150,150), array('class' => 'alignleft'));

// medium resolution scaled to 200x133 pixel
the_post_thumbnail(array(200,200), array('class' => 'alignleft'));

// large resolution scaled to 400x266 Pixel
the_post_thumbnail(array(400,345), array('class' => 'alignleft'));

We see that the image proportions are always maintained, even if one specifies crooked values.

For the Theme Designers is this not necessarily easier, because no one knows what the user will put in his settings o his library. One way to approach this problem, to query the options for the various sizes:

// width of the thumbnails
get_option('thumbnail_size_w');

//  height of the thumbnails
get_option('thumbnail_size_h');

//  height of the medium resolution
get_option('medium_size_h');

//  width of the large resolution
get_option('large_size_w');

//  1 = Crop thumbnail to exact dimensions, 0 = Crop off
get_option('thumbnail_crop')

You can change these values in your theme.

$w = get_option('thumbnail_size_w') / 2;
$h = get_option('thumbnail_size_h') /2;

the_post_thumbnail(array($w, $h), array('class' => 'alignleft'));

Here another example: If the size of a thumbnail is bigger than 100x100 and crop is activated, then the thumbnail should be resized to 100x100, otherwise use the original thumbnail.

if(get_option('thumbnail_size_w') > 100 && get_option('thumbnail_crop') == 1) {
    the_post_thumbnail(array(100,100));
}else{
    the_post_thumbnail('thumbnail');
}

Have fun with post thumbnails! But be aware, that each post thumbnail requires 2 data base queries. On a page with 10 posts that would be 20 more queries.

Comments are closed.

107 comments

  1. Dario Ferrer

    Hi,

    Since this morning I'm testing the_post_thumbnail(). It eats 3 DB queries for each image.

  2. Bill Robbins

    The post thumbnail is a step in the right directions, but still isn't quite what most of us are looking for.

    So many themes use timthumb now, why don't we just include it in the core as part of the post image so everyone can use it.?

  3. Michael

    Bill, you have to ask the dev's ;)

  4. billg

    Bill, because of the 3.0 merge with MU and MU's issues with timthumb?

  5. Bill Robbins

    @Michael--I'm all in favor of asking. It would help lots of users.

    @billg--totally didn't think about that. I just had timthumb and MU issues this week.

  6. Markus

    Thanks for a great guide.
    What about more options e.g. how to get the thumb URL?

    Cheers.

  7. Radu

    Thumbnail For Excerpts it's a WordPress plugin which use thumbnails from WordPress 2.9 but, important!!!, works for posts which do not have yet a defined thumbnail.

  8. chris

    how can I use this feature?

  9. Frank

    You can use this with WP 2.9 and a Theme, was support this feature

  10. Sam

    Thanks for this nice overview, especially the infos on the image proportions.

    Chris, you or your theme author have to first activate this new feature via an entry in your functions.php before the post thumbnail block shows up in the article editor. Found a good walkthrough for this here:

    Using The New Post Thumbnail Feature In WordPress 2.9

  11. Roman

    As a theme developer, I love this new feature.

    But one problem I have with the "get_the_post_thumbnail" function is, that it outputs the image-url surrounded with the hole img-tag.

    In my portfolio theme page, i needed a solution to get only the urls for the different thumbnail sizes.

    For this u can use the "get_post_thumbnail_id" and the "wp_get_attachment_image_src" function.

    $thumbnail = wp_get_attachment_image_src(get_post_thumbnail_id(), 'medium');
    echo $thumbnail[0];

    This will give you the url from the thumbnail in "medium" size.

    Cheers

  12. Mukizu

    Finally can rid off timthumb.

    Can anybody tell me - is there a way to change the_post_thumbnail's title to the title of the post?

    Like: the_post_thumbnail(string('title' => '')) ?

  13. Matt

    I wouldn't recommend anyone use the named arguments for the_post_thumbnail, like 'thumbnail', could you remove those from your tutorial.

  14. Jason

    I'd just like to point out that you can pass ANY arguments that would be attributes in the image tag...not just classes. You could pass:

    // don't do this because it's bad CSS
    the_post_thumbnail('thumbnail', array('style' => 'float: right;'));

    if you wanted to. This function is just taking your arguments and putting them into the HTML element

    // this doesn't make any sense unless I get JavaScript involved
    the_post_thumbnail('thumbnail', array('foobar' => 'baz'));

  15. Jason

    @Matt: Why wouldn't you recommend a use like this? Could you please explain? Will it cause WordPress to blow up or something?

  16. Mukizu

    @Jason,

    maybe you can help with my problem than? How do I use 'alt' tag here? I want to put inside of alt attribute. I've tried 'alignleft'),array('alt' => '')) ?>, but it does nothing

  17. Mukizu

    oops, the part of code was eaten in prev. comment.

    It should be: I want to put the_title(); inside of 'alt' attribute
    and: the_post_thumbnail(array('alt' => '<?php the_title(); ?>')

  18. Michael

    @Mukizu: You can't override the alt attribute. And the_title() echos the title in a function, that will never work too.

  19. Mukizu

    @Michael,

    Thanks. This is sad, and there same goes for 'title' attribute I presume?

  20. Dario Ferrer

    ... And those php brackets looks very bad.

  21. Michael

    @Mukizu: Yes, same for the title attribute.

    @Dario: right!

  22. Dario Ferrer

    Muziku, always you have the option to work with functions results, turning both get_the_post_thumbnail() and get_the_title() into variables and applying a str_replace:

    function my_img() {
    $thumb = get_the_post_thumbnail('your_args');
    $title = get_the_title();
    $thumb = str_replace('alt=""' , 'alt="'. $title .'" , $thumb);
    echo $thumb;
    }
    my_img();

    If alt text is not empty, you must to use preg_replace instead str_replace.

  23. Mukizu

    @Dario,

    Thank you a lot :)

  24. kremalicious

    @Mukizy @Michael: To my surprise you can indeed override the alt and the title attribute like so:

    the_post_thumbnail(array( 150,150 ), array( 'alt' => 'alttext', 'title' => 'titletext'));

    @Matt: Please enlighten us why the size shortcuts shouldn't be used.

  25. Michael

    Thanks kremalicious! Yes, it works.

  26. Mukizu

    @kremalicious

    thank you:)

  27. Home Trends

    The most important is you need to add this code on functions.php

    add_theme_support( 'post-thumbnails' );

  28. Vlad Ghinea

    Unfortunately the cropping is not working in Firefox because of the click and drag policy for the image. It works though in Chrome or Internet Explorer.

  29. Chris Harrison

    For some reason, post_thumbnail won't natively display in RSS feeds in 2.9. I found a way to make it happen (with an assist from two others): http://cdharrison.com/2009/12/the_post_thumbnail-for-rss-feeds/

    Hope this helps!

  30. Dario Ferrer

    Chris,

    Good work. However -as i see it- the_post_thumbnail is a tag to implement directly in the template. So what you did is best done with wp_get_attachment_img or wp_get_attachment_image_src.

    I thing this tag was created to make life easier to webmaster. I also think that if we need more complex functions (as post images in feeds), we must to use more primary functions, it is better to make WordPress do the work with the fewest possible steps.

    On the other hand, thinking in the WP based web designer I made a plugin which can (i hope) do a better job than the_post_thumbnail in a professional way, including the RSS part. Last nigh I wrote -in a very bad english =P- an article about comparison between this plugin and the_post_thumbnail:

    http://www.darioferrer.com/wpsi/wpsi-en/the-post-thumbnail-vs-wp-smart-image-ii

  31. Paolo Gabrielli

    I was waiting for this function since a lot. I coded and used mine for WP 2.0 (and still using it on newer).
    Now we only need to be able to assign (post_parent) the same attachment to more than one post with a many_to_many association.
    Let's hope that for 3.0!

  32. Mark Jaquith

    @Matt: Please enlighten us why the size shortcuts shouldn't be used.

    You should just use it naked and set the size in your theme's functions.php using set_post_thumbnail_size( $width, $height, $hard_crop_flag );

    See my tutorial.

  33. B

    Great breakdown on WordPress 2.9. I agree, back up your stuff and get 2.9.1 when it becomes available. WP 2.9 is a solid update, but am still looking for more in WordPress 3.0. Here’s my thoughts on the newest version of WordPress.

    http://www.experts-exchange.com/articles/Web_Development/Blogs/WordPress/WordPress-2-9-What-to-Expect-When-Upgrading-to-WordPress-2-9.html?

  34. Lego

    Hi all, I tried the the_post_thumbnail() function. I like it but just need one thing : I would like to know the size of the original image.

    I need to know if it is a landscape or a portrait layout (my display is not the same)

    the get_option('thumbnail_size_w'); function gives me the default thumbnail width, so it doesn't help me.

  35. Dario Ferrer

    Lego you're right, that function gives you the default width. Read my post below.

  36. George

    @Dario
    about this code you wrote:
    ---
    function my_img() {
    $thumb = get_the_post_thumbnail('your_args');
    $title = get_the_title();
    $thumb = str_replace('alt=""' , 'alt="'. $title .'" , $thumb);
    echo $thumb;
    }
    my_img();
    ---

    could your explain how to use it step-by-step?
    and put replace for 'title' attribute into this code. note that title is never empty.
    thank you a lot!

  37. Toman

    Hi,

    Great tutorial, thx a lot!

    I have a question: is there a way to extract the alt attribute (from the image library) and display it? I understand that I can override the alt attribute like this:
    the_post_thumbnail(array( 150,150 ), array( 'alt' => 'alttext', 'title' => 'titletext'));
    ... but by doing this i get alt="alttext" for all my images. This is not what i want. Any ideas?

  38. Dario Ferrer

    George, that code is not needed anymore. It was made when I didn't know the option posted by Kremalicious:

    the_post_thumbnail(array( 150,150 ), array( 'alt' => 'alttext', 'title' => 'titletext'));

    So you must to proceed in this way:

    the_post_thumbnail(array( 150,150 ), array( 'alt' => get_the title()));

    --

    Toman, to achieve what you requested is need to use get_children() to get the $img->post_title or excerpt (title and alt respectively). Take a look to the 5th code of this Frank's article:

    http://wpengineer.com/about-wordpress-post-thumbnail/

  39. Toman

    Dario, thank you for your answer! I managed to display the title using the following code:

    $attachments = get_children( array(
    'post_parent' => get_the_ID(),
    'post_type' => 'attachment',
    'numberposts' => 1, // show all -1
    'post_status' => 'inherit',
    'post_mime_type' => 'image',
    'order' => 'ASC',
    'orderby' => 'menu_order ASC'
    ) );
    foreach ( $attachments as $attachment_id => $attachment ) {
    echo apply_filters( 'the_title', $attachment->post_title );
    }

    Problem is I have no idea, how to "put" it:

    the_post_thumbnail('full', array('class' => 'alignleft', 'alt' => HERE!));

    I have no programming skills :( Can you help?

  40. Dario Ferrer

    This may works:

    foreach ( $attachments as $attachment ) {
    $alt = $attachment->post_title;
    }

    the_post_thumbnail('full', array('class' => 'alignleft', 'alt' => $alt));

    ... But it is as I said: too much code for call a function which -in turn- calls the same function which we used to make it work. In fact, get_children + the combination of the rest of attachment functions does a much better work than the_post_thumbnail. Only my opinion.

  41. Toman

    Dario, thank you very much! It works! I hope in future versions the_post_thumbnail will give us more possibilities and will be easier to use :)

    One last question: is it possible to add another field to the media library? I would like to save the source of each image (flickr URL) and display it as a link under the image. Is this possible using the get_children function?

  42. Dario Ferrer

    Good! well done,

    About your new question, it's possible to create new fields through hooks, but -and this will be more easy for you- also you can use an unused field for this, e.g. the Description, proceeding on the same way:

    foreach ( $attachments as $attachment ) {
    $alt = $attachment->post_title;
    $desc = $attachment->post_description;
    }

    the_post_thumbnail('full', array('class' => 'alignleft', 'alt' => $alt));
    echo 'Source: '. $desc .'';

  43. Mark

    the_post_thumbnail is the way to go for WP.

    TimThumb has no usable directory organisation or file naming structure. So all the files it creates are splattered around a cache directory with enormous file names, all with no human reference. If you have a lot of images, that's a whole lot of files all sat in one directory with wild names.

    Hitting php in image tags in the HTML is also not very clean, probably effects image ranking for image SEO due to the file names also.

    The way WP has chosen to go is the way forward.

  44. Colin

    Thanks for this! One question. Is it possible to assign a different align class (alignleft, aligncenter, alignright) based on the settings I choose on the edit post screen?

  45. Colin

    Forgot to include this, but this is the code I'm currently using

    the_post_thumbnail(array(450,270), array('class' => 'alignright'), array('class' => 'alignleft')

    It uses the first class and ignores the second, no matter what alignment I choose on the edit post screen.

  46. Michael

    Colin, use the_post_thumbnail(array(450,270), array('class' => 'alignright') for a right alignment or the_post_thumbnail(array(450,270), array('class' => 'alignleft') for a left alignment. You can use your own class too if you have one: the_post_thumbnail(array(450,270), array('class' => 'my_class_for_postthumbnails.').

  47. Colin

    Thanks Michael. This doesn't solve my problem, however. I am trying to align the image based on the settings I choose in the edit post screen. I don't want all my thumbnails to align to the right or left, rather, I would like them to align based on what I choose when I insert them into the post. I hope that makes sense.

  48. Michael

    The images based settings doen't affect the thumbnail alignment.

  49. Aglioeolio

    Thanks Michael for the article, and kremalicious, Mukizu and others for the workaround with 'alt' tag

  50. Sandro

    Great article thanks! Do you know if it is possible to make the first post have a large thumbnail and the rest a small thumbnail with the goal of creating the first post as feature post automatically? e.g. First post, 400px x 300px thumbnail. The remaining posts have 100 x 80 thumbs.

    I am not that great with development so any tips are appreciated.

  51. Michael

    @Sandro: Do it with a simple counter:


    if (have_posts()) :
    $i = 0
    while (have_posts()) : the_post();
    $i++;
    ..your html..
    if(has_post_thumbnail()):
    if( $i === 1) {
    the_post_thumbnail(array(400,300), array('class' => 'alignleft'));
    }else{
    the_post_thumbnail(array(100,80), array('class' => 'alignleft'));
    }

    I hope, you understand what i mean ;)

  52. Vassilis

    Hi guys,

    I want to use different sizes of thumbnail thumbnails and one of them is 50x50. To get this I use : the_post_thumbnail(array('50,50')); and it worked fine but when i used a 75h x180w image it shows the full image instead of cropping it to 50x50 . Any ideas why this happens?

  53. Mehmet

    Thanks for the tutorial Michael.

    Do you have any idea about multiple handles? Maybe I am missing something but it sounds like when (lets say) 10 different image sizes are defined in functions.php, all those files will be created per each uploaded photo which would increase the size of uploads folder extremely much.

  54. hema

    Hi All,
    Can anyone clarify on ALT tag display?

    I've read above comments but still can't' figure out why Alt tag is not displayed by default.

    Here is my code
    the_post_thumbnail(array(180,90), array( "class" => "alignleft post_thumbnail"));

    Above code shows title tag but doesn't show ALT tag, it shows alt=""

    When I use following code
    the_post_thumbnail(array(180,90), array( 'alt' => 'alttext', 'title' => 'titletext', "class" => "alignleft post_thumbnail"));

    I get alt="alttext"

    Anyone to solve this?

  55. john

    Hello

    I' ve noticed that I could keep the original width/height proportion of the thumbnail by using the proper css class ruling the_thumbnail in WP :

    img.wp-post-image {width:100px;height:auto;}

    will have all your thumbnail nicely reduced to a 100 px width but the picture will stay in proportion thanks to "auto".

    HOWEVER :

    For the various type of thumbnails I need, I would like the "array" function to do something close to the "auto" function.

    For example, I'd need something like this :
    the_post_thumbnail(array(100,auto))

    (which of course doesn't work).

    Do you know how I can do that ?

  56. Ken

    @john as I understand it, just set the second number to something ridiculously large and it'll act like auto.

    the_post_thumbnail(array(100, 99999))

  57. john

    I tried your solution but it didn't work, at least on my blog.

    Another problem left totally puzzled : according to where I place the thumbnail on my site (home, sidebar, category page...), the size seems NOT to be controlled by the same attributes.

    • Sometimes I have to use the php (array) function

    • Sometimes I have to edit the [ .wp-post-image ] CSS, along with
    [ img.wp-post-image ]

    • Sometimes, nothing works but the [ .attachment-thumbnail ] CSS class does work.

    Examples of my own CSS :

    .wp-post-image {margin: 2px 8px 0px 0 }
    img.wp-post-image {border:1px solid #f8f8f8; float: left;}
    .attachment-thumbnail {width:100px;height:auto}

    In short, the whole stuff drives me crazy.

  58. john

    And I have opened a thread at WP's :

    http://wordpress.org/support/topic/363062?replies=1

  59. King Rosales

    Hi Michael, thanks for the indepth tutorial on how this thumbnail function works. I just discovered your blog and I'm amazed by it - great work.
    thanks.

  60. Marty Martin

    Just used your tut to hook up a client's site. Thanks!

  61. Bane

    Michael, I am using the post thumbnail feature in a new/custom theme and thought this might be useful.

    How to display the next and previous posts title with thumbnail: http://wordpress.org/support/topic/368725.

  62. Greg Burkett

    Excellent guide -- the custom sizes that can be set via array is extremely helpful. This has been sorely lacking in WP until now, and this is the best resource I've found for understanding the new functions.

    Thanks!!

  63. Roberta Escher

    first: great tutorial! helped a lot.

    but i'm having some problems, my thumbs are not cropping like it should, and i don't know where is the problem.

    here is my code on functions.php:

    I tried to put "true" after the sizes but it didn't work, and then tried to put "1" but didn't work anyway... can you help me?

    thanks

  64. Roberta Escher

    i dont know what happened but here's the code again:

    php add_theme_support( 'post-thumbnails' );
    add_theme_support( 'equipe', array( 'page' ) ); // Add it for pages
    add_theme_support( 'post-thumbnails' );
    set_post_thumbnail_size( 290, 120, true); // rapidos post thumbnails
    add_image_size( 'single-post-thumbnail', 600, 9999); // Permalink thumbnail size
    add_image_size( 'destaque1',890, 9999); // principal thumbnail size
    add_image_size( 'destaque2',443, 9999 ); // destaque thumbnail size
    add_image_size( 'equipe',200, 9999 ); // equipe thumbnail size

  65. Michael

    @Roberta: Hm, should work. In your template file you have to insert

    the_post_thumbnail( 'destaque2' ); //<-- change it with your value

  66. Morten Skogly

    @Vassilis I'm having the same problem as you, here is an example image that comes out just scaled in the html http://www.nrk.no/banden/wp-content/uploads/2009/11/olav-risa.jpg

    Does anyone know how to get this under control?

  67. slee

    is there a way to get the image path so I can use it in a template rather than output the full image tag?

  68. Davex

    Thanks so much, your post helped me solve the problem I was having styling the output.

  69. Randy

    Hello, I would really appreciate it if you could answer a couple of questions for me please. I like the new post thumbnail feature a lot and my theme has it incorporated but... is there a way to change the quality of the thumb? Like use less compression to get 95 as a quality factor?

    Also, on the single post page where the larger thumbnail is displayed, is it possible to allow Lightbox to display the full size image? Right now, when I click the big thumb, it just points back to to the post.

    Thanks! I appreciate any assistance you can give.

  70. Jason

    @Randy: Not sure about the quality... and I don't think that is an option in WordPress right now (correct me if I'm wrong anyone).

    But for the lightbox, you'll need to set it up to work with whatever lightbox code you're using. Most of the light-boxes I've used, like prettyPhoto or fancybox, need to be told what image to work on. One way of doing that is by giving the link a "rel" attribute, which you can set up very easily with a custom post_thumbnail function. You could even use a class...set it up like Michael does above in his article and then target that class to be a lightbox.

    Its really more dependent on your JS code than the post_thumbnail functionality at that point.

  71. John

    Is there a way to change the size of the post thumbnail depending on the character count of the post title?

    Reason being, when I have longer titles, the post thumbnail shifts down and moves out of the little box I have set up for it.

  72. Michael

    John, change it to your needs:

    if(has_post_thumbnail()):
    (strlen(get_the_title()) > 20) ? $dims = array(100, 100) : $dims = array(150, 150) ;
    the_post_thumbnail( $dims, array( 'class' => 'alignleft' ) );
    endif;

  73. John

    Thank you, Michael!

    Just having one small problem.

    28) ? $dims = array(150, 107) : $dims = array(150, 122) ;
    the_post_thumbnail( $dims, array( 'class' => 'post-thumbnail' ) );
    endif;
    ?>

    When I enter that in, the width of the image comes out the same as the height. So for example, the image comes out 107X107 instead of 150x107. Same with the second image: 122x122 instead of 150x122. I can fix this with css but I was wondering if there was something I could put into the code.

    Thanks again!

  74. Michael

    John, if you have crop thumbnail activated in your media settings, the width and height of the thumbnail will be always the same.

  75. daztheblue

    Hi, is it possible to set the 'crop' to start the crop the thumbnail 'top left'? It always crops the image from the center of the uploaded image. Or is there an alternative way of adding a thumbnail?
    Thanks in advance.

  76. alekun

    Hi everyone, great tutorial! thanks a lot, but I have one problem, maybe someone can help me...

    I'm trying to create automatically 200x90 Thumbnails but it is not possible I got different size but not 200*90, even when I try to crop the image after selecting the Post Thumb.

    I can't find the problem, my code on functions.php is the following:

    add_theme_support( 'post-thumbnails' );
    add_image_size( 'thumb200x90',200, 90);

    in my template:

    the_post_thumbnail( 'thumb200x90' );

    Thanks!

  77. Dan

    Has anyone been able to implement title and alt changes on the fly succesfully?

    I have tried Dario's:
    the_post_thumbnail(array( 150,150 ), array( 'alt' => get_the title()));

    and i get:
    Parse error: syntax error, unexpected T_STRING, expecting ')' in "path to my index file"

    I'd really like to get this to work for the alt and title of the image.

    Thanks in advance

  78. Michael

    @Dan: not get_the tile()
    the_post_thumbnail( array( 150,150 ), array( 'alt' => get_the_title() ) );

  79. Dan

    Wow... Looks like I'll use NP++ for my edits from now on. I'm really new to php and the WP built in editor doesn't show syntax.

    Thanks for that, works like a charm!

  80. Michael Dozark

    Apparently the problem is with the wp_get_attachment_image and wp_get_attachment_image_src functions which the_post_thumbnail uses. I found a fix online that requires changing one line of code in wp-includes/media.php:

    http://core.trac.wordpress.org/attachment/ticket/11846/media.php.diff

    I don't normally like making code changes, but this fixed the problem for me.

  81. Michael

    Does anybody know how I can retrieve the image alt text . I need to display this in a span (The Originally Entered Alt Text) ::: Any Help would be appreciated

  82. Michael

    Thank you Roman!!! Ill be able to sleep tonight now :)

  83. christhian

    I don't understand how or where I'm supposed to write these codes. If I put all four options in my loop, it just displays all my posts multiple times.
    How can I just call the appropriate size?

    I guess I just don't understand what this is all for. I know I change the size of my images through the_post_image function, but what if I want to use those alternative sizes, where does all this code go?

  84. christhian

    Michael, I really would like to make use of this code that suggested to someone else on here:
    "
    @Sandro: Do it with a simple counter:

    if (have_posts()) :
    $i = 0
    while (have_posts()) : the_post();
    $i++;
    ..your html..
    if(has_post_thumbnail()):
    if( $i === 1) {
    the_post_thumbnail(array(400,300), array('class' => 'alignleft'));
    }else{
    the_post_thumbnail(array(100,80), array('class' => 'alignleft'));
    }

    I hope, you understand what i mean"

    Can you please go more into detail about this? I can't get it to work. By the way, your tutorial is great. Thank you

  85. Michael

    @christian: Let me explain:

    You have the loop in your template. After if (have_posts()) : you have to insert $i = 0; That means you set the variable $i with a value of 0.
    After the line while (have_posts()) : the_post(); you have to insert $i++;. That means for every step in your loop the variable $i becomes +1.
    The code after if(has_post_thumbnail()): means if the value of $i equal 1 than display the image with 400x300px and if $i not equal to 1 than display the image with the dimensions of 100x80px. Thats all.

  86. christhian

    @Michael:

    right, I did just that, but it didn't work, the page returned with a code syntax error. Thank you so much for your help. I'll keep trying...

  87. Dan

    @Christhian - Try adding "endif;" statements

  88. Mark

    I'm having a problem. I set my thumbnail to one size with a statement like this:

    set_post_thumbnail_size( 150, 125, true );

    But now I want to change it and I changed the statement to the new size I want. However, WP is keeping the 150x125 and does not see my new size.

    Can I not change the size once I've done it once?

  89. Cheryl

    This feature helps to make the category pages look very nice - and that I like. However, the thumbnail shows on the post page. I don't need that, I need the thumbnail to show on the category page, but not show again on the post page. How do I accomplish that?

  90. javy

    Does anyone know if its possible to use the thumbnail function with the WP custom menu function? I'd like to have the thumbnails be displayed along with (or in place of) the links in a nav menu. All the documentation I see only talks about using the thumbnail function in the loop with posts, nothing at all about pages. Any ideas??

  91. Michael

    @javy, the post_thumbnail function work for pages too. To display thumbnails in wp menu you should write a custom walker.

  92. Alain

    Hey, thanks for the info.
    But how do i get it to fit the smallest side of a picture?

    I want it resized but maybe cropping a little the sides.

  93. Jean Galea

    Would be great if WordPress would actually resize the image according to the values you pass in the array.

  94. Jean Galea

    On WP Codex, PLEASE NOTE: The crop does not work in Wp 3.0+. All that is needed for WP 3.0+ is the call for the thumbnail to post. Then proceed to media in the dashboard and set your thumbnail to crop to the size you wish to use.

    Seems we have to go back to using TimThumb.

  95. John

    Hello everybody,

    i am trying to 'delete' the thumbnail appearance from my post. I want it on my homepage but i dont want it on my main post. I use the_post_thumbnail 'code'.

    Is there any way? I try a few things for a few days!! but nothing happen so i decide to ask the forum... Any advise would be helpful.

    Thanks in advance,

    John

  96. Skidoosh

    @Randy, look here for the answer to that http://www.skidoosh.co.uk/php/wordpress-jpeg-thumbnail-image-quality-setting-and-adjustment/

11 pingbacks

  1. Установка миниатюр в Wordpress, подробное описание the_post_thumbnail | Wordpress | Путь веб-разработчика
  2. Nochmal the_post_thumbnail() - Matt Mullenweg, Thumbnail, Medium, WordPress Codex - dynamicinternet
  3. How to add post thumbnails for Wordpress 2.9+
  4. Adding posts thumbnails in WordPress 2.9+ · brand:GNU
  5. Novas Funções do Wordpress – Parte 3 | Mateus Souza | Blog - Desenvolvimento Web e o que merecer um post
  6. elbrauschen.com Blog » Thumbnails in Wordpress 2.9
  7. Wordpress Thumbnails Outside The Loop | Chad Coleman
  8. Featured Image: WordPress’ Best Underused Feature
  9. Get Post Thumbnail for featured images using WordPress API | InTechgrity
  10. Using Wordpress’ the_post_thumbnail with Lightbox
  11. WPEngineer gears up for their own WordPress Advent Calendar | WPCandy