Albumele Picasa în paginile noastre HTML


Ai un sit. Spaţiu: 40MB, sau poate 200MB ori mai mult. Dacă publici pozele în spaţiul tău, îl consumi rapid (dacă sunt multe), plus că trebuie să le publici la dimensiuni mici. Atunci publici extern (Picasa, Flickr, DivShare şi alte n soluţii), dar aceasta înseamnă că vizitatorii trebuie să îţi părăsească situl pentru a vedea fotografiile. Şi atunci? Ei bine, Google pune multe API-uri la dispoziţie, unul fiind şi pentru Picasa Web Albums (PWA). De când a fost deschis acest API am văzut unele aplicaţii lansate ce fructifică facilitatea, dar personal mă aşteptam la mai mult, la rezultate mai spectaculoase. Vă invit să fructificăm astăzi API-ul de la PWA. Idealul nostru: să putem include uşor un album, sau toate albumele, într-o pagină a propriului sit. La drum!

Mai întâi teoria. Documentaţia o găsiţi aici. Pagina Google nu pot să spun că este teribil de informativă dar o bază solidă asigură. În materialul nostru ne vom folosi de contul test.cnet.ro cu fotografiile vizibile aici. Accesul la informaţie se face prin feed-uri. Mai jos avem două feed-uri ca exemplu. Primul ne oferă informaţii despre albumele utilizatorului test.cnet.ro. Al doilea ne oferă informaţii despre fotografiile din albumul Negreni. Ca flux RSS, ceea ce veţi vedea (depinde cu ce deschideţi fluxul), va arăta mai mult a XML, dar noi vom merge pe JSON. Să nu ne grăbim. Legat de feed-uri, din documentaţie aflăm diverse lucruri utile. Cu parametrii la feed putem specifica să "recepţionăm" doar albumele publice (cele private cer desigur acces autentificat), începând de la albumul al n-lea, în total m (foarte util pentru a organiza pe pagini când sunt mai multe albume).

picasaweb.google.com/data/feed/api/user/test.cnet.ro?kind=albums
picasaweb.google.com/data/feed/api/user/test.cnet.ro/album/Negreni?kind=photo

Ar fi util să studiem componenţa unui feed, pentru a ne face o idee cât mai clară despre ce date furnizează API-ul PWA. Să luăm primul feed. După informaţiile gen "antet" avem informaţiile per album. Iată feed-ul mai jos. Unde sunt puncte puncte am sistat o parte din informaţie. În speranţa că puteţi înţelege ceva din imaginea micşorată mai jos să observăm câte informaţii ne oferă Google. Cele din "antet" le-am sărit mai jos, am lăsat doar ultimul entry pentru albumul Negreni. Tagul title ne oferă numele albumului: Negreni. Tagul summary ne oferă descrierea albumului: La Negreni. Observaţi, informaţiile se repetă şi în media:group (mai bine de două ori decât niciodată, nu?). Dacă vrem să afişăm lista albumelor tot ce trebuie să facem este să mergem din entry în entry, să afişăm titlul, eventual descrierea, să extragem data (published) şi locaţia (gphoto:location), ori poate şi numărul de fotografii (gphoto:numphotos). Dacă vrem să afişăm şi "coperta" albumului o găsim în media:group, media:thumbnail. Hehe, avem tot ce ne trebuie pentru a afişa lista albumelor.

img95

Dar concret cum o extragem? La modul generic, Google foloseşte protocolul GData. Interacţiunea prin acest protocol se poate face în mai multe moduri: Java, .NET, PHP, Python, Objective-C sau JavaScript. Iniţial am fost tentat să încerc cu PHP, dar acolo se sugerează integrarea cu o librărie Zend… poate altădată. Să pornim de la ce este mai simplu: HTML cu JavaScript! Nu sunt multe opţiuni: JSON. Pagina tocmai indicată se termină cu un exemplu de la care am pornit. Vă invit să îl vedeţi. Voi continua însă cu abordarea mea. Esenţial este să avem un DIV în care vom afişa informaţiile de pe Picasa.

<div id="spatiupicasa"></div>

În acest DIV, manipulând DOM-ul, vom pune într-o primă etapă lista albumelor. Tot ceea ce este descris în acest articol poate fi descărcat la final ca o arhivă pentru teste locale, aşa că în continuare voi folosi doar secvenţe de cod. Pentru a cere albumele vom apela funcţia listaAlbume("test.cnet.ro",0). Iată corpul funcţiei:

