Hoy aprenderemos cómo crear una galería de fotos con un orden aleatorio para sorprender a tus visitantes cada vez que accedan a tu sitio web. Vamos a hacerlo de una manera sencilla y amigable, así que no te preocupes si no eres un experto en programación.
En esta era digital, es común querer mostrar nuestras fotos de manera atractiva y dinámica en nuestro sitio web. Las galerías de fotos son una excelente opción para presentar nuestras imágenes de forma ordenada y creativa. Pero, ¿qué tal si le añadimos un toque diferente y hacemos que la galería cambie de orden cada vez que alguien la visita? ¡Vamos a aprender cómo hacerlo!
Preparando el terreno
1. Organizando nuestras fotos
Primero, necesitamos tener nuestras fotos listas. Asegúrate de que todas las imágenes estén en el mismo formato (por ejemplo, .jpg o .png) y de un tamaño adecuado para que se vean bien en la web. También es importante que todas las imágenes tengan un nombre único.
Yo uso bulkresizephotos.com para tener todas las fotos con el mismo tamaño, rellenando de blanco lo que sea necesario para obtener mejores resultados.
2. Subiendo las fotos a tu sitio web
Para que nuestras fotos estén disponibles en línea, debemos subirlas a nuestro servidor. Puedes hacerlo a través de un cliente FTP o utilizando el administrador de archivos de tu panel de control de wordpress. Hay que obtener las urls de cada imagen para poder sustituirlo en el código inferior.
Creando la galería aleatoria
1. Añadiendo el HTML
Vamos a crear un contenedor donde se mostrarán nuestras fotos. Coloca el siguiente código HTML en el lugar donde deseas que aparezca la galería en tu página (en un bloque de texto dentro de DIVI, por ejemplo).
2. Preparando el JavaScript
Ahora, vamos a escribir un pequeño script en JavaScript para crear la galería aleatoria. Este script se encargará de seleccionar nuestras fotos en un orden aleatorio y mostrarlas en el contenedor que acabamos de crear. Añade el siguiente código en la página, en este caso en un bloque CODE de Divi, junto antes del texto anterior:
3. Ahora el CSS
Para el CSS basta con incluir estas líneas en el mismo bloque de código
En este caso he puesto 3 imágenes por columna, pero podéis alterar el porcentaje de 30% para adaptarlo a vuestro gusto.
El resultado es perfecto, cada vez que alguien haga F5 o entre de nuevo en la página, verá las fotos en un orden diferente.