Browse by title articles:

PHP Automated Thumbnails

by Gijs van Tulder    

The idea is simple, yet powerful: supply an image once; retrieve it in all possible formats, sizes and file types. We will build a PHP script that will automate these actions for us. We would like to use the URL of the image to supply our wishes to the script. A possible URL could be: http://www.example.com/img.php?f(3cb7f702a5967)+w(300) Using this URL, we would like to get the image identified by 3cb7f702a5967, resized to a width of 300 pixels and the corresponding height. The possibilities of our newly created script will be:

1. resize an image to a given width and/or height, possibly preserve the aspect ration
2. accept new image sizes as absolute values, and as percentages of the original size
3. resize an image when width or height exceed a given limit;
4. return the image as a PNG or JPEG-file.

To build and use this script, you will need PHP compiled with the GD library and JPEG-support.

For telling our script what to return, we will use the following syntax. The arguments are delimited by one or more +-es. An example URL could be: http://www.example.com/img.php?f(3cb7f702a5967)+w(300)

Now that we have defined the syntax of the script, it is time to take a closer look at the actual code.

First of all, the given arguments are read from the query string by a simple preg. The regular expression returns all possible tags. Then the tags have to be checked for incorrect values. Defining an array of possible tags and corresponding regular expressions, is an easy way to check the tags in a for-loop. The checked and correct tags are saved in an associative array for later use. As a last check, the script verifies that a filename is given and that that file really does exist.

// define the base image dir
$base_img_dir = \"./img/\";

// find tags
preg_match_all(\"/\\+*(([a-z])\\(([^\\)]+)\\))\\+*/\", $QUERY_STRING,
                $matches, PREG_SET_ORDER);

