Over a million developers have joined DZone.

Creating Proportional Image Thumbnails in Real-time

DZone 's Guide to

Creating Proportional Image Thumbnails in Real-time

· Web Dev Zone ·
Free Resource
What a lot of people don’t know is that you can put a PHP script in the "source" of a html image element, like this:
<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
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) {
//cria imagem gif
} elseif ($type == 2) {
imagejpeg($nova, '', 99);
//cria imagem jpeg
} elseif ($type == 3) {
//cria imagem png

//libera a memoria usada na miniatura
//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:
<img src="redim_img.php?imagem=photo1.jpg&largura=100&altura=100" border="0" alt="Photo1" />
<img src="redim_img.php?imagem=photo2.jpg&largura=100&altura=100" border="0" alt="Photo2" />
<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.


Published at DZone with permission of

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}