About WordPress Post Thumbnail

This is a complement to our previous post The Ultimative Guide For the_post_thumbnail In WordPress 2.9. In WordPress Version 2.9 probably the most discussed feature is the post thumbnail. Important for this function, it is only working when it is explicitly enabled in the theme. This can be done with the following little snippet in the functions.php of the theme: add_theme_support('post-thumbnails');.

But even with this feature you should check for the existence of the function and offer an alternative. Only then you can leave the user the freedom to choose which WordPress version he wants to use. The functions of extensions, plugins and themes should be checked for their existence, then the functionality of the theme is secured, even if a function is not available. Similarly should it be handled with post thumbnail.

I would like to show two suggestions for alternatives below, and I refer to the detailed article about the topic images in Easier And Better Solutions To Get Pictures On Your Posts.

After adding the following syntax in the functions.php of the themes, you have a Metabox in the posting or page area ready and can easily be used.

if ( function_exists('add_theme_support') )
  add_theme_support('post-thumbnails');

The output of the image is in the theme at the spot where it should appear, simply use the template tag: the_post_thumbnail().

if ( current_theme_supports( 'post-thumbnails' ) )
  the_post_thumbnail(array(300,200));

Important, if you work with additional markup, then you need a query, which checks, whether there is a thumbnail for the post. Otherwise, you have unnecessary markup, which has no content.

<?php
if ( has_post_thumbnail() ) { ?>
  <span class="my_image">
    <?php the_post_thumbnail(array(600, 400)); ?>
  </span>
} ?>

To have an alternative for installations prior to WP 2.9, you can take different approaches. The two following examples are providing just ideas: either using the custom fields, field name is post-image ...

if ( function_exists('has_post_thumbnail') && has_post_thumbnail() ) {
  the_post_thumbnail(); // @param: array(height, width)
} else {
  $myimage = get_post_meta($post->ID, 'post-image', true); // via custom field
  if ($myimage) {
    echo '<img class="wp-post-image" src="' . $postimage . '" alt="Post Iage" />';
  }
}

... or in the example below, the first image from the photo library. You can find more about it in a separate post.

if ( function_exists('has_post_thumbnail') && has_post_thumbnail() ) {
  the_post_thumbnail(); // @param: array(height, width)
} else {
  // via mediathek
  $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 wp_get_attachment_image( $attachment_id );
  }
}

Check if the theme support the function:

