Mastering The Media Uploader

Please note: this tutorial assumes that you are using WordPress 3.3.1 with the default Twenty Eleven theme installed.

Sites are boring without media.

If you didn’t already know that, make sure you commit it to memory now. The internet is full of fickle and impatient people, and they won’t give your site a second thought unless it is vibrant and interesting.

We’ve all seen more cookie-cutter sites than we can shake a stick at, so you will need to make sure that you stand out from the crowd. And one way of doing that is by including lots of colorful and interesting images and videos.

That’s right – videos of cats doing silly things will explode your site’s popularity.

WordPress makes it extremely easy to insert and manipulate media in your posts and pages, and this tutorial will show you how to upload and edit images. Before proceeding, please note that I am going to assume you already know all about the Add New Post/Page screens and Visual Editor – if you haven’t read those two tutorials yet, please do so before proceeding.

Sourcing Media For Your Site

Before we get onto the meat of the tutorial, you may be wondering where you can find media for your blog. You can of course take your own photos and feature them on your blog, but there are a wealth of enormously useful resources available on the web

Check out this article I wrote recently: 4 Free Photo & Image Resources You Need For Your Blog. Those are the only resources I use, and I am an image whore.

An Introduction To The Media Uploader

This tutorial is rather timely. It comes just a few weeks after the release of WordPress 3.3, which introduced huge improvements to WordPress’ media handling capabilities.

To take a first look at what we are dealing with, open up a new page or post. You will find this little icon nestled above the Visual Editor.

That’s it! Your gateway to WordPress media heaven. The various media upload buttons of pre-WordPress 3.3 versions have been consolidated down to a single icon.

Let’s take a look – go ahead and click the button. You will be presented with the following screen:

As you can see, there are four tabulated upload/insert options for you to consider. Let’s take a look at each one in turn.

From Computer

You have two options when it comes to uploading your images – you can drag and drop them into the box above, or hit the “Select Files” button. Pick whichever method takes your fancy – it’s not important.

Once you have selected the file you want to upload, WordPress will import and “crunch” it:

Now we’re getting into the nuts and bolts of image handling in WordPress. You will be presented with a screen with various fields and buttons. Let’s break them down.

Edit Image

The thumbnail you will see on your screen may not fully match the image you uploaded. This is because WordPress dynamically alters a version of the image to create a thumbnail that might be used in various places, such as blog excerpts and archive pages.

If you want to fiddle with what WordPress has done (or just fiddle in general), hit the Edit Image button. You’ll be presented with this screen:

This screen allows you to do some basic image editing. The four buttons to the top are crop, rotate counter-clockwise, rotate clockwise, flip vertically, flip horizontally, undo, and redo.

The “Scale Image” option in the top right is especially useful for when you want to edit an image to fit your blog’s layout. Just hit the button and input whatever width or height suits your purposes, and the corresponding dimension will automatically adjust to preserve the width to height ratio of your image.

The Image Crop tool is also useful, but the “help” link does a great job of explaining its capabilities, so I don’t need to repeat their instructions. The same can be said of the Thumbnail Settings tool. It comes in very handy when you want to select a featured image, but need to crop it so that it displays properly as a thumbnail. Just upload your image, crop it as you see fit, but select “Apply changes to: Thumbnail” before hitting save! You will be left with two versions of the image – the original, and the new thumbnail (which will be used in the appropriate context).

Meta Data

These fields are pretty explanatory. You should always have a title and alt text, so make sure that those fields are filled in with a description of the image. You may also choose to include a captain (that will be displayed below the image in a format determined by your theme) or a description (which is backend information – your site’s readers will not see it).

You can also set the alignment of the image and pick from a selection of sizes at the bottom of the screen. Finally, in order to use the image as your primary image when the post or page is being shown as an excerpt, hit the “Use as featured image” link.

Below you can see an example of how you might fill the fields in:

Once you are happy with the image settings, just hit “Insert into Post”, and presto!

95% of the time, you will probably upload your images from your computer. But I like to have all bases covered, so let’s take a quick look at the other three options.

From URL

You may wish to link to an image that is hosted on another site, and WordPress allows you to do this with ease. Click on the From URL tab on the main image uploader screen, and you will be shown the following screen:

I have filled in the fields as an example of what you can do. As you may have noticed, WordPress will check the URL you enter and verify that it is a valid image file. If you see a red cross rather than a green tick, the URL you are using does not link to a valid image file.

Gallery

If you click on the Gallery tab, you will be presented with a list of any images you have uploaded via this post/page screen. It will not show any images you have linked to from an URL.

If you hit the “Show” link, you will be presented with the familiar image editing screen that you originally came across in the From Computer tab.

Media Library

This offers the same functionality as the Gallery with one addition – you can find and insert images from your entire site’s media library.

As I am running a test site I have only uploaded three images, but you will probably see a much longer list. With that no doubt in mind, the WordPress team included the capabilities for you to filter and search through your images.

Featured Image

There is just one more image-related feature I want to cover today – the Featured Image widget, which you will find in the sidebar to the right of your screen:

Hitting the “Set featured image” link will present you with the image editing screen you are now familiar with.

There is one important thing to bear in mind when setting your featured image – the ratio of width to height that the image will be forced to adhere to. Your featured image will be displayed in various parts of your site at fixed dimensions. Those dimensions should have a direct bearing on which image you choose and/or how you choose to crop it.

Take my blog for example, whose featured images are set at 180 x 180px. If I chose a 180 x 540px image, it would end up looking “squashed”. So my options would be to choose a squarer image, or crop the 180 x 540px image into a square shape.

Media Uploading Best Practices

Here’s one final piece of advice – unless you cannot avoid it, you should not be doing any major image editing with the WordPress tools. In an ideal world, your image should be pre-edited to the right size and dimensions before you upload it.

Why? Let’s say you upload a 1mb 1800 x 1800px image file that you then resize to 600 x 300px, so it matches the width of your content. Such a large file will tax any reader with a low to medium speed internet connection. So resize the image to 600 x 300px in your graphics editor of choice before you upload it, and the file size will be dramatically reduced.

It is absolutely fine to use the editing tools to create thumbnail images, as they will be saved as a separate file. However, some themes do tend to get a bit confused when you start creating thumbnail images – it is not unusual to see a theme utilize your primary image as the featured image, even when you went to the trouble of creating a thumbnail image. If you do come across this problem, it is best to create a primary and thumbnail image in your graphics editor, then upload both to your site.

Creative Commons image courtesy of courtneyp