Cómo crear una galería de imágenes en WordPress

WordPress hace que sea increíblemente sencillo añadir una galería de imágenes en cualquier lugar de su sitio, pero muchos propietarios de sitios no aprovechan esta potente característica.

En este artículo, te llevaremos a través de la adición de una galería de imágenes, incorporando una presentación de diapositivas y un atractivo mosaico, y destacaremos algunos útiles plugins de la galería.

Galerías de imágenes y WordPress

Las galerías de imágenes han estado en WordPress desde el 2008 con WordPress 2.5. La versión 2.5 fue un hito en muchos sentidos, y la revelación simultánea de los atajos y las galerías fue recibida con entusiasmo por los usuarios. Matt Mullenweg fue uno de los muchos que destacaron la funcionalidad en su blog personal.

Matt Mullenweg fue un entusiasta de las primeras galerías.

A partir de entonces, el desarrollo fue relativamente discreto, y los principales cambios en los siete años transcurridos fueron la revisión del cargador de medios de comunicación en WordPress 3.5 y nuevas mejoras en la versión 3.9. Con la introducción de imágenes de respuesta en WordPress 4.4, las imágenes están de nuevo en la agenda, así que es un buen momento para revisar los fundamentos de la creación de una galería de imágenes.

Antes de crear nuestra galería, vale la pena señalar algunas referencias estándar del Códice relacionadas con las galerías de imágenes para que las tenga disponibles como referencia:

  • Insertar medios de comunicación en los mensajes y páginas: Los fundamentos de la subida de imágenes están muy bien cubiertos en el Codex.
  • Biblioteca de medios: Si no estás familiarizado con los fundamentos de la Mediateca, ahora es tan buen momento como cualquier otro para revisarlos.
  • La galería de WordPress: Esta página dedicada al códice te llevará a través de los fundamentos de las galerías en WordPress.

Con esas introducciones fuera del camino, vamos a seguir adelante con la creación de nuestra propia galería de imágenes.

Cómo crear una galería de imágenes básica

En este recorrido iremos añadiendo una simple galería de imágenes a un sitio local, veremos la edición de las galerías existentes, y luego añadiremos un poco más de pizzas visuales a través de Jetpack. También llamaremos su atención sobre algunos de los principales plugins de galerías que puede utilizar para ampliar la funcionalidad básica que se ofrece.

Estamos usando una instalación local de WordPress 4.4 y tomando el nuevo tema de Veintiséis para una vuelta. Vamos a añadir algunas fotos atractivas de búhos a nuestro sitio -provenientes del fantástico recurso que es Pixabay- porque, afrontémoslo, hay algo fundamentalmente asombroso en los búhos.

Aquí hay una instantánea de la página que me gustaría condimentar con algunas imágenes de alta calidad, como pueden ver, es bastante sosa en este momento.

No hay mucho que llamar la atención en nuestra actual entrada del blog del búho.

Empezaremos las cosas moviéndonos al administrador, seleccionando nuestro post, escogiendo un punto de inserción y luego haciendo clic en el botón Add Media en la barra de herramientas.

Elija su punto de inserción y seleccione

Estamos agregando una galería a un post aquí, pero eres libre de agregar galerías tanto en los posts como en las páginas. Puedes seleccionar cualquier lugar de tu área de contenido para insertarlo. Hemos añadido una nueva línea arriba para que el punto de inserción sea más claro. Al hacer clic en el botón Add Media , entrarás en la interfaz de Media Uploader y Create Gallery es, como era de esperar, la opción a elegir aquí.

Leer
El plugin de moderación de comentarios del front end te da una experiencia de administración más limpia

Como puede ver en la siguiente captura de pantalla, al seleccionar esta opción tiene la posibilidad de subir imágenes completamente nuevas o de seleccionar entre los elementos que ya están en la Biblioteca Multimedia. Puedes alternar entre añadir imágenes y seleccionar imágenes existentes, y puedes añadir imágenes de una en una o arrastrar varias imágenes a la ventana.

