Three image extensions for WordPress

Images are an important part of an attractive, eye-catching blog. Well-chosen images can highlight and capture the essence of your communication, helping your audience to better appreciate your message. Here are three WordPress extensions that help you gain more control over the photos and graphics you want to display on your blog.

Image Manager lets you set default image sizes and borders and control other aspects of your photo and graphics collection. ImageManager works especially well if you like to include images with each blog post and need to keep them to less than a specific width in order to avoid breaking a template design.

Once you’ve got ImageManager uploaded and installed, you need to set the configuration details before it becomes active. In WordPress 2.5, click Settings -> ImageManager to see the configuration page. Here you choose your default style, class, vertical and horizontal space, border, and alignment, as well as the default paths for your image directories and your default image manipulation library. If you already have the GD library installed on the server, that option will be selected by default. Otherwise you can choose ImageMagick or NetPBM, as long as you have access to the command line on your server. If you select ImageMagick or NetPBM, you’ll need to specify on this page where its binary is.

Next, you’ll be asked to choose your default thumbnail width and height, choose a default prefix and directory, and select a default thumbnail image in the case of an error.

ImageManager also lets you remove WordPress’s default image uploader, which is handy if you decide you’re going to stick with ImageManager permanently. If you accidentally delete the plugin before unchecking this option, don’t worry; WordPress puts its uploader back in automatically.

Once you’re configured the defaults for ImageManager, the fun starts. From the Write Post screen, launch ImageManager by clicking the button on the far right of the toolbar that looks like three little Polaroid pictures. You’re presented with the “insert image” screen. If you don’t have any images uploaded to the default directory yet, you’ll have to look near the bottom of the window for the upload option. Browse for the image you want on your hard drive, select it, and click upload.

ImageManager gives you the option to manipulate your image once you’ve uploaded it to your server. Click on the pencil icon underneath the picture title in the “insert image” screen, and the picture opens in an editing window. From there you can crop, resize, rotate, and measure your image. I didn’t like the tiny, unchangeable editing window that only showed a very small portion of the image I uploaded unless I shrunk the image size way down. Start with a smaller image if you want to see the whole thing in your editing screen.

Get the image the size you want it, then click the diskette icon to save it. You’ll need to select a file name (if you want to use one that’s different from the one with which you uploaded it). ImageManager also gives you the ability to select the format and the quality. This is a handy tool if you want more power to manipulate your images than you get with a standard WordPress installation.

The Images Max Width plugin is simple and straightforward: it keeps your images a certain size to keep them from breaking your layout. Choose this plugin if you’re not terribly interested in server-side image manipulation but would love to reduce the size of your images to preserve continuity at your site or to save space on your server.

Images Max Width lets you choose either a client-side resize, which temporarily resizes the images whenever a page is downloaded, or a permanent server-side reduction, which alters the saved file size but results in a quicker download and better-looking images. You also have an option to force a resize, even when there are existing width and height parameters set on the image. I liked this plugin for its powerful simplicity.

Lightbox2 is big on appearances. It lets you display your WordPress blog images with a semi-transparent overlay, just like the fancy Web sites with highly paid developers.

Lightbox isn’t a plugin per se, and you don’t install it the same way you’d install a plugin. Instead, upload three folders — css, js, and images — to your root directory. Then somewhere in the header file of your WordPress theme, insert the lines:

<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="js/lightbox.js"></script>
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />

To activate your Lightbox overlay, create an image link and add in the attribute rel="lightbox". If you’d like a caption on your image, add it in the “title” attribute. Then, whenever someone clicks the image link, it will overlay on top of your page.

Lightbox is attractive and can add spice to your blog if you’ve been looking for a new way to display images.

You can use any of these three extensions individually, or combine Lightbox with one of the other two, for maximum flexibility and power in working with images on your WordPress site.

Every Monday we highlight a different extension, plugin, or add-on. Write an article of less than 1,000 words telling us about one that you use and how it makes your work easier, along with tips for getting the most out of it. If we publish it, we’ll pay you $100. (Send us a query first to be sure we haven’t already published a story on your chosen topic recently or have one in hand.)