Introducing WP Thumb

Throughout my experience of working with WordPress, be it small projects or large projects I have always wanted the ability to do on-demand server side image resizing. For several reasons this is something WordPress has not included in core. With Human Made and the years before, we have used a lot of different solutions for on-demand resizing.

We have been using / developing our own WordPress server side image resizing plugin called WP Thumb for over a year now. WP Thumb is built on top of the great library PHP Thumb (note: that’s not phpThumb which is confusingly a completely different PHP image library). In a nutshell here is a list “features” WP Thumb provides:

  • Pretty URLs – No ugly ‘phpthumb?args=blah’. More like: ‘uploads/cache/foo-bar-jpg/h456d6.jpg’
  • Native – WP Thumb directly hooks into all WordPress image functions, use like: ‘the_post_thumbnail( “width=100&height=90&crop=1″ )’
  • On Demand - The point of WP Thumb is it’s on-demand. Images don’t have to be created / resized on upload. This makes it infinitely more versatile when switching theme, redesigns or using old images in new ways.
  • Resizing Options - Specifically, “crop”, “resize”, “resize-crop” (also know as zoom-crop or adaptive-resize, “crop from position”
  • Manipulation Options -  “automatic background fill”, “jpeg quality”, “watermarking”
  • Caching - All files are cached on disk in /uploads/cache/ (or wherever your uploads dir is set to)
  • File Types - jpg, png, bmp, gif, tiff (via ImageMagick)

But features are not what makes WP Thumb great. What makes it great is how closely it integrates with WordPress and how versatile it can be. We use WP Thumb on a lot of client sites, ranging up to sites like Digital Trends with over 180,000 images pushed through WP Thumb and over 14 million unique pages views /month, or Yell Marketing. It can scale well.

WordPress Usage

At it’s most basic, WP Thumb lets you specify a string / array of arguments wherever your could pass a ‘$size’ argument to core WordPress functions. For example:

<?php the_post_thumbnail( array( 'width' => 500, 'height' => 500, 'crop' => true ) ) ?>

A 500×500 px image will be generated (if a cache version did not exist) from the original full size attachment image. You can pass any “wp_parse_args” style arguments to the $size parameter.

<?php wp_get_attachment_image_src( $id, 'width=100&height=100&crop=1&crop_from_position=center,left' ) ?>

Will generate a 100×100 images resize-cropped from the center left.

Direct Usage

WP Thumb does not have to be used via the WordPress functions, you can resize any image path / URL (local or external). To do so, use ‘wpthumb()’ for example:

<?php echo wpthumb( 'http://google.com/logo.png', 'width=100&height=100&crop=0' ) ?>

Arguments

Below is a list of the WP Thumb arguments.

$arg_defaults = array(
    	'width' 		=> 0,
    	'height'		=> 0,
    	'crop'			=> false,
    	'crop_from_position' 	=> 'center,center',
    	'resize'		=> true,
    	'watermark_options' 	=> array(),
    	'cache'			=> true,
    	'default'		=> null,
    	'jpeg_quality' 		=> 80,
    	'resize_animations' 	=> true,
    	'return' 		=> 'url',
    	'background_fill'	=> null
);

Experimental Features

One of the current experimental features is “background_fill” which will automatically pad images with their existing background colours. Check out more on that and examples On Image Resizing.

The WP Thumb source is available on GitHub at http://github.com/humanmade/wpthumb/. You can download the latest release here, just unzip it to your plugins directory and activate. Alternatively, you can bundle it with your plugin and `include_once()` it directly.

Tests

We recently re-architected WP Thumb and along with that wrote (initially) 22 Unit Tests which makes use of our slightly modified varient of WP Unit. The unit tests are best run using the great WP CLI, as our copy of WP Unit adds a “test” command to WP CLI. More unit tests the better, so if you fancy experimenting with unit tests, any contributions are very welcome!

Report any issues on GitHub and feel free to contribute any changes!