New feature in WordPress 2.9 – the_post_image()

In WordPress 2.9, there will be the ability to add an image to a post, as it's been known of magazine themes. The image need not be insert into the post. With the new feature the_post_image() you can use the new feature and thus control where to display.

The two screenshots show the new post thumbnail dialog when creating a new article. Here you set the picture.

New Dialog Post Thumbnail

Post Thumbnail Dialog

In the template you can use the function the_post_image() to place the image. Here's an example:

<div class="entry">
    <?php the_post_image(); ?>
    <?php the_content('Read the rest of this entry »'); ?>
</div>

You can also determine what resolution you want to display.

the_post_image(); // without parameter -> Thumbnail
the_post_image('thumbnail'); // Thumbnail
the_post_image('medium'); // Medium resolution

Unfortunately, the developers haven't implemented a way to align the image with the classes alignleft, alignright and aligncenter. And this is how it looks like with the default theme of WordPress:

Example of the new function the_post_image

Comments are closed.

44 comments

  1. Kawsar Ali

    Can't wait for these feature. Really good one

  2. Matt @ DVQ

    They should add the ability to add multiple thumbnails ie. One for the main page and a different sized one for when the excerpt is displayed the sidebar.

  3. Justin Luey

    It's great that this feature is being added but it needs a default image option.

    That is my biggest problem with magazine themes, if you want do a quick post from your phone or something and you don't have a pic or the app doesn't support that option, you get this ugly missing picture box.

  4. Denis

    Why not earlier?

  5. Cosmin

    Finally, we're getting rid of custom fields for this matter 🙂

    @Matt : since it's a function, you can achieve what you want by putting that code in the index.php and the sidebar.php too.

    So for example:

    the_post_image(medium) goes into the index, where you have the loop
    the_post_image(thumbnail) goes into the sidebar

    Cheers!

  6. Andy Hoyland

    This is indeed a great feature to add -

    Matt - reading the post it sounds to me as different sized will be available by using the parameters after the call to the image (for example the_post_image('small') etc) but having many different sizes would be great.

    Justin - I agree again - it would be great if this was built in - for now I use this handy bif of coding from Epic Alex - http://epicalex.com/default-custom-fields/

  7. Ryan

    I don't see any point in providing support for alignleft, alignright etc. as the function is being called directly in the theme so if you want that sort of functionality then you would just hard code it in there.

    @Matt - Isn't that what was said in the article? ie: you can specify "the_post_image('medium');"

    @Justin - I assume there isn't a default method to handle having a fall back image when none is specified as you would just check if the function returns anything and if it doesn't then just fall back to whatever image you specify. You could even specify that image via your themes settings page, otherwise it could be done via a config file in your theme.

  8. Ryan

    I guess the WP trunk has changed this article as when I installed it, no thumbnail appeared. You need to manually add the the_post_image() function to make it work.

  9. Ryan

    Oops, I meant " guess the WP trunk has changed SINCE this article ... "

  10. Herman

    It would be more useful if the post image would have its own size settings independent from the regular upload sizes.

  11. Michael Oeser

    Nice function though not as good as i.e Timthumb.

    @Justin Luey: you should use the right magazine theme such as BranfordMagazine. There you don´t need to add an image to a post. If there is no image assigned it delivers a small 1x1px empty.gif. No ugly missing picturebox anymore.

  12. André

    Would it be a thumbnail...and if the article would be clicked there would be another resoloution of the picture, generated by wordpress?

    Now i'm using a self written hack for that...so i'm very excited of this integrated feature. That makes it much easier...I hope 😉

  13. Steven Rossi

    I've been hearing about this, but I never took the initiative to read up on it. Looks pretty cool, although it seems like we'll still need to use custom fields to align it, though. I've got a pretty elaborate custom fields setup going on my blog, so I'd love it if this would take away some of the clutter.

  14. Ryan

    @Michael Oeser - that is a very poor way of doing it. There is no reason whatsoever to use a 1px GIF for that as you can just display no image whatsoever or a fall back image.

    @André - if you want a different resolution image for the article then you need to use the 'medium' parameter.

  15. Michael Oeser

    ´@Ryan: What´s "poor" about it? It works like a charm...anyway IT WORKS!

  16. Derek

    This is a cool feature, and definitely a step in the right direction - but in the meantime there are easier ways to attach images (I think). Even taking a couple minutes to write a custom function will simplify things ad save time in the long run.

    I'd love to see them flesh this out a bit more with additional options.

  17. digibomb

    hmm...interesting, but timthumb (http://www.darrenhoyt.com/2008/04/02/timthumb-php-script-released/) has been around for a while, and as a developer you can really do a lot with it. Why would I use this?

  18. Ryan

    What advantage does TimThumb have over the new built in system? I've never used it before.

  19. shawn

    @Andre - Can I ask where you found the little twitter bird on your site? It's very unique and would work perfect for a site I'm working on if you don't mind sharing it.

    @Everyone else LOL - I noticed a lot of people asking about default thumbnails when there is not one in the article. I spent months fighting the same battle until I found easypeasythumbs.
    http://wp-fun.co.uk/2009/01/10/easy-peasy-images-suggestion-roundup/

    This has been one of the coolest additions to my sites in a long time. Basically you can add the code to your theme's function.php file so no need for a plugin.

    What it does is create a new area in the 'single image view' of the media console. Meaning when you click on your gallery and view a picture, there is a new area.

    This area allows you to assign the image to a category as the categories default image. Then you simply place a call to the_image in your template.

    Watch the video... it makes more sense.

    Bottom line is you will have a very easy way to set default category images within wp..... it even works perfectly on my wp-mu 2.8.4a setup.

    Honestly I am kinda shocked that this type of code is not included in the core, but until that happens, this is imho the perfect solution.

    hope it helps someone here which would make my first comment on this website a good one

  20. Ryan

    Here's some code which allows you to display alternative code when there is no image specified.

  21. Ryan

    Oops, didn't escape the code correctly last time:
    <?php if (!has_post_image()) {echo 'no thumbnail';} else {the_post_image();} ?>

  22. Gareth

    This hasn't been added for pages which is bit of a strange omission.

  23. Kulpreet Singh

    So could you do something like:

    <img src="" align="left" />

    ?

  24. Dana@Online Knowledge

    Great feature. It surely need to have more seamless image in post.

  25. scribu

    @Kulpreet Singh:

    Yes, with the latest trunk, you can do:

    the_post_image('thumbnail', 'align=left');

    Or even better, using a class:

    the_post_image('thumbnail', 'class=alignleft');

  26. Otto

    The best way to align your post images is via CSS.

    These post images get the wp-post-image class added to them.

    So, simply find your CSS statements for, say, alignright, and add the wp-post-image to them.

    Example from default theme (modified to include .wp-post-image class:

    img.alignright, .wp-post-image {
    padding: 4px;
    margin: 0 0 2px 7px;
    display: inline;
    }

    .alignright, .wp-post-image {
    float: right;
    }

    Done and done. No editing of the html or PHP code.

  27. Otto

    @scribu: Don't override the class that way. You'll lose the built-in classes for the post image if you do. By default, it gets the attachment-thumbnail (or medium, whatever) class, as well as the wp-post-image class. If you override it, you lose those.

  28. Indrek

    Can't wait to use this new feature. Been waiting for something like this for some time now.

  29. Frank

    @Indrek: please see my new post for use pictures on the post automaticly, this is possiblte now and with WordPress smaller 2.9.

  30. Daniel K

    Tried it with the beta, can't get it to work. Looks like it could be a handy feature to have when they get it up and running.

  31. Derek Herman

    I would really like to have the URL of the image like the_post_image_url(), as well. Then it would make using timThumb much easier and save me from having to relay on custom fields but not rely on the HTML WordPress outputs.

  32. James Tryon

    I have been doing this for about a year and a half.

    I was calling the 1st and 2nd image out of the post with a little php, and in the post its self I would wrap the first two images in a h6 tag. Then set the h6 to display none.

    There is a small problem with, if the post dose not have or need images you would get the blank images. So I created default ones. Like others have said, this is a problem for posting on the go.

    I for one cant weight tell this is working.

  33. Michael

    @James Tryon: check out our post http://wpengineer.com/wordpress-2-9-add_theme_support-and-has_post_image/.

  34. Ricky Buchanan

    Looks fantastic - now I just need to figure out how to code something to take my fifty gazillion* existing posts with custom field Thumbnail (value = image URL) and get that info into this new built-in function.

    r
    [*] OK, there's only 300-something posts. But still...

  35. Navjot Singh

    It seems you should update your tutorial ( http://core.trac.wordpress.org/changeset/12351 )

9 pingbacks

  1. Miniatura de post en WordPress 2.9 | Ayuda WordPress
  2. صورة التدوينة – ميزة قادمة في ووردبريس 2.9 | ووردبريس باون
  3. Miniaturas de Post en Wordpress 2.8.x « Flasheves
  4. oEmbeds And Post Thumbnails « Weblog Tools Collection
  5. WordPress 2.9 – the_post_image › Binary Moon
  6. Wordpress 2.9 Coming Soon – Features, Tips and Screenshots
  7. bjoern | AMHERD | WordPress 2.9 Preview – Endlich mit Post Image
  8. WordPress 2.9 a chystané novinky (1): Náhledové obrázky | Separatista
  9. Upcoming Theme: Capture | Wordpress Madness