phpThumb() and ExpressionEngine Part I

published on Jul 31st, 2008 // 12 Comments

 
phpThumb() and  ExpressionEngine Part I
 

This is how to use one solution to take the headache away from clients when resizing images. Use phpThumb() to resize your images painlessly in your ExpressionEngine templates.

phpThumb()

phpThumb() is a PHP thumbnail generator as the name suggests. It uses the GD or ImageMagick library to create thumbnails from images (JPEG, PNG, GIF, BMP, etc) on the fly. The output size is configurable (can be larger or smaller than the source), and the source may be the entire image or only a portion of the original image.(cropping requires ImageMagick).

Find out more here at the phpThumb() project site

The beauty of using this with ExpressionEngien that you are doing all your image resizing on the template end. As I say to clients, all you have to do is upload an image and nothing else. The template takse care of the rest. One of the main concerns and irritations for clients using any CMS is the resizing and placement of images. It becomes a major headache for the designer/developer also in terms of supporting the client. Other benifits include not having to resize all the source images again if the design changes. All you have to do is change the parameters int he template and phpThumb recreates the image and throws it into a cache folder. Did I mention that? phpThumb() uses a cache so onece the template is loaded for the first time the image is created and that overhead is not used again.

Installation

Download the latest version from here or the beta if you feel up to it.

Unzip it locally and rename phpThumb.config.php.default to phpThumb.config.php

Upload phpthumb directory to the root or any designated folder on your server that you use for such things.

That’s it. It is now installed. Right lets see if your server can handle it. Obviously you need PHP and GD installed.

Point your browser at http://www.somesite.com/inc/phpthumb/demo/phpThumb.demo.check.php and it will give you a breakdown of your configuration and if you are up to it or not.

Usage

You call phpThumb() just like you would a normal image in your template
Examples:

<img src="/inc/phpthumb/phpThumb.php?src=/image.jpg&w=100" /> 
<img src="/inc/phpthumb/phpThumb.php?src={custom_image}&w=100" /> 

See the “demo“ link on http://phpthumb.sourceforge.net for more usage examples). Parameters that can be passed are listed below under “URL Parameters”.

Some common paramters are

  • src = filename of source image
  • w = max width of output thumbnail in pixels
  • h = max height of output thumbnail in pixels
  • wp = max width for portrait images
  • hp = max height for portrait images
  • wl = max width for landscape images
  • hl = max height for landscape images

NOTE: It’s recommended you use the local image filename wherever possible (rather than http://) because performance is much better, less (or no) use of temp files, and the last-modified check for cached files doesn’t work for remote files.

Create a custom field for the image you want to thumbnail and when you upload it to field on the publish page just use the ‘URL only’ option. Now as suggested by the phpThumbs note it is better to use a local image filename. So what I use is the Parse URL plugin written by Paul Burdick to strip out the domain bit out of your URL if you want to go down that root.

You would amend the code like so

<img src='img src="/inc/phpthumb/phpThumb.php?src={ exp:parse_url total="100" parts="path" }{custom_image}{/exp:parse_url}&amp;w=80&amp;h=80&amp;zc=1' /> 

That would give me a thumbnail with a width and height of 80 pixels and zoom crop it to the center.
Why not go one step further and add a custom dropdown field called ‘custom_image_crop’ with different cropping options like TL,TR,BR,BL,C etc as per parameters
Then amend your code to

<img src='img src="/inc/phpthumb/phpThumb.php?src={ exp:parse_url total="100" parts="path" }{custom_image}{/exp:parse_url}&amp;w=80&amp;h=80&amp;zc={custom_image_crop}' /> 

In part II I will show you how to use a lightbox script in conjunction with phpThumb and not only scale the thumbnail with it but also the referenced large image.

 

12 Comments

Jon Livingston says:

Very nice, thanks for sharing. I have a ee project I’m working on right now that I can use it on.

gravatar icon
 

David says:

Thanks for the advice. If you want something a little more lightweight-there’s a smaller, simplified version available called timthumb http://code.google.com/p/timthumb/ that works in the same way.

gravatar icon
 

AJP says:

If you haven’t used it yet, the imgsizer plugin offers many of the resizing parameters, wrapped in an EE plugin. I don’t know if it supports the sharpening, and other advanced featured that phpThumb does.

That said, I’ve used both, and they’re both fantastic

gravatar icon
 

jarin says:

hi this is great..is part 2 coming anytime soon? thanks!

gravatar icon
 

Luc Latulippe says:

I’ve also used the imgsizer plugin and agree, it’s fantastic. I’ll check this out too though, thanks.

gravatar icon
 

daithi says:

Thanks for this really useful tutorial! I’ve used Mark Huot’s file upload extension combined with this and it works well.

http://docs.markhuot.com/ee/extensions/file

gravatar icon
 

BEN SHRIMPTON says:

PHPTHUMB.. got it working great in EXPRESSIONENGINE core to resize images that are specified with an absolute path. However, using the EE tag (in my example {picture}, which pulls from the weblog custom field where i upload my pictures) instead of an actual path, results in phpThumb saying “no such picture exists, which is kind of true. how do i get PHPTHUMB to re-size this {picture} contained in the EE tag??. The example code above seems to simply place the EE custom field tag in place of an actual path to an image.. which is what im trying, but im my case, ro results rendered.

gravatar icon
 

Mathias says:

Hi,

using phpThumb without the “high security password” feature is quite dangerous. Everyone can look at the phpThumb URL and create a variety of different images on your server by just playing around with the URL parameters. If it was in my interest to take down your server, all I would need was a script which calls a number of different phpThumb URLs. Each request would create a new cached image which would 1. create server load and 2. use disk space on your box. So please think about a solution to hash your URLs in order to prevent misuse. You can take a look at my AutoThumb plugin for WordPress as an example.

— Mathias

gravatar icon
 

php thumbnailer says:

thank you for sharing with that!!!

gravatar icon
 

André | Pushloop says:

Nice and clean tutorial, thanks. If you don’t want to worry about someone entering a full IMG tag in the custom field by mistake, I recommend using the plug-in URL Extractor Plus to extract the file path from it.

More info on the plug-in here: http://devot-ee.com/add-ons/plugins/extract-url-plus-2/
Example:
/scripts/thumb/phpThumb.php?src={exp:zm_extract_url_plus show=

gravatar icon
 

SEO says:

What are your most important SEO techniques?

gravatar icon
 

tiffany co says:

I recommend using the plug-in URL Extractor Plus to extract the file path from it.

gravatar icon
 
 
Commenting is not available in this section entry.