Integrar una galería Flickr en WordPress – Parte 2: Desarrollo del slider y adición de sets

Inicio » Tecnología » Diseño Web » Integrar una galería Flickr en WordPress – Parte 2: Desarrollo del slider y adición de sets

integrar-una-galeria-flickr

El día de ayer vimos como integrar phpFlickr en WordPress, su uso como vieron es bastante sencillo, pero puede ser un verdadero dolor de cabeza en algunos momentos.

Lo que haremos hoy es crear el slider o esquema donde se mostrarán las galerías de Flickr y además de eso crearemos un custom post type desde donde iremos agregando los diferentes sets.

Creación del Slider

Les mentiría si les dijese el nombre del script para el slider ya que no lo recuerdo, es un script gratuito que descargué hace mucho tiempo y me parece que la web del autor ya no está online.

Lo primero que deberán hacer es descargar el archivo incluído en esta publicación, en el archivo encontrarán las carpetas conteniendo los archivos javascript y las hojas de estilo del slider y del fancybox; además de los avances que haremos hoy.

Antes de realizar la estructura del slider, tendremos que preparar nuestro header, añadiendo las siguientes líneas:

Como pueden apreciar estamos cargando los efectos y formatos para el fancybox y el funcionamiento del slider.

Y ahora lo siguiente es crear la estructura para el slider:

En el código anterior podemos apreciar dos listas desordenadas, la primera lista va a cargar el listado de sets o albums con su respectivo thumbnail y el título de la galería; y la segunda lista mostrará las imágenes del set o album en cuestión, y al pulsar sobre la imagen, se cargará la imagen correspondiente con un efecto de lightbox, para dicho efecto vamos a utilizar fancybox.

Anteriormente cuando les hice un tutorial para crear custom post types, aprendimos como elaborar custom post types personalizados y además mostrar una lista de ello, si no recordamos, le hechamos una ojeada que ahora nos toca utilizar esos conocimientos para elaborar el custom post type para la galería Flickr.

Para poder cargar los sets de una galería flickr, sólo necesitaremos unos datos:

  • Título, este nos servirá para darle un nombre al menos al Set, no necesariamente utilizaremos el mismo nombre del set en flickr.
  • Thumbnail, el thumbnail del set lo tendremos que cargar como imagen destacada.
  • Etiquetas, aunque no sean necesarias en la galería, pienso que sería bueno para el SEO de nuestra página.
  • ID del set, cada set de Flickr tiene un ID único, y del tutorial donde aprendimos a integrar Flickr con WordPress, deducimos que el único dato para mostrar un set es indicar el ID del set, así que para esto necesitaremos crear un metabox dentro del custom post type.

Ahora amigos, manos a la obra, lo primero que haremos es crear nuestro custom post type, al que le vamos a denominar “flickr”, corto y fácil de recordar no lo creen.

 

Con esto ya tenemos nuestro custom post type funcionando correctamente, salvo que aún nos falta un campo en el cual podamos indicar el ID del set de flickr.

Lo siguiente por hacer entonces es crear un metabox que realice dicha acción:

Listo, ahora nuestro custom post type para la galería está completo, así de esta manera ya podemos ir publicando nuestras galerías, sin embargo, el slider aún no está desarrollado, como vieron anteriormente ya tenemos la estructura, ahora nos falta cargar los datos.

En la primera parte, el bloque de tabs donde se mostrará el listado de albums o sets, colocaremos el siguiente código:

Hay que tener en cuenta que el bloque donde se mostrará el listado de sets, es una lista, y por ende el loop deberá englobar la lista “li”, en este caso en el loop estamos indicando que se van a mostrar las entradas del custom post type “flickr”, el código dentro de la lista, nos mostrará la imagen cargada como imagen destacada en tamaño de 75 x 75, ustedes lo pueden hacer más grande o más pequeña y además nos mostrará el título de la entrada ( es por eso que en el custom post type indicamos que queríamos utilizar el campo de título ).

Hasta el momento, si hemos cargado correctamente las librerías en el header, así como los estilos, el slider al menos ya debe contar con alguna estructura.

Ahora lo que nos falta es mostrar las imágenes del set, para ello en el segundo bloque colocamos lo siguiente:

Aquí lo que hicimos es crear un nuevo loop con las entradas del custom post type “flickr”; sin embargo el contenido ha variado, en la primera parte donde aprendimos a integrar Flickr con WordPress, el set se cargaba ingresando el ID correspondiente:

Sin embargo, como vamos a mostrar diferentes sets, necesitamos que en cada bloque el set sea diferente, es por eso que hemos creado el metabox, para que de esta manera podamos indicar el set de cada bloque.

Es por ello que en lugar de colocar el ID del set, vamos a cargar el contenido de metabox, quedando esta parte del código de la siguiente manera:

Y como podrán apreciar, el enlace a cada imagen del set, contiene la clase “fancybox”, con ello la imagen cargará con el efecto lightbox, y no en una ventana nueva.

Finalmente nuestra galería, quedaría de la siguiente manera:

En la próxima parte del tutorial, veremos como crear una página de configuración del theme, la culminación de la galería queda para la cuarta parte, ya que si les explico el funcionamiento de la plantilla de administración y además explico la integración de las opciones de la galería a esta, se va a volver muy extenso y muy tedioso de leer.

Entonces nos vemos un día de estos para continuar con la tercera parte.

Integrar una galería Flickr en WordPress – Parte 2: Desarrollo del slider y adición de sets:

Descargar el archivo
Probando si se muestra seleccin de Google Adsense

Una respuesta a “Integrar una galería Flickr en WordPress – Parte 2: Desarrollo del slider y adición de sets”

  1. Leesa Deyak dice:

    You have a very nice layout for your blog, i want it to use on my site too ,?

Deja un comentario