En este tutorial vamos a ver cómo mejorar las galerías de imágenes de WordPress con plugins muy ligeros que las harán mucho más atractivas y funcionales.
Este tutorial es la segunda parte del tutorial Insertar una galería de imágenes en WordPress, en el que cuento paso a paso los básicos de la creación de galerías en WordPress. Pero tal como comenté en ese tutorial, hay varias cosas que se puede mejorar bastante.
Una de las más importantes es el comportamiento que esas galerías tienen al hacer clic en una de las imágenes. Recordemos que teníamos la opción de página de adjuntos, archivo multimedia o nada. Yo os propongo una alternativa aún mejor. Hacer el uso de un lightbox. Y para eso necesitamos un plugin
Activar un lightbox para nuestra galería en WordPress
El plugin que os recomiendo en este caso es WP Featherlight, un plugin súper ligero, que ocupa poquísimo y que no necesita ninguna configuración. Simplemente instalar y funciona.
Por cierto, este es uno de los plugins de mi directorio de plugins recomendados, que podéis encontrar en la Intranet de suscriptores.
¿Y qué hace este plugin? Bien, pues básicamente, si seleccionamos "Archivo Multimedia" en los ajustes de la galería, en lugar de enviar al usuario a una nueva pestaña en la que sólo aparece una imagen, lo que hace es crear un efecto de lightbox en el que se oscurece toda la pantalla del navegador y se muestra la imagen ampliada y centrada:
El lightbox oscurece toda la pantalla y muestra la imagen seleccionada
Además podemos ver un par de flechas de navegación a ambos lados (también podemos usar las flechas del teclado) y la "x" de cierre arriba a la derecha (también podemos pulsar la tecla de escape). No hace ni falta decir que es 100% responsive y que la imagen se adapta perfectamente a cualquier tamaño de pantalla.
Con esto hemos mejorado muchísimo la usabilidad de la galería, ya que el usuario no tiene que entrar y salir en cada foto, ni cerrar pestañas, ni cambiar de página, ni tener que volver atrás en el navegador. Pero en ocasiones no queremos ese comportamiento, ni que el usuario vea la imagen más grande, sino que simplemente queremos enviarlo a otra página. Bien, pues vamos a ver cómo hacerlo.
Enlaces a otras páginas desde una galería de imágenes
Por defecto, al hacer clic en una imagen de la galería, se dirige al usuario a una versión ampliada de la misma. ¿Pero qué pasaría si quisiéramos mandar al usuario a una página?
Por ejemplo, imaginemos que tenemos una galería de fotos de productos, y queremos que al hacer clic en una de ellas, el usuario vaya a la página del producto en lugar de ver una foto ampliada. Eso sería mucho mejor, pues ayudaría al flujo de compra. Bien, pues por defecto no podemos hacerlo, pero como siempre, hay un plugin que lo soluciona.
Se llama WP Gallery Custom Links y es una gozada. También es uno de mis plugins recomendados en el directorio, y no en vano, pues es muy ligero, y súper fácil de usar. Sólo instalamos, activamos, y ahí está. Cuando creamos una galería, o editamos una ya existente, veremos las siguientes nuevas opciones de configuración:
Las nuevas opciones nos permiten colocar un enlace
Como podéis ver, no sólo podemos colocar un enlace personalizado en cada imagen, sino que además podemos elegir si abrirlo en la misma ventana o una de nueva, si anular los posibles efectos que ya existían (como el lightbox que acabamos de contar en el apartado anterior), o incluso colocar una clase CSS adicional, para luego definirla con CSS (más información sobre esto en el curso de CSS).
Y con esto hemos conseguido una galería de imágenes que al hacer clic se dirige a la URL que queramos. Ya sea de la propia web o externa. Los usos son infinitos, imaginación al poder. Desde una galería de productos afiliados, en la que dirigimos cada imagen a su tienda respectiva, hasta una galería de nuestro eCommerce que incluimos en un post... lo que queráis. Incluso enlaces a otras galerías.
Hasta aquí hemos visto un par de plugins que le añade cierta funcionalidad a la galería. ¿Pero qué pasa si la queremos hacer un poco más atractiva? ¡Vamos allá!
Modificar el estilo de las galerías de imágenes de WordPress
Los más avispados habréis notado que la primera imagen de este tutorial es una galería con las imágenes "desiguales". En lugar de ser todo cuadrado del mismo tamaño, podemos jugar con varias dimensiones, para hacerlo más atractivo. Por ejemplo así:
Galería estilo "Tiled mosaic"
Eso lo conseguimos con el plugin Tiled Galleries Carousel Without Jetpack (también en mi directorio), que consiste en una versión independiente del módulo Tiled Galleries de Jetpack (más información en la clase Curso de Jetpack #2: Imágenes).
Como ya sabemos, Jetpack es un "plugin de plugins" con un montón de funcionalidades. En ocasiones está justificado su uso, pero on otros casos, como por ejemplo si sólo vamos a instalarlo para esto, no vale la pena. Así pues, es mejor usar este plugin (muchísimo más ligero y rápido) que nos va a permitir mostrar más tipos de galerías de forma fácil y simple.
Sólo instalando y activando el plugin, veremos que al crear o editar una galería, tendremos nuevos ajustes:
Nuevos tipos de galería de imagen
De este modo, tenemos tres opciones más de galería. La primera, es la de "Tiled Mosaic", que genera una galería con rectángulos desiguales, como la que os muestro más arriba con las imágenes de paisajes. Pero también podemos optar por un mosaico de cuadrados:
Mosaico de cuadrados de distintas dimensiones con "Square Tiles"
Como podéis apreciar, a diferencia de la anterior, en este caso todas las imágenes tienen una relación de aspecto cuadrado, aunque de distintas dimensiones.
Y también podemos optar por una versión de galería de círculos:
La opción "Circles" confecciona un mosaico de imágenes circulares
Personalmente eta última opción no me atrae tanto, pero para gustos, los colores. El caso es que podemos darle un punto de originalidad a nuestras galerías con un plugin que apenas afecta el rendimiento de la web.
Resumen y conclusión
Hemos visto tres plugins ligeros y útiles que nos permiten cambiar el comportamiento y aspecto de las galerías de imágenes de WordPress. Todos gratuitos, responsive y recomendados en mi directorio. No dudéis en usarlos si creéis que en vuestro caso os pueden ayudar.
Y ya lo sabéis. Si tenéis cualquier duda sobre las galerías de imágenes de WordPress, o necesitáis modificarlas para que se adapten a vuestras necesidades, podéis mandarme un mensaje a través de la pestaña "Soporte" de Intranet de suscriptor, y estaré encantado de recomendaros el plugin perfecto para ello. ¡Nos vemos en el siguiente tutorial! :)