Presentación de imágenes para álbumes Picasa tras su cierre | Oloblogger Hace ya bastante que Google anunció la retirada de Picasa  para centrarse en Google Fotos y así se hizo. Ahora llega el turno de la API para...

3 de octubre de 2016

Presentación de imágenes para álbumes Picasa tras su cierre

Hace ya bastante que Google anunció la retirada de Picasa para centrarse en Google Fotos y así se hizo. Ahora llega el turno de la API para feeds de Google (día 29 de septiembre) y con su defenestración también dejarán de funcionar las presentaciones de imágenes Picasa embebidas en web. La mala noticia es que no hay equivalente en Google Fotos.

Por un lado estaba la utilidad de Picasa que posibilitaba insertar fotos y álbumes y por otro, el gadget Presentación de diapositivas de Blogger que también tiraba de Picasa. Uno ya no existe y al otro le debe quedar poco -si cuando se publique este post no ha fallecido ya- debido a la retirada de la mencionada API. En cualquier caso, agonizando están ambos.

La buena noticia es que con las imágenes propiamente dichas no ha habido ningún problema, pues han migrado de un servicio a otro y  los álbumes siguen accesibles desde una utilidad creada para el caso. Se han conservado tanto las que se subieron desde Blogger, como desde Google+ o Hangouts, así que tranquilos todos: las imágenes de vuestro blog siguen a salvo y operativas. Aquí sólo estamos hablando de los gadgets para presentaciones.

Un matiz: los enlaces a las imágenes siguen funcionando siempre que estuvieran asociados a tu ID de usuario (no a tu nombre de usuario). Tenéis más información sobre todo esto Ayuda de Picasa: ¿Qué ocurre con Picasa y Álbumes web de Picasa?

Así las cosas me puse a buscar una alternativa que no usara aquello que desaparece y afortunadamente encontré un un feed relacionado con los álbumes migrados. Con él no es demasiado complicado montar una presentación de diapositivas casera.

Vamos a verlo.




El feed desde el que se pueden cargar todos los datos de las imágenes que teníamos en Picasa y que se han traspasado a Google Fotos tiene el siguiente formato:

http://photos.googleapis.com/data/feed/api/user/NUMERO_USUARIO


El número de usuario es el de la cuenta Google asociada y podéis averiguar cuál es el vuestro al menos de dos maneras:

  • Habiendo hecho login previamente en Google y accediendo a la dirección del nuevo archivo de álbumes Picasa que es https://get.google.com/albumarchive. La antigua dirección http://picasaweb.google.com os redirige hoy día también a esa misma dirección. Si probáis los anteriores enlaces veréis que al final de la dirección se añade automáticamente vuestro número de usuario.
  • Entrando en https://plus.google.com >> Perfil >> Botón derecho >> Copiar dirección del enlace... pero aunque parezca lo contrario la primera opción es la más fácil.


Plugin jQuery


Ese feed general que antes comenté incluye a su vez las respectivas direcciones de otros feeds que nos permiten acceder a los datos de cada álbum de manera independiente, así que lo que hace básicamente el plugin es leer el feed general mediante JSON a partir del número de usuario, localizar el feed particular de un álbum por su nombre y por último leer y mostrar los datos (imágenes y enlace al álbum en Google Fotos).

El resto de cosas que hay por ahí sólo añaden a la página las capas necesarias para poder aplicar el estilo y el sistema de slider. Este último no es ni más ni menos que una pequeña evolución del ya conocido por aquí slider jQuery más sencillo.

Esto se puede colocar tanto en plantilla (ver dónde se puede colocar el JavaScript en Blogger) como en un gadget HTML/JavaScript. En ambos sitios funcionará, pero en el segundo caso hay que tener la precaución de colocarlo de manera que se cargue antes que lo que veremos ahora después.

