WordPress post thumbnails without manual custom fields

Too blurry? Click here to watch this video in High-Definition Youtube.

Doing away with manual custom fields

I’m capturing the steps to upload and crop various formats of thumbnails for WordPress entries. It is one of the main features I’m building for use in my free WordPress theme. Previously, my solution for assigning thumbnails to WordPress entries was via “custom fields“. After a while of using custom fields, it began to feel tedious and I looked for a better way to handle thumbnails.

On top of that, one of my themes in development allows the use of up to 3 thumbnail formats (widescreen, square and rectangle) for every WordPress entries. Can you imagine every time you write a post, you have to fire up Photoshop to create three thumbnails. Each of them in different dimensions and aspect ratios. Uploading them to your blog. And finally copy-and-paste their URLs to custom keys. It certainly needs a more streamlined and convenient way of handling thumbnails. Manually doing it the custom field way just won’t cut it in the long run.

On-the-fly upload, resize and crop thumbnails

As you can see from the video clip, bloggers can upload a jpg image file, crop it and save it as a thumbnail. Once the blogger clicks ‘Save’ thumbnail, the URL is automatically assigned to a designated custom field behind the scene. Hence, the process of entering the thumbnail’s URL into a custom field has been automated.

On top of that, if you’re an experienced theme developer, you can configure more than one thumbnail to be used for each post. In the video clip, I’ve configured up to three thumbnails for each post.

I hope to wrap up this feature soon and implement it into my WordPress theme. Do drop by again. Instead of building this into my themes, I’m going to develop it as a WordPress plugin. I’ll be hosting the plugin at WordPress official plugin directory and the more information can be found in my next post: WP Post Thumbnail – WordPress Plugin

Note: Bear with the lacklustre video clip quality as this is my first time recording and producing an embedded flash video using Camtasia Studio 5. There’s still a slight learning curve despite it already being very user-friendly. I hope to be able to zoom-and-pan smoother, add narratives and find the best settings to produce Youtube High Definition clips soon.

