Galería de imágenes con varios sets de Flickr en WordPress

Inicio » Tecnología » Diseño Web » Galería de imágenes con varios sets de Flickr en WordPress

Galería Flickr en WordPress

En el anterior tutorial vimos como integrar un set de flickr en una plantilla personalizada de WordPress, en esta ocasión lo que haremos será realizar una pequeña galería de imágenes utilizando varios sets de flickr.

Cómo les indiqué anteriormente, el script para lightbox utilizando en este tutorial funciona correctamente si se muestra un único set, lo que cambia completamente si hacemos una galería con múltiples sets, por lo que la mejor opción que encontré fue anular el sistema de lightbox con carrusel y cambiarlo por una carga simple de la imagen original con fancybox.

Antes empezar el desarrollo tienen que leer el tutorial anterior para integrar un set de flickr en una plantilla personalizada de WordPress

Y para muestra un botón, pueden ver una demostración de cómo quedará la versión final en:

Galería de Imágenes para WordPress

Creación de la Galería:

Lo primero que vamos a hacer es una pequeña galería que funcione a base de tabs, cada tab sería el acceso a cada uno de los sets que vayamos a publicar y el contenido que cargue cada tab, sería el listado de imágenes de cada uno de esos sets (espero que me haya hecho entender).

Para hacerlo fácil, sería algo como esto:

En el header.php antes de la etiqueta de cierre del “head”, colocamos el siguiente código:

Y en nuestra hoja de estilos agregamos los siguientes formatos:

El funcionamiento de la galería con tabs lo pueden ver en esta página:

Galería de imágenes Doña Marta

El sistema de galería de imágenes de Doña Marta lo realicé utilizando un script para tomar las imágenes de los album de facebook, en otra ocasión haré un tutorial para realizarlo, el sistema de uso es parecido al de flickr, lógicamente con diferentes efectos.

Automatización de la galería de imágenes

Ahora, si tenemos una página donde vamos a cargar diferentes sets, lo más fácil sería que los sets sean publicados como artículos en una categoría que agrupe todos estos artículos y por último sería cargar las entradas/artículos en nuestra plantilla personalizada, con el sistema de tabs que hemos preparado previamente.

Por lo que para hacer esto, creamos una categoría que identifique a las entradas de la galería, a esta categoría la llamaremos “Flickr Gallery” o cualquier otro nombre representativo, el nombre no tiene nada que ver con lo que queremos, ya que lo que necesitamos es el ID de la categoría, para ver el ID de la categoría accedemos a la sección de categorías, posamos el puntero del mouse sobre el nombre de la categoría y luego pulsamos sobre la opción “editar”, ahora para conocer el ID, en el enlace de la barra de direcciones tendremos algo como esto:

El ID de la categoría vendría a ser donde dice: tag_ID=6, por lo que el ID sería: 6

Teniendo en cuenta esto, lo que haremos ahora es crear dos loops en la galería con tabs que acabamos de crear, uno para los tabs y otro para el contenido de cada tab.

cat=6: Se mostrarán únicamente las entradas de la categoría 6

post_per_page=-1: Se mostrarán todas las entradas de esta categoría, si colocamos un valor positivo estaríamos condicionando a que se muestren esa cantidad de entradas.

 

Vamos a relacionar cada uno de los tabs con su correspondiente contenido y utilizamos la función the_ID() para crear un ID único para cada tab.

En los tabs vamos a mostrar la imagen destacada de la entrada con un tamaño de 75px x 75x además del título o nombre del set.

Integrando Flickr en nuestra galería de imágenes

En el área de contenido, inmediatamente después de la función del título insertamos el código que toma las imágenes de flickr, quedando de la siguiente manera:

Dentro de los cambios que tenemos que realizar a la galería que realizamos inicialmente es hacer que cada galería tenga una clase diferente y esto es insertando la función the_ID(), lo mismo realizaremos en el script jquery que identifica la galería y hace funcionar el script.

Hasta aquí, si agregamos la API KEY y el ID del set, si vemos la galería en funcionamiento, cada uno de los tabs tendrá el mismo set, no importa la cantidad de tabs que sean, ya que hemos agregado un ID de set único y lo que queremos es que este sea modificable, por esto mismo debemos crear una metabox que nos permita ingresar el ID en cada entrada que realizemos.

Para mostrar el contenido del metabox en la plantilla personalizada debemos modificar un poco el loop del área de contenido, quedando de esta manera:

Y en el código jquery que carga las imágenes desde flickr lo mostramos así:

Con esto ya tendremos funcionando nuestra galería de imágenes, pero recuerdan que les dije que al cargar varios sets en una misma página el sistema de lightbox con carrusel no funcionaría correctamente, quiero indicar que no soy un experto en php ó jquery, pero entiendo lo suficiente como para maquetar mis themes y modificar algunos scripts, sin embargo luego de hacer algunas modificaciones no llegó a funcionar correctamente, mi última salida era que el desarrollador del script me de una mano, pero me respondió diciendo que no brindaba soporte en la integración del script, por lo que mi última opción fue anular el sistema de lightbox con carrusel e implementar únicamente con fancybox, ya que al final de cuentas los thumbnails se cargaban con un enlace a la imagen original, lo único que faltaba era asignar una clase a ese enlace para que cargue con fancybox.

Para anular el efecto lightbox con carrusel, sin tener que modificar el script jquery, buscamos la siguiente línea de la galería y le agregamos un identificador con la función the_ID()

Ahora para agregar la clase “fancybox” a los enlaces, tenemos que modificar el script que captura las imágenes de flickr, y este es el archivo “flickr-jquery.js” y aproximadamente en la línea 58 tendremos esto:

Y la cambiamos por esta línea:

El funcionamiento final como les dije se puede apreciar en:

Galería de Imágenes para WordPress

Probando si se muestra seleccin de Google Adsense

Una respuesta a “Galería de imágenes con varios sets de Flickr en WordPress”

  1. Información Bitacoras.com

    Valora en Bitacoras.com: En el anterior tutorial vimos como integrar un set de flickr en una plantilla personalizada de WordPress, en esta ocasión lo que haremos será realizar una pequeña galería de imágenes utilizando varios sets de flickr. CÃ..…

Deja un comentario