// empty array and set regular expressions for the check
$tags = array();
$check = array( \"f\" => \"[0-9a-zA-Z]{13}\",
                \"w\" => \"[0-9]+%?\",
                \"h\" => \"[0-9]+%?\",
                \"x\" => \"[0-9]+\",
                \"y\" => \"[0-9]+\",
                \"t\" => \"jpg|png\",
                \"q\" => \"1?[0-9]{1,2}\" );

// check tags and save correct values in array
for ($i=0; $i<count($matches); $i++) {
    if (isset($check[$matches[$i][2]])) {
        if (preg_match(\'/^(\'.$check[$matches[$i][2]].\')$/\',
               $matches[$i][3])) {
            $tags[$matches[$i][2]] = $matches[$i][3];
        }
    }
}

function notfound() {
    header(\"HTTP/1.0 404 Not Found\");
    exit;
}

// check that filename is given
if (!isset($tags[\"f\"])) {
    notfound();
}

// check if file exists
if (!file_exists($base_img_dir.$tags[\"f\"])) {
    notfound();
}

The next step is the actual loading of the image. The getimagesize(); function is used to determine the file type, and then the correct method is used to load the image. In case the requested type of the returned image is not given, the file type of the original image is set as a default.

// retrieve file info
$imginfo = getimagesize($base_img_dir.$tags[\"f\"]);

// load image
switch ($imginfo[2]) { 
    case 2:     // jpg
        $img_in = imagecreatefromjpeg($base_img_dir.$tags[\"f\"]) or notfound();
        if (!isset($tags[\"t\"])) {
            $tags[\"t\"] = \"jpg\";
        }
        break;
    case 3:     // png
        $img_in = imagecreatefrompng($base_img_dir.$tags[\"f\"]) or notfound();
        if (!isset($tags[\"t\"])) {
            $tags[\"t\"] = \"png\";
        }
        break;
    default:
        notfound();
}

The most important part of the script is, of course, the resize. First, we have to look whether or not a resize is needed. When width or height tags are given, the new width and height are calculated using the size of the original image. The new size is used to copy the original image to the new, resized instance.

// check for maximum width and height
if (isset($tags[\"x\"])) {
    if ($tags[\"x\"] < imagesx($img_in)) {
        $tags[\"w\"] = $tags[\"x\"];
    }
}
if (isset($tags[\"y\"])) {
    if ($tags[\"y\"] < imagesy($img_in)) {
        $tags[\"h\"] = $tags[\"y\"];
    }
}

// check for need to resize
if (isset($tags[\"h\"]) or isset($tags[\"w\"])) {
    // convert relative to absolute
    if (isset($tags[\"w\"])) {
        if (strstr($tags[\"w\"], \"%\")) {
            $tags[\"w\"] = (intval(substr($tags[\"w\"],0,-1))/100)*$imginfo[0];
        }
    }
    if (isset($tags[\"h\"])) {
        if (strstr($tags[\"h\"], \"%\")) {
            $tags[\"h\"] = (intval(substr($tags[\"h\"],0,-1))/100)*$imginfo[1];
        }
    }

    // resize
    if (isset($tags[\"w\"]) and isset($tags[\"h\"])) {
        $out_w = $tags[\"w\"];
        $out_h = $tags[\"h\"];
    } elseif (isset($tags[\"w\"]) and !isset($tags[\"h\"])) {
        $out_w = $tags[\"w\"];
        $out_h = $imginfo[1] * ($tags[\"w\"] / $imginfo[0]);
    } elseif (!isset($tags[\"w\"]) and isset($tags[\"h\"])) {
        $out_w = $imginfo[0] * ($tags[\"h\"] / $imginfo[1]);
        $out_h = $tags[\"h\"];
    } else {
        $out_w = $tags[\"w\"];
        $out_h = $tags[\"h\"];
    }
    
    // new image in $img_out
    $img_out = imagecreate($out_w, $out_h);
    imagecopyresized($img_out,$img_in,0,0,0,0,imagesx($img_out),
                     imagesy($img_out),imagesx($img_in),imagesy($img_in));
} else {
    // no resize needed
    $img_out = $img_in;
}

If you\'re using version 2 of the GD-library, you can use imagecreatetruecolor() instead of imagecreate() and imagecopyresampled() instead of imagecopyresampled(). This will get you a much nicer image. (Thanks to Helison Santos, who commented on this.)

The last step in our script is the actual returning of the image. The image and corresponding headers are returned as set in the query string. If the wanted type is not given, the image is returned as the original type of the saved file.

// check for a given jpeg-quality, otherwise set to default
if (!isset($tags[\"q\"])) {
    $tags[\"q\"] = 75;
}

// returning the image
switch ($tags[\"t\"]) {
    case \"jpg\":
        header(\"Content-type: image/jpeg\");
        imagejpeg($img_out, \"\", $tags[\"q\"]);
        exit;
    case \"png\":
        header(\"Content-type: image/png\");
        imagepng($img_out);
        exit;
   default:
        notfound();
}

Now we have a script that fulfils the tasks we described above. Images are uploaded once and can be resized to whatever you want, without manual action. For the editors, the users of your CMS, uploading images is very simple. They upload the file in the size and type they want, and the script takes care of the resizing and converting. Without more work, your site can show thumbnails in many different sizes. If you, in the near future, would like to redesign your site, it is easy to get a new image size, without having to resize your whole archive.

The complete script discussed above, is available for download here. A demo of the script is running here, change the arguments in the query string to try the different commands like w() and t().

Some thoughts about possible extensions of this script:

1. Enabling GIF-output. Using the command-line pngtopnm and pmmtogif programs, you can convert PNG-images to GIF on the fly. That way, you do not have to worry about older browsers not supporting the PNG-format.
2. Uploading of files in more formats. For the users of your CMS, it would be very easy if they could upload images as GIF, Windows bitmaps and TIFF. Using open source conversion utilities, you can still save these images as PNG of JPEG after uploading.
3. Using normal filenames for the images. Filenames generated with uniqid(); are easy and unique, but not very descriptive.
4. Saving file information like default ALT-tags in a database. You can easily find images for use in articles.

Gijs van Tulder

Gijs is a full time Dutch student in economics and a spare time Web developer. He spends his time developing scripts using PHP, MySQL and other external programs.

Visit his site at: http://gvtulder.f2o.org/