Articles

WordPress Image resize plugin

code.google.com

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.

Installation

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

crop

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.

Examples:

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

scale

Allow 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.

flip

Horizontal flip of the image, swaps left and right.

flop

Vertical flop of the image, swaps top and bottom.

blur

Gaussian blur of the image.

smooth

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

bright

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

contrast

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

gray

Convert the image to grayscale.

sepia

Convert the image to sepia.

colorize

You have to supply the three rgb colors with this filter. For example: filter=”colorize=100:100:100″

negate

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

q=quality

Sets 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.

deleted

Adds a translucent red cross on top of your image.

example

Adds a small text on top of your image.

Tags: image, Open Source, plugin, Software, wordpress