Sección de Artículos

Cómo crear una galería de imágenes rápidamente con PHP


Cómo crear una galería de imágenes rápidamente con PHP


avatar
(Programación)
Escrito el 16-02-2017 a las 23:23

En algunas ocasiones necesitamos mostrar listas de imágenes en nuestra web en forma de rejilla para crear una galería de imágenes donde exponer fotos de productos, casas, lugares, etc..., con textos y enlaces que permitan leer de forma más amplia la información o realizar la compra del artículo.

Si no estamos utilizando CMS del tipo WordPress, Joomla o PrestaShop donde este proceso se realiza de forma automática a partir de sus galerías de medios, la tarea de crear nuestras galerías de imágenes puede resultar una tarea pesada que implique muchas líneas de código.

Vamos a ver como con la ayuda de la clase class.html.php que os mostré en el módulo ‘Crear contenidos HTML’  del apartado microfunciones para PHP, la creación de estas galerías de imágenes se reduce a la mínima expresión utilizando una sola línea de código.

La clase class.html.php incluye un método llamado rejilla_imagenes() al que le enviamos un array asociativo con la información de las imágenes y el número de columnas de nuestra galería y automáticamente nos crea una rejilla adaptativa con las imágenes y su información.

Método rejilla_imagenes(Array Registros=[], int columnas=4)

Este método define dos parámetros:

  • El primero es un array asociativo donde cada registro contiene la información de la imagen que se tiene que mostrar en la galería.
ArgumentoValorValor por omisión
img (obligatorio)Dirección de la imagen. 
hrefDirección del enlace de la imagen.no se crea el enlace
cabeceraTítulo de nivel 3 que se muestra debajo de la imagen.no se muestra
targetPropiedad target del enlace._self
textoTexto a modo de comentarios que se muestra debajo del título de la imagen.no se muestra
tipPropiedades alt y title de la imagen.'Imagen'
  • El segundo parámetro nos indica la cantidad de columnas que tienen que componer la rejilla. Si se omite se creará una rejilla de 4 columnas.

Para ilustrar un ejemplo de su funcionamiento, utilizaremos una tabla donde tenemos almacenada toda la información que necesitamos para crear la galería, leeremos los registros de la tabla guardándolos en un array asociativo que luego se lo pasaremos al método rejilla_imagenes() de la clase class.html.php.

En el servidor MySQL tenemos una tabla de nombre tb_peces que contiene la información de una serie de peces: imagen, enlace, titulo, texto, etc…

Tabla tb_peces

Diseño tabla tb_peces

Los nombres de los campos se corresponden con los nombres de los argumentos que necesita el método rejilla_imagenes().

NOTA:
href y target: no son necesarios si no queremos añadir enlaces a las imágenes.
tip: no es necesario si no queremos establecer la propiedad title de la imágen, en su lugar se utilizará el nombre de la imagen.
cabecera y texto: no son necesarios si no queremos mostrar la cabecera y texto de la imagen.

Contenido de la tabla tb_peces

Contenido tabla tb_peces

Carpeta de imágenes

Las imágenes las tenemos en una subcarpeta llamada peces situada en la misma carpeta donde se encuentra la página php donde se creará la rejilla de imágenes.

Referencias necesarias

Para el correcto funcionamiento de la clase y sus métodos, tenemos que incluir en la sección <HEAD> referencias a BootStrap y a JQuery.

<link href=" https://maxcdn.bootstrapcdn.com/bootswatch/3.3.4/cerulean/bootstrap.min.css"  rel="stylesheet" integrity="sha256-Ucf/ylcKTNevYP6l7VNUhGLDRZPQs1+LsbbxuzMxUJM=  sha512-FW2XqnqMwERwg0LplG7D64h8zA1BsxvxrDseWpHLq8Dg8kOBmLs19XNa9oAajN/ToJRRklfDJ398sOU+7LcjZA=="  crossorigin="anonymous">
<script  src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js" type="text/javascript"></script>

Manos a la obra

<?php
$Servidor="Host";
$Usuario="Usuario";
$Clave="Contraseña";
$BaseDatos="BD";
// Creamos objeto mysqli para conectarnos a la BD
$Conector= new mysqli($Servidor, $Usuario, $Clave, $BaseDatos);
// Cadena con la consulta
$SrtSQL="Select * FROM tb_peces;";
// Ejecutamos la consulta sobre la BD
$ResultSet=$Conector->query($StrSQL);
// Recuperamos todos los registros en un array asociativo
$Registros=$ResulSet->fetch_all(MYSQLI_ASSOC);
// Liberamos el recurso
$ResulSet->free();
// Cerramos la conexión con la BD
$Conector->close();
// Llegado a este punto, tenemos en $Registros todos los registros de la tabla tb_peces con la información para crear la galería.
?>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Ejemplo Rejilla Imágenes</title>
<!-- ******* REFERENCIAS A BOOTSTRAP Y A JQUERY ********* -->
<link href="https://maxcdn.bootstrapcdn.com/bootswatch/3.3.4/cerulean/bootstrap.min.css" rel="stylesheet" integrity="sha256-Ucf/ylcKTNevYP6l7VNUhGLDRZPQs1+LsbbxuzMxUJM= sha512-FW2XqnqMwERwg0LplG7D64h8zA1BsxvxrDseWpHLq8Dg8kOBmLs19XNa9oAajN/ToJRRklfDJ398sOU+7LcjZA==" crossorigin="anonymous">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js" type="text/javascript"></script>
</head>
<body>
<div class="container">
<p>&nbsp;</p>
<?php
include("class.html.php");  // Incluimos la referencia a la clase
html::panel_open('GALERÍA A 3 COLUMNAS CON ENLACES, CABECERAS Y DESCRIPCIONES',3);  // Insertamos un panel BootStrap 
html::rejilla_imagenes($Registros,3);      // Creamos la rejilla de imágenes utilizando el método rejilla_imagenes
html::panel_close();   // Cerramos el panel BootStrap
?>
</div>
<p>&nbsp;</p>
</body>
</html>

Ver demostración Clase class.html.php y ejemploDescargar clase class.html.php y script de ejemplo