Presentazione delle immagini per gli album di Picasa dopo la sua chiusura

È passato un bel po' di tempo da quando Google ha annunciato il ritiro di Picasa  per concentrarsi su Google Foto, e così ha fatto. Ora è il turno dell'API di Google Feed (29 settembre) e, con la sua scomparsa , anche le presentazioni di immagini di Picasa incorporate sul web smetteranno di funzionare . La cattiva notizia è che non esiste un equivalente in Google Foto.

Da un lato, c'era l'utilità di Picasa che permetteva di  inserire foto e album , e dall'altro il gadget Presentazione di Blogger ,   che alimentava anch'esso Picasa. Uno non esiste più, e l'altro dovrebbe avere ben poco da offrire – se non è già morto al momento della pubblicazione di questo post – a causa del ritiro della suddetta API. In ogni caso, entrambi sono nelle fasi finali del loro ciclo di vita.

La buona notizia è che non ci sono stati problemi con le immagini stesse, poiché sono state migrate da un servizio all'altro, e   gli album sono ancora accessibili  tramite un'utilità creata appositamente. Quelle caricate da Blogger, Google+ e Hangouts sono state conservate, quindi tutti possono stare tranquilli: le immagini del blog sono ancora al sicuro e funzionanti. Stiamo parlando solo dei gadget di presentazione.

Un avvertimento: i link alle immagini funzionano ancora finché sono associati al tuo ID utente (non al tuo nome utente). Puoi trovare maggiori informazioni su tutto questo nella Guida di Picasa: Cosa sta succedendo con Picasa e Picasa Web Album?

Quindi, ho iniziato a cercare un'alternativa che non utilizzasse ciò che sta scomparendo e, fortunatamente, ho trovato un  feed relativo agli album migrati. Non è troppo complicato creare una presentazione fatta in casa con esso.

Diamo un'occhiata.

Il feed da cui puoi caricare tutti i dati delle immagini che avevi in Picasa e trasferito su Google Foto ha il seguente formato:

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

Il nome utente è quello dell'account Google associato e puoi scoprire il tuo in almeno due modi:

  • Dopo aver effettuato l'accesso a Google, hai visualizzato il nuovo indirizzo dell'archivio album di Picasa, ovvero  https://get.google.com/albumarchive . Anche il vecchio indirizzo,  http://picasaweb.google.com, ora ti reindirizza allo stesso indirizzo. Se provi i link sopra, vedrai che il tuo nome utente viene aggiunto automaticamente alla fine dell'indirizzo.
  • Vai su https://plus.google.com >> Profilo >> Fai clic con il pulsante destro del mouse >> Copia indirizzo link... ma anche se può sembrare il contrario, la prima opzione è la più semplice.
Plugin jQuery

Il feed generale di cui parlavo prima include anche i rispettivi indirizzi di altri feed che ci permettono di accedere ai dati di ciascun album in modo indipendente. Quindi, in pratica, il plugin legge il feed generale tramite JSON in base all'ID utente, individua il feed specifico per un album in base al nome e infine legge e visualizza i dati (immagini e un link all'album in Google Foto).
Il resto aggiunge semplicemente i livelli necessari alla pagina per applicare il sistema di stili e slider . Quest'ultimo non è altro che una piccola evoluzione del più semplice slider jQuery , già noto qui .
Può essere inserito in un template (vedi dove è possibile inserire JavaScript in Blogger ) o in un gadget HTML/JavaScript. Funzionerà in entrambi i casi, ma nel secondo caso bisogna fare attenzione a posizionarlo in modo che si carichi prima di quello che vedremo più avanti.
Qui è ridotto in dimensioni, ma se volete vederlo più chiaramente, avete tutto allungato in questo CodePen .

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js'></script>
<!-- Plugin cursore automatico album 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">‹</a><a href="javascript:void();" class="gfplay">►</a><a href="javascript:void();" class="gfmas">›</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="gfimage"><img src="'+c.content.src+'"/></a>')})}))}),0==g?(a(h+" .gfloading").remove(),a(h+" .gfslider").append('<div class="gfaviso">Album non trovato</div>')):a(document).ready(function(){function b(){a(h+" .gfslider a:primo-figlio").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("gfpause")?"999999":e)}var f=setInterval(b,e);a(h+" .gfmas").click(function(){b(),d()}),a(h+" .gfmenos").click(function(){a(h+" .gfslider a:primo-figlio").fadeOut(1e3),a(h+" .gfslider a:ultimo-figlio").fadeIn(1e3).prependTo(h+" .gfslider"),d()}),a(h+" .gfplay").click(function(){a(this).hasClass("gfpausa")?a(this).removeClass("gfpausa").html("►"):a(this).addClass("gfpausa").html("||"),d()})})}).fail(function(){a(h+" .gfloading").remove(),a(h+" .gfslider").append('<div class="gfaviso">Utente inesistente</div>')})})}})}(jQuery);
//]]></script>

Se hai già jQuery installato, dovrai eliminare la prima riga, poiché è quella che carica la libreria. In ogni caso, il plugin deve essere inserito dopo il caricamento di jQuery affinché funzioni.

Formato di output (CSS)