30 Responses to “WordPress post thumbnails without manual custom fields”


  1. 1 mkjones

    Whoooh that’s nice :)

    Any plans for releasing a plug-in which could offer the same functionality? I believe it would make you a god in the WP community ;)

  2. 2 Eligio

    Wow this is definitely a cool features for wordpress since you can choose specific portion of the image to be croped. How about some beta tester?

  3. 3 Stanley

    mkjones
    Yes I decided to make it into a WordPress plugin last week. Took me while to decide because if it is developed into a plugin, I would have to take into consideration how it can be used by two different kind of users: typical bloggers and WordPress theme developers too.

    Eligio
    As soon as it’s usable. Again, some considerations when making it into a plugin still need to be sorted out. For instance, I coded this into my theme to fulfill the task of handling 3 different thumbnails per post. I could afford to hard code the thumbnails configuration just for my own theme. Now that I’m making a plugin out of it, I need to make thumbnail(s) configuration flexible to suit the requirement of different themes, different WordPress theme developers.

    mkjones & Eligio
    Thanks and I’m glad you like the functionality. I’ll be blogging about the plugin’s progress and status. I hope you guys keep in touch.

  4. 4 Scott

    Unbelievably cool! Can us fans get an early copy to work with? I would love to beta test this theme.

  5. 5 Chewru Guru

    Very interested in this plug-in as well. I’d love to find an easy way to insert thumbnails for my front page posts. Reverse engineering the built-in proprietary-theme solutions (such as you were making for your theme) is about as tedious as the custom fields themselves.

    Thanks for your efforts!! =)

  6. 6 Marty

    Simply Amazing… what else can I say? Is that jCrop I see in there? I want this… yesterday :)

  7. 7 Lucas Loyola

    WOW man, i really like to have this plugin. I’m bored with the upload+copyandpaste+customfiled system.

  8. 8 payjisan

    Stunning, this plugin will win awards…

    Just quickly, can photos be uploaded via URL? If not this would be a great feature.

  9. 9 Stanley

    Marty

    Thanks to you I just realise I have an alternative jQuery image cropper in jCrop. I’m using Image Area Select plugin by Michał Wojciechowski (http://odyniec.net/projects/imgareaselect/).

    payjisan

    Get a photo via URL … sounds like a job for curl. I’ll put that feature on my to-do list.

    Priorities will be given to sorting out plugin errors and bugs in the meantime before I fool around with new features or interface.

  10. 10 Danny Foo

    Stan, that’s a very cool plugin and I’m definitely looking forward to it. This way even the Wordpress designers won’t have to fiddle with Custom Fields and lets authors to focus more on the content. :)

    Oh yeah, I’d like to make a pre-requisite if this is suppose to help replace custom fields for images. The ability to set the size of the images would be best – in addition to selecting wide, rectangle and square.

  11. 11 Niels Oeltjen

    This is fantastic! It would be absolutely invaluable to me. If you set up a PayPal donate button I’ll def help you out with a donation.

  12. 12 xetech

    Thanks for sharing, this is great…

  13. 13 Sham

    I installed that plugin and also upload my images as you said but nothing is geeting displayed in the site when i click on the posts..DO i need to add any code or modify any thing..pl help

  14. 14 Marten Timan

    Funny that I should come across this. I actually made this into a plugin a while ago, one for Profile Images, and one for Post Image + thumbnails. It’s fully functional, although I’m stuck at one point, that is where the Wordpress JQuery comes along and you either override the upload-pop-ups and load the jquery-pack or not. You must have come across this problem, did you find a workaround for it yet?

  15. 15 RaiulBaztepo

    Hello!
    Very Interesting post! Thank you for such interesting resource!
    PS: Sorry for my bad english, I’v just started to learn this language ;)
    See you!
    Your, Raiul Baztepo

  16. 16 ENZO

    very good

  17. 17 Paul

    Great plugin. I’m using it to generate a thumbnail (110×83) for each post and a page header (700×400) image for each post. Seems to make my original slightly narrower when I upload so that my original then becomes smaller than the actual header crop size that I want… strange. I’d like to be able to upload much larger images than 700×400 then crop them as desired. Any ideas?

    Stanley: I think your problem will be solved in 0.2 release. The plugin will resize big original images to fit into the cropping container. The crop box will also scale down according to how much the original image has shrunk.

    Read more about the jQuery cropping engine I’m using in the plugin: http://deepliquid.com/content/Jcrop_Sizing_Issues.html

  18. 18 Anika

    What a sexy blog, love the theme, what are you using?

  19. 19 tooksara

    So cool plug-in!! Thank you for sharing.

  20. 20 Thiago Faleiro

    Very good my friend!

    I’m waiting for a plugin like that! It’s perfect!

    I wish you success!

    PS: One detail, i did not have success to use the function that you gave on this page: http://www.seoadsensethemes.com/wordpress-wp-post-thumbnail-plugin/ . To show the imagens i’m calling the custom fields directly.

    (Sorry for the poor English)

    Thank you very much!

  21. 21 tasarhane

    great plugin.. thanks.

  22. 22 rajshree

    very interesting n creative…..liked it!!

  23. 23 Julia

    Thanks, this is a great plugin, I’ve been searching for something like this! But I have a couple of questions and would appreciate any help
    1. Is it possible to show a thumbnail on main page and replace it with a big size image in post page?
    2. I have only widescreen thumbnail available, no other tabs, is it smth that I have to enable somewhere?

  24. 24 image hosting and

    Thankyou for sharing mate, I

  25. 25 Jadan

    Like Julia, I too only see the widescreen option. Where is the other two options as seen in this demo?
    Can you please let us know, it seems that there was no response to the question before.

    thank you! I will add that the plugin looks very promising, but I do need square thumbs…

  26. 26 Jadan

    I was also wondering how I get the tumbnail to be viewed? My theme has a spot to utilize the thumbnail generated when I use WP’s post Thumbnail. How can I use your plugin to be seen as the post thumbnail?

  27. 27 Прелестник

    Как остро вы пишите об обыденных вещах, надо у вас просто учиться!

  28. 28 Andrew C

    I am VERY disappointed that this plugin does not work with wordpress 2.9!! I would PAY for this plugin to work!!

  29. 29 newborn baby needs

    This this plugin on my new website but doesn’t work. I only see widescreen option too.

  30. 30 Mobi

    Very interesting plugin i hope it will work on wordpress 3.0
    good works ! thanks :)

Leave a Reply