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!

Published on: August 10, 2009 | Category: How to | Tags: