Image Cache using phpThumb and Mod_Rewrite
Generate thumbs by visiting a URL such as your.com/thumbs/50x50/images/image.jpg. This will create a 50x50px thumbnail of your.com/images/image.jpg.
The thumb will be stored on your server at your.com/thumbs/50x50/images/image.jpg so the next request for the same image will be loaded without loading php for ultra fast image cache.
Introduction
About a year ago I came across a fantastic script called phpThumb. It is an open source project used to resize images. Sure you can do the same thing with tools such as GD2 or imagemagick (or magickwand), however its much nicer to not have to worry about those things and just focus on getting the right image with ease.
It was as easy as
<img src="/phpthumb/phpThumb.php?src=myimage.jpg&w=100&h=100">
The problems started to arise on high-volume servers when apache had to get PHP to parse the phpThumb code for every image requested. Sure it has caching but it still has to load PHP to decide if it should use the cache or not.
In the past I have seen this issue solved using mod_rewrite to redirect non-existent images to a script where they can be generated. As a proof-of-concept I will provide the basic information required to get this running.
What you need
- Apache
- mod_rewrite
- PHP
These things usually come with dedicated and shared hosting servers by default, however installation is beyond the scope of this article.
Ok, just tell me how to do it!
Upload phpThumb
Download phpThumb from here:
http://phpthumb.sourceforge.net/
Upload phpThumb to yoursite.com/phpthumb
Setup Mod_Rewrite
Create yoursite.com/thumbs/.htaccess
<IfModule mod_rewrite.c>
RewriteEngine on
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ index.php?thumb=$1 [L,QSA]
</IfModule>
Create the Thumbnail Generator
Create yoursite.com/thumbs/index.php
<?php
/**
* Create a thumbnail
*
* @author Brett @ Mr PHP
*/
// define allowed image sizes
$sizes = array(
'157x153',
'600x600',
);
// ensure there was a thumb in the URL
if (!$_GET['thumb']) {
error('no thumb');
}
// get the thumbnail from the URL
$thumb = strip_tags(htmlspecialchars($_GET['thumb']));
// get the image and size
$thumb_array = explode('/',$thumb);
$size = array_shift($thumb_array);
$image = '../'.implode('/',$thumb_array);
list($width,$height) = explode('x',$size);
// ensure the size is valid
if (!in_array($size,$sizes)) {
error('invalid size');
}
// ensure the image file exists
if (!file_exists($image)) {
error('no source image');
}
// generate the thumbnail
require('../phpthumb/phpthumb.class.php');
$phpThumb = new phpThumb();
$phpThumb->setSourceFilename($image);
$phpThumb->setParameter('w',$width);
$phpThumb->setParameter('h',$height);
$phpThumb->setParameter('f',substr($thumb,-3,3)); // set the output format
//$phpThumb->setParameter('far','C'); // scale outside
//$phpThumb->setParameter('bg','FFFFFF'); // scale outside
if (!$phpThumb->GenerateThumbnail()) {
error('cannot generate thumbnail');
}
// make the directory to put the image
if (!mkpath(dirname($thumb),true)) {
error('cannot create directory');
}
// write the file
if (!$phpThumb->RenderToFile($thumb)) {
error('cannot save thumbnail');
}
// redirect to the thumb
// note: you need the '?new' or IE wont do a redirect
header('Location: '.dirname($_SERVER['SCRIPT_NAME']).'/'.$thumb.'?new');
// basic error handling
function error($error) {
header("HTTP/1.0 404 Not Found");
echo '<h1>Not Found</h1>';
echo '<p>The image you requested could not be found.</p>';
echo "<p>An error was triggered: <b>$error</b></p>";
exit();
}
//recursive dir function
function mkpath($path, $mode){
is_dir(dirname($path)) || mkpath(dirname($path), $mode);
return is_dir($path) || @mkdir($path,0777,$mode);
}
?>
Test it out!
Upload an image to yoursite.com/images/myimage.jpg
Open your web browser to yoursite.com/thumbs/100x100/images/myimage.jpg
Check in your thumbs folder, the file should actually be there now. Next time it is requested PHP will not be loaded.
Link to your thumbs like this:
<img src="/thumbs/100x100/images/myimage.jpg">
Clearing Cache
This is a small script I use to delete all the cached thumbs.
Upload an image to yoursite.com/thumbs/flush.php
<?php
delete_dir('./images');
echo 'done';
function delete_dir($path) {
$files = glob($path.'/*');
foreach($files as $file) {
if(is_dir($file) && !is_link($file)) {
delete_dir($file);
}
else {
unlink($file);
}
}
if ($path!='./images') rmdir($path);
}
?>
Bookmark/Search this post with:
ShareThis
Comments
GREAT! I love it!
I had something similiar implemented in one of my projects but removed it
later because this may open up your webapp for (D)DoS attacks (which are farely seldom).
Imagine somebody requesting these:
yoursite.com/thumbs/images/myimage.100x100.jpg
yoursite.com/thumbs/images/myimage.100x101.jpg
yoursite.com/thumbs/images/myimage.100x102.jpg
yoursite.com/thumbs/images/myimage.100x103.jpg
and so on...
Every time the image is parsed, loaded into memory (MEM), resized (CPU)
and stored (IO, DISKSPACE). A workaround is to define a set of fixed dimensions e.g.
'small' => array(50,50), 'large' => array(500,500) and allow only those to
be used.
- David Persson
Thanks for the feedback on the security issue.
I added an $allowed array to ensure only the specified sizes can be created.
I've got this script working, but I'm having trouble with files that are multiple folders deep like:
http://server.com/thumbs/index.php?thumb=/projects/gallery_albums/type/numbers_cell_03.100x100.png
Presumably it's trying to mkdir (/projects/gallery_albums/type/). Is there a way I can work around this?
Thanks Brett, great script. I just wish phpthumb would solve this in some way, it's a huge pain that the cache is so slow.
It should work fine, although if you have mod-rewrite the URL should be:
http://server.com/thumbs/projects/gallery_albums/type/numbers_cell_03.100x100.png
At the end of the script, what is in $error ?
Also, what is the value of $thumb and $image ?
Just tried this with a few modifications and it's working lovely wtih ExpressionEngine. Thanks Brett
Hello,
First of all - thanks for this function.
Anyway - I figured out some errors/enhancements:
1. It is:
if (!in_array($size,$sizes)) {
should be:
if (!in_array($size,$allowed)) {
2. You should quit script on the first error - or the thumb will be generated no matter there is an error. I've created a function:
function exit_on_error($error) {
header("HTTP/1.0 404 Not Found");
echo 'Not Found';
echo 'The image you requested could not be found.';
echo "An error was triggered: $error";
}
and you should use it on each error:
if (!$_GET['thumb']) {
die (exit_on_error('no thumb'));
}
3. And little more security on input:
// get the thumbnail from the URL
$thumb = strip_tags(htmlspecialchars($_GET['thumb']));
i have fixed the bug with the allowed sizes, added an error function so that the script exits correctly on an error, and added the input security.
thanks for taking the time to point out these issues.
Couple of typos I found when setting up:
In the following block:
// note: you need the '?new' or IE wont do a redirect
header('Location: /thumbs/'.$thumb.'?new')
You forgot a semicolon on the end.
Also, in your instructions it says to create a directory called "thumbs", and refers to that directory all the way through, but the code refers to "thumb", and for me it only worked with a directory called "thumb".
That aside - what fantastic work! We've just launched a site which used phpthumb heavily, and it crashed the server hard. Hoping that this may help us reduce the load enough that it can cope.
Hi Jaymis, Thanks for the tip, I have added the semicolan.
The script should work in any folder. You should be able to name it whatever you like. The only thing forcing it to be /thumbs/ is the redirect in the line you pointed out.
Nice script, one main modification... if using this with certain other modrewrite settings (e.g. replacing php files with fake directories etc) the include needs to be relative from the document root, rather than relative from the current page.
To do this replace the line :
require('../phpthumb/phpthumb.class.php');
with the more generic:
require($_SERVER['DOCUMENT_ROOT'] . '/phpthumb/phpthumb.class.php');
Hope that helps
Thanks for your post, it's just what the doctor ordered. I use phpthumb within expressionengine and have noticed as I pile more sites onto my shared server, my gpu count is rising rapidly per month. Having a few issues though.
When I first run the script I see this error:
The image you requested could not be found.
An error was triggered: cannot save thumbnail
If I refresh again the thumbnail shows up correctly. If I try and do this for another image (now that the directory structure has been created from the previous image), this error is displayed:
Not Found
The image you requested could not be found.
An error was triggered: cannot create directory
I'm running wamp on windows 7, but have also found the same errors on the production server. If I delete the file and directories created for the first thumbnail, I can recreate above errors. Any ideas where I might be going wrong?
If it cannot save the thumbnail then $phpThumb->RenderToFile($thumb) is failing. I assume it is to do with your mkdir not creating the full path. Perhaps it is just creating 1 folder per run. So if you have an image 3 folders deep it would take 3 refreshes to generate. Would you be able to confirm this?
To remove the second error (Warning mkdir), just put an @ in front of mkdir. I have now done this in the demo code above.
So if you have an image 3 folders deep it would take 3 refreshes to generate. Would you be able to confirm this?
No luck, no matter how many times I refresh is still gives me the cannot create directory error. I'm running php 5.2.9-2
To remove the second error (Warning mkdir), just put an @ in front of mkdir. I have now done this in the demo code above.
Confirmed it fixes the 2nd error. Thanks!
Hi Rick,
Does it create the folder to put the image in?
If YES:
The problem is the phpThumb is failing to render the image. print_r($phpThumb) may give some insight.
if NO:
not the problem is the mkdir is failing. www.php.net/mkdir
Found a fix for cannot create dir.
Replace:
if (!@mkdir(dirname($thumb),0777,true)) {
error('cannot create directory');
}
With:
function mkdir_recursive($pathname, $mode)
{
is_dir(dirname($pathname)) || mkdir_recursive(dirname($pathname), $mode);
return is_dir($pathname) || @mkdir($pathname,0777,$mode);
}
if (!mkdir_recursive(dirname($thumb),true)) {
error('cannot create directory');
}
Should work fine now.
thanks for the fix, i have added it to the example.
I've created the thumb directory and set the permissions to 0777 but I always get the error "cannot create directory"
I have an already existing library of images located at /gallery/images and then cataloged by numbered directory. So an image I was trying to test for example is located at /gallery/images/2/2.jpg
When I enter /thumb/gallery/images/2/2.50x50.jpg I get the cannot create directory error
It should create the folder /thumb/gallery/images/2/ and place the thumb in there correct?
I copied phpThumb to /phpthumb, created the /thumb directory with the .htaccess file and index.php file inside and chmod it 0777. Is there a config step I missed? FWIW I have been using phpThumb for quite a while with no problems, besides the performance issues you described which is why I'd love to get this working :)
Thanks a lot for this script. Only thing you need to edit is this line:
// write the file
if ($phpThumb->RenderToFile($thumb)) {
error('cannot save thumbnail');
it should actually be this:
// write the file
if (!$phpThumb->RenderToFile($thumb)) {
error('cannot save thumbnail');
the way you had it would give every image a cannot save thumbnail error message before it, saved the thumbnail. Also I'd like to say that the mkdir fix works.
thanks, i have fixed this in the example.
Thanks so much for this, the answer to many hours of hair loss!!! Works a treat.
thanks for this.
Only just worked out how to work my htaccess file so this was a big help
Thanks for this fix!!!
Here is just a little method to change the name of your pictures if you read the picture name from a database:
class thumbhelper
{
/**
* Prepares the picture for using the thumb caching
* features by phpThumb and the thumbs hack by brett.
*
* Basically it takes a normal picture (e.g. "resort_1_pic_10.jpg")
* and adds the location and the desired size of the picture so
* the Apache directive can find it.
*
* Example:
*
* resort_1_pic_10.jpg =>
*
* /thumbs/images/resorts/resort_1_pic_10.450x300.jpg
*
* @param $location Location of the picture (e.g. "/thumbs/images/resorts")
* @param $thumbSize Size of the desired picture (e.g. "450x300")
* @param $pictureName Name of the picture (e.g. "resort_1_pic_10.jpg")
*
* @return thumbs ready picture name
*/
function addThumbSize($location, $thumbSize, $pictureName)
{
$thumb_array = explode('.', $pictureName);
return $location.$thumb_array[0].".".$thumbSize.".".$thumb_array[1];
}
}
If you have animated gif images and use this code you'll notice there never animated. I have found a fix though, simply by adding these 2 lines of code, you'll be animated again.
find:
list($width,$height) = explode('x',$size);
and add the following code below after it:
$ext = substr($thumb,-3,3);
then find:
$phpThumb->setParameter('h',$height);
and add the following code below after it:
$phpThumb->setParameter('f',$ext);
See this works because the "F" parameter in "phpThumb" stands for "output image format" but by default the output format is jpg. This code grabs the last 3 letters of the file extension from the "$thumb" variable and then sets the "output image format" with it.
Now don't worry if you have a 4 digit file extension like .jpeg because if the "F" parameter get's "peg", sent to it, then it just goes back to the default "output image format", which is jpeg anyways. Enjoy.
Thanks goldcard, I added that into the example.
Hi Brett, thanks for the fast reply....
my problem is i don't know how to structure the call to insert the "dimensions" in between the image and .jpg.....my call outs are as follow
Generating Thumbnails
********************************************************************/
global $post;
$custom_field_value = get_post_meta($post->ID, 'Thumb', true);
$attachments = get_children( array('post_parent' => $post->ID, 'post_status' => 'inherit', 'post_type' => 'attachment', 'post_mime_type' => 'image', 'numberposts' => 1) );
if ($custom_field_value == true) {
$tweak = str_replace('/', '%2F', $custom_field_value);
$img_url = str_replace(':', '%3A', $tweak);
print '<img src="'.get_template_directory_uri().'/scripts/phpThumb/phpThumb.php?src='.$img_url.'&w='.$width.'&h='.$height.'&zc=T&q=95" title="'.$post->post_title.'" alt="'.$post->post_title.'" />';
} elseif ($attachments == true) {
foreach($attachments as $id => $attachment) {
$img = wp_get_attachment_image_src($id, 'full');
$img_url = parse_url($img[0], PHP_URL_PATH);
print '<img src="'.get_template_directory_uri().'/scripts/phpThumb/phpThumb.php?src='.$img_url.'&w='.$width.'&h='.$height.'&zc=T&q=95" title="'.$post->post_title.'" alt="'.$post->post_title.'" />';
}
} elseif ($default_image == true) {
print '<img src="'.get_template_directory_uri().'/images/no_image.gif" width="'.$width.'" height="'.$height.'" title="Story has no image" alt="Story has no image" />';
} else {
// do nothing
how would i code it to call the structure with the dimension in between the filename and extension
also can someone help me with filename parsing.....in the else if (attachment)...it would take the full source url and strip out the domain root and leaves the url "/wp-content/uploads..etc".....but when i use the "if" custom value...it uses the full url "http://www. etc"....i tried adding $img_url = parse_url($img[0], PHP_URL_PATH); to the first IF box but does not work
thanks!
Tien
Hey Tien,
You can use the CODE tag to post tag. I altered your comment.
I haven't tested this code, but it should be a push in the right direction for you.
$ext = array_pop($img_array); // pop the last element off the array to get the image extension
$thumb_url = implode('.',$img_array).'.'.$width.'x'.$height.'.'.$ext; // rejoin to create the thumb url
print '<img src="'.$thumb_url.'" />'; // print the image
Hope that helps.
awesome the code up top worked and i got the structure, but the index file will not generate the thumbnailwhen i visit the url in the browser (/thumb/wp-content/uploads/2009/03/myimage.160x120.jpg), nothing happens and the index.php code shows......is there anything else i am forgetting?
sounds like apache is not parsing the file with php. What happens when you visit index.php directly, and pass it arguments like index.php?thumb=wp-content/uploads/2009/03/myimage.160x120.jpg ?
when i visit index.php directly......i get the same thing....it just shows the code in the browser. Pretty much whatever code that is in the index.php file will show in the browser window
okay i fixed it!!....everything works nows finally.......just one minor thing.....some of the images are not the exact 160x120 dimensions.....some are <120x90depending if they are portrait or landscape images.....if they are portrait...the thumbnails fall short of width=160 but have the right height....if they are landscape....some fall short of height=120 but have the right width
perhaps enable these settings?
//$phpThumb->setParameter('bg','FFFFFF'); // scale outside
if not you will need to refer to the phpthumb docs on how to get the image exactly as you want it. Let me know how you go
Everything sorted out now...i had to add the "zc" zoom crop parameter to get it to exact dimensions!
thanks for this great piece of code Brett! works like a champ!!
best wishes
To keep the script safe from abuse and giving me freedom to easily set any image size in my templates, I removed:
if (!in_array($size,$sizes)) {
error('invalid size');
}
and added this:
if (!strstr( $_SERVER['HTTP_REFERER'],$_SERVER['SERVER_NAME'])) {
error('bad request');
}
To keep the script safe from abuse and giving me freedom to easily set any image size in my templates, I removed:
if (!in_array($size,$sizes)) {
error('invalid size');
}
and added this:
if (!strstr( $_SERVER['HTTP_REFERER'],$_SERVER['SERVER_NAME'])) {
error('bad request');
}
Thanks for the suggestion, however I would not personally use that method. Some browsers and security programs cause the referring site to not be sent and the referring site can easily be spoofed.
I LOVE YOU! :)
you save my life, thank you very much!
Post new comment