Hay múltiples motivos por los que necesites crear una galería de imágenes en WordPress, como por ejemplo, querer mostrar un portfolio de tus trabajos, mostrar un álbum de fotos de tus vacaciones o incluso crear un menú a base de imágenes en la página principal de tu web.
La primera opción que puedes pensar para ello es instalar un plugin para crear galerías de fotos, y no voy a ser yo quien te lo impida.
De hecho, luego te enseñaré los mejores que hay.
Pero debes saber que con WordPress “de fabrica” se pueden crear galerias para tu web sin necesidad de instalar ningún plugin.
Aunque a decir verdad, las galerías de WordPress tienen bastantes limitaciones que hacen que la gente prefiera instalar un plugin que utilizar la funcionalidad nativa.
Así que en este artículo te quiero enseñar algunas de las mejores opciones para crear galerías de fotos en tu web, empezando por la funcionalidad de WordPress y acabando por los mejores plugins de galerías.
Galerías de imágenes de WordPress
Crear una galería de fotos desde el propio WordPress es una tarea muy fácil, como nos tiene acostumbrados este CMS.
Dentro de la página o entrada en las que quieras incluirla, solo tienes que hacer clic en el botón “Añadir objeto” como si fueras a añadir una imagen normalmente.
En la menú de la izquierda, selecciona “Crear galería”.
Ahora podrás seleccionar todas las fotos que quieras incluir. Cuando las hayas escogido todas, haz clic en el botón “Crear una nueva galería”.
En la siguiente ventana podrás editar algunas cosas, como el orden de las imágenes, las leyendas (que se mostrará como si fuera el título de la imagen), el número de columnas a mostrar, el tamaño de las miniaturas y hacia dónde enlazan, aunque esta última opción está muy limitada y ahora veremos cómo mejorarla.
Este sería el resultado de la galería ya mostrada en la página:
Pero, ¿qué pasa si quieres que cada utu wena de las imágenes enlace a una URL de tu web o externa?
Se puede hacer fácilmente con el siguiente plugin:
Enlaces personalizados a Galerías WP
Solo tienes que Instalar este plugin llamado Gallery Custom Links. Una vez esté activo, cada vez que hagas clic encima de una foto en la edición de la galería, en la barra de la derecha aparecerá un nuevo campo de texto en el que podrás incluir la URL a la que quieras que enlace.
¡Ojalá todo fuera tan fácil!
Crear un efecto lightbox en la galería
Si no te interesa añadir un enlace en cada una de las imágenes y prefieres crear un efecto lightbox, también hay una fácil solución para ello.
Pero, ¿qué es un efecto lightbox?
Cada vez que haces clic en una imagen de la galería, se amplía mostrándose en el centro de la pantalla con todo alrededor oscurecido, añadiendo además unas flechas de navegación para que puedas pasar a la siguiente o a la anterior foto.
Para activar este efecto, solo tienes que instalar este plugin llamado WP Featherlight, y en la edición de la galería seleccionar la opción “Enlazado a: Archivo multimedia”.
Cada vez que se haga clic en una imagen de la galería, se verá de la siguiente manera:
Hacer la galería de WordPress responsive
Una de las mayores limitaciones de la galería de WordPress es que no es responsive. La verdad es que no entiendo cómo a estas alturas una empresa como la de WordPress no ha corregido este problema, pero esperemos que en próximas actualizaciones se solucione.
Para solucionar esta limitación no existe ningún plugin, que yo sepa, pero se puede apañar algo mediante código CSS.
Por ejemplo, si introduces este código en tu child theme o en CSS personalizado, se verá una sola columna de imágenes en la versión móvil de tu web:
@media (max-width: 688px) {
.gallery-item {
text-align: center;
width:100% !important;
}
}
Plugins de galería para WordPress
Una vez vistas algunas de las posibilidades de la galería de WordPress, vamos a ver algunos de los mejores plugins para crear galerías.
NextGEN Gallery – Plugin WordPress para galerías
Se podría decir que NextGEN Gallery es el TOP 1 en cuanto a plugins para crear galerías en WordPress, ya que cuenta con más de un millón de instalaciones activas y lleva desde el año 2007 mejorando día tras día.
Cuenta con una versión gratuita que viene con dos estilos principales para mostrar tus galerías y tus álbumes, y dos versiones de pago que añaden más estilos, opciones de personalización, e incluso la posibilidad de crear un ecommerce en el que vender tus fotografías.
Photo Gallery by WD
Photo Gallery es otro de los pesos pesados en cuanto a plugins de galerías de imágenes en WordPress con más de 300.000 instalaciones activas en este momento.
También cuenta con una versión gratuita con la que puedes crear galerías y darles efectos de transición, añadir imágenes de Instagram y Facebook, etc, y con addons de pago que añaden funcionalidades como la de incluir vídeos en la galerías, vender tus fotografías, más efectos y estilos, etc.
Envira Gallery
Otro de los plugins más conocidos es Envira Galley, que actualmente tiene más de 100.000 instalaciones activas, y con él cerraríamos el TOP 3.
Como no podía ser de otra manera, también tiene una versión gratuita, llamada Photo Gallery by Envira, y una de pago llamada Envira Gallery. Los creadores presumen de poderse crear galerías de manera fácil y rápida simplemente arrastrando y soltando.
Permite compartir las imágenes fácilmente en las redes sociales, mostrar las galerías en varios estilos, vender fotos, proteger las imágenes con contraseña, etc.
Conclusión
No suelo ser partidario de instalar plugins para añadir funcionalidades que el propio WordPress permite hacer, pero en este caso puede valer la pena.
Si quieres causar impacto en el usuario cuando vea tu galería de fotos o funcionalidades avanzadas, necesitarás instalar un plugin para ello.
En el caso de que solo quieras mostrar una galería con algunas fotos sin buscar la excelencia en el diseño ni grandes pretensiones más allá de poder visualizar las fotos o que enlacen hacia otras páginas, con la galería de WordPress te puede ser suficiente.
En cualquier caso, siempre puedes probarla y si no te convence instalar alguno de los plugins que he incluido en la lista. Hay muchos más que los que he mencionado para crear galerías, pero esos tres son los mejores que hay ahora mismo.
Puedes probar varios y quedar con el que más te convenza 🙂
Imagen del artículo: kjpargeter / Freepik
Buenas;
He copiado su codigo CSS en mi child theme para hacer la galería de wordpress responsive, pero no pasa nada. En mi versión para movil me sigue saliendo una galería horrorosa de 3 columnas y yo quiero solo una.
Lo copio al final de la hoja style.css por si es un error.
Si puede ayudarme, se lo agradecería enormemente.
Hola Fernando,
Tienes razón, el código que había ha dejado de funcionar, seguramente debido a alguna actualización de WordPress.
He añadido un nuevo código que sí que funciona, al menos a mí sí que me ha funcionado en las pruebas.
Puedes copiarlo al final de la hoja style.css sin problema.
Un saludo.
Todo perfecto. Mi galería se ve ahora responsive.
Muchas gracias!!!
Hola buenas tardes!!
Coloque el texto al final del tema astra en el style.css pero continua sin funcionar abra alguna otra forma?
Mil gracias
Hola Esmeralda,
He hecho una pequeña actualización en el código, pruébalo ahora.
Ponlo en «Apariencia – Personalizar – CSS adicional» o similar.
Un saludo.
Y dónde esta el nuevo código?
Es el que hay puesto, sólo hay uno.
Amigo a mi me sigue saliendo las mismas tres columnas horrorosas responsive y ya copie este codigo que pusiste mas arriba:
@media (max-width: 688px) {
.gallery-columns-3 .gallery-item {
max-width: 100%;
}
}
Como puedo hacer en este caso ayuda porfa?
Hola,
Acabo de probar el código y funciona bien. ¿Dónde lo estás poniendo? ¿Tienes WordPress actualizado a la última versión?
Un saludo.
Hola, estaba buscando precisamente cómo hacer responsive las galerías de wordpress, he copiado el código en el archivo style.css pero no hace nada, ¿hay alguna otra solución, o algo que esté haciendo mal?
Gracias
Hola Javier,
El código te debería funcionar. Prueba a ponerlo en CSS adicional dentro del personalizador de WordPress, a ver si así te va.
Un saludo.
El código para dejar las imágenes en responsive de una sola columna en moviles……..
¡EXCELENTE!
Muchas gracias.
Mil gracias amigo! Estaba hace días dándome cabezazos con lo del responsive de una galería de imágenes para el GeneratePress y con esto lo logré resolver. Te lo agradezco en el alma!
Hola Amigo, no he podido lograrlo, puedes ayudarme?
Hola Miguel,
He actualizado el código del artículo, prueba este nuevo.
Un saludo.
Hola Sergio,
Gracias por el post.
He probado el código pero no me funciona en la versión 4.9.8
Puedes ayudarme!
@media (max-width: 688px) {
.gallery-columns-3 .gallery-item {
max-width: 100%;
}
}
Hola Elvira,
Acabo de actualizar el código del artículo, prueba este nuevo, te debería ir bien.
Un saludo.
Hola Amigo, no me sirve ya lo intente varias veces pero no puedo, aun sirve?
Hola Miguel,
He actualizado el código del artículo, prueba este nuevo.
Un saludo.
Saludos, Primero gracias por compartir su conocimiento con todos nosotros. Estoy intentando incluir el código para dejar las imágenes en responsive de una sola columna en moviles pero no logro conseguirlo.
He utilizado
@media (max-width: 688px) {
.gallery-columns-3 .gallery-item {
max-width: 100%;
}
}
Puedes ayudarme! Estare haciendo algo mal?
Hola Solimar,
Si te fijas, en el artículo hay un código diferente al que tú has puesto para hacer la galería responsive.
Prueba con ese, que es el último probado que funciona bien.
Un saludo.
hola buenas tardes. estoy empezando en este mundo. deseo ayuda sobre como poner titulo y descripcion debajo de galeria en wordpress.ya que en leyenda ingreso el h2 para titulo y p para descripcion pero se ve dentro de imagen y deseo que este debajo de imagen, llevo semanas sin poder lograrlo. seria genial que puedas ayudarme . gracias!
Hola Frank,
Eso depende del tema que estés utilizando, entiendo. Quizá con algo de CSS puedas lograrlo.
Un saludo.
Buenas, tu colocas este código:
@media (max-width: 688px) {
.gallery-item {
text-align: center;
width:100%;
}
}
Y comentas que en la segunda linea hay que cambiar el 3. Pero no lo veo.
Gracias
Hola Rafael,
Eso esa para el anterior código que había, se me pasó eliminar esa frase. Ya la he quitado.
Un saludo.
Buenas, he estado probando el código de estas web y de otras con el fin de hacer una galería responsive que redujera el número de columnas conforme reducía las dimensiones de la pantalla de mi web.
Pero no me ha funcionado ningún bloque de código de los que he visto, incluido este, así que he probado a indicar que el cambio de las media queries se aplicara sobre el ancho mínimo («min-width») en vez de únicamente el ancho («width»), y me ha funcionado. Por si aún no lo habéis conseguido, os lo dejo para que lo probéis:
@media only screen and ( max-width: 850px ) {
.gallery-item {min-width: 50%;}
}
@media only screen and ( max-width: 600px ) {
.gallery-item {min-width: 100%;}
}
Gracias igualmente por la info de la web! Never Back Down ?
Hola jeshua,
Muchas gracias por el código, seguro que es de ayuda para otra gente.
WordPress se va actualizando constantemente y un código puede quedar obsoleto con el tiempo, siendo difícil estar pendiente todo el tiempo de actualizarlo.
Un saludo.
Nada Sergio! Debemos ayudarnos entre todos.
Igualmente el aporte de la página me fue de gran ayuda, así que gracias de nuevo y suerte con todo!!