Hemos subido seis fotos de búhos a nuestra galería. El búho de arriba a la izquierda parece súper feliz (o cansado… no estoy seguro de cuál).

En nuestro caso, tenemos seis excelentes fotos de búhos cargadas. Como pueden ver, una simple marca de verificación indica cuáles están incluidas, y una marca azul indica si están editando los detalles del archivo adjunto de esa foto.

Al hacer clic en el botón Crear una nueva galería nos lleva al diálogo Editar galería donde podemos revisar las opciones básicas de cómo se mostrarán nuestras imágenes. Todas ellas pueden ser anuladas en una fecha posterior, pero es útil ser capaz de ajustar las cosas en esta etapa.

El cuadro de diálogo de la Galería de edición</em> nos da algunas opciones básicas de visualización para elegir.

Hay dos elementos principales que puedes modificar en esta etapa: el orden de las imágenes y la configuración general de la galería. El pedido se realiza fácilmente ya sea arrastrando y soltando hasta el contenido de tu corazón, o simplemente haciendo clic en el botón Invertir el orden si eso es todo lo que necesitas.

Cuando se trata de Ajustes de la Galería tienes cuatro opciones para jugar:

  1. Enlace a: Elija entre las opciones estándar de None, Media File , y Attachment Page .
  2. Columnas: Tres columnas es la configuración por defecto aquí.
  3. Orden aleatorio: Puedes optar por que las imágenes aparezcan en orden aleatorio.
  4. Tamaño: Elija entre las opciones estándar de Miniatura, Mediano, Grande y Tamaño completo .

Una vez que hemos hecho nuestras selecciones iniciales, haciendo clic en Insertar galería nos lleva de nuevo al editor donde podemos ver nuestras colecciones de búhos en toda su plumosa gloria.

Boom – nuestra galería se ha insertado con éxito en la página.

Un rápido clic en el botón de vista previa nos muestra que todo se está mostrando bien también en la parte delantera.

Nuestra galería de búhos exhibiéndose en la parte delantera.

En términos de lo básico de añadir una galería, es tan simple como los pasos descritos anteriormente. Deberías ser capaz de añadir una galería básica a cualquier página o publicación en tu sitio literalmente en minutos.

También puedes añadir una o más galerías de imágenes directamente a tus mensajes y páginas a través de un código corto. Consulte la página de código abreviado de la galería del códice para obtener todos los detalles de la sintaxis y las opciones.

Las cosas están bien y son estupendas en nuestro ejemplo, pero ¿qué pasa si queremos hacer algunos cambios? Por ejemplo, por el momento, al hacer clic en nuestros amigos emplumados no hará nada ya que la opción Enlace a está establecida en ninguno – sería bueno tener un efecto de presentación de diapositivas aquí de alguna manera si es posible.

Las fotos también podrían tener algunos pies de foto mientras estamos en ello y una disposición de dos columnas podría darles un poco más de espacio para respirar en la página. Parece que es hora de cubrir las opciones de edición de nuestra galería.

Cómo editar tu galería de imágenes

Las cosas no podrían ser más fáciles aquí – simplemente haz clic en tu galería en el editor de publicaciones y verás dos botones que te permiten borrar la galería o volver a la pantalla de edición en la que estábamos antes.

Simplemente haz clic en tu galería para llegar a las opciones de edición.

Leer
Simple: Presiona: Un plugin de foro totalmente escalable para WordPress

En nuestro caso, hemos cambiado a un diseño de dos columnas, hemos aumentado el tamaño de la imagen hasta Medio , y hemos añadido algunas leyendas apropiadas para identificar nuestros búhos individuales.

Cambiando a una disposición de galería de dos columnas.

