< WhatWebWhat Search >

WordPress Image resize plugin

I just published a small plugin for WordPress. I use it to dynamically resize and crop photos on this site.

WordPress resizes uploaded images to two different sizes. A thumbnail and a medium format. In most designs you would really like to control how an image is used on the page. Sometimes it will be a small cropped thumbnail, another time a bit bigger, or a nice medium format on the post pages themselves.

The wok-imager plugin enables this without you resizing the images for WordPress.

Tested with PHP 5.2 and WordPress 2.7 and 2.6.3. Many thanks to Tim Benniks for testing it with WordPress 2.7.


Short version:

cd wp-content/plugins/ svn checkout http://wp-wok-imager.googlecode.com/svn/trunk/ wok-imager Go to the admin page of your site and install the plugin.

How it works

Just add an image element in your page:

<img src="/wp-content/uploads/file.jpg" width="100" height="100" filter="crop,gray" />

The wok-imager will scan your generated page upon serving, apply the width, height and filters to the image and change the tag into something like:

<img src="/wp-content/uploads/wok-imager/file.jpg/4ee630a60ec7feb605516ac5b98972d1.jpg" width="100" height="100" />

When you don't supply the crop filter then the width and height are the maximum bounding rectangle of the image. The resulting image has either the given width or the given height but is never bigger than the given width and height. You can also supply just the width or the height to make the resized image unbounded in respectively the height or the width.

Available filters

You can combine multiple filters by separating then with a comma. For example "crop,flip,gray".

Crops the image to the size given by the width and height attribute. Default is a center crop. You can have a crop aligning to the top, bottom, left or right by adding two extra letters (cropcc). The first letter defines how to align vertically and the second how to align horizontally. Valid values are t,c,b and l,c,r respectively.


crop center crop cropcc center crop croptl upper left corner cropbr lower right corner

scaleAllow the image to be upscaled. Per default wok-imager does not allow an image to be resized to bigger dimensions than the width and height of the original image.flipHorizontal flip of the image, swaps left and right.

flopVertical flop of the image, swaps top and bottom.

blurGaussian blur of the image.

smoothSmoothen the resulting image. Default is a smooth factor of 6 is used. You can supply another with eg. smooth=4.

brightCorrect the brightness. Default is a brightness factor of 50. You can supply another with eg. bright=100.

contrastCorrect the contrast. Default is a brightness factor of -10. You can supply another with eg. contrast=-50.

grayConvert the image to grayscale.

sepiaConvert the image to sepia.

colorizeYou have to supply the three rgb colors with this filter. For example: filter="colorize=100:100:100"

negateNegate all colors, makes the image look like a color negative,

q=qualitySets the quality of the jpeg conversion. When you don't supply the quality then the quality depends on the size of the resulting image. The smaller the image the higher the quality setting.

Imager plugins

You can add your own imager plugins. There are two examples in the imager-plugin directory.

Adds a translucent red cross on top of your image.

exampleAdds a small text on top of your image.

Articles By Marc Worrell – Keyword wordpress, Software, plugin, Open Source, image, Software, Open Source, Articles – Saturday, September 6, 2008