Flickr este, fără îndoială, cel mai mare și cel mai bun site de fotografie din Internet. Există o mulțime de widget-uri, insigne și plugin-uri care vă permit să afișați cele mai recente fotografii Flickr pe site-ul dvs., dar vom face un pas mai departe prin atingerea directă în Flickr și integrarea fluxului dvs. de fotografii în site-ul dvs., oferindu-vă o galerie foto este o briza de actualizat.
Vom crea această galerie foto utilizând API-ul Flickr și phpFlickr. Dacă literele "A, P & I" sunt suficiente pentru a vă lăsa frica în inimă, nu vă faceți griji, vom lua lent și vom da exemple complete de cod pe care le puteți copia.
De asemenea, Flickr a lansat recent The App Garden, care este o prezentare de instrumente, jucării și site-uri care utilizează API-ul Flickr pentru a oferi ceva util sau distractiv. Odată ce te-ai ocupat de utilizarea API-ului, îți poți lăsa imaginația să inventeze o nouă modalitate de a-l utiliza și trimite aplicația.
Pentru acest tutorial presupun că aveți deja un cont Flickr și accesați un server care rulează PHP și PEAR.
Cheia dvs. API este propria dvs. serie unică de numere și litere care vă oferă acces la serviciile Flickr. Accesați aici: http://www.flickr.com/services/apps/create/apply/
Aici trebuie să decideți dacă intenționați să utilizați Flickr în scopuri comerciale sau necomerciale. Flickr oferă explicații bune cu privire la care ar trebui să alegeți, probabil că veți avea nevoie de o cheie API non-comercială, ceea ce aleg pentru acest demo.
Urmați pașii și completați toate detaliile.
Ar trebui apoi să vi se prezinte cheia dvs. unică, care va apărea ca o serie de numere aleatorii și litere cum ar fi:
Veți vedea și un număr numit "Secret"; ignora asta pentru moment. Pentru acest exercițiu avem nevoie doar de cheia; faceți o notă de la ea, deoarece vom avea nevoie de ea în curând.
Dacă utilizați API-ul pentru a construi mai târziu un instrument sau un site răcoros, este posibil să doriți să trimiteți și să prezentați tot ce construiți în Glick App pentru Flickr. Puteți să dați clic pe "Modificați detaliile aplicației" pentru a completa informațiile.
Acordați o atenție deosebită sfaturilor și sfaturilor oferite în Termenii de utilizare API și în Ghidul comunității, dacă îl abuzați, o veți pierde.
Acum, la chestiile interesante ...
phpFlickr este un proiect al lui Dan Coulter. Este o clasă scrisă în PHP, care acționează ca un înveliș pentru API-ul Flickr. Fișierele procesează datele furnizate de Flickr și arhivele returnate în PHP, pe care le folosim pentru a afișa fotografiile noastre
Trebuie să descărcăm fișierele pe care le vom include ulterior pe pagina noastră de internet și vom face toată munca complicată pentru noi. Accesați phpflickr.com sau treceți direct la pagina de descărcare de pe Google Code. În această demonstrație, vom folosi fișierul zip: phpFlickr-2.3.1 (zip)
Descărcați și dezarhivați-l. Pentru acest tutorial, avem nevoie doar de folderul PEAR și de fișierul phpFlickr.php. Încărcați fișierele în directorul dvs. Web
Acum avem tot ce trebuie să ne conectăm cu Flickr și să preluăm fotografiile noastre. Vom face două pagini: una pentru a afișa miniaturile noastre și una pentru a afișa fotografia. Tot codul va fi disponibil ca pagini complete la sfârșitul tutorialului.
Aceste exemple de coduri funcționează pe baza faptului că fișierele dvs. se află la rădăcina serverului dvs. - sau toate în același folder. Înainte de orice altceva, trebuie să creăm un dosar cache pentru ca phpFlickr să funcționeze corect. Creați un director numit "cache" în directorul dvs. web și acordați permisiuni de scriere (CHMOD 777).
Acum vom construi o pagină care afișează miniaturile noastre și are o anumită paginare. În galeria de exemplu, acesta este index.php - și arată astfel.
Înainte de a merge mai departe, trebuie să setăm două variabile principale în fișierul config.php.
Deschideți config.php. Veți vedea că doar cere două lucruri: cheia dvs. API și numele dvs. de utilizator Flickr.
Mai întâi, introduceți cheia dvs. API - mulțimea aleatorie lungă de numere și litere care ați fost date mai devreme de Flickr. Păstrați informațiile dvs. în interiorul cotațiilor.
// introduceți cheia API $ key = "INTRODUCEȚI APLICAREA API FLICKR AICI";
Acum, pentru numele dvs. de utilizator Flickr; acesta nu este numele dvs. de conectare Yahoo sau numele de ecran Flickr - dar numele de utilizator pe care îl utilizați pentru Flickr în sine. Pentru a verifica dublu, conectați-vă la Flickr și căutați în partea de sus a paginii unde scrie "Ați fost semnat ca ..." - acesta este numele dvs. de utilizator. Deci, să spunem numele de utilizator ca o variabilă:
// introduceți numele de utilizator Flickr $ username = "FLICKR USERNAME AICI";
Salvați modificările în config.php și încărcați - nu trebuie să aveți din nou fișierul respectiv.
Pe pagina însăși. Iată o descriere a ceea ce facem în partea de sus a paginii, care arată totul pregătit pentru acțiune:
Vom include câteva legături anterioare și următoare cu un mic cod de mai jos în pagină. Miniaturile pe care le vom arăta depind de ce pagină suntem, așa că rulam o simplă declarație if care va lua numărul paginii noastre. Dacă există o interogare "fpage" în url, utilizați-o. Dacă nu, suntem pe prima pagină.
Apoi vom include fișierul phpFlickr de bază care are tot ce ne trebuie în comunicarea cu Flickr.
// inclue fișierul core requ_once ('phpFlickr.php');Acum lansăm o nouă clasă din fișierul phpFlickr folosind cheia API pe care am primit-o mai devreme.
// Încărcați principala clasă phpFlickr $ f = new phpFlickr (cheia $);phpFlickr utilizează caching-ul pentru a accelera procesul. Există opțiuni de utilizare a unei tehnici baze de date, dar pentru acest tutorial vom folosi opțiunea mai simplă de dosar cache. Avem nevoie de un dosar numit "cache" care să poată fi scris, ceea ce înseamnă că sistemul are acces la el și poate modifica conținutul acestuia. Pentru aceasta, setați permisiunile dosarelor la 777 prin intermediul programului dvs. FTP. Apoi adăugăm această linie pentru ao activa:
$ f-> enableCache ("fs", "cache");Apelăm metoda people_findByUsername care returnează un array:
$ result = $ f-> people_findByUsername ($ username);De asemenea, avem nevoie de id-ul dvs. de utilizator unic (idul dvs. Flickr care arată astfel: 11221312 @ N00, declarat aici ca $ nsid) pe care îl primim astfel:
// luați un id de utilizator unic din $ result array $ nsid = $ result ["id"];Apoi, numim metoda people_getPublicPhotos, care returnează din nou o matrice pe care o vom numi $ photos. În această linie, trecem și prin ID-ul pe care l-am primit în linia de mai sus ($ nsid). NULL se referă la opțiunea "extra", care nu ne interesează chiar acum. De asemenea, indicăm numărul de miniaturi pe care dorim să le afișăm (21) și trecem prin pagina pentru a începe (pagină $) care se referă la variabila de pagină din partea de sus a paginii:
$ photos = $ f-> people_getPublicPhotos ($ nsid, NULL, NULL, 21, pag. $);Ultimul bit pe care trebuie să-l setăm este un pic de informații de care avem nevoie pentru ca paginarea să funcționeze. Accesăm tabloul de fotografii $ creat mai sus și tragem numărul total de pagini plus numărul total de fotografii din fotografia noastră:
$ pages = $ photos [fotografii] [pagini]; // returnează numărul total de pagini $ total = $ photos [photos] [total]; // returneaza cate fotografii exista in total?>Observați că închidem secțiunea php de aici cu?> Acum avem tot ce avem nevoie pentru a obține primele 21 de miniaturi de la Flickr și pentru a le afișa. Vom continua cu pagina acum, adăugând câteva html, folosind PHP pentru a afișa imaginile și includeți câteva linkuri simple de paginare. Deci, haideți să începem prin scrierea unor html de bază.
Nettuts Flickr Galerie Demo Galeria mea de fotografii
Nimic neobișnuit aici; doar setarea html și pornirea unei zone pentru miniaturi. Următorul pas este de a umple divul nostru numit "thumbs" cu miniaturile noastre, cum ar fi:
Rețineți că deschidem php din nou cu
Vom folosi o buclă foreach pentru a rula prin matricea de fotografii $ și pentru a ajunge la elementul foto ($ photo), care conține informațiile de care avem nevoie pentru miniaturi.
Consultați comentariile din cod pentru a explica ce se întâmplă:buildPhotoURL ($ foto, "Square"). \ "/>" /> "[link] echo" "; // end loop?>"Aproape am terminat cu pagina principală. Sunt șanse, aveți mai mult de 21 de fotografii în Photostream; așa că trebuie să adăugăm o anumită paginare cu câteva legături precedente și următoare pentru a putea trece la următoarele 21 de miniaturi. Link-urile arată astfel:
Acest cod se bazează pe linia pe care am avut-o în partea de sus numind variabila de pagină $. Când codul nostru sună în fotografiile de pe Flickr, folosește de asemenea și variabila de pagină $ pentru a ști de unde să înceapă - uita-te înapoi la linia unde am numit 'people_getPublicPhotos' și vei vedea că am trecut și în variabila de pagină $ acolo . Această valoare este coloana vertebrală a acestui aranjament mic de paginare. Vom deschide un paragraf cu id-ul "nav", vom deschide etichetele PHP și vom defini variabilele noastre "înapoi" și "următor":
Apoi, vom gestiona link-urile reale 'Anterior' și 'Următor' verificând că nu suntem pe prima sau ultima pagină, închiderea php și închiderea etichetei 'p'.
// dacă nu este prima pagină dacă ($ page> 1) echo "« Anterior"; // dacă nu ultima pagină dacă ($ page! = $ pages) echo"Următor → »";?>Acum ne referim la unele valori pe care le-am avut la început pentru a afișa ceva mai mult despre locul în care suntem în galerie:
Pagină $ $ a paginilor $"ecou"$ totală de fotografii în galerie
";>>Și pentru a respecta termenii lui Flickr și a termina pagina, vom adăuga:
Acest produs utilizează API-ul Flickr, dar nu este aprobat sau certificat de Flickr.
Este tot ceea ce avem nevoie pentru a produce o pagină care afișează cele mai recente 21 de fotografii ca miniaturi cu o simplă navigare Prev / Următor. La fel ca pagina de pornire de pe demo. Următoarea pagină: pagina care afișează fotografia noastră.
Pasul 5 - Creați o pagină pentru afișarea fotografiilor unice
Acum, că avem miniaturile noastre, avem nevoie de o pagină pentru a afișa imaginea completă atunci când faceți clic pe ea. Aici este codul pentru photo.php, pe care link-ul de miniaturi. Începem această pagină în mod similar cu pagina indexului, dar în loc de numărul paginii, dorim ca id-ul fotografiei care a fost transmis în url din pagina noastră cu miniaturi:
enableCache ("fs", "cache");Acum trebuie să strângem câteva informații de la Flickr despre fotografia cum ar fi numărul de identificare al fotografiei, dimensiunile acesteia, unde se află în raport cu alte fotografii (context) și url imaginii.
/ / accesați metoda getInfo, trecând în id-ul fotografiei $ photo = $ f-> photos_getInfo ("$ id", $ secret = NULL); // treceți id-ul fotografiei în metoda getSizes pentru a obține dimensiunile imaginii noastre $ photosize = $ f-> photos_getSizes ("$ id", $ secret = NULL); // vrem dimensiunile dimensiunilor medii pe care le obținem din matricea de imagini $ în linia anterioară $ size = $ photosize [3]; // reintroduceți din nou id-ul fotografiei prin contextul care ne spune ce fotografii sunt înainte și după id $ context = $ f-> photos_getContext ("$ id"); // metoda buildPhotoURL face exact ceea ce v-ați aștepta - construiți URL-ul fotografiei, trecem în $ photo și mărimea de care avem nevoie pentru a returna adresa URL a imaginii, de ex. http://farm4.static.flickr.com/3108/3175330082_0bf4b22e47.jpg $ photoUrl = $ f-> buildPhotoURL ($ foto, "Mediu"); // Aceasta ne spune cine este proprietarul fotografiei. // Aceasta este o parte importantă pentru includerea așa cum dorim ca galeria noastră să afișeze numai fotografiile noastre și să nu tragă în fotografiile altor utilizatori - mai mult o explicație despre asta în notele de la sfârșit $ owner = $ photo ["owner"] ["nume de utilizator"]; // Vrem doar fotografia daca ne apartine - asa ca daca numele de utilizator este acelasi ca si proprietarul fotografiei ... vom scrie pagina si vom arata // mai multe informatii despre aceasta la sfarsitul tutorialului daca ($ username == $ proprietar) ?>Acum suntem pregătiți pentru restul paginii cu biții suculenți.
Galerie foto
$ Fotografie [titlu]"; // Fotografia în sine, veți recunoaște $ photoUrl de mai sus unde am construit url-ul fotografiei, accesăm de asemenea matricea de dimensiuni $ pe care am pregătit-o mai devreme pentru a obține lățimea și înălțimea // și titlul din nou // De asemenea, vom face legătura cu versiunea de pe Flickr pentru ecou ""; echo ""; echo" "; // Descrierea fotografiei echo"$ Fotografie [descriere]
";>>Acum avem fotografia noastră ... și aproape că am terminat. Acest ultim bit poate părea un pic dificil, dar nu trebuie lăsat de el. Ea are de-a face cu contextul fotografiei, ca în, care fotografie vine în continuare în flux și care a fost înainte de ea. La fel cum vedeți și pe galeriile oamenilor din Flickr. Motivul pentru care pare să existe o mulțime de coduri este că, pentru ca aceasta să funcționeze cel mai bine, trebuie să verificăm dacă există o fotografie înainte sau după fotografia curentă. Dacă nu există, nu vrem o legătură, ci introduceți textul normal și o imagine falsă (noimg.png).
"; altceva // dacă nu - arăta ecou-ul imaginii de umplutură necompletată"";; // dacă există o fotografie următoare ... if ($ context ['nextphoto'] ['id']) echo""; altceva // dacă nu - arăta ecou-ul imaginii de umplutură necompletată"";; echo""ecou""; // dacă există o legătură anterioară, scrieți un link - dacă nu, doar textul dacă ($ context ['prevphoto'] ['id']) echo" «Prev"; ";; echo" | "; // dacă există un link următor, scrieți un link - dacă nu, doar textul ($ context ['nextphoto'] ['id']) echo" Next ""; ";; echo"
";>>
Și pentru a termina pagina, vom include un link înapoi la galeria principală, un pic de text pentru Flickr și închide html-ul.
«Galeria principală
Acest produs utilizează API-ul Flickr, dar nu este aprobat sau certificat de Flickr.
Rezistați! Încă un lucru ... terminăm declarația if chiar înainte de începerea html ... din nou, vedeți notele de la sfârșit despre motivul pentru care facem acest lucru.
Și acolo aveți. O galerie foto pentru site-ul dvs., alimentată de contul dvs. Flickr. Aruncați o privire la pagina demo pentru a vedea cum arată aceasta cu un plus de marcaj suplimentar și stil adăugat. Aceasta este o implementare de bază a API-ului Flickr; doar zgârie suprafața a ceea ce puteți face, dar oferă o frumoasă galerie foto pentru site-ul / blog-ul pe care îl puteți actualiza și întreține cu ușurință prin Flickr.
În acest tutorial, preluăm fotografiile publice ale utilizatorilor. În cadrul photo.php, referim proprietarul $ în acest tutorial. În acest moment, ne asigurăm că fotografia afișată aparține proprietarului fotografiei. Dacă lăsăm acest lucru, pagina dvs. de fotografie poate trage fotografia publică a oricărui utilizator, ceea ce, evident, nu este ceea ce vrem. Acest lucru merge înapoi la sfaturile pe care Flickr le oferă în liniile directoare.
Ar trebui să utilizați API-ul pentru a accesa numai propriile imagini sau cele pe care aveți permisiunea de a le utiliza. Dacă afișați fotografiile altcuiva, trebuie să menționați numele proprietarului imaginii și numele imaginii. De asemenea, Flickr afirmă că "... paginile de pe alte site-uri web care afișează conținut găzduit pe flickr.com trebuie să furnizeze un link de la fiecare fotografie sau video înapoi la pagina sa de pe Flickr".
Există și alte modalități de afișare a fotografiilor utilizând metoda de căutare în API, dar este un pic mai complicat și vă cere să furnizați autentificare - cu alte cuvinte, folosiți API pentru a vă conecta și lăsați Flickr să știe că într-adevăr sunteți voi - mai mult informații despre acest lucru pot fi găsite aici.
Dacă trebuie să vedeți ce parte din matrice aveți nevoie, puteți folosi print_r () pentru a afișa matricea și a vedea cum să găsiți valoarea dorită. Înconjurați-l cu
pentru a face ieșirea lizibilă.
Distrează-te și arătați-ne ce vă propuneți!