• Directorio de imágenes - miniaturas

Directorio de imágenes - miniaturas

En las páginas web, a menudo se encuentran miniaturas de imágenes, por lo general representan enlaces a la imagen análoga en alta resolución. La aplicación de las miniaturas como imágenes que dan una vista preliminar tiene muchas ventajas. Es un elemento indispensable en el caso de un directorio de imagenes o galerías de fotografías. Buscar una imagen específica es más sencillo que revisar consecutivamente todas las fotografías en su resolución máxima, especialmente para los usuarios de Internet que utilizan conexión de bajo ancho de banda. En caso de páginas que presentan información, este método permite introducir miniaturas estéticamente en el contenido del servicio, porque tal vez los lectores no esten interesados en las fotografías.

La preparación de gráficos en tamaños alternativos, con ayuda de programas gráficos puede ser muy laborioso, con el uso de la librería GD podemos hacerlo automáticamente. Desde luego, las fotografías pueden tener diferentes proporciones y tamaños.

Nuestro ejemplo esta compuesto de miniaturas de imagenes de tamaños definidos, manteniendo la proporción de las imagenes originales. Tomando los siguientes principios:

• la escala de la imagen está definida de tal forma que sea toda visible (no puede ser recortada),
• si la imagen original es menor que el tamaño seleccionado que las miniaturas, en tal caso la imagen no se somete a la conversión de escala (aumentada).

<?php
if($_GET['width'] > 0) {
    $width = $_GET['width'];
} else
{
    $width = 200;
}
if($_GET['height'] > 0) {
    $height = $_GET['height'];
} else
{
    $height = 200;
}
if($_GET['filename']) {
    $filename = $_GET['filename'];
} else
{
    $filename = 'civic.jpg';
}

//imagen desde el archivo jpg
$src_image = imagecreatefromjpeg($filename);

$image = imagecreate($width, $height);

//asignamos los colores que ocuparemos más adelante
$bg = imagecolorallocate($image, 200, 200, 200);
$white = imagecolorallocate($image, 255, 255, 255);
$black = imagecolorallocate($image, 0, 0, 0);

$margin_x = 10;
$margin_y = 10;

$w = $width-2*$margin_x;
$h = $height-2*$margin_y;

$src_w = imagesx($src_image);
$src_h = imagesy($src_image);

//¿desplegamos la imagen en la dimensión original?
if(($w > $src_w) && ($h > $src_h)) {
    $dst_w = $src_w;
    $dst_h = $src_h;
} else
//¿o escalamos la imagen de acuerdo a la dimensión horizontal?
if(($w/$h) < ($src_w/$src_h)) {
    $dst_w = $w;
    $dst_h = $w*$src_h/$src_w;
} else
//¿o la escalamos de acuerdo a la dimensión vertical?
{
    $dst_w = $h*$src_w/$src_h;
    $dst_h = $h;
}

imagecopyresized($image, $src_image, ($width-$dst_w)/2, ($height-$dst_h)/2,
  0, 0, $dst_w, $dst_h, $src_w, $src_h);

//colocamos el texto sobre la imagen
imagestring($image, 0, $margin_x, ($height-$margin_y), $filename, $white);

//encabezado correspondiente para los datos de salida
header("Content-type: image/jpeg");

//generamos la imagen
imagejpeg($image);

//liberamos la memoria
imagedestroy($image);
?>

Las funciones imagesx(), imagesy() permiten reconocer la dimensión de la imagen. Luego creamos una imagen nueva cuyas dimensiones corresponderán al gráfico resultante. De acuerdo con la dimensión de la imagen original decidimos si se le aplicará una escala a la imagen, en este caso, se decide de acuerdo con tal dimensión. En el caso de que su ancho y su altura sean menores que el tamaño del campo en el que la imagen será colocada, no escalamos la imagen. En caso contrario, realizando el aumento se crearía un efecto desagradable de pixels enormes. Si estamos hablando de nuestra galería de fotografías, podemos utilizar nuestros conocimientos no sólo para crear las vistas preliminares sino también para simples modificaciones de las imágenes. Podemos crear un patrón según el cual todas las imágenes en nuestro servicio tendrán un marco característico o las marcaremos con nuestro logo. Eso ya puede hacerlo el lector como experimento.

El efecto que podemos apreciar en la Figura 2 es el resultado del funcionamiento de los scripts thumb.php y catalog.php. El script catalog.php. (véase el Listado 5) genera código HTML con una forma para seleccionar el tamaño de las miniaturas además de las vistas preliminares.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML><HEAD><TITLE> Images </TITLE></HEAD>
<BODY>
<?php
    //definimos el nombre del script que genera las imagenes
    $image = 'thumb.php';

    //definimos el ancho de las imagenes con base en el parámetro width
    if($_GET['width'] > 0) {
        $width = $_GET['width'];
    } else
    {
        $width = 200;
    }
    //definimos la altura de las imagenes con base en el parámetro height
    if($_GET['height'] > 0) {
        $height = $_GET['height'];
    } else
    {
        $height = 200;
    }

    //generamos el formulario para la selección del tamaño de las vistas preliminares
    echo '<FORM ACTION="'.$_SERVER['SCRIPT_NAME'].'" METHOD="GET">';
    echo '<SELECT NAME="width">';
    echo '<OPTION VALUE="">-- width --</OPTION>';
    for($i=100; $i<700; $i+=100) {
        echo '<OPTION VALUE="'.$i.'"';
        if($i == $width) {
            echo ' SELECTED';
        }
        echo '>'.$i.'</OPTION>';
    }
    echo '</SELECT>';
    echo '<SELECT NAME="height">';
    echo '<OPTION VALUE="">-- height --</OPTION>';
    for($i=100; $i<700; $i+=100) {
        echo '<OPTION VALUE="'.$i.'"';
        if($i == $height) {
            echo ' SELECTED';
        }
        echo '>'.$i.'</OPTION>';
    }
    echo '</SELECT>';
    echo '<INPUT TYPE="SUBMIT" VALUE=" SHOW ">';
    echo '</FORM>';

    //definimos el nombre del directorio en el que se encuentran las imágenes
    $path = 'images/';
    $dir = opendir('images');
    //leeemos el contenido del directorio
    while ($file = readdir($dir)) {
        //seleccionamos sólo los archivos con extensión .jpg
        if(is_file($path.$file) && preg_match("/\.jpg$/i", $file)) {
            //generamos el enlace a la imagen original
            echo '<A HREF="'.$path.$file.'" TARGET="_blank">';
            //colocamos la imagen con ruta al script que genera los gráficos preliminares
            echo '<IMG SRC="'.$image.'?filename='.$path.$file.'&width='.$width.
              '&height='.$height.'" WIDTH="'.$width.'" HEIGHT="'.$height.
              '" BORDER="1" HSPACE="8" VSPACE="8">';
            echo '</A>';
        }
    }
    //cerramos el descriptor
    closedir($dir);
?>
</BODY></HTML>