Hace un tiempo atrás creé una Clase PHP para crear galerías dinámicas. En aquel momento lo que hice fue crear una clase que se encargaba de leer las imágenes de una carpeta, crear un thumbnail de las mismas mediante una clase y mostrar dichos thumbnails con un tamaño determinado y una separación determinada.
El principal problema que tenía esta clase era que mezclaba en un único lugar el diseño y la programación, además de que los estilos de los thumbnails los creaba en línea. Separar el diseño de la programación permite que el código sea más sencillo de leer, que un diseñador se pueda encargar de la parte de diseño y un programador a la funcionalidad, hace el código más fácil de escalar y mantener y permite cambiar el diseño de una manera más fácil.
Me dispuse entonces a variar la clase para que utilizara ficheros de template para el diseño y que los estilos fueran añadidos por CSS, he aquí el resultado.
Dependencias de la clase
- Esta clase requiere de esta otra clase para crear los thumbnails de las imágenes.
- Requiere de la librería GD instalada en el servidor. (incluida en PHP a partir de la versión 4.3)
- En este ejemplo se ha usado jQuery y Fancybox para ampliar las imágenes, pero no son necesarios y puede usarse el método que mejor se considere.
Clase PHP para crear galerías dinámicas (Gallery.php)
class Gallery { private $template; private $imgurl; private $files; private $titles = false; public $mainclass = 'gallery'; public $thumbclass = 'thumb'; public $linkclass = 'link'; //---Asignar un template y un fichero de visualización de imágenes a la galería public function setData($templateurl, $show_thumb_url){ //---Verificaciones if(file_exists($templateurl) && file_exists($show_thumb_url)){ $template = file_get_contents($templateurl); if($template){ $this->template = $template; $this->imgurl = $show_thumb_url; }else{ trigger_error('No se ha podido leer el fichero del template', E_USER_ERROR); } }else{ trigger_error('La ruta al template no es válida', E_USER_ERROR); } } //--Asignar los titles public function setTitles($titles){ //---Verificaciones if(is_array($titles)){ $this->titles = $titles; }else{ trigger_error('Los nombres deben estar conformados en un array', E_USER_ERROR); } } //---Método de leer las imágenes de la carpeta public function loadFolder($path, $ext = false){ //---Extensiones permitidas $extensions = array('jpg', 'png', 'gif'); if($ext && in_array($ext, $extensions) === FALSE){ trigger_error('La extensión eviada no es válida', E_USER_ERROR); exit; } //---Rectificar el path a la carpeta if(substr($path, -1) != '/') $path .= '/'; //---Acceder a todos los archivos de imagen del directorio $this->files = ($ext) ? glob($path . '*.' . $ext) : glob($path . '*.{jpg,png,gif}', GLOB_BRACE); if($this->files === FALSE) trigger_error('No se ha encontrado ningún fichero de imagen en la ruta especificada'); } //---Método de crear la galería public function create($width = 150, $height = 150){ //---Acceder al código donde se insertarán los thumbnails $thumbcode = preg_replace('/.*\{THUMBS\}(.*)\{\/THUMBS\}.*/s', '$1', $this->template); //---Asignar ancho y alto $thumbcode = preg_replace( array( '/\{WIDTH\}/', '/\{HEIGHT\}/' ), array( $width, $height ), $thumbcode ); //---Remplazo de los elementos generales $html = preg_replace( array( '/\{CLASSES\}/', '/\{THUMBS\}.*\{\/THUMBS\}/s' ), array( $this->mainclass, $this->getThumbCode($this->files, $thumbcode, $width, $height) ), $this->template ); echo $html; } //---Método privado para obtener el código html de un thumbnail private function getThumbCode($files, $thumbcode, $width, $height){ //---Expresión regular para extraer la imagen de los paths $namereg = '/^.*\/([^\/]+)$/'; $html = ''; foreach($files as $path){ //---Acceder a la imagen $title = preg_replace($namereg, '$1', $path); //---Remplazos de los elementos $html .= preg_replace( array( '/\{THUMBCLASS\}/', '/\{LINKCLASS\}/', '/\{IMAGE\}/', '/title=[\'"]\{TITLE\}[\'"]/', '/\{PATH\}/', '/\{WIDTH\}/', '/\{HEIGHT\}/' ), array( $this->thumbclass, $this->linkclass, $path, ($this->titles && array_key_exists($title, $this->titles)) ? 'title="' . $this->titles[$title] . '"' : '', $this->imgurl . '?src=' . $path . '&width=' . $width . '&height=' . $height, $width, $height ), $thumbcode ); } return $html; } }
Métodos públicos de la clase |
|
---|---|
//Asignar los datos a la clase setData(string $templateurl, string $show_thumb_url) |
|
$templateurl | Path al fichero template |
$show_thumb_url | Path al fichero que mostrará la imagen |
//Asignar el parámetro title de las imágenes setTitles(string $titles) |
|
$titles | Array conformado por índices con el nombre de cada imagen y el valor de título que se desea asignar |
//Leer las imágenes de una carpeta loadFolder(string $path [, boolean $ext = false]) |
|
$path | Path a la carpeta que contiene las imágenes |
$ext | Parámetro opcional para sólo seleccionar las imágenes que tengan una extensión específica |
//Crear y mostrar la galería create(int $width = 150, int $height = 150) |
|
$width | Ancho de los thumbnails de las imágenes |
$height | Alto de los thumbnails de las imágenes |
Propiedades públicas de la clase |
|
---|---|
string $mainclass |
|
$mainclass | Variable encargada de asignar la clase al elemento principal de la galería |
string $thumbclass |
|
$thumbclass | Variable encargada de asignar la clase a los contenedores de los thumnails |
string $linkclass |
|
$linkclass | Variable encargada de asignar la clase a los enlaces de los thumnails |
Ejemplo de fichero template (Gallery.tpl)
Nombre | Descripción |
---|---|
{CLASSES} | Clases que se asignarán al div contenedor de los thumbnails (obtendrá el valor de la variable pública $mainclass) |
{THUMBS} {/THUMBS} | El código contenido entre estos dos tags será el que se repetirá por cada thumbnail de imagen |
{THUMBCLASS} | Clases que se asignarán a cada contenedor de thumbnail (obtendrá el valor de la variable pública $thumbclass) |
{LINKCLASS} | Clase que se le asignará al enlace del thumbnail (obtendrá el valor de la variable pública $linkclass) |
{IMAGE} | Enlace a la imagen original |
{TITLE} | Título que se le dará a cada imagen (si no se asignan nombres este parámetro desaparecerá de la imagen) |
{PATH} | Path al thumbnail de cada imagen (estará formado por el fichero php encargado de formar los thumbnails más tres variables enviadas por GET name, width y height) |
{WIDTH} | Ancho de los thumbnails (enviado en el método create) |
{HEIGHT} | Alto de los thumbnails (enviado en el método create) |
Fichero para crear el thumbnail de las imágenes (show_thumb.php)
include_once('classes/Thumb.php'); $src = $_GET['src']; $width = $_GET['width']; $height = $_GET['height']; $image = new Thumb(); $image->loadImage($src); $image->crop($width, $height); $image->show();
Parámetros | |
---|---|
src | Path de la imagen a leer |
width | Ancho de la imagen |
height | Alto de la imagen |
Demo en funcionamiento
Descarga de ficheros
Descarga los ficheros de ejemplo para ver la utilización de la clase PHP para crear galerías dinámicas
Puedes situar fragmentos de código dentro de etiquetas <pre></pre> y código HTML o XML entre etiquetas <xmp></xmp>.