Creating Thumbnails Automatically

A lot of sites that use My Coloring Book like to set up pages from where kids can select a coloring page from a thumbnail image.  You can create these manually, use a program, or have the server generate them as needed.

PHP Script

This script provides a way to generate thumbnails directly in PHP.

In the Usage examples it creates a thumbnail name by replacing the normal ".gif" ending of your coloring page with ".tn.png", and resizes the image to fit within 160 x 160 pixels, whilst retaining it's aspect ratio.

The script can also cope with overlays, automatically blending them together for the thumbnail.

Code...

<?php
function getImage($filename)
{
    list($w, $h, $type) = getimagesize($filename);
    switch ($type) {
        case IMAGETYPE_JPEG:
            $img = imagecreatefromjpeg($filename);
            break;
        case IMAGETYPE_GIF:
            $img = imagecreatefromgif($filename);
            break;
        case IMAGETYPE_PNG:
            $img = imagecreatefrompng($filename);
            break;
    }
    return array($img, $w, $h, $type);
}

function mergetransparent($src, $mask)
{
    for ($y = 0; $y < imagesy($src); $y++) {
        for ($x = 0; $x < imagesx($src); $x++) {
            $spix = imagecolorsforindex($src, imagecolorat($src, $x, $y));
            $mpix = imagecolorsforindex($mask, imagecolorat($mask, $x, $y));
            $a = $mpix['alpha'] / 127;
            $ia = 1 - $a;
            $r = round($spix['red'] * $a + $mpix['red'] * $ia);
            $g = round($spix['green'] * $a + $mpix['green'] * $ia);
            $b = round($spix['blue'] * $a + $mpix['blue'] * $ia);
            imagesetpixel($src, $x, $y, imagecolorallocate($src, $r, $g, $b));
        }
    }
    return $src;
}

function mergemulti($src, $mask)
{
    for ($x = 0; $x < imagesx($src); $x++) {
        for ($y = 0; $y < imagesy($src); $y++) {
            $spix = imagecolorsforindex($src, imagecolorat($src, $x, $y));
            $mpix = imagecolorsforindex($mask, imagecolorat($mask, $x, $y));
            $r = round(($spix['red'] * $mpix['red']) / 255);
            $g = round(($spix['green'] * $mpix['green']) / 255);
            $b = round(($spix['blue'] * $mpix['blue']) / 255);
            imagesetpixel($src, $x, $y, imagecolorallocate($src, $r, $g, $b));
        }
    }
    return $src;
}

function makeThumbnail($imageName, $overlayName, $tnName, $maxw, $maxh)
{
    // Don't create it if it already exists
     if (file_exists($tnName)) {
        list($tnw, $tnh) = getimagesize($tnName);
        return array($tnw, $tnh);
    }

    // Get main image
    list($img, $imgw, $imgh) = getImage($imageName);
    // Get overlay if specified
    $hasOverlay = !empty($overlayName);
    if ($hasOverlay) {
        list($ov, $ovw, $ovh, $ovtype) = getImage($overlayName);
    }
    // Work out scaling
    $sc = min($maxw / $imgw, $maxh / $imgh);
    $tnw = $imgw * $sc;
    $tnh = $imgh * $sc;
    // Create thumbnail image
    $tn = imagecreatetruecolor($tnw, $tnh);
    // Apply scaled image
    imagecopyresampled($tn, $img, 0, 0, 0, 0, $tnw, $tnh, $imgw, $imgh);
    // Apply overlay (if available)
    if ($hasOverlay) {
        $tnov = imagecreatetruecolor($tnw, $tnh);
        imagealphablending($tnov, false);
        imagesavealpha($tnov, true);
        imagecopyresampled($tnov, $ov, 0, 0, 0, 0, $tnw, $tnh, $ovw, $ovh);
        if ($ovtype == IMAGETYPE_JPEG) {
            $tn = mergemulti($tn, $tnov);
        } else {
            $tn = mergetransparent($tn, $tnov);
        }
        $palsize = 64;
    } else {
        $palsize = 8;
    }
    // Save as PNG
    imagetruecolortopalette($tn, false, $palsize);
    imagesavealpha($tn, false);
    imagepng($tn, $tnName, 9, PNG_FILTER_PAETH);
    return array($tnw, $tnh);
}

/* USAGE EXAMPLE #1 - Simple Image */

// Our image we want a thumbnail of...
$imageName = "page/puppy02.gif";
$overlayName = null;

// The filename for the thumbnail...
$tnName = str_replace(".gif", ".tn.png", $imageName);

// Create the thumbnail
list($tnw, $tnh) = makeThumbnail($imageName, $overlayName, $tnName, 160, 160);
echo "<img src=\"$tnName\" width=\"$tnw\" height=\"$tnh\">";

/* USAGE EXAMPLE #2 - Image with Overlay */

// Our image and overlay we want a thumbnail of...
$imageName = "page/unicorn.gif";
$overlayName = "page/unicorn.png";

// The filename for the thumbnail...
$tnName = str_replace(".gif", ".tn.png", $imageName);

// Create the thumbnail
list($tnw, $tnh) = makeThumbnail($imageName, $overlayName, $tnName, 160, 160);
echo "<img src=\"$tnName\" width=\"$tnw\" height=\"$tnh\">";
?>