How To Efficiently Manage Your Images In WordPress

tapemeasure

You know how sometimes you find that you’ve been doing things the hard way for a long time, and then realize that if you’d only taken the time to think about it, there was a much easier way to do it? That’s how I was with managing the images in my sites. Since WP 2.7 there have been some expanded media options, but I just never took the time to think about how I might put them to good use until recently. I was sizing each image in Photoshop and I could never remember which site needed which size- basically wasting a lot of time on something that WordPress had already simplified for me.

If you’re new to WordPress, you might not be familiar with the media settings, so here’s a brief run through:

Under the Settings section at the bottom of your admin options at the left of the screen, click on Media and it will take you to this screen. media1You can see that there are 3 size settings to play with: Thumbnail, Medium and Large.  When an image is uploaded to WordPress, it will automatically generate 3 image sizes for your use. You can still use the full size image you uploaded of course, but you can also choose to use the various sizes that are generated in different ways on your site. In my site, I use the thumbnail size in my second column on the home page, the medium size in the first column and the large size in blog posts.

Large size

If you do nothing else, you might at least want to set the max width on the Large size image setting.  You can see I’ve got mine set to 448 pixels. This is because I know that the maximum size image my main content column will hold is 460 pixels, and my images are styled so that there is a 6 pixel border around them. The height is set very large, since this will be variable and I don’t necessarily want to limit it. This ensures that I will never try and put an image in a blog post that is too wide for the column. In some themes, depending on the browser, if you put in an image (or video) that is too wide for the column, it will break the theme and send your sidebars down to the bottom.

So, what if you don’t know the maximum width your theme can use? You can usually find the width of your main column in the CSS stylesheet using a add-on for Firefox called Firebug. Check out my overview on using Firebug for how to find the CSS styles for your theme. You could also install the MeasureIt add-on for Firefox and measure the column.

Medium size

Unless you’re using the medium size for a specific purpose, as on my site, the best width for this size might be about half of the large size. This will give you an image that you can align to the left or right and still have plenty of room for your text to wrap around it and look balanced. You could also use the medium size for a second thumbnail size depending on how you use images in your site.

Thumbnail size

This will be the size of the thumbnails in your image galleries, if you use that function. It is also most handy for setting the size of thumbnails that are regularly used in magazine-style themes (here’s a good post by Brian Gardner on this topic), or if you use thumbnails in your archive pages (see example here).

So, that little overview is probably basic for some, but WordPress has so many great features these days, it never hurts to go over some of the ways they can be put to good use!

[Post to Twitter]  [Post to Delicious]  [Post to Digg]  [Post to StumbleUpon] 

You might also enjoy:

15 Responses

  1. Hi, I have a similar type system when I manage images in wordpress. All images are set to the main column width in the content column.

    By doing this it also allows my posts to have consistency in their look, which is obviously quite important.

    • Larry Herrin says:

      Michael’s workflow as described above works well, with one caveat: In my experience, you have to make sure that the aspect ratio of your image is consistent with the aspect ratio (the general shape) of your three sizes within WordPress, or else you end up cutting off part of your original image as WP tries to do its resize thing.

      • Randa Clay says:

        Larry,
        WP doesn’t mess with the aspect ratio. The thumbnail is a resize with a crop, and the other settings are “max” width and height. Aspect ratio is not affected. Thanks for your comment.

  2. Tracey Grady says:

    This is one of the nice features that Wordpress has quietly added in recent times. I remember when I had to dig around in php files to reset the dimensions for large, medium and thumbnail images when I designed my blog, and that’s only going back about 15 months ago.

  3. Ray says:

    I have also recently noticed that image management is way easier with new versions of Wordpress. I am so used to modifying them manually. Now you can just upload the image and tell Wordpress exactly how to display it.

  4. Wilson Pon says:

    I heard the Firebug is pretty good tool, but I haven’t given it a try yet. Maybe, I should download and test it out right away. Thanks for the great tips!

  5. Samson James says:

    This is one of the finest feature that Wordpress has incorporated. Resizing the image is a tedious work in any site. But this is great.
    Thanks a lot.

  6. Rob says:

    Tremendously helpful. Thanks so much.
    I’ve been using Wordpress for nearly a year and continuously would get aggravated everytime I would insert an image through the browser only to find it improperly cropped on my web page. Now, I know I can change the settings beforehand. This will save a lot of aggravation. Thanks.

  7. Mike says:

    Nice. It seems that I have to adjust these dimensions based on the space I have for posting on my blog, and then that would make it easier when I just select a preconfigured setup, say large at 420×360 pixels for example.

  8. Sefa says:

    thanks for all (:

  9. Brad says:

    Thank you for this post. I couldnt stand the older versionss of wordpress and image posting

  10. Yes having just done a major upgrade from a very old version of Wordpress, the new image capabilities are much better.

  11. [...] The super-talented Randa Clay has a timely basic explanation of the new(ish) image handling functions in current versions of WP. Check out “How to Efficiently Manage Your Images in WordPress.” [...]

    Client Quotes

    Randa made my simple concept and basic mockup into a work of art! Randa’s sense of style, attention to minutia, and conscientiousness made her the perfect person for my blog development. ~Brandon Clay


    Recent Work

    I recommend



    My Other Sites