if ( current_theme_supports( 'post-thumbnails' ) ) {
  ...

In addition, you can check whether the theme supports the function and explicit use for posts (post) or pages (page). Very interesting, if you want to bring additional features in the post edit section of the back end, which is dependent on this feature within the theme:

if ( current_theme_supports( 'post-thumbnails', 'page' ) ) {
  add_meta_box( ...

In this context, you can also integrate external files with new features.

require_if_theme_supports( 'post-thumbnails', ABSPATH . WPINC . '/my-post-thumbnail-function.php' );

Comments are closed.

23 comments

  1. kremalicious

    Again a nice overview. Also thanks for introducing the new current_theme_support which comes with 2.9 ;-) Will definitely find its way in my recent article about post_thumbnail.

    And you're using the named arguments for the sizes again. Did you get any response from Matt on his latest statement about that on your last post_thumbnail article?

    Quick note: you left some german "oder" in the code comments ;-)

  2. Michael

    kremalicious, Frank wrote it some days ago and the post was scheduled. Its fixed now.

  3. Frank

    @kremalicious: you have right; i use the named arguments :( I dont understand Matts comment; in the core was the dokumentation for this params; other functions of the core use also the named argument. What is the exactly base for this argument?

    Thanks for your nice post and also many thanks for read us - i read you very often.

  4. kremalicious

    Hi Frank. I also don't understand Matt's comment and I'm pretty bad at blind believing. Since the named arguments just work and are a lot easier to read through in the code I would need a pretty good explanation for not using them :-) And thanks for the praise too, appreciate it.

  5. Frank

    Thanks for your fast reply; great - im not the only stupid ;)

  6. ken the tech

    everytime I wondered how to make a post thumbnail like some wp theme are using. Now I know. Thanks! :)

  7. Karar A.

    Great Thanks .

    How can I get only the image link the one that user uploaded as a post thumbnail , and use it with timthumb script ?

    Cheers

  8. Brian Gardner

    Correct me if I'm wrong here, but WP 2.9 does not allow for exact sizing all of the time. For instance, by default WP sets thumbnails in the media settings to 150x150, and if you upload an image that is 600x400, and then set the parameters of the post thumbnail to display as 150x120, the thumbnail still displays as 120x120. There's somewhat of a limit based on proportions, is that right?

  9. Alex Cragg

    Fantastic, was just wondering how I was going to go about offering support for the new functionality and the old at the same time.

    And a great series as well, every single article has been well worth the read!

  10. Michael

    @Brian: You are right. The image proportions are always maintained. Your expample results in 120x120 pixel.

  11. Michael

    Thanks Alex :) You are welcome.

  12. Brian Gardner

    That makes is pretty difficult to incorporate post thumbnails into themes, don't you think? Most folks want to be able to determine what those thumbnails will display as, and if you give them the option to fill it out as 150x120 and it shows as 120x120 - that's a support nightmare. I've spoken to Mark Jaquith about this, and hopefully that type of ability can be implemented in 3.0, if not sooner. I suppose if there's a small note on the options page or input are saying that the thumbnail will show as proportional, it would kinda work. Still not ideal.

  13. Michael

    @Brian: the named parameters like thumbnail or medium was more intuitive. A normal user still cant unterstand, what an array is.
    I hope for a better solution too.

  14. Ajay

    Important for this function, it is only working when it is explicitly enabled in the theme.

    Does this mean that unless the theme specifies this, you can't use the thumbnail feature? Like if a plugin wants to display the post thumbnail, it can't?

  15. Michael

    @Ajay: if you don't have that feature enebled in your theme, you can't use the functionallity of this feature. Means, you don't have the post-thumbnail metabox in your new/edit post view.

  16. WP Tricks

    Wonderful review, I like it... WordPress 2.9 is the next blogging tools ;)

  17. John (Human3rror)

    word! very cool. love this new function!

  18. Mark Jaquith

    Most folks want to be able to determine what those thumbnails will display as, and if you give them the option to fill it out as 150x120 and it shows as 120x120 - that's a support nightmare.

    Good news — you can force a "hard crop" to 150x120. The example used in this post isn't ideal, because WordPress can't (yet) do on-the-fly resizing/cropping. What it's doing if you use the above example is browser-resizing. And if you're doing that then no, you can't specify a hard crop.

    But if you define your sizes "ahead of time" in your theme's functions.php, WP will generate these sizes (including a hard-crop version if you ask for it), and then in the theme, it will use the size you ask for, without browser resizing.

    I've written up detailed info on how to implement this feature properly.

  19. Michael

    @Mark: Thanks for your help and your cool post.

  20. George

    does anybody know why it's impossible to attach a thumbnail from nextgen gallery? why they show me it as available, but put no button for setting image as a thumb?

  21. Mak

    My blog contributors use gallery in their posts and often forget to click "Use as thumbnail" link. The end effect is that there is no thumbnail with excerpts. What is the best way to display thumbnail in this situation ?

  22. Jethro Cramp

    Hard Crop Images Not Working

    Thanks for this detailed tutorial, and for Mark's tutorial too. But this isn't working for me, and I've spent a week researching and trying everything I can to get it to work.

    I am trying to build a gallery. The idea is that the first three images from each post in a specific category (Gallery) are displayed as a hard cropped thumbnail. I can get the images to be cropped, but not hard cropped, the aspect ratio is maintained. I've followed very carefully the advice here and on Mark's blog. It seems that I am not the only one having this issue, but no one seems to have a solution.

    I am using WordPress 2.9.2 on a Mac and In my functions.php file I have:

    add_theme_support( 'post-thumbnails' );
    set_post_thumbnail_size( 176, 176, true );
    add_image_size ('gallery', 150, 150, true);

    Then in my template (page.php) I have:

    <?php echo wp_get_attachment_image($attachment_id, $size = 'gallery', $icon = false );

    The images are displayed with the largest dimension set at 150, and then the other dimension is less than 150. If I've made an obvious mistake, or anyone has an idea why the hard crop isn't working, I'd really like to know. Thanks In Advance.

  23. Agus Suhanto

    This is a very nice explanation about underused and hard-to-understand concept in WordPress: post-thumbnails of featured images.

    I also made a posting about it here: http://suhanto.net/the-importance-of-featured-image-in-wordpress/. It is not as thorough as this article, but it takes different focus.