function listaAlbume(user,salt){
  document.getElementById("spatiupicasa").innerHTML = 
    "<img src="imagini/animatie.gif" hspace="20" align="absMiddle" />Se incarca...";
  offseta= salt;
  script = document.createElement(’script’);
  script.setAttribute(’src’,’http://picasaweb.google.com/data/feed/api/user/’+user+
    ’?kind=album&alt=json-in-script&callback=extrageAlbume’);
  script.setAttribute(’id’, ’jsonScript’);
  script.setAttribute(’type’, ’text/javascript’);
  document.documentElement.firstChild.appendChild(script);
}

Câteva observaţii. În primul rând în DIV-ul nostru punem o animaţie şi un text care va crea impresia de AJAX 😉 . Parametrul salt, pentru offseta (offset albume) ne spune de la care album începem (iniţial de la zero, apoi din catealbume în catealbume). În fine, să sesizăm faptul că în apelul feed-ului am folosit alt=json-in-script şi apoi am indicat funcţia ce prelucrează feed-ul (adică extrageAlbume). Funcţia listaAlbume scrie de fapt o secvenţă <script…></script>. Să vedem acum funcţia extrageAlbume. Pentru a fi mai scurţi vom vedea direct partea unde se afişează albumele, într-un tabel. Iată deci funcţia fără partea de navigare (dacă sunt mai multe abume decât catealbume):

var feed = root.feed;
var text = "";
...
text += "<table width=100% align=center cellpadding=3 cellspacing=0 border=0>";
for (var i = 0; (i < feed.entry.length) && (i<offseta*catealbume); ++i) {
  }
for (; i < feed.entry.length; ++i) {
  var entry = feed.entry[i];
  text += "<tr><td valign=top><a href=# onClick=’javascript:listaPoze(’""+
  entry.gphoto$user.$t+"’",’""+entry.gphoto$name.$t+"’",0);’><img src="+
  entry.media$group.media$thumbnail[0].url+" style=’border:2px solid "+culoareb+
  "’></a></td><td valign=top width=90%>";
  text += "<strong>"+entry.title.$t+"</strong><br><br>"
  text += "Fotografii: "+entry.gphoto$numphotos.$t+"<br>";
  cand = entry.published.$t;
  cand = cand.substr(0,10);
  cand = (cand.substr(8,2)-0)+" " +lunile[cand.substr(5,2)-0]+" "+cand.substr(0,4);
  text += "Data: "+cand+"<br>";
  if(entry.gphoto$location.$t!="")
    text += "Locatie: "+entry.gphoto$location.$t+"<br>";
  if(entry.summary.$t!="")
    text += "Descriere: "+entry.summary.$t+"<br>";
  text += "</td></tr>";
  if(i > ((catealbume-2)+offseta*catealbume))
    break;
}
text +="</table>";
document.getElementById("spatiupicasa").innerHTML = text;

Să vedem pe scurt ce face funcţia. În variabila feed avem rezultatul oferit de API, în format JSON. Este simplu să aflăm acum orice element. Deschidem un tabel şi dacă este nevoie sărim peste primele albume (ex: avem 35 de albume, afişăm câte 10 în pagină; dacă suntem în pagina 2 trebuie să sărim peste primele 10 albume). Continuăm apoi bucla, din care ieşim forţat când am afişat numărul de albume corespunzător. Câte albume avem? Simplu: feed.entry.length. Punem datele unui album într-o variabilă: entry = feed.entry[i] şi astfel putem uşor să accesăm diverse elemente: numărul fotografiilor din respectivul album îl aflăm cu entry.gphoto$numphotos; titlul albumului cu entry.title.$t. Pentru a şti ce şi cum să extrageţi trebuie să vizualizaţi un fişier JSON. Eu m-am folosit de JSON Viewer despre care am scris astăzi.

img96

La click pe o poză am definit similar, în loc de listaAlbume funcţia listaPoze. Nu o voi detalia, dar este evident similară. Ea apelează funcţia extragePoze. Această funcţie extrage fotografiile unui album indicat ca parametru. În fine, un click pe poză apelează funcţia extragePoza care apelează funcţia listaPoza. Dacă veţi cerceta sursa veţi mai găsi o singură funcţie în plus, square. Ce face această funcţie? Dacă vă uitaţi mai sus veţi observa parametrul url. Poza originală se află la

http://lh6.google.com/test.cnet.ro/RkYOO5IxNQE/AAAAAAAAAGc/hKKy6-ly0n4/Negreni.jpg

