One of the things that is most often misunderstood and feared by end users is the manipulation of images for website use. There are addons available for ExpressionEngine to help with this, allowing the end user to upload virtually any size of image and have it resized automatically to suit. The huge advantage of this kind of method of working with files is that should the design of the website change there’s no need to go back and resize a load of images, a simple parameter change and it’s all done.
I’ve used these addons on and off for sites I’ve developed over the years, but quite often I’ve hit various limitations such as the need to create rounded corners, or cropping images to the top rather than the centre. What I’ve continually fallen back on is an extremely useful collection of scripts called phpThumb() which I’ve always managed to crowbar into doing what I’ve needed.
I’ve decided to pull this post together to help others that have always relied on the available ExpressionEngine addons and maybe don’t realise that there are alternatives out there. The added bonus of phpThumb() is that because it’s a standalone script, it doesn’t matter which version of ExpressionEngine you’re using, it will work in exactly the same way with no code changes regardless of platform.
Installation and setup
The first thing to do is grab the latest version, 1.7.9 at the time of writing, and unzip it onto your computer. You’ll end up with a folder called phpThumb_1.7.9 or similar, depending on what version you downloaded. Inside will be a collection of PHP scripts and folders, most of which you can ignore.
You are clearly welcome to make any changes you see fit, but what follows are my recommendations which I’ll explain as I go.
The next step is to rename the folder and one of the files to help make links and code shorter. I’d recommend renaming the whole phpThumb() folder to something like img, and likewise rename phpThumb.php to img.php.
Next we need to delve into the configuration file called phpThumb.config.php.default, and the first thing we need to do is rename it to remove the .default.
Now go ahead and open the phpThumb.config in your favourite editor so we can make a couple of config changes.
By default phpThumb() uses a rather ludicrous cache structure, but one small config change will fix that. Somewhere round about line 47 you’ll find:
$PHPTHUMB_CONFIG['cache_directory_depth'] = 4;
Change that to:
$PHPTHUMB_CONFIG['cache_directory_depth'] = 0;
Finally, to ensure the most flexibility we want to make sure that phpThumb() will allow us to process files referenced using the full URL (i.e. http://yourdomain.com/images/sample.jpg rather than just /images/sample.jpg). On or around line 222 you’ll find:
$PHPTHUMB_CONFIG['allow_local_http_src'] = false;
Change that to:
$PHPTHUMB_CONFIG['allow_local_http_src'] = true;
Finally, save that file and upload the whole folder to somewhere in your document root.
If required, you will need to set the cache folder to world writeable (777), not all hosts require this to be done, but having installed ExpressionEngine you’ll know if this is needed.
The last step is to check that phpThumb() is working correctly and has access to all the right files - to do this browse to the phpThumb.demo.check.php file in the demo folder - something like http://yourdomain.com/path/to/img/demo/phpThumb.demo.check.php.
This script will check that phpThumb() can write to the cache folder and that all required server modules are available. Troubleshooting the output of this file is beyond the realm of this post, but any issues should be fairly easy to solve by either yourself or your host.
The basics
Having got this far, the rest is really pretty simple. I’m going to start by uploading a photo straight from my camera, in this case a dusk shot of the London Eye.
Here’s the original, unedited photo, it’s 2592x1936px weighing in at around 1.6Mb.
So, let’s now display that sample image using phpThumb(). For the above example file, you’d use an IMG tag like this:
<img src="/scripts/img/img.php?src={filedir_1}london-eye.jpg" />
Not a particularly useful example, because what you’ll end up with is once again the full size image, completely untouched. It does however prove that the script is running properly and that your paths and photo locations are correct. Let’s display the same image, but this time we’ll make it fit within this column of text by making it 500px wide. To do that we make use of the “w” parameter to specify the width in pixels.
<img src="/scripts/img/img.php?src={filedir_1}london-eye.jpg&w=500" />
This should result in the following - much more useful!
As you can see, this is now down to 500x373px and around 22Kb.
Let’s say you wanted to show the photo in a square and a little smaller, you use make use of the “w” and “h” (height) parameters, along with “zc” (zoom-crop), as follows.
...&w=100&h=100&zc=1
Specificing “zc=1” means the resized photo will be exactly the size you specify with the “h” and “w” paramaters with any extra height or width cropped off based on the centre of the image. The same code but with “zc=0” results in the following.
Now let’s display this image in a more awkward shape, 500px wide, but only 100px high, and we’ll re-enable zoom-crop.
...&w=500&h=100&zc=1
As you can see, the top and bottom of the photo have been cropped off, and a strip from the centre of the photo is being shown. Let’s say though that you wanted to show the top of the image, rather than the centre - this is particularly useful if you’re creating thumbnails of people shots - you don’t want to see a lot of heads cut off! We change the paramaters to the following…
...&w=500&h=100&zc=T
Now let’s try something a little different, rounded corners. Speficially in this case, a 10px rounded corner on all four corners.
...&w=200&h=200&zc=1&fltr[]=ric|10|10
Finally, let’s take a look at image quality and file size - this can be controlled using the “q” parameter, taking values from 1 to 100.
...&w=200&q=10
This has been set to a quality of 10 and produces a rather poor quality image, but the file size is only around 1.5Kb.
Here the same code has been used, but this time the quality has been changed to 100. The result is a much higher quality file, but this time the size is now around 20Kb.
This how-to has been thrown together very quickly, however I hope it’s been of some help to someone out there - and if so, pass the link on!
I’ll try and expand on this with more practical examples based on ExpressionEngine template code in the near future. In the meanwhile if there’s anything in particular you’d like to see in the next part, make use of the comment system to let me know.
]]>
