Cómo Crear una Galería Dinámica con PHP y CSS Grid Paso a Paso
Introducción
¿Te gustaría crear una galería de imágenes en PHP que se adapte automáticamente al tamaño de pantalla y se alimente directamente desde una carpeta? En este tutorial aprenderás a hacerlo paso a paso. Esta es la continuación de una serie de vídeos del módulo de aplicaciones web, así que si es tu primera vez aquí, te recomendamos revisar la lista de reproducción completa.
Vamos a ver cómo listar imágenes desde una carpeta del servidor, filtrarlas para mostrar solo miniaturas y darle estilo con CSS para lograr una galería responsive y visualmente atractiva.
Preparación del entorno: organiza tu carpeta de imágenes
Antes de comenzar con el código, asegúrate de tener una carpeta en tu proyecto PHP llamada uploads. Dentro de esta carpeta, guarda las imágenes que usarás en la galería. Es importante que cada imagen tenga una versión reducida (thumbnail) cuyo nombre contenga la palabra “zamp” (por ejemplo, foto1.zamp.jpg).
Además, crea un archivo llamado galeria.php, que será donde escribiremos el código PHP necesario.
Lectura de ficheros desde el servidor con PHP
El primer paso en el archivo galeria.php es leer el contenido de la carpeta uploads. Para ello, definimos una variable que guarda la ruta del directorio y usamos la función scandir() para escanear todos los archivos:
$dir = __DIR__ . "/uploads";
$files = scandir($dir);
Aquí es importante entender que estas operaciones se realizan en el servidor, y luego se muestran al cliente mediante HTML.
Filtrado de archivos válidos: thumbnails y limpieza de puntos
Los directorios suelen contener las entradas . y .., que no son archivos válidos. Además, solo nos interesa mostrar imágenes que contengan la palabra “zamp”. Usamos un bucle foreach para recorrer los archivos y un if para filtrar:
foreach ($files as $file) {
if ($file == "." || $file == "..") continue;
$cadena = strpos($file, "zamp");
if ($cadena !== false) {
echo "<img src='uploads/$file' />";
}
}
De esta forma, solo se mostrarán las miniaturas que cumplen con el formato esperado.
Creando la estructura HTML: envolviendo las imágenes en un contenedor
Para tener un mejor control visual, encapsulamos toda la galería dentro de un div:
<div class="galeria">
<?php
// Código del foreach aquí
?>
</div>
Esto nos permitirá aplicar estilos más fácilmente desde CSS.
Diseñando la galería con CSS Grid: responsive y adaptable
En el archivo CSS, definimos estilos modernos para que la galería se adapte a distintos tamaños de pantalla:
.galeria {
display: grid;
gap: 1.6rem;
grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
padding: 2rem;
}
.galeria img {
width: 100%;
height: auto;
display: block;
border-radius: 6px;
aspect-ratio: 1 / 1;
object-fit: cover;
transition: all 0.2s ease-in-out;
}
.galeria img:hover {
transform: scale(1.05);
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}
Gracias al uso de auto-fill y minmax, la galería se ajusta automáticamente al tamaño de pantalla sin necesidad de media queries.
Cómo añadir nuevas imágenes a la galería
Si descargas nuevas imágenes, simplemente colócalas en la carpeta uploads siguiendo la convención de nombres con “zamp”. Por ejemplo: imagen3.zamp.jpg. El script las detectará automáticamente y las mostrará en la galería.
Más adelante se incluirá una función para subir imágenes desde el navegador y generar sus miniaturas automáticamente, así que permanece atento a los próximos vídeos.
Conclusión
Hemos creado una galería dinámica en PHP que carga imágenes directamente desde una carpeta del servidor y las muestra de forma responsiva usando CSS Grid. Esta galería es el punto de partida para funcionalidades más avanzadas como subir imágenes y aplicar efectos con JavaScript.
¿Te ha gustado este tutorial? ¡Dale «me gusta», suscríbete al canal y activa la campanita para no perderte los próximos vídeos! En el siguiente episodio aprenderemos a implementar un lightbox con JavaScript para visualizar las imágenes a pantalla completa.
¡Nos vemos en el siguiente vídeo!
