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.