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.
Configuration
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.
Image courtesy of mischiru
Conclusion
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.
Related posts:
Thanks for writing this.
As I mentioned back on my site, I’m using Windows Live Writer for posting, so it uploads the images for me also. However, I’ve noticed that it creates six (yes, six!) copies of a .jpg file in different sizes every time I post something with a picture in it. Haven’t had time to try and figure out why, but after reading your tutorial, I realized that the extra files it creates are sized to match the settings for media manager thumbnail and image sizes you describe above. So I’m guessing that WLW and WordPress are interacting somehow to create the additional files.
I suppose it’s a “feature”….
Bye!
Wow, that does seem like overkill. It’d be nice if you could configure how many and what size images you’d like in both these applications. Otherwise you end up with a lot of clutter.
And thank you for the link and very gracious plug for this article!
Hi Rodney,
I had followed your instructions to “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” but there is a message “http” error.
Since I am not computer savvy, I don’t understand why the upload cannot be effected. My confusion here is, “Why is the transfer of files from my computer not done through Core FTP (which I am currently using) since my website is hosted on a remote server.
Await your reply. Thank you
Alvin: I’m afraid I don’t know why you’re getting an error, although it seems there are two different mechanisms for uploading files using the Media Manager – Flash Uploader, and Browser Uploader. Have you tried both?
With regards to your question about why you can’t use Core FTP – the answer is: you can! It’s just that WordPress has provided this mechanism so you can do everything through the WordPress interface, without having to resort to any other applications. But if you’re more comfortable using an external FTP application, by all means use it (I do).
I hope that helps?
How can i setup media manager to my wordpress?
zanza: you shouldn’t have to do anything – it’s built into WordPress (from v2.5, I think).
does anyone know why the Gallery tag does not work?
The Gallery tab’s link does not create proper link so that when it clicked, it takes me to a page not found error.
I have the screenshot, but cannot upload here as there is no file upload..
I use a domain forward and with the canonical-redirection disable plugin everything works fine.
mydomain.com/myblog/wp-admin is the url pattern I am using.
In the gallery tab, the link is there as mydomain.com/wp-admin/media-upload.php where as ideally it should have been mydomain.com/myblog/wp-admin/media-upload.php
Please help! Thanks in advance.
I forgot to mention version. its with wordpress 2.6.3. I did an upgrade lately and with that one it gave me this issue. In my local box all works fine (of course I do not use a URL re-direction there).
Thanks again.
Maddy: I’m afraid I have no idea. I suggest you submit this to the WordPress support forums – you’ll be more likely to find someone there who can help you.
Well, tried all that, and finally ended up submitting a ticket on wordpress trac, which I am not sure is the right thing to do, but surely the issue is something to fix up, coz most I know use forwards to their blog hosting.
Good instruction, but My blog on WordPress and i don’t can update my blog to WordPress 2.6:(
Olik: do you mean WordPress.com? As far as I know that’s kept bang up to date with the latest releases. For instance I see WP2.7 is being released there in a few hours.
Thanks, I have not problems whith update my wordpress 2.3 to actual version. And now I can use multimedia skills on my blog by the 100%. Thank you very much!
I wasn’t aware of the media manager. This will save me a lot of time playing around with images.