Google oferă numeroase versiuni pentru imagine (pentru ca să nu facem noi scalarea imaginii). Detalii găsiţi aici. Dacă înainte de /Negreni.jpg punem /s144 atunci vom avea o versiune de lăţime sau înălţime 144px. Evident /s288 va face de 288 px. Există scalări normale: 72, 144, 200, 288, 320, 400, 512, 576, 640, 720, 800, 912, 1024, 1152, 1280, 1440, 1600. Doar până la 800 o imagine poate fi inserată (embedded). Mai există apoi scalările cu crop, adică imaginea rezultată este pătrată: 32, 48, 64 şi 160. Pentru aceasta se indică /s32-c sau /s160-c… Funcţia square o folosesc pentru a şti dacă pun acel "-c" sau nu.

Aş mai putea să vă expun lungi secvenţe de cod (deşi funcţiile sunt totuşi decent de scurte) dar intenţia mea nu este să vă plictisesc. Am dorit să expun un minim de cod pentru a vă convinge cât de uşor este de folosit API-ul PWA cu HTML+JScript+JSON. Viteza mi se pare incredibilă (comparată cu soluţiile PHP). Aveţi mai jos capturate cele trei momente: 1) lista albumelor; 2) un album; 3) o fotografie.

img97

Codul are o parte configurabilă, astfel că se poate schimba: câte linii de imagini să fie, câte imagini într-o linie, câte albume într-o pagină, ce dimensiune să aibă imaginea mare, cea mică şi cea foarte mică (ce apare sub cea mare). Cu acelaşi cod am putut obţine şi captura de mai jos.

img98

Dar acest script poate fi folosit şi pentru a introduce PWA într-un sit existent. Mai mult, în cod veţi găsi posibilitatea de a introduce într-o pagină toate albumele de pe Picasa, dintr-un cont, sau doar un album. Totul depinde de variabilele user şi album. Dacă lăsaţi album gol (adică "") atunci se vor afişa toate albumele. Iată o captură demonstrativă.

img99

Vă invit acum să vedeţi live cum funcţionează ceea ce am descris. Click deci pe Test 1, Test 2, Test 3 (primele trei variază dimensiunea imaginilor şi gruparea în pagină), Test 4 (simulare de integrare într-un design de test), Test 5 (cu icoane bizantine). Puteţi descărca toate testele într-o arhivă, pentru a studia codul. Puteţi modifica codul (poate chiar corecta? eu nu am sesizat bug-uri, dar nu mă consider programator perfect), îmbunătăţi sau adapta după nevoile Dvs. Eu nu l-am scris cu gândul că poate fi utilizat de cineva, dar… cine ştie? Codul are o limitare: nu se poate oferi un link direct spre un album sau spre o poză. Manipulându-se DOM-ul unicei pagini, aceasta rămâne mereu aceeaşi ca URL. Puteţi fie să inseraţi câte un album într-o pagină HTML, fie să modificaţi codul pentru ceea ce doriţi. Succes!

PS: codul poate fi uşor adaptat pentru WordPress. Într-un minut l-am transformat în plugin WP.


Apreciază articolul:

1 stea2 stea3 stea4 stea5 stea (3 evaluări, media: 5,00 din 5)
Loading...Loading...

4 comentarii

  1. jürgen.toth spune:

    Articolul e tare! Si munca ta in programare, desigur! Am cautat si inca mai caut exemple de implementari ale albumelor Picasa in site-uri si mai ales in WP. Ieri am dat de un plugin wp-picasa (http://zechs.dyndns.org/wordpress/?page_id=207), care promite, a functionat foarte usor la mine. Si totusi cand urmeaza pluginul wp-picasa a la Capan? Eu am incercat mai multe minute si nu mi-a iesit! :(

  2. radu.capan spune:

    Cred ca exista vreo 5-10 pluginuri WP pentru Picasa. Majoritatea nu functioneaza, autorii nu le-au mai actualizat (probabil Google a schimbat API intre timp). Singurele functionale au fost cateva widgeturi WP, interesante dar evident limitate (adica nu afiseaza albume, ci doar aleator cateva poze). Voi reveni mai pe larg…

  3. bogdan spune:

    Puteti incerca si plugin-ul meu: http://bogde.ro/computers/picasa-lightbox.htm

    Permite cautarea in albumele publice Picasa si introducerea pozelor in post-uri sau pagini. Afisarea se face cu plugin-ul LightBox. Apreciez orice comentariu.

  4. lys3rg0 spune:

    Interesant articolul, m-a ajutat sa fac un tag bbcode picasa pentru forum…


Lasă un răspuns

Adresa ta de email nu va fi publicată. Câmpurile necesare sunt marcate *