Lo stile è quasi più grande del plugin stesso, ma è ciò che rende tutto così carino , quindi è necessario.
Puoi aggiungerlo così com'è subito dopo il precedente, così è più comodo se vuoi disinstallare tutto, ma non sarebbe male aggiungerlo anche alla sezione skin del template. In quest'ultimo caso, dovresti rimuovere i tag di stile dall'inizio e dalla fine.

<style>
.gfsliderwrap{posizione:relativa;allineamento testo:centro;famiglia caratteri:arial}
.gfslider{posizione:relativa;larghezza:100%;altezza:0;padding-bottom:56,25%;bordo:0 solido #000;bordo-superiore:50px solido #000;bordo-inferiore:50px solido #000;raggio bordo:10px;dimensione riquadro:bordo-box;overflow:nascosto;sfondo:#000;dimensione carattere:0;altezza riga:0;allineamento testo:centro}
.gfslider:before{contenuto:"";display:inline-block;larghezza:0;altezza:0;padding-bottom:56,25%;allineamento verticale:centro}
.gfalbum{posizione:relativa;alto:30px;colore:#fff;indice z:1;allineamento testo:centro;display:blocco;altezza riga:20px;dimensione carattere:18px}
.gfslider a{display:none}
.gfslider a:primo figlio{display:blocco}
.gfslider img{posizione:assoluta;alto:0;basso:0;sinistra:0;destra:0;margine:auto;imbottitura:0;bordo:0;larghezza:auto;altezza:100%;larghezza massima:100%;altezza massima:100%}
a.gfimage:hover .gfttitle{display:inline-block}
.gfttitle:prima{contenuto:"";larghezza:0;altezza:100%;display:inline-block;allineamento verticale:centro}
.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:"LOADING";font-weight:700;font-size:12px;line-height:80px;color:#c00}
@keyframes spin {100%{transform:rotate(359deg)}}
</style>

Attiva il plugin per visualizzare la presentazione

Una volta inserito tutto quanto sopra nel template (o in un gadget), aggiungi semplicemente quanto segue a un gadget HTML/JavaScript. Potresti anche aggiungerlo al template se intendi usarlo come elemento fisso comune a tutti i post, ma per motivi di peso, non lo consiglierei.
Tieni presente che lo slider apparirà ovunque tu inserisca questo .

<div id='sliderpica'></div>
<script>
$(document).ready(function() {
$(' #sliderpica ').gfotosgal(' 113123294987767899361 ', ' Fotografia 2 ', 20 , 3000 );
//$('ID_CAJA_SALIDA').gfotosgal('ID_USER', 'NOMBRE_ALBUM', NUM_IMAGES, SPEED);
});
</script>

Il commento che ho pubblicato alla fine tenta di spiegare come attivare il plugin, ma lo menziono comunque:

  • La prima cosa di cui abbiamo bisogno è una casella vuota con un id (nell'esempio #sliderpica )
  • Successivamente ci sarebbe la chiamata al plugin, indicando prima il nome (id) utilizzato per quella casella vuota
  • Poi la funzione che attiva tutto e che ho chiamato gfotosgal
  • Infine, i parametri configurabili. In questo ordine:
    • Numero utente del proprietario dell'album (abbiamo già visto come ottenerlo all'inizio del post)
    • nome dell'album in questione (letterale, con distinzione tra maiuscole e minuscole, con distinzione tra accenti...)
    • numero massimo di immagini da caricare (credo che il feed ne supporti fino a 1000 e non si tratta di leggerle tutte inutilmente)
    • velocità di transizione dell'immagine in millisecondi (nell'esempio 3000 = 3 sec.).

E come generiamo due o più presentazioni simultanee? Creiamo semplicemente due box vuoti, ognuno con il proprio ID, e poi richiamiamo il plugin più volte. Ogni volta utilizzando l'ID corrispondente e i parametri che desideriamo per ciascuno:

<div id='slider1'></div>
<div id='galeria2'></div>
<script>
$(document).ready(function() {
// $('ID_CAJA_SALIDA').gfotosgal('ID_USER', 'NOMBRE_ALBUM', NUM_IMAGENES, VELOCITY);
$('#slider1').gfotosgal('113123294987767899361', 'Fotografia 2', 20, 3000);
$('#galeria2').gfotosgal('113123294987767899361', 'Natura', 20, 4000);
});
</script>

Osservazioni

Questo plugin è compatibile solo con gli album originariamente presenti in Picasa. Quelli creati direttamente in Google+ o Google Foto non possono essere caricati con questo codice.
Anche gli album privati e gli album ausiliari di foto del profilo, Blogger, ecc. non possono essere caricati perché sono visibili solo al proprietario. In caso di dubbi, apri la pagina degli album senza effettuare l'accesso o utilizzando un browser in incognito. In questo modo, puoi facilmente vedere quali album sono disponibili pubblicamente.
Questo codice funzionerà finché il feed che sfrutta continuerà a esistere. Se viene eliminato, le immagini non saranno più leggibili. Ciò sarà possibile solo se il feed verrà sostituito con un altro con i dati necessari, ma il plugin dovrà essere modificato nella sezione che indica l'indirizzo del feed da leggere.

fonte

Commenti

nome-foto