Galerias en wordpress con css grid

por | css, wordpress | 0 Comentarios

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.

J.Rafael Simarro

J.Rafael Simarro

Desarrollador WordPress , entusiasta de la tecnolog√≠a y todo lo relacionado con el dise√Īo web. √öltimamente muy enfocado en el tema Divi como primera herramienta de dise√Īo , he probado muchas y Divi se lleva la palma.

0 comentarios

Enviar un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Share This