Aquí está reducido de tamaño, pero si lo queréis ver más claro, en este CodePen tenéis todo estiradito.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js'></script>
<!-- Plugin slider automático álbum Picasa -->
<script>//<![CDATA[
!function(a){a.fn.extend({gfotosgal:function(b,c,d,e){this.each(function(){var g=0,h="#"+a(this).attr("id"),i="https://photos.googleapis.com/data/feed/api/user/"+b+"?alt=json";a(h).append('<div class="gfsliderwrap"><div class="gfalbum">'+c+'</div><div class="gfslider"><div class="gfloading"></div></div></div>'),a.getJSON(i).done(function(b){a(h+" .gfsliderwrap").append('<a href="javascript:void();" class="gfmenos">&lsaquo;</a><a href="javascript:void();" class="gfplay">&#9658;</a><a href="javascript:void();" class="gfmas">&rsaquo;</a>'),a.each(b.feed.entry||[],function(b,e){var f=e.title.$t||"";f===c&&(a(h+" .gfloading").remove(),g=1,a.getJSON(e.link[0].href).done(function(b){a.each(b.feed.entry||[],function(b,c){return b!=d&&void a(h+" .gfslider").append('<a target="_blank" href="'+c.link[1].href+'" class="gfimagen"><img src="'+c.content.src+'"/></a>')})}))}),0==g?(a(h+" .gfloading").remove(),a(h+" .gfslider").append('<div class="gfaviso">Álbum no encontrado</div>')):a(document).ready(function(){function b(){a(h+" .gfslider a:first-child").fadeOut(1e3).next("a").fadeIn(1e3).end().appendTo(h+" .gfslider")}function c(a){clearInterval(f),f=setInterval(b,a)}function d(){c(a(h+" .gfplay").hasClass("gfpausa")?"999999":e)}var f=setInterval(b,e);a(h+" .gfmas").click(function(){b(),d()}),a(h+" .gfmenos").click(function(){a(h+" .gfslider a:first-child").fadeOut(1e3),a(h+" .gfslider a:last-child").fadeIn(1e3).prependTo(h+" .gfslider"),d()}),a(h+" .gfplay").click(function(){a(this).hasClass("gfpausa")?a(this).removeClass("gfpausa").html("&#9658;"):a(this).addClass("gfpausa").html("||"),d()})})}).fail(function(){a(h+" .gfloading").remove(),a(h+" .gfslider").append('<div class="gfaviso">Usuario inexistente</div>')})})}})}(jQuery);
//]]></script>

Si tienes ya instalado jQuery la primera línea la tendrás que eliminar, ya que es la que precisamente carga esa librería. En cualquier caso, el plugin hay que situarlo tras la carga de jQuery para que funcione.


Formato de salida (CSS)


El estilo abulta casi más que el plugin, pero es lo que hace que todo quede muy monísimo, así que es necesario.

Lo podéis poner tal cual justo tras lo anterior para que en el caso de querer desinstalar todo os resulte más cómodo, pero tampoco estaría mal ponerlo en la parte del skin de la plantilla. En este último caso habría que quitar las etiquetas style del principio y el final.

