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)
<div class="{CLASSES}">; {THUMBS} <div class="{THUMBCLASS}"> <a class="{LINKCLASS}" href="{IMAGE}" title="{TITLE}" rel="gallery"> <img decoding="async" src="{PATH}" width="{WIDTH}" height="{HEIGHT}" /> </a> </div> {/THUMBS} </div>
| 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
(1 votos, promedio: 5,00 de 5)
Puedes situar fragmentos de código dentro de etiquetas <pre></pre> y código HTML o XML entre etiquetas <xmp></xmp>.