Galería Flickr en WordPress con Bootstrap y Blueimp

Inicio » Tecnología » Diseño Web » Galería Flickr en WordPress con Bootstrap y Blueimp

Galería Flickr en WordPress

Hace algún tiempo atrás realizamos la integración de una galería de imágenes con phpFlickr; sin embargo actualmente el script utilizado (phpFlickr) está presentando algunos errores para cargar las imágenes de Flickr, busque la forma de solucionarlo y no encontré una solución viable al problema; sin embargo buscando la forma de instalar una galería que utilice las imágenes que tenemos cargadas en Flickr, encontré un script en Github que hace exactamente lo que necesitamos para el presente tutorial, y  es cargar las imágenes del set que indiquemos.

Para empezar nuestro tutorial lo primero que tenemos que hacer es descargar el script que vamos a utilizar, el cuál lo encontraremos en github:

jQuery Flickr Photoset

Este script requiere algunos script externos para funcionar correctamente ó utilizar todas sus funcionalidades:

Pero al descargar el paquete, estos vienen incluidos, y lo que hace básicamente este script es:

  • Cargar imágenes de un set de flickr que especifiquemos.
  • Mostrar las imágenes como thumbnail.
  • Cargar la imagen original en un lightbox, el cual incluye un carrusel que puede ser configurado para cambiar diferentes efectos como:
    • Reproducción automática.
    • Navegación en el carrusel utilizando el teclado.
    • Configuración de velocidad y transiciones.
    • Mostrar u ocultar thumbnails en el carrusel.
    • Esquema responsive, etc.

Es decir este script lo tiene todo y para obtener las imágenes de un set sólo debemos indicar nuestra API key de flickr y el ID del set del cual vamos a mostrar las imágenes.

Antes de seguir, pueden ver el funcionamiento del script en el siguiente enlace:

Galería de Flickr con Bootstrap y Blueimp

Si te ha gustado el funcionamiento y quieres integrarlo en tu sitio WordPress, puedes seguir leyendo este pequeño tutorial, sin embargo antes de avanzar quiero algunas observaciones:

El script funciona correctamente cuando deseamos mostrar una galería de imágenes de un set de flickr en una página, sin embargo, si queremos mostrar varios sets dentro de una página, como una plantilla personalizada para una galería con varios sets, como lo que voy a hacer, el sistema lightbox que carga el carrusel deja de funcionar, debido a que en el script de blueimp se necesita indicar el ID del contenedor o capa del carrusel, y como ustedes saben, debido a las reglas w3C, los contenedores con ID no se pueden repetir a lo largo de la página, por la tanto el efecto de lightbox sería visible únicamente para el primer set de imágenes donde se mostrarán todos los thumbnails incluídos los de los demás sets; sin embargo este problema no sucederá si vamos a cargar los sets en diferentes páginas; no obstante es problema es solucionable sólo si queremos sacrificar el sistema de lightbox por algo más simple como cargar las imágenes originales una por una utilizando sea lightbox, fancybox o el script de nuestra elección.

Integrar set de Flickr en una plantilla personalizada de WordPress

Lo primero que vamos a hacer es integrar un set de Flickr en una plantilla personalizada WordPress, para lo cual una vez descargado el script:

jQuery Flickr Photoset

Copiamos los archivos necesarios en nuestro theme, en una carpeta “css” todo lo que son hojas de estilo, en la carpeta “js” todo lo que son scripts jQuery y en la carpeta “images” todas las imagenes requeridas, como el loader por ejemplo.

Primero los scrips y hojas de estilo a mover serán:

Una vez que hemos copiado los archivos a las carpetas de nuestro theme, creamos un archivo php y le colocamos un nombre como “gallery.php” o el que queramos utilizar, y empezamos a desarrollar nuestra plantilla personalizada.

Si queremos conservar la estructura o formato de nuestra web, lo recomendable es hacer una copia de un archivo del theme como”page.php” y renombrarlo, así lo que tenemos que modificar será únicamente el contenido del loop.

Teniendo en cuenta la anotación, realizamos una copia del archivo page.php y lo renombramos a gallery.php, el contenido de nuestro archivo será algo parecido a lo siguiente:

Lo siguiente a hacer es modificar el encabezado para convertir este archivo en una plantilla personalizada y posteriormente, eliminar el loop para hacer prácticamente una plantilla con contenido html.

Abrimos el archivo “index.html” del script en el editor de código que utilicemos, si no tenemos uno podemos utilizar el block de notas, y copiamos el siguiente código:

Y lo pegamos en nuestra plantilla personalizada donde iba el código que mostraba el contenido del artículo:

En la parte final del código lo único que tenemos que hacer es modificar tanto el API KEY como el ID del set que vamos a cargar.

Si todo ha ido bien, ya tenemos una galería de imágenes funcionando correctamente, pero con un solo set.

Probando si se muestra seleccin de Google Adsense

Una respuesta a “Galería Flickr en WordPress con Bootstrap y Blueimp”

  1. Información Bitacoras.com

    Valora en Bitacoras.com: Integrar un set de imágenes de Flickr en WordPress Hace algún tiempo atrás realizamos la integración de una galería de imágenes con phpFlickr; sin embargo actualmente el script utilizado (phpFlickr) está presentando …

Deja un comentario