<style>
.gfsliderwrap{position:relative;text-align:center;font-family:arial}
.gfslider{position:relative;width:100%;height:0;padding-bottom:56.25%;border:0 solid #000;border-top:50px solid #000;border-bottom:50px solid #000;border-radius:10px;box-sizing:border-box;overflow:hidden;background:#000;font-size:0;line-height:0;text-align:center}
.gfslider:before{content:"";display:inline-block;width:0;height:0;padding-bottom:56.25%;vertical-align:middle}
.gfalbum{position:relative;top:30px;color:#fff;z-index:1;text-align:center;display:block;line-height:20px;font-size:18px}
.gfslider a{display:none}
.gfslider a:first-child{display:block}
.gfslider img{position:absolute;top:0;bottom:0;left:0;right:0;margin:auto;padding:0;border:0;width:auto;height:100%;max-width:100%;max-height:100%}
a.gfimagen:hover .gftitulo{display:inline-block}
.gftitulo:before{content:"";width:0;height:100%;display:inline-block;vertical-align:middle}
.gfaviso{display:inline-block;font-size:22px;line-height:24px;margin-bottom:2px;padding:10px;box-sizing:border-box;color:#eee;background:#900;text-align:center}
a.gfmas,a.gfmenos,a.gfplay{display:inline-block;position:relative;bottom:40px;z-index:10;width:30px;height:30px;margin:0 10px;border-radius:50%;text-align:center;line-height:26px;font-size:30px;font-family:arial;color:#fff;background:rgba(255,255,255,.4);text-decoration:none;vertical-align:top}
a.gfplay{font-size:18px;line-height:30px}
.gfloading{display:inline-block;vertical-align:middle;width:80px;height:80px;margin:10px auto;border-width:30px;border-radius:50%;animation:spin 1s linear infinite;border-style:double;border-color:#ccc transparent;text-align:center}
.gfloading:before{content:"CARGANDO";font-weight:700;font-size:12px;line-height:80px;color:#c00}
@keyframes spin {100%{transform:rotate(359deg)}}
</style>


Activar el plugin para mostrar la presentación


A partir de tener todo lo anterior en la plantilla (o en un gadget), simplemente tendremos que añadir lo siguiente en un gadget HTML/JavaScript. También podríais añadirlo en la plantilla si va a ser un elemento fijo y común a todas las entradas, pero por cuestiones de peso no lo recomendaría.

Sólo hay que tener en cuenta que dónde pongamos esto será dónde saldrá el slider.

<div id='sliderpica'></div>
<script>
$(document).ready(function() {
$('#sliderpica').gfotosgal('113123294987767899361', 'Fotografía 2', 20, 3000);
//$('ID_CAJA_SALIDA').gfotosgal('ID_USUARIO', 'NOMBRE_ALBUM', NUM_IMAGENES, VELOCIDAD);
});
</script>

El comentario que puse al final intenta explicar como activar el plugin, pero de todas formas lo comento:

  • Lo primero que necesitamos es una caja vacía con una id (en el ejemplo #sliderpica)
  • A continuación iría la llamada al plugin indicando en primer lugar el nombre (id) utilizado para esa caja vacía
  • Luego la función que activa todo y que he bautizado como gfotosgal
  • Finalmente los parámetros configurables. En este orden:
    • número de usuario del propietario del álbum (ya vimos al principio del post como obtenerlo)
    • nombre de dicho álbum (literal, sensible a mayúsculas, minúsculas, acentos...)
    • número de imágenes máximas a cargar (el feed creo que soporta hasta 1000 y no es cuestión de leer todas innecesariamente)
    • velocidad de transición de las imágenes en milisegundos (en el ejemplo 3000 = 3 seg.).


¿Y cómo generamos dos o más presentaciones simultáneas? Pues simplemente creamos dos cajas vacías, cada una con su propia id y luego llamamos al plugin otras tantas veces. Cada vez usando la id correspondiente y los parámetros que gustemos para cada cual:

<div id='slider1'></div>
<div id='galeria2'></div>
<script>
$(document).ready(function() {
// $('ID_CAJA_SALIDA').gfotosgal('ID_USUARIO', 'NOMBRE_ALBUM', NUM_IMAGENES, VELOCIDAD);
$('#slider1').gfotosgal('113123294987767899361', 'Fotografía 2', 20, 3000);
$('#galeria2').gfotosgal('113123294987767899361', 'Naturaleza', 20, 4000);
});
</script>


Observaciones


Este plugin sólo es para los álbumes que originalmente estuvieran en Picasa. Los que se hubieran creado directamente en Google+ o Google Fotos, no se pueden cargar con este código.

Los álbumes privados y los auxiliares de fotos del perfil, Blogger, etc. tampoco se podrán cargar porque sólo son visibles para el propietario. En caso de duda abrir la página de álbumes sin estar logueados o con un navegador en modo incógnito, y así podréis ver fácilmente qué álbumes están disponibles de manera pública.

Este código funcionará mientras el feed del que se aprovecha siga existiendo. Si alguna vez es eliminado ya no se podrán leer las imágenes. Se podrá sólo si es sustituido por otro con los datos necesarios, pero habría que modificar el plugin en la parte en la que se indica la dirección del feed a leer.


Demo


Para que se vea que también funciona en el blog, ahí va la demostración para que no me digáis que sólo es un dragón.

¿Vemos otro post al azar por si le encuentras utilidad o quizás prefieres ser más metódico y suscribirte a nuestras entradas por correo? También puedes imprimir este artículo y por supuesto compartirlo en redes sociales si fue de tu agrado.

Compartir
Copy URL

Y muchos más artículos interesantes si nos sigues en...

follow us in feedly

4 comentarios :

  1. Muchas gracias por mantener el blog actualizado con todos los cambios que van llegando. ¡Tus entradas son muy útiles y están muy bien explicadas, felicidades por el buen trabajo!

    Saludos :)

    ResponderEliminar
  2. Y ahora que Picasa ha desaparecido, ¿qué servicio usamos para incrustar nuestras fotos en nuestro blog?

    ResponderEliminar
    Respuestas
    1. Ninguno en especial. Directamente súbelas desde el editor de entradas. Eso ya las almacena automáticamente en Google Fotos.

      Eliminar