Desde hace tiempo he estado trabajando con galerías en wordpress , aunque hay muchos plugins y complementos para mejorarlas y conseguir diseños atractivos, yo personalmente soy partidario de evitar lo más posible el uso de plugins , así que me puse manos a la obra para cambiar el diseño que venia por defecto.
Después de indagar posibilidades decidí usar css grid , por si no sabes qué es css grid , es un módulo de posicionamiento css , así como flex-box que es otro, css grid básicamente monta una rejilla en el contenedor donde tu posicionas los elemento adaptando el tamaño que quieras y dibujandolos en cualquier posición posible de vista ,esto es algo fantástico, posición donde quieras si importar el orden en el que se encuentran en el doom.
La compatibilidad de css grid con navegadores a dia de hoy es muy completa así como flexbox podemos usarlo en nuestros proyectos sin problemas hay muy pocos navegadores que no hayan implementado ya esta tecnología y en versiones muy obsoletas.
Pues bien vamos por materia…
En wordpress las galerías traen css por defecto que aplica en las publicaciones, esto nos dificulta empezar a trabajar en ellas porque nos puede estorbar en nuestro diseño.
Para remediarlo solo debemos usar un filtro el cual aplicaremos en el functions.php de nuestro tema , aunque esto no es buena práctica ya que editar al los archivos del tema directamente nos arriesgamos a perder todos los cambios si se actualiza dicho tema , para evitar esto hay otras formas de hacerlo como crear un tema hijo o plugins para añadir código , investiga sobre esto.
Localiza tu archivo functions.php y añade esta línea:
add_filter('use_default_gallery_style', '__return_false' );
Vamos por la galeria.
Cosas a tener en cuenta:
1. Cuando creemos nuestra galería en el editor de wordpress debemos escoger como tamaño de imágenes el tamaño original por razones obvias, si no sabemos qué dimensión tendrá cada “thumbnail” de la galería es mejor usar la más grande para no perder calidad.
2.Para editar el css usaremos (como mejor practica) la herramienta de css adicional que encontramos en el menú de apariencia de nuestro tema.
3.También debemos tener en cuenta que según el tema que usemos algunos traen clases definidas para la galería y esto lo tendríamos que modificar para que no afecte.
Un estilo muy atractivo a mi gusto es en el que la galería no todas las miniaturas son iguales y jugamos con los tamaños , la verdad me parece buen diseño y fue por el que me decante para mi proyecto , como una imagen vale mas que mil palabras:
El codigo para esto :
.gallery {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-auto-flow: dense;
}
.gallery figure {
margin: 0;
}
.gallery .gallery-icon {
width: 100%;
height: 100%;
}
.gallery .gallery-icon a {
width: 100%;
height: 100%;
display: block;
}
.gallery img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.gallery .gallery-item:nth-child(2n+0) {
grid-column: span 2;
grid-row: span 2;
}
Bien no voy a explicar css grid en detalle porque esto seria todo un curso muy largo y si quieres saber mas sobre ello puedes consultar la documentación oficial o consumir algún curso de los muchos que hay.
Solo me parare en comentar que para conseguir mas columnas en la galería puedes modificar esta linea y cambiar el numero 4 de columnas por el que se ajuste a tus necesidades:
grid-template-columns: repeat(4, 1fr);
Para cambiar el tamaño o la secuencia de la imagen que quieres cambiar el tamaño seria esta:
.gallery .gallery-item:nth-child(2n) {
grid-column: span 2;
grid-row: span 2;
}
Aquí le estamos diciendo que cada 2 items (imágenes), esta se expanda dos a lo ancho (column) y dos a lo alto (row). Puedes definir el numero de celdas que quieres que ocupe la imagen discordante , cambia el 2 por otro.
Lo podemos hacer mas variado en tamaños de imagen y que quedara así:
Para esto modificaremos el css y dejaremos que el numero de columnas lo decida ccs grig con auto-fit estableciendo un tamaño mínimo y un máximo con minmax().
.gallery {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
grid-template-rows: repeat(auto-fit, minmax(120px, 1fr));
grid-auto-flow: dense;
}
Después daremos dos secuencias mas de tamaños de imagen , una donde se espanda a 2 por alto y ancho y otra solo ancho.
.gallery .gallery-item:nth-child(2n) {
grid-row-end: span 2;
grid-column-end: span 2;
}
.gallery .gallery-item:nth-child(6n) {
grid-column-end: span 2;
}
.gallery .gallery-item:nth-child(12n) {
grid-column-end: span 3;
grid-row-end: span 3;
}
Bien, las posibilidades son muchas con css grid ,espero seguir aprendiendo mas y hacer mas ejemplos de galerías atractivas en próximos días.
Si te ha gustado o tienes alguna duda, comenta.