Creating Proportional Image Thumbnails in Real-time

<img src="script_php.php" border="0" alt="Sample" />

So, we have situations where we need to create a personalized image in real-time, only for a unique intention, without generating another image.

For example:

You have a image gallery with 20 images, and you need create the thumbs to be shown in a place of the page for the users to click and open a popup or thickbox/lightbox with the original image.

To do this, we usually create a thumb when the administrator of the site uploads the image, but here we have a solution to create it in real-time, where it won't be necessary to create a thumb when the upload is done.

First Step:

Create a php script with the name “redim_img.php". In this file, we do the normal process to resize an image.

$imagem   = urldecode($_GET['imagem']);
$tamanhoW = $_GET['largura'];
$tamanhoH = $_GET['altura'];
$forcar   = strtoupper($_GET['forcar']);


if (file_exists($imagem)) {
    list($width, $height, $type, $attr) = getimagesize($imagem);
    if ($type == 1) {
        $im = imagecreatefromgif($imagem);
        //criar uma amostra da imagem original GIF
    } elseif ($type == 2) {
        $im = imagecreatefromjpeg($imagem);
        //criar uma amostra da imagem original JPEG
    } elseif ($type == 3) {
        $im = imagecreatefrompng($imagem);
        //criar uma amostra da imagem original PNG
    }
    //VERIFICA SE FOI FORÇADO ALGUMA LARGURA/ALTURA FIXA
    if ($forcar == 'X') {
        $largurao = $width;
        $alturao  = $height;
        $largurad = $tamanhoW;
        $alturad  = ($alturao * $largurad) / $largurao;
    } elseif ($forcar == 'Y') {
        $largurao = $width;
        $alturao  = $height;
        $alturad  = $tamanhoH;
        $largurad = ($largurao * $alturad) / $alturao;
    } elseif ($forcar == 'XY' or $forcar == 'YX') {
        $largurao = $width;
        $alturao  = $height;
        $alturad  = $tamanhoH;
        $largurad = $tamanhoW;
    } else {
        $largurao = $width;
        // pegar a largura da amostra
        $alturao  = $height;
        // pegar a altura da amostra
        
        if ($largurao >= $alturao){
            $largurad = $tamanhoW;
            // definir a largura da miniatura em px
            $alturad  = (($alturao * $largurad)/ $largurao);
            // calcula a largura da imagem a partir da largura da miniatura
        } else {
            $alturad  = $tamanhoH;
            // definir a altura da miniatura em px
            $largurad = (($largurao * $alturad) / $alturao);
            // calcula a largura da imagem a partir da altura da miniatura
        }
    }
    
    if ($type == 1)    {
        $nova = imagecreate($largurad, $alturad);
        //criar uma imagem em branco
    } else {
        $nova = imagecreatetruecolor($largurad, $alturad);
        //criar uma imagem em branco
    }
    
    imagecopyresampled($nova,$im,0,0,0,0, $largurad, $alturad, $largurao, $alturao);
    //copiar sobre a imagem em branco a amostra diminuindo conforma as especificacoes da miniatura
    
    if ($type == 1) {
        imagegif($nova);
        //cria imagem gif
    } elseif ($type == 2) {
        imagejpeg($nova, '', 99);
        //cria imagem jpeg
    } elseif ($type == 3) {
        imagepng($nova);
        //cria imagem png
    }
    
    imagedestroy($nova);
    //libera a memoria usada na miniatura
    imagedestroy($im);
    //libera a memoria usada na amostra
    // Fim da geracao de miniaturas
} else {
    echo('Arquivo não encontrado.');
}

Second Step:

Take some images from your computer and put them in the same path as your test script.

Third Step:

Create an index script that will have the content to be shown to the users. Anything like this:

My photos:
    Photo1
        <img src="redim_img.php?imagem=photo1.jpg&largura=100&altura=100" border="0" alt="Photo1"   />
    Photo2
       <img src="redim_img.php?imagem=photo2.jpg&largura=100&altura=100" border="0" alt="Photo2"   />
    Photo3
       <img src="redim_img.php?imagem=photo3.jpg&largura=100&altura=100" border="0" alt="Photo3"   />

So the final structure of our sample will be like this:

    + htdocs
    |-- sample
    |-- index.php
    |-- redim_img.php
    |-- photo1.jpg
    |-- photo2.jpg
    |-- photo3.jpg

To understand it, we need look only to the source of the images, we are calling a php script "redim_img.php", passing 3 parameters:

> largura(width)
> altura(height)
> imagem(image path).

When the php script "redim_img.php" receives the parameters, it will verify if the image exists; after that it will verify the original width and height and will calculate a new proportional width/height and finally it will create a new image based in this new size and throw the content into the html image element.

This is only a basic mode, but you can do many more things, like put watermarks and more.