Sin embargo, hay un problema inmediato aquí. Nuestra bonita rejilla simétrica de miniaturas ha desaparecido para empezar. Además, todavía no somos capaces de ver a nuestros búhos en toda su gloria a través de una presentación de diapositivas de algún tipo. Veamos una forma sencilla de arreglar ambos problemas.

Añadiendo una galería de azulejos y una simple presentación de diapositivas con Jetpack.

Una breve nota antes de seguir adelante: Usaremos el plugin de Jetpack para darle un toque de distinción a nuestra galería, pero hay muchas otras formas de hacerlo. Algunas personas pueden tener preocupaciones relacionadas con la hinchazón de Jetpack, así que tened en cuenta que está lejos de ser la única opción. Cualquiera de los plugins de la galería que enumeraremos más adelante debería poder ayudarte a lograr los mismos objetivos (y muchos más además).

Estamos usando Jetpack en un entorno local, por lo que necesitamos ejecutarlo en modo de desarrollo añadiendo un simple ajuste a wp-config.php como se explica en la documentación de Jetpack.

Un pequeño cambio en wp-config.php</em> nos permite ejecutar Jetpack localmente en el Modo de Desarrollo.

Después de instalar Jetpack y editar wp-config.php , haz clic en Jetpack en el menú lateral de administración y deberías ver un mensaje que confirma que estás ejecutando el Modo de desarrollo como se muestra en la imagen anterior.

Desde aquí, desplácese hacia abajo en la página y haga clic en el botón que dice Vea las otras 27 características del Jetpack . Ahora deberías estar mirando una lista de potenciales módulos Jetpack que puedes usar. Desplázate un poco hacia abajo en la página y deberías ver la opción Galerías de mosaicos disponible. Pasa el cursor sobre ella y verás aparecer una opción para activar la funcionalidad.

Pase el cursor por encima de las galerías de azulejos</em

Después de haber hecho clic en Activa , pasa el cursor por encima de Galerías de mosaicos de nuevo y deberías ver una opción para configurar la nueva funcionalidad.

Haga clic en Configurar para activar la baldosa de fantasía.

Esto te lleva directamente a Settings > Media donde verás una nueva opción de casilla de verificación llamada Tiled Galleries .

Seleccione

Después de habilitarlo, si volvemos a una vista previa de nuestros amigos emplumados, las cosas deberían verse mucho más ordenadas ahora.

Las cosas ya se ven mucho mejor. Si vuelves a entrar para editar tu galería en esta etapa, verás que ahora también tienes la opción de seleccionar entre varios tipos de galerías diferentes.

Selecciona entre diferentes tipos de galería.

Hemos cubierto un montón de terreno y todo lo que queda ahora es liberar a nuestros búhos activando la opción de Carrusel en Jetpack – una experiencia de navegación de fotos en pantalla completa. Estamos viendo la misma serie de pasos de activación que antes con las Galerías de Azulejos. Vuelve a tu lista de módulos de Jetpack, activar

Estamos viendo la misma serie de pasos de activación que antes con las Galerías de Azulejos. Vuelve a tu lista de módulos Jetpack, activa Carrusel y pulsa Configurar .

Activar el Carrusel como lo hiciste con las Galerías de Azulejos.

Una vez más, fueron pateados de nuevo en Ajustes; Medios de comunicación y esta vez, notará una nueva opción llamada Galería de imágenes Carrusel . Las opciones aquí son bastante sencillas – puedes activar o desactivar la funcionalidad, elegir si quieres mostrar datos Exif y seleccionar entre blanco o negro como fondo de tu presentación.

Esta vez, cuando previsualizamos nuestra publicación, al hacer clic en cualquiera de las imágenes de la galería aparece una presentación de diapositivas de aspecto elegante y totalmente funcional que muestra nuestras imágenes con la mejor luz posible y permite una fácil navegación entre ellas.

Leer
Los 25 plugins mejor valorados para ganar la lucha contra el spam de WordPress

