How to Use the WordPress Image Uploader to Create Thumbnails

The first thing that I want to say is that I apologize – this post is long overdue, and I have been meaning to write it for months now. Thankfully, with the help of a Starbucks latte and some free time, I’ve finally gotten a round tuit and am writing it. I’m sorry for the long post, but this is important – so here goes…

As many of you know, the StudioPress (as well as other premium) themes utilize thumbnail images on the homepage and on other page templates. One of the biggest criticisms of my themes is that they use custom fields to display images, and that folks have to manually create an image for each location on the site. Other themes might use third party code/applications such as Tim Thumb or Viva Thumbs Pro to create their thumbnails.

While these are useful resources, I’ve really tried making it a point (Featured Content Gallery as the exception) to develop my themes without the need to rely on third party applications or other WordPress plugins. You might ask why, and the answer is simple – I don’t want to support them, but more importantly I want to make sure my themes don’t break when an outside application isn’t updated to be compatible with the current version of WordPress.

My Image Uploader Experiment

When I was developing the Streamline theme, I decided to experiment with the use of images throughout the site – and I’ll use this as the example of how to use the WordPress image uploader to create thumbnails.

One of the new features inside the WordPress dashboard is the ability to upload images while creating a post. What many people don’t know, is that in the process you have the ability to specify other sizes of images that the uploader will automatically create. You can specify these image sizes within your dashboard under Settings > Media.

Here’s an example of what I used for the Streamline theme demo site:

WordPress Media Settings

You might be asking why this matters. Well, if you plan to use a theme like Streamline, you can simply upload an image to your server, and in the process, the images that you use in the Featured Content Gallery, the thumbnail for the Featured Posts on the homepage, as well as the image inside your post can automatically be created for you. (Which means you DON’T have to manually create images of various sizes for each location.) That’s right, one upload, and all of the necessary images you need for your site are created.

How Exactly Do You Take Advantage of This?

In the process of writing a post, simply choose to upload an image. That’s all you need to do, select the image from your local machine that you want to upload. After uploading the image through the image uploader, here are the additional images that were created for me.

The image that I’ll use for the Featured Content Gallery at 600×400:

John Stamos at the ER Series Finale

The image that I’ll use in the post at 300×200:

John Stamos at the ER Series Finale

The image that I’ll use for the thumbnail on the homepage at 150×150:

John Stamos at the ER Series Finale

How This Looks On My Server

In order to help you understand the process, I’m going to show you what my server looks like. After I uploaded the original image which was saved as er.jpg, you can see the other two that were created for me.

Server Image

Using This Process in a theme Like Streamline

Now that I’ve explained how to use the image uploader to create thumbnail images, I want to show how you can use this for a theme like Streamline. All you need to do is call the three images into your post as seen below.

Here is a screenshot of how the post looks inside my dashboard:

Custom Fields

Summing Things Up

In conclusion, this should alleviate a lot of frustration – it means you don’t have to manually create images for each place on my themes. It also means that you are not relying on third party applications or plugins that aren’t guaranteed to work as WordPress continually releases updates. I really hope that the tutorial makes sense, because to me, it simplifies the process of uploading an image once, and being able to use automatically generated thumbnails for other places throughout your site. If you have any questions, leave a comment below and I’ll reply.

Comments

  1. Good tip… although I still prefer doing manual thumbnails since I might want to focus on just part of the image. Or center someone’s face (see your 150px example for one I would have recentered).

    But, on one of my two WordPress blogs, it’s moot, since I can’t use the Flash uploader. I use it with no problems on another blog on another server, both WordPress 2.7.1, so it’s not my Mac (running current version of Flash, etc). Any ideas what might be misconfigured on the WP side? Thanks!

    • Brian Gardner :

      Understood about centering and controlling the thumbnails, which was why I delayed so long in writing this post, but a majority of people would rather have an automated process. You’ll see that the thumbnails on the Streamline demo actually turned out pretty good based on the original size.

    • Hi Stepen,
      I had same problem as you describe, mine was on a PC, one WP-installation no problem to use flash uploader, other was a problem.
      Actually not sure if it works now or not, because I got so tired of it, that I now ftp the pictures whenever I need to to the site where it’s not working…

      • @Piet: I’ve been doing this for a long time and have NEVER had to go through uploading via FTP. It sounds like your WP installation is jacked-up.

        @Brian: I was pretty disappointed to get to the end of this tutorial and realize I’d already been aware of this stuff. I’m sure it’s ground-breaking for other people though… keep it up!

    • I’ve seen this problem a few times before. If you haven’t already, take a look through this post – there are several solutions in it that may help: http://wordpress.org/support/topic/224531

  2. I considered using the WP uploader for my own themes, but for me it came up short. As users begin to seriously customize, they want to globally make changes to their thumbnails and resize them on the fly. This isn’t possible with the WP uploader because once they’re sized, they’re sized. If you change the dimensions later, you then have a wonky page with old thumb sizes and new thumb sizes. The other disadvantage being the requirement of custom fields rather than scooping images automatically.

    I want to make sure my themes don’t break when an outside application isn’t updated to be compatible with the current version of WordPress.

    Not sure how you mean – TimThumb and WordPress (regardless of version) don’t do much to affect each other. I do definitely understand not wanting to support someone else’s product, though, it can get sticky.

    • Brian Gardner :

      Hey Darren – thanks for dropping by. I do understand that the images are created and they stay that size, and that other scripts can automatically resize them on the fly. The primary use for this was really to alleviate the fact that there wasn’t a good solution for my themes other than manually doing it. I haven’t taken a deep look at the Tim Thumb script, and at some point I might which might mean I amend this post.

      I wasn’t insinuating that TimThumb would break with WP updates, moreso speaking globally about third party code in general. You know how it is, anytime something doesn’t work when a person updates WP, it’s the theme author’s fault. And supporting other people’s projects, I’m sure you get your fair share of that. :-)

      • Sorry, yeah I didn’t think you implied otherwise, just wanted to clarify. I definitely understand the wariness to release anything relying too much on third-party scripts. My control-freak tendencies wouldn’t allow for it :)

    • I tend to agree with Darren regarding Timthumb not having an adverse effect (in my experience) on WP updates. As a pseudo developer, I’ve found that using Timthumb (or something similar) was infinitely helpful during both the development process of a site – as images tend to be in flux till the design finally gets nailed down, as well as the final deployment and ongoing maintenance/support of the site.

      Hmm – actually, it’d be interesting to see a hybrid of something like Timthumb calling on the WP thumbs (small and med) where needed, and the Large size for other areas where the image gets called. Hello Ben? Tim? ;-)

      Side note: Viper007Bond has a Regenerate Thumbnails plugin which can handle some of the issues when switching between themes that use different sized thumbs. Link: http://www.viper007bond.com/wordpress-plugins/regenerate-thumbnails/

  3. Tina Woodall :

    Brian, thank you for taking the time to do this!!

  4. Hi Brian,

    Can I just confirm, once you’ve set the image sizes in the Media Settings area in WP, and you are then writing a post & uploading the image, have you already sized the image on your local machine to be the largest size you will use (for the FCG) – so in the example you gave above, is the image on your local machine already at 600×400 and this is the image you upload (which from there two further images are created, the medium & the thumbnail size)?

    I tried this out last week on my personal blog that I’m redesigning after coming across a post on the forum, & couldn’t understand why I couldn’t get it to work, but I think now it was a permissions error, because I was having some other issues also that were to do with permissions. And your explanation above has gone into more detail & I understand what’s happening now. Thankyou.

    Cheers

    Helena

  5. Great post Brian! I’m wondering if this process can be integrated into the Agent theme… I got feedback on the Agent theme that the image uploads are hard to figure out from the not-so-technical personnel. From what I can see most of your themes use some sort of image upload, wouldn’t it be worth it implementing a easier image upload on the actual Post page? Something to the effect of multiple image upload “Browse” boxes that use the WP API to thumbnail the image and automatically populate the thumb and image paths?

  6. It’s nice but a plugin that automatically create thumbnails in our preferred sizes as we upload them would save more time.

  7. Thanks for the tutorial Brian. I’m using the Black Canvas theme. While the above process makes intuitive sense to me, when following the above process and adding the class attribute to the main image that I upload, I can’t get Black Canvas to display my post’s “portfolio image” in the image area. Instead, it continues to fall inside the description area. I’ve tried dissecting the Black Canvas demo site to see how the CSS is set up, but no dice.

    It seems like the template *should* be taking the field values and thus plunking the images in the appropriate places on screen.

    I’m know that I’m missing something obvious. Could you help out? So much appreciated Brian. Thanks.

  8. hi
    I just wanted to ask a very basic question about images and I am very sorry if it is in the worng place as i am only just starting to learn all this. Do we have to worry about the file size of images? and taking up too much memory etc or can i just go ahead and load up lots of photos ….?
    apologies if this sounds thick – I am at nursery school when it comes to this …. I have just worke dout how to do featured posts so hopefully I am not beyond help!
    many thanks L

    PS If I am asking in the wrong place then perhaps you cansend me to the right one!

  9. hello there, i am using Chrome, why the image for my featured desent appear in the featured box in the homepage. im using the “articleimg” in the custom value to set it up, but still the image dosent appear.

    is there anything that i do wrong here?

  10. Hey Brian, I love your work. I’m glad to have purchased your Pro Plus All-Theme Package. Just as feedback, I think you should consider integrating TimThumb into your Themes. I have tried a few Themes with it, as well as integrated it myself to those that don’t have it and it’s one of the greatest “inventions” I have come across for Themes/websites. It has many advantages over the WordPress image uploader.

    Simple implementation is just putting the TimThumb code right into the Theme files – with pre-defined measurements.

    However, for more control (of course, more coding to build the Theme), is to actually have the ability to set the dimensions of the images from the admin panel – allowing to change the size of the images at any time in the future – for the entire site at once!

    • Hi,

      Please can someone give my any support in getting images on to my studio press blog? I’m going insane trying to work out the use of the custom fields. The images are live but they will not appear in my blog. I’m close to losing it!

      Jonnie

      • Craig Tuller :

        Jonnie,

        Login into the Support Forum and make a post asking for help & include your site link.

  11. Thank you daren i will try to use featuerd content function thanx

  12. Hi!
    I could not be greener at this. I paid to have the images uploaded into the flash gallery at the top of the page of Allure. I chose allure because I really liked the magazine effect created by having each new post relate to photo next to it under the featured articles page.
    So, I uploaded the photo into the first post I did (without the paid programmer) and whala…no photo as you can see if you just go to http://www.tomorrowsworkplace.com
    I have read your tutorial above, and I guess because I am so new, I just don’t understand what I am not doing correctly.
    Could you possibly give me a step by step 1,2, 3…here is how to get the thumbnail photo to be on the home page in the featured article section next to the title of the blog post where it resides? I would be most grateful!

  13. WHOOPS…not http://www.tomorrowsworkplace.com it is tomorrowsworkplace.net

  14. I have walked through the entire tutorial and no thumb nails appears on the site. Also, I can’t find where to get the falsh screen of the 5 posts to show up….nothing….please help!

  15. i dont get it
    i did exactly as it says above
    and it didnt work…..

Trackbacks