galerias en wordpress

Galerias en wordpress con css grid

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 mas 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 que es css grid , es un modulo 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 dibujándolos 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.

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 es to no es buena practica ya que editar al los archivos del tema directamente nos arriesgamos a perder todos los cambiaos 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 o sistema que quieras y añade esta linea:


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 que dimensión tendrá cada “thumbnail” de la galería es mejor usar la mas 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 :

 

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:

Para cambiar el tamaño o la secuencia de la imagen que quieres cambiar el tamaño seria esta:

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().

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.

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.

 

Entradas Relacionadas

Deja un comentario

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

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.