Galerias en wordpress con css grid

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.

 

Editar el titulo y alt atributos de forma automática en wordpress

Editar el titulo y alt atributos de forma automática en wordpress

Por defecto wordpress añade el nombre de la imagen que subimos a el atributo «title» , esto esta bien pero a nivel de SEO es muy recomendable dar información sobre el atributo «alt» también  , de echo esto lo podemos hacer sin problemas desde el panel de medios.

Seguramente te preguntaras… ¿como se puede hacer esto de forma  sin tener que editar todas las imágenes que subamos para nuestro blog? .

wordpress nos ofrece un filtro que podemos utilizar para esto y así hacerlo de forma automática  ,  ‘wp_get_attachment_image_attributes’ es el encargado de este trabajo asi que podemos utilizarlo en nuestro archivo functions.php de la siguiente forma.

con esto conseguimos que le de al atributo attr también el titulo de la imagen .

También podemos hacer que todos los campos como «description» o «caption» sean editados conectandonos al hook add_attachment.

y ello de la siguiente forma

 

Top 5 librerías para animaciones en la web por desplazamiento.

Top 5 librerías para animaciones en la web por desplazamiento.

Aos.js es una de mis preferidas , consigue animaciones estupendas por desplazamiento , como principales características puedes configurar los parámetros de animación de forma global  desde su constructor o por medio de data atributos en el elemento html.

En su configuración nos da la opción de escoger animaciones  ,ubicaciones de anclaje y funciones de temporizador.

Como desventaja se le podría atribuir el que no da opción de usar animaciones propias ni css externo estando todas las animaciones establecidas en la librería, aunque son bastantes y cubren bien las necesidades de muchos proyectos.

 

 

 

Srollreveal.js   es una propuesta mas sencilla donde conseguir una muestra de nuestros elementos conforme vayan apareciendo con una animación suave de tipo fade-up.

Aunque nos da mas opciones como origen de la animacion , distancia , opacidad , etc … para mi parecer su mayor ventaja es la animacion de todos los elementos dentro de un elemento progresivamente.

Esto es muy útil para listas o galerias en grid ,incluso da soporte para peticiones ayax y mostrar animaciones conforme pintamos los items.

Una buena opción sin duda .

 

 

ScrollMagic v2.0.5 

 

Para profesionales que quieran que su web sea una secuencia de animaciones entrelazadas que nos dejen boquiabiertos ,solo hay que ver ejemplos de webs que usan esta librería para saber a lo que me refiero.

Scroll magic es una opción muy completa y sofisticada con la que se pueden conseguir unos resultados de igual manera.

su curva de aprendizaje es un poco mas complicada ,su impelmentacion puede ser en diferentes marcos aunque los autores recominedan la plataforma GreenSook(GSA) y tambien Velocity.js , aunque tambien admite otras.

En su github nos da mas documentación y su en su web podemos ver su potencial en funcionamiento.

 

Waypoints.js

Waypoinsts es una librería que nos da opción de lanzar funciones en puntos determinados del desplazamiento , aunque no esta orientada solo a animaciones esto nos da muchas mas posibilidades de desarrollo , podemos  jugar a mostrar modales o «popups» según el punto de la pagina que estemos ,animaciones y  mil cosas mas .

De manera predeterminada y con módulos aparte no permite hacer anclaje de elementos de forma muy sencilla , como la típica barra de navegación que se pega a la parte superior cuando desplazamos hacia abajo y también con otro modulo podemos implementar «infinite scroll» para peticiones ajax o listas muy largas de forma sencilla.

Una opción con muchas posibilidades y no solo en el ámbito de animaciones si no que da de si mucho mas.

 

 

Esta  es mas de lo mismo pero con la peculiaridad que funciona con la famosa libreria  css animate.css  muy apreciada por muchos a la hora de implementar animaciones en nuestros proyectos.

wow.js esta creada por la gente de uplabs  y a diferencia de las otras propuestas gratuitas esta tiene una licencia comercial a precio asequible , puedes consultar precios en su sitio web.

Otra gran opción para tu web , todas son buenas pero tu decides cual se adapta mas a tus necesidades.

 

WhatsApp chat