Image resizing on the fly with phpThumb

When creating a large site with an image heavy content template, I prefer to generate thumbnails and article images on the fly rather than creating and uploading different size images each time they are needed. For example, take a newspaper template… the design may require a small thumbnail for each article on the homepage, a slightly larger thumbnail for featured articles and a full size image on the actual story page. By using a PHP thumbnail creator you can upload one image and automatically generate all the sizes you need and if sometime down the track there needs to be a change template dimensions you can do so without breaking the old pages.

Below is a demonstration of how I integrate phpThumb & Expression Engine in three easy steps.

Step One: install phpThumb

Grab a copy of phpThumb from the sourceforge repository, unzip and upload to the server. In Expression Engine I usually store all my content images (ie: non-theme images) in the directory /uploads/images/ so after uploading my directory looks a little like this:

/uploads

/cache
/images
phpthumb.bmp.php
phpthumb.class.php
phpThumb.config.php
phpthumb.filters.php
phpthumb.functions.php
phpthumb.gif.php
phpthumb.ico.php
phpThumb.php
phpthumb.unsharp.php

phpThumb usually works fine out of the box, but depending on your server set-up you may have to upload the /demo/phpThumb.demo.check.php and adjust the phpThumb.config.php file.

Step Two: secure phpThumb

With the default setup of phpThumb a malicious user would be able to get the phpThumb.php url and create a bunch of images on your server… afaik there is no malware risk from this but it can cause extreme server load potentially bring the server down.

phpThumb has a function for generating hashed calls to phpThumb by activating ‘high_security_enabled’ in the phpThumb.config.php file. This is strongly recommended.

To make things slightly easier I have created a super simple plugin for Expression Engine 2.0. Download phpthumb-0.1.zip or copy and paste the below code into /system/expressionengine/third_party/phpthumb/pi.phpthumb.php. You must edit the $path, $url and $pass variable as described below… if there is any need for this plugin please drop a note in the comments and I will release another more polished version .

<?php

if ( ! defined('BASEPATH')) exit('No direct script access allowed');

$plugin_info = array(
	'pi_name' 		=> 'phpThumb',
	'pi_version' 	=> '0.1',
	'pi_author' 	=> 'Paul Kilmurray',
	'pi_author_url' => 'http://www.kilbot.com.au/',
	'pi_description'=> 'Generates hashed calls to phpThumb as described at the bottom of phpThumb.config.php',
	'pi_usage'		=> PhpThumb::usage()
);

/**
 * PhpThumb Class
 *
 * @package			ExpressionEngine
 * @category		Plugin
 * @author			Paul Kilmurray
 * @link			http://www.kilbot.com.au/
 */

class PhpThumb {

	function PhpThumb() {
		$this->EE =& get_instance();
		
		/* CHANGE THESE!! */
		$path 	= '/path/to/phpThumb.config.php'; // path to your phpThumb.config.php
		$url 	= 'http://example.com/phpThumb.php'; // url for phpThumb.php
		$pass	= 'password'; // your high_security_password
		
		$src = $this->EE->TMPL->tagdata;
		$this->return_data  = $url.'?'.$src.'&hash='.md5($src.$pass);
	}
	
	function usage() {
		ob_start(); 
		?>
eg:
{exp:phpthumb}src=images/photo.jpg&w=200{/exp:phpthumb}
{exp:phpthumb}src=images/{category_image}&w=200{/exp:phpthumb}
		<?php
		$buffer = ob_get_contents();
		ob_end_clean(); 
		return $buffer;
	}

}
/* End of file pi.phpthumb.php */ 
/* Location: ./system/expressionengine/third_party/phpthumb/pi.phpthumb.php */

Step Three: Generate some images!

Simple resize and crop

<img src="/uploads/phpThumb.php?src=images/jquerylogo.png&w=100" />
<img src="/uploads/phpThumb.php?src=images/jquerylogo.png&h=50&w=50&zc=1" />
or
{exp:phpthumb}src=images/jquerylogo.png&w=100{/exp:phpthumb}
{exp:phpthumb}src=images/jquerylogo.png&h=50&w=50&zc=1{/exp:phpthumb}

Transparent PNG

<img src="/uploads/phpThumb.php?src=images/expressionengine_logo.png&w=100&f=png" />
<img src="/uploads/phpThumb.php?src=images/expressionengine_logo.png&w=100&bg=D4E9F7" />
or
{exp:phpthumb}src=images/expressionengine_logo.png&w=100&f=png{/exp:phpthumb}
{exp:phpthumb}src=images/expressionengine_logo.png&w=100&bg=D4E9F7{/exp:phpthumb}

Complex crop

<img src="/uploads/phpThumb.php?src=images/wordpress-logo.png&w=100&f=png" />
<img src="/uploads/phpThumb.php?src=images/src=images/wordpress-logo.png&sx=0&sy=0&sw=115&sh=115&f=png" />
or
{exp:phpthumb}src=images/wordpress-logo.png&w=100&f=png{/exp:phpthumb}
{exp:phpthumb}src=images/src=images/wordpress-logo.png&sx=0&sy=0&sw=115&sh=115&f=png{/exp:phpthumb}

There are plenty more examples on the phpThumb demo page.