Sometimes when running a content managed website, you need to make thumbnails for and/or just completely resize uploaded images. So that users don’t break the site layout, maximum dimension constraints must be used. This tutorial will explain why and show you how to use a PHP image thumbnailer to resize images.
Example: Here
PHP Source (as text file): Here
Doing this resizing in the HTML or CSS seems like a reasonable idea, but the resized images are still the full file size of the original, and so take way more time to download than necessary. For instance, let’s say there were 100 vacation pictures on a photo gallery you’ve created. Also let’s pretend that each picture is only 1 MB (this is very conservative). If the links to the pictures we links, most users wouldn’t mind the second or two download to view each picture. But if the links were “thumbnails” where you used the full image but resized it with HTML or CSS, then all 100 MB of images would have to load on the page all at once just to see the thumbnails. Of course, after the page had loaded, the full images would be cached and be ready for instant viewing, but most users would have navigated away by then. Plus, if the user was interested in only one picture, all 100 would still need to be downloaded on the thumbnails page, increasing your bandwidth usage immensely.
This is a pretty well-known problem and is easily solvable by just making thumbnails of the correct size for each picture. The problem is that with a content-managed website, the user would usually need to make their own thumbnails and upload it along with the full image.
Another problem that arises is that sometimes the user will just upload a raw image they got directly from their camera, which may be way too huge than would ever be viewed normally.
The solution is to create thumbnails and resize images server-side automatically. The example shows a 500×500 image being resized into different “boxes.” The reason why the use of maximum width and height and bounding boxes is because aspect ratio is preserved, and if the image is smaller than the bounds, it is not resized.
The way to use the thumbnailer is to pass it several variables in the query string. These variables are:
- src – The file to resize. This is relative to the currently running script.
- maxW – The maximum width the resized image will be.
- maxH – The maximum height the resized image will be.
- out optional – The path to the file to write to. If null or unspecified, will output to browser.
- quality optional – The quality of the JPEG output. Usage is the same as the quality variable Here, including the default value.
Another way to use the thumbnailer is to class within your own code. include_once the thumbnailer.php script and use the thumbnailer class. This will not execute the same path as above because the script checks whether it was the requested script or just an included script. If requested directly, the resizing is expected to happen based on the query string passed with it, just as in the example. However, if included in another PHP script, this will not happen and the below API is usable.
Below is the API for that class (should look similar to the parameters above):
- Constructor
- Usage:
new thumbnailer($src) - Parameters
- $src – The file to resize. This is relative to the currently running script.
- Description: – This constructs a new thumbnailer object, ready to be resized.
- Usage:
- makeThumbnail
- Usage:
$thumbnailerObj->makeThumbnail($maxW, $maxH, $out, $quality) - Parameters
- $maxW – The maximum width the resized image will be.
- $maxH – The maximum height the resized image will be.
- $out optional – The path to the file to write to. If null or unspecified, will output to browser.
- $quality optional – The quality of the JPEG output. Usage is the same as the quality variable Here, including the default value.
- Description: – This creates and either saves or outputs the new JPEG image.
- Usage: