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 150×150, for medium 300×200 and for large 600×400.

// 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 100×100 and crop is activated, then the thumbnail should be resized to 100×100, 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.


Posted

in

by

Comments

107 responses to “The Ultimative Guide For the_post_thumbnail In WordPress 2.9”

  1. Dario Ferrer Avatar

    Hi,

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

  2. Bill Robbins Avatar

    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 Avatar

    Bill, you have to ask the dev’s 😉

  4. billg Avatar
    billg

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

  5. Bill Robbins Avatar

    @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 Avatar
    Markus

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

    Cheers.

  7. Radu Avatar

    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 Avatar

    how can I use this feature?

  9. Frank Avatar

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

  10. Sam Avatar
    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 Avatar

    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 Avatar

    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 Avatar

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

  14. Jason Avatar

    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 Avatar

    @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 Avatar

    @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 Avatar

    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 Avatar

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

  19. Mukizu Avatar

    @Michael,

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

  20. Dario Ferrer Avatar

    … And those php brackets looks very bad.

  21. Michael Avatar

    @Mukizu: Yes, same for the title attribute.

    @Dario: right!

  22. Dario Ferrer Avatar

    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 Avatar

    @Dario,

    Thank you a lot 🙂

  24. kremalicious Avatar

    @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 Avatar

    Thanks kremalicious! Yes, it works.

  26. Mukizu Avatar

    @kremalicious

    thank you:)

  27. Home Trends Avatar

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

    add_theme_support( 'post-thumbnails' );

  28. Vlad Ghinea Avatar

    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 Avatar

    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 Avatar

    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 Avatar
    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 Avatar

    @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 Avatar

    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 Avatar
    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 Avatar

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

  36. George Avatar
    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 Avatar
    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 Avatar

    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:

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

  39. Toman Avatar
    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 Avatar

    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 Avatar
    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 Avatar

    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. […] unserem Beitrag auf wpengineer.com The Ultimative Guide For the_post_thumbnail In WordPress 2.9 kommentierte Matt: I wouldn’t recommend anyone use the named arguments for […]

  44. Mark Avatar
    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.

  45. […] That’s it! Make sure you select a thumbnail for each post from the Edit Post screen. If you would like to more more about this then have a look at WPEngineer.com. […]

  46. Colin Avatar

    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?

  47. Colin Avatar

    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.

  48. Michael Avatar

    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.’).

  49. Colin Avatar

    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.

  50. Michael Avatar

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

  51. Aglioeolio Avatar

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

  52. Sandro Avatar
    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.

  53. […] to get a square and you’re done. I’d like to thank Roman Wünsche who first shares the workaround that made this possible. Short URL: http://wp.me/pKXtD-N · Tags: Automattic, Custom Fields, Digg, […]

  54. Michael Avatar

    @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 😉

  55. Vassilis Avatar
    Vassilis

    Hi guys,

    I want to use different sizes of thumbnail thumbnails and one of them is 50×50. 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 50×50 . Any ideas why this happens?

  56. Mehmet Avatar

    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.

  57. […] WordPress Versão 2.8 WordPress Versão 2.9 Most Notable Features in WordPress 2.9 Template Tags/the post thumbnail Everything you need to know about WordPress 2.9’s post image feature, The Ultimative Guide For the_post_thumbnail In WordPress 2.9 […]

  58. hema Avatar

    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?

  59. john Avatar
    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 ?

  60. Ken Avatar
    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))

  61. john Avatar
    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.

  62. john Avatar
    john

    And I have opened a thread at WP’s :

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

  63. King Rosales Avatar

    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.

  64. Marty Martin Avatar

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

  65. Bane Avatar
    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.

  66. Greg Burkett Avatar

    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!!

  67. Roberta Escher Avatar

    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

  68. Roberta Escher Avatar

    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

  69. Michael Avatar

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

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

  70. Morten Skogly Avatar

    @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?

  71. slee Avatar

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

  72. Davex Avatar
    Davex

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

  73. Randy Avatar

    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.

  74. Jason Avatar
    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.

  75. John Avatar
    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.

  76. Michael Avatar

    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;

  77. John Avatar
    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 150×107. Same with the second image: 122×122 instead of 150×122. I can fix this with css but I was wondering if there was something I could put into the code.

    Thanks again!

  78. Michael Avatar

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

  79. daztheblue Avatar
    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.

  80. alekun Avatar
    alekun

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

    I’m trying to create automatically 200×90 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!

  81. Dan Avatar

    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

  82. Michael Avatar

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

  83. Dan Avatar

    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!

  84. Michael Dozark Avatar

    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.

  85. […] referencing ‘my-custom-size’, which we can see below as being 405×180. Typically it is not advised to use these predefined sizes as it will overload your uploads directory with additional sizes, and […]

  86. […] If your theme isn’t compatible with featured images, you need to first set it up. You can read how to do so here with some additional sizing suggestions here. […]

  87. Michael Avatar
    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

  88. Michael Avatar
    Michael

    Thank you Roman!!! Ill be able to sleep tonight now 🙂

  89. christhian Avatar
    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?

  90. christhian Avatar
    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

  91. Michael Avatar

    @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.

  92. christhian Avatar
    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…

  93. Dan Avatar

    @Christhian – Try adding “endif;” statements

  94. […] post thumbnail Everything you need to know about WordPress 2.9′s post image feature The Ultimate Guide For the_post_thumbnail in WordPress 2.9 New in WordPress 2.9: Post Thumbnail Images Stay Updated Or subscribe via RSS You'll notice this […]

  95. Mark Avatar
    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 150×125 and does not see my new size.

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

  96. Cheryl Avatar

    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?

  97. […] year provided all sorts of good stuff, from an interesting discussion on working with WP 2.9 post thumbnails, to extending user info, managing multiple excerpt lengths, and […]

  98. javy Avatar
    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??

  99. Michael Avatar

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

  100. Alain Avatar
    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.

  101. Jean Galea Avatar

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

  102. Jean Galea Avatar

    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.

  103. John Avatar
    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