El módulo Carrusel nos permite ver imágenes en detalle y navegar fácilmente entre ellas.

Como mencionamos antes, usar Jetpack es sólo una manera de construir la funcionalidad de la galería nativa de WordPress de esta manera. Si buscas otra forma sencilla de realizar algo similar sin Jetpack, mira la guía rápida de BobWP para usar el Carrusel de Galería sin el plugin Jetpack.

Plugins de la galería de imágenes de calidad

Hemos cubierto los plugins de la galería de imágenes con cierta profundidad antes de recientemente en el blog, así que no vamos a repasar mucho terreno antiguo aquí. Si buscas una funcionalidad que las opciones predeterminadas de la galería o Jetpack no pueden manejar, comienza tu búsqueda con cualquiera de estos dos pesados plugins de la galería.

  • 1. Galería NextGEN

    Cuando se trata de plugins de galería de WordPress con todas las características, es difícil mirar más allá de la Galería NextGEN. Con más de un millón de instalaciones activas y un largo historial detrás de él, ha sido el plugin de galería líder desde hace bastante tiempo.

    La versión gratuita del plugin te ofrece un diseño de gran respuesta, una selección de cajas de luz incorporadas y opciones de presentación de diapositivas, la posibilidad de añadir álbumes enteros de galerías a tu sitio, y un montón de otras características.

    Sube las cosas a las versiones premium de NextGEN Plus o NextGEN Pro y empezarás a entrar en opciones seriamente sofisticadas más adecuadas para los fotógrafos profesionales como el comercio electrónico integrado, la prueba de imagen, la protección de la imagen y la posibilidad de vender descargas digitales. Los detalles completos de los precios de los dos paquetes premium están disponibles en el sitio de NextGEN.

    ¿Interesado en la 1. Galería NextGEN?

    DetallesDemoDescargar

  • 2. FooGallery

    FooGallery se anuncia como simple para los usuarios y muy flexible para los desarrolladores y cumple con ambos objetivos. La versión gratuita del plugin te da opciones ingeniosas para ordenar tus imágenes, soporte para lightbox, plantillas para galerías y la posibilidad de importar desde las galerías de NextGEN.

    Las galerías de video también pueden ser integradas a través del plugin premium FooVideo que permite agregar contenido de Vimeo y YouTube con facilidad.

    FooGallery se distingue por una serie de interesantes extensiones que puedes utilizar para ampliar su funcionalidad básica y sus referencias para los desarrolladores abren la posibilidad de codificar la tuya propia con relativa facilidad.

    Echa un vistazo a la página de FooGallery 101 para un detallado recorrido por las configuraciones comunes y sus extensas páginas de demostración para ver ejemplos del plugin en acción.

    ¿Interesado en la 2. FooGallery?

    DetallesDemoDescargar

Envolviendo

Añadir galerías a sus mensajes y páginas es una forma maravillosa de aumentar el compromiso de los usuarios y el tiempo en el sitio, y una cosa obviamente sensata de hacer en un mundo cada vez más obsesionado con el contenido de Instagram y Pinterest.

WordPress pone a tu alcance una interfaz de carga increíblemente fácil y deja el camino libre para que lleves las cosas tan lejos como quieras en términos de personalización y extras de lujo.

Empieza por familiarizarte con lo básico como hemos descrito anteriormente, luego busca aprovechar al máximo tus activos de imagen con opciones como Jetpack, NextGEN Gallery y FooGallery, y tu sitio pronto se verá un corte por encima del resto.

¿Cómo está manejando actualmente sus propias galerías de imágenes? ¿Hay alguna opción que crees que deberíamos destacar? Háganoslo saber en los comentarios de abajo.

1,6 millones de superhéroes de WordPress leen y confían en nuestro blog. Únete a ellos y recibe entradas diarias en tu bandeja de entrada – ¡gratis!

Etiquetas:

  • imágenes

Deja una respuesta