WordPress Plugin: AutoThumb

After switching my blog to WordPress I needed a simple solution which allowed me to flexibly post images in different sizes without having to hassle with different filenames, paths etc.

The plugin is actually just a port of a plugin/snippet I wrote for MODx a while ago (see here). It scans your content’s source code for <img> tags with width and height attributes and passes them to phpThumb, a great PHP image editing library, which handles the resizing and editing of the image. Additionally, by passing parameters to phpThumb using a query string, it’s possible to edit the image in several ways (take a look at phpThumb’s demos).

The simplest way to get resized images is to specify width/height attibutes in your HTML. Autothumb will use the given values and remove the attributes from your page’s output. When you take a look at the URLs of the following example images, you will see that the <img>-tag’s src-attribute points to a file called image.php in the plugin’s directory. This file takes the image source and several other parameters and passes them to phpThumb, which will generate and output the final image (of course images will be cached).

To prevent evil people playing with the query string and letting your server generate tons of different images, the plugin generates a hash which is a combination of the query string and a secret password you set in phpThumb’s config file. So every call with different parameters (even the same image with different sizes) has another unique hash and it’s not possible to generate new images without knowing the secret password.

Basic usage

Just use images in your content and set width and height HTML attributes. The plugin will scan your content and pass the right parameters to phpThumb, which will generate the appropriate image sizes. The plugin works on 3 types of URLs:

  • relative URLs (do not begin with a slash, example: wp-content/uploads/myimage.jpg) start at your WordPress installation root, even if you installed WordPress in a subdirectory of your server. Use this type of URLs if you want a simple setup without much hassle, even when you move your WP installation.
  • absolute URLs (begin with a slash, example /subdirectory/wp-content/myimage.jpg) start at your server’s document root. If you use this type of URLs, remember to include your WP installation subdirectory
  • full URLs (example http://example.com/subdirectory/wp-content/uploads/myimage.jpg) point to an absolute location. I suggest using full URLs only when you point to external images

If you insert images from the WP media library, it’s the best to delete the URL part before wp-content in order to get relative URLs.

Basic Examples

As an example, I will take this photo I found on Flickr:

<img src="path/to/image.jpg" alt="" width="600" />

Of course, this also works with the height attribute or with both attributes combined.

<img src="path/to/image.jpg" alt="" height="200" />

<img src="path/to/image.jpg" alt="" width="150" height="200" />

Advanced examples

You can use all phpThumb functions and filters (see phpThumb demo page and readme) depending on your server’s configuration (GD version, ImageMagick, …) by passing them as query string:

http://example.com/path/to/image.jpg?param1=value1&param2=value2&. . .

The only difference to the demo page: when using filters, make sure that you use curly brackets {} instead of square ones []. Multiple filters like ?fltr{}=sep&fltr{}=blur|5 do not work with this release, but I will see to update it as soon as possible.. With version 0.2 multiple filters are working as shown on phpThumb’s demo page. No need to use curly brackets (altough they still work) anymore.

Crop / Zoom Crop

<img src="path/to/image.jpg?zc=1" alt="" width="400" height="150" />

<img src="path/to/image.jpg?zc=1" alt="" width="120" height="120" />

Blur filter

<img src="path/to/image.jpg?fltr[]=blur|2" alt="" width="400" />

Sepia

<img src="path/to/image.jpg?fltr[]=sep" alt="" width="400" />

Combined Filters (new in 0.2)

<img src="path/to/image.jpg?fltr[]=lvl|*|2&fltr[]=hist|rgb||||BR|100&fltr[]=hist|*||||BL|100" alt="" width="400" />

Rounded corners

<img src="path/to/image.jpg?w=400&fltr[]=ric|30|30&fltr[]=sat|-100&fltr[]=cont|30&f=png" alt="" />

For more examples just visit the phpThumb page linked above.

Advanced topics

Usage on custom content

By default AutoThumb automatically operates on the_content() (you can switch this behaviour off via the admin panel). However, you can run the function on any other content you’d like to. All img tags found in that content will be replaced with calls to phpThumb as described above. The autothumb function has the following signature:

<?php
/**
 * autothumb
 *
 * Automatically rewrite img tags to phpThumb
 *
 * @param  string $content  the content containing img tags
 * @return string
 */
function autothumb($content) {}
?>

You can use the function as WordPress filter (as it is used by the plugin):

<?php
add_filter('the_content', 'autothumb');
?>

Otherwise you can just run the function on your content:

<?php
$mycontent = autothumb($mycontent);
?>

Usage on single images

You can use the function used to generate phpThumb URLs manually on single images (e.g. in your templates). The function has the following signature:

<?php
/**
 * getphpthumburl
 *
 * Creates an URL to phpThumb
 *
 * @param string $image         the path/URL to the image
 * @param string $params        phpThumb parameters
 * @param bool   $xhtmlOutput   if set to false, URLs won't contain escaped HTML entities (e.g. &)
 * @return string
 */
function getphpthumburl($image, $params = 'w=800', $xhtmlOutput = true) {}
?>

An example:

<img src="<?php echo getphpthumburl('wp-content/uploads/image.jpg', 'h=90&w=90&zc=1'); ?>" alt="my resized image" />

Clean URLs

Since version 0.4, AutoThumb is able to use rewritten URLs (using mod_rewrite) to generate cleaner URLs to your resized images. Some JS-Lightboxes have problems with the standard URLs (wp-content/plugins/autothumb/image.php?src=image.jpg&w=600) and don’t recognize the output as image. Using the clean URL feature you can guide AutoThumb to generate nicer and more compatible URLs. Example:

/images/path/to/myimage.jpg?w=100&h=100&zc=1

As the path part of these URLs ends with the image filename, chances that the generated images are displayed correctly by Lightbox scripts are much better. You can activate this feature in the option panel. In addition, you can change the base path used for AutoThumb images (it’s images in the above example). AutoThumb tries to automatically edit your .htaccess file and will show you the needed rewrite rules if it is not able to alter the file.

Switch off processing on single images

You got two possibilities to switch off processing of specific images (e.g. you have AutoThumb activated on the_content but want some images to stay untouched. You can use a HTML attribute called process (will be removed on output):

<img src="path/to/image.jpg" alt="" process="0" />

Or you can do the same thing by specifying an URL parameter:

<img src="path/to/image.jpg?process=0" alt="" />

Installation

  • Download the .zip file and extract it.
  • Upload the plugin to your /wp-content/plugins/ directory and make sure your web server has write access to the cache folder and the config file.
  • Activate the plugin.
  • Go to Settings - Autothumb and setup the plugin. (Especially the password as this is important to prevent abuse of the script).
  • Have fun!

Upgrading

Just delete the old plugin directory, upload the new one and reactivate the plugin (or upgrade the plugin via the WordPress plugin installer).

Changelog

0.5

  • add possibility to switch off image processing on single images through the process HTML attribute or URL parameter

0.4

  • fixed path and URL handling issues
  • added “clean URLs” feature
  • improved the options page

0.3

  • added option panel for PHPThumb’s high security password (thanks to Ben)

0.2

  • added possibilty to use multiple filters
  • updated to phpThumb version 1.7.9 (beta)
  • some minor bugfixes

0.1

  • first release

Download

You can grab the latest version of the plugin from the wordpress repository.