Spanish (Español) translation by Ana Paulina Figueroa (you can also view the original English article)
Algunos sitios web requieren que agregues muchas imágenes en una sola publicación o página web. Por ejemplo, quizá quieras cargar una gran cantidad de imágenes relacionadas con una exposición de arte o un evento en un sitio web. De manera similar, es posible que cualquier negocio que se enfoque en productos y servicios agregue una gran cantidad de imágenes relevantes en una sola página.
Cuando se usan correctamente, las imágenes pueden lograr que cualquier página web sea mucho más interesante en comparación con una página cuyo contenido sea simplemente mucho texto. Sin embargo, el uso de múltiples imágenes en una sola página web trae consigo sus propios inconvenientes. Las imágenes grandes ocuparán mucho espacio en la página web. También usarán mucho ancho de banda y disminuirán la velocidad de carga de la página en redes lentas. Ambos problemas pueden resolverse mediante el uso de algunos buenos complementos para galerías de WordPress.
-
.jpg)
.jpg)
Los 10 mejores complementos de WordPress para sliders y carruseles de 2019
-
Los 17 mejores complementos de galerías de WordPress
-
Cómo crear una galería de WordPress usando el complemento para cuadrículas de imágenes justificadas
-
Los 7 mejores complementos de WordPress de galerías de videos
En este tutorial aprenderemos cómo crear una galería de imágenes usando el complemento gratuito FooGallery de WordPress.
Lo que vamos a construir
Como mencioné anteriormente, usaremos el complemento FooGallery para crear una galería de imágenes.
La galería de imágenes contendrá 14 imágenes de patos. Algunas son mis propias fotografías y otras fueron descargadas de Pixabay. La siguiente imagen te muestra el diseño de la galería que tendrás al finalizar este tutorial. El texto que aparece en la captura de pantalla proviene del artículo de Wikipedia sobre patos.
Vamos a usar el complemento para establecer el ancho del borde, la sombra del cuadro y el tamaño de las miniaturas.
El complemento también te permite configurar la paginación para la galería de imágenes. Esto es útil si tienes muchas imágenes en la galería. El fondo, el radio del borde de las miniaturas y algunos otros aspectos de la galería se han modificado usando CSS personalizado.
Por defecto, al hacer clic en cualquier miniatura se abrirá una versión grande de la imagen en un componente lightbox. Sin embargo, necesitas instalar un complemento de lightbox para que eso suceda. FooBox Free Edition es un complemento gratuito que funciona con FooGallery.
Comenzando
Una vez que hayas instalado y activado el complemento, puedes comenzar a crear tu propia galería de imágenes responsiva haciendo clic en FooGallery > Add Gallery (FooGallery > Agregar galería) en tu panel de WordPress.
Ahora puedes asignarle un título a tu galería y agregarle imágenes de la biblioteca de medios haciendo clic en el botón Add From Media Library (Agregar a partir de la biblioteca de medios).
Después de cargar las imágenes, puedes especificar algunas opciones generales para la galería haciendo clic en la pestaña General.
En nuestro caso, vamos a configurar el ancho (width) y la altura (height) de las miniaturas para que tengan un valor de 100px.
La configuración Link To (Vincular a) te permite especificar qué sucede cuando un usuario hace clic en alguna de las miniaturas. Si has instalado un complemento de lightbox, la opción Full Size Image (Imagen de tamaño completo) abrirá la imagen en un componente lightbox. De lo contrario, simplemente abrirá la imagen original en el navegador web. Si estás creando una galería con imágenes de productos, también puedes establecer el valor de la opción en Custom URL (URL personalizado) para abrir una página específica para el producto.
La configuración Alignment (Alineación) controla la alineación de las miniaturas dentro del contenedor de la galería. Estableceremos su valor para que sea Center (Centrado) en nuestra galería.
Personalizando las miniaturas
Puedes cambiar muchos aspectos relacionados con las miniaturas con la ayuda de las configuraciones de la pestaña Appearance (Apariencia). Entre estas configuraciones se encuentran el color del borde, el ancho del borde y la sombra del cuadro.
Antes de realizar cambios en estas configuraciones, deberías hacer clic en el botón Gallery Preview (Vista previa de la galería) en la parte superior de la página para obtener una vista previa de la galería en tiempo real dentro del mismo panel.
La configuración Theme (Tema) básicamente controla el color del borde de las miniaturas. Vamos a establecer su valor en light (claro) para agregar un borde blanco alrededor de las miniaturas.
También puedes determinar qué tan redondeadas serán las esquinas de cada miniatura. Cuando se establece el valor de Rounded Corners (Esquinas redondeadas) en None (Ninguna), las miniaturas serán cuadrados o rectángulos perfectos. Al establecer su valor en Full (Total), obtendrás miniaturas circulares en lugar de cuadradas.
La configuración Loading Icon (Icono de carga) se usa para determinar el icono que aparece antes de que las miniaturas hayan sido cargadas. Esto es diferente de cualquier animación de carga que aparece cuando se está cargando una imagen completa después de hacer clic en una miniatura.
La configuración Loaded Effect (Efecto post-carga) determina si las miniaturas deben aparecer en la página web usando alguna animación después de ser cargadas. Vamos a establecer su valor en una animación Fade In (Aparecer gradualmente) simple.
Agregando lindos efectos al pasar el puntero del ratón por encima
Hay un par de configuraciones que puedes cambiar para añadir bonitas animaciones al pasar el puntero del ratón por encima de las miniaturas.
La configuración Color Effect (Efecto de color) determinará si las miniaturas deben ser a colores o en escala de grises cuando un usuario pasa el puntero del ratón sobre ellas. Vamos a establecer el valor en Greyscale (Escala de grises). Ahora, las miniaturas originalmente tendrán su color natural, pero cambiarán a escala de grises cuando un usuario pase el puntero del ratón sobre ellas.
Scaling Effect (Efecto de escala) aumentará un poco el tamaño de las miniaturas cuando se configure en Scaled (Escalado). En este tutorial vamos a dejarlo con su valor predeterminado None (Ninguno).
La configuración Transition (Transición) determina la manera en la que se debe animar la capa superpuesta sobre las miniaturas cuando un usuario desplaza el puntero del ratón sobre ellas. Aquí hay un par de opciones disponibles. Si quieres que la capa aparezca instantáneamente, simplemente selecciona Instant (Instantánea) del menú desplegable. Esto eliminará cualquier animación de superposición de capa de las miniaturas. Para nuestra galería vamos a aplicar una animación sutil con Fade (Desvanecer).
La configuración Icon (Icono) determina el icono que aparece en la capa. Vamos a usar el pequeño icono de aumento para nuestras miniaturas, ya que este indica a los usuarios que, si hacen clic en la miniatura, esto les mostrará una versión ampliada de la imagen. El icono también es lo suficientemente pequeño como para no cubrir toda la miniatura.
Agregando paginación a la galería
Incluso con miniaturas relativamente pequeñas de 100 por 100, la galería ocupará mucho espacio si incluye muchas imágenes. En este punto, probablemente no sea una buena idea configurar las miniaturas para que sean aún más pequeñas. Si no puedes reducir el número de imágenes en la galería, una opción accesible para mostrar la galería sería agregar un sistema de paginación. De esta manera, puedes mostrar solamente un subconjunto de imágenes en el contenedor de la galería y permitir a los usuarios que hagan clic en los puntos debajo de la misma para ver el siguiente conjunto de imágenes.
Todas las configuraciones relacionadas con la paginación se encuentran disponibles dentro de la pestaña Paging (Paginación). La configuración Page Size (Tamaño de página) determina el número de miniaturas que se mostrarán a la vez. Por defecto, los puntos de navegación de la galería se agregan tanto en la posición superior como en la inferior. Solamente los mostraremos en la parte inferior configurando el valor de Position (Posición) para que sea Bottom (Inferior).
La configuración Theme (Tema) simplemente controla el color de los puntos. El tema oscuro ocasiona que los puntos seleccionados se vuelvan indistinguibles de otros puntos, así que estableceremos el valor de Theme (Tema) para que sea Light (Claro).
La configuración Scroll To Top (Desplazar hacia arriba) llevará a los usuarios de vuelta a la parte superior del contenedor de la galería cuando hagan clic en cualquiera de los puntos para la paginación. Vamos a establecer su valor en No para nuestra galería, ya que solamente hay 10 miniaturas en cada página. Añadir un desplazamiento aquí solamente distraerá al usuario, ya que puede ver la galería completa de todos modos.
Si tienes una gran cantidad de imágenes en tu galería, deberías considerar establecer el valor de Paging Output (Salida de la paginación) en JSON. Ya que no tenemos muchas imágenes en nuestra galería, vamos a seleccionar HTML.
Aplicando CSS personalizado a la galería
Lo único que nos queda por hacer ahora es aplicar un poco de CSS personalizado para que nuestra galería sea única y elegante. Hay una sección debajo de todas estas configuraciones en la que puedes escribir tu propio CSS personalizado, el cuál será aplicado a la galería.
El complemento te indicará el id que puedes usar en tus selectores para trabajar con esta galería en particular. Este es el CSS que vamos a utilizar para este tutorial:
1 |
#foogallery-gallery-80 { |
2 |
background: radial-gradient(#f65d5d, #900090); |
3 |
padding: 20px 0; |
4 |
border-radius: 2px; |
5 |
border: 10px solid #f5f5f5; |
6 |
outline: 5px solid #e0e0e0; |
7 |
}
|
8 |
|
9 |
#foogallery-gallery-80.fg-dark .fg-item-inner, .foogallery.fg-light .fg-item-inner { |
10 |
border-radius: 15% 85% 14% 86% / 86% 23% 77% 14%; |
11 |
}
|
12 |
|
13 |
#foogallery-gallery-80 figcaption.fg-caption { |
14 |
background: rgba(0,0,0, 0.5); |
15 |
}
|
Comenzamos aplicando un fondo y un contorno al contenedor de nuestra galería. Después de eso, aplicamos un radio de borde más elegante en las miniaturas para darles más estilo.
Finalmente aclaramos el color de fondo de la capa que aparece cuando pasamos el puntero del ratón sobre cualquier imagen. La última parte garantiza que los usuarios aún puedan ver la imagen cuando pasan el ratón por encima de una miniatura.
Después de seguir todos los pasos del tutorial, obtendrás el siguiente resultado.
Consideraciones finales
En este tutorial aprendimos cómo usar el complemento FooGallery gratuito para añadir galerías de imágenes a nuestros sitios web de WordPress. El complemento proporciona muchas funciones básicas que pueden ayudarte a crear galerías con facilidad.
Sin embargo, este complemento gratuito tiene un par de limitaciones. Por ejemplo, no puedes crear una galería que contenga tanto imágenes como videos. De forma similar, no puedes integrar ningún otro lightbox que no sea FooBox con este complemento.
Si estás buscando complementos de galerías de WordPress que ofrezcan muchas más funciones y que no te restrinjan con sus propios complementos, por favor revisa estos complementos prémium de galerías de WordPress disponibles en CodeCanyon. Obtendrás actualizaciones gratuitas de por vida, además de soporte gratuito durante seis meses.
- WordPressLos 10 mejores complementos de WordPress para sliders y carruseles de 2019
WordPressCómo encontrar los mejores complementos de WordPress de galerías de imágenes o video- Complementos de WordPressCómo crear una galería de WordPress usando el complemento para cuadrículas de imágenes justificadas
- Complementos de WordPressLos 7 mejores complementos de WordPress de galerías de videos
¿Cuál es tu complemento favorito de galerías de WordPress, ya sea gratuito o de paga? cuéntanos en los comentarios a continuación.
By
