I’ve recently outlined my strategy for including images in posts, namely:
- Find an image you’d like to use
- Resize it with GIMP
- Upload it to my web server via FilleZilla
- Include it in a post
Well, guess what? WordPress has a built-in mechanism to streamline this process via its Media Manager. It automatically resizes the image, uploads it to your site, and can even embed it within your post if you wish! As a matter of fact, it can also manage your audio, video and other media files for you too, but that’s beyond the scope of this post.
Before we start using the media manager, let’s have a look at how it’s configured in the background. In your admin console, click Settings > Miscellaneous. This brings up the Miscellaneous Settings options page (currently showing the default settings):
You can see it’s divided into two sections. The Uploading section defines where the images you upload will be stored. Unless you have a particular reason to change this, I suggest you leave these settings as they are.
The Image sizes section defines how your images will be scaled when you upload them. The original image will be saved as-is, along with two seperate scaled versions – medium and thumbnail size. These latter two will be sized according to the dimensions you define in this section of the options page. I suggest you untick the crop thumbnail to exact dimensions checkbox, or you may find that only part of the image makes it into the thumbnail.
I like to set the Medium size to just a bit less than the width of my content area; on this blog the content area is 500px wide, so I set the Max Width to 450px.
Don’t forget to click the Save Changes button when you’re finished.
Uploading an image
At the top of the post editor, you will see the media manager toolbar:
Click the Add an Image button to bring up the Choose file dialog.
Click the Choose files to upload button, and select one or more files from your computer to upload. This will transfer the files from your computer to your website, and also create the two scaled versions I mentioned above.
Embedding an image into your post
To use one of the images you’ve uploaded, click the Add an image button again to pull up the media manager, then select the Gallery tab at the top. You should now see a list of all the images you’ve uploaded so far. To use one of them, click the Show link next to it, which will display the following window:
Here’s a rundown of what all those options are for:
- Title – used to provide a title for the image, that may be displayed as a tooltip when a visitor hovers their mouse over it.
- Caption – apart from displaying a caption under the image, using this (and/or the Title) may have benefits for your search engine rankings.
- Description – I’ve never used it.
- Link URL – this defaults to a link to the full-size image, which, if clicked, will display the image by itself in the browser. I don’t use this, and so generally click the None button to remove the link.
- Alignment – this is most useful when displaying thumbnails, as you can align the image to the left or right and have the surrounding text wrap around it. Otherwise, for larger images I generally select None.
- Size – here’s where you select which of the three image sizes you want displayed. For a column-width one I select Medium (you could also use Full size, but for reasons I explain in my article on how to resize images with GIMP, this is not a good idea). Otherwise I tend to use the Thumbnail size and float it left or right.
- Click the Insert into post button to embed the image in your post.
Here’s an example of a thumbnail which I’ve specified to be aligned to the left. Notice how the text flows around it; this can be used to add graphical images to your posts without breaking up the flow of text so much that the reader has to go hunting for its continuation.
I hope that’s given you some idea of how the media manager works. It’s certainly easier to upload and resize images this way than the previous method I spoke about, particularly if you want to do several images at once.
Personally though, I think I’ll stick to the traditional way. Mainly because:
- I don’t like having three versions of an image taking up my webspace when I only intend using one.
- I had a couple of issues trying to align an image left, with wrapping text, while at the same time displaying a caption. I don’t think there’s any reason why this shouldn’t work; it just didn’t for me. It may be a bug in WordPress…
- On a more subjective note, I guess I just prefer to have a bit more control, and as such like to hand-code the html (I know, I know, this is exactly what WordPress is so good at shielding its users from – maybe just a hangover from my pre-WP days!)
I’d be interested to hear others’ experiences of using media manager, so please feel free to join the discussion by leaving a comment.