Managing images with the WordPress media manager

I’ve recently outlined my strategy for including images in posts, namely:

  1. Find an image you’d like to use
  2. Resize it with GIMP
  3. Upload it to my web server via FilleZilla
  4. 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.

Image courtesy of mischiru


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:

  1. How to resize images using GIMP
  2. How to widen the sidebar in WordPress K2
  3. How to install WordPress themes using cPanel
  4. versus
  5. WordPress Translation plugin

16 Responses to “Managing images with the WordPress media manager”

  1. Gravatar of Dale 1 Dale

    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”….


  2. Gravatar of Rodney Smith 2 Rodney Smith

    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!

  3. Gravatar of alvin wong 3 alvin wong

    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

  4. Gravatar of Rodney Smith 4 Rodney Smith

    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?

  5. Gravatar of zanza 5 zanza

    How can i setup media manager to my wordpress?

  6. Gravatar of Rodney Smith 6 Rodney Smith

    zanza: you shouldn’t have to do anything – it’s built into WordPress (from v2.5, I think).

  7. Gravatar of Maddy 7 Maddy

    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. is the url pattern I am using.

    In the gallery tab, the link is there as where as ideally it should have been

    Please help! Thanks in advance.

  8. Gravatar of Maddy 8 Maddy

    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.

  9. Gravatar of Rodney Smith 9 Rodney Smith

    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.

  10. Gravatar of Maddy 10 Maddy

    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.

  11. Gravatar of Olik 11 Olik

    Good instruction, but My blog on WordPress and i don’t can update my blog to WordPress 2.6:(

  12. Gravatar of Rodney Smith 12 Rodney Smith

    Olik: do you mean 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.

  13. Gravatar of Olik 13 Olik

    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!

  14. Gravatar of Document Management Blog 14 Document Management Blog

    I wasn’t aware of the media manager. This will save me a lot of time playing around with images.

  1. 1 More Wordpress Plugins (and Two Notes of Gratitude) |
  2. 2 September 2008 Edition Of Wordpress Posts – Wordpress Posts
Comments are currently closed.