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


35 Comments
  1. Kawsar Ali says:

    Can't wait for these feature. Really good one

  2. Matt @ DVQ says:

    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 says:

    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 says:

    Why not earlier?

  5. Cosmin says:

    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 says:

    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 says:

    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 says:

    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 says:

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

  10. Herman says:

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

  11. 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é says:

    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 says:

    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 says:

    @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. ´@Ryan: What´s "poor" about it? It works like a charm...anyway IT WORKS!

  16. Derek says:

    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 says:

    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 says:

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

  19. shawn says:

    @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 says:

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

  21. Ryan says:

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

  22. Gareth says:

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

  23. Kulpreet Singh says:

    So could you do something like:

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

    ?

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

  25. scribu says:

    @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 says:

    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 says:

    @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 says:

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

  29. Frank says:

    @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 says:

    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 says:

    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 says:

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

9 Pings
  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
Leave a Reply