Cookie

Attenzione


Questo articolo è stato pubblicato più di un anno fa, potrebbero esserci stati sviluppi.
Ti preghiamo di tenerne conto.

Pubblico ora la traduzione di un articolo molto interessante trovato qualche giorno fa su come creare stili personalizzati per le custom gallery di Flickr.

Come molti sapranno, Flickr è un social network per amanti della fotografia. La gente si iscrive, carica le foto, commenta le foto di altri e riceve i commenti di altri alle proprie foto. Uno dei maggiori pregi di Flickr è la possibilità di specificare le licenze per le proprie foto, ma in questo articolo ci occuperemo dell'”esportazione” delle immagini da un account Flickr in un sito esterno.

Il social network mette a disposizione dell’utente un wizard con il quale è possibile creare dei “badge” personalizzati, ma con poca scelta in termini di adattamento. In questo articolo ci occupiamo di documentare le API del badge di Flickr, mostrando l’HTML che Flickr stesso trasmette per l’inclusione. In questo modo sarà sicuramente più semplice lavorare con i CSS.

A prescindere da ciò che dovremo fare, dovremo includere queste righe iniziali:

<script type="text/javascript"
src="https://www.flickr.com/badge_code_v2.gne?user=[L'ID utente]">

Dovremo sostituire “L'ID utente” con (guarda caso) l’ID utente. L’ID può essere ottenuto inserendo il proprio username in questa pagina: idgettr. Si può sostituire il simbolo “@” con il corrispondente HTML “%40“.

I parametri Javascript

Oltre a questi ci sono molti altri parametri, in questa tabella elenco i principali:

ParametroTipoValoriDefinizione
conteggiointeroUn numero intero compreso fra 1 e 10Il numero di foto da mostrare. (10 di default)
displaystringlatest, randomIl badge mostra l’ultima foto o una foto a caso. (l’ultima di default)
layoutstringh, v, xOrdinare le foto orizzontalmente, verticalmente o non ordinarle. (orizzontale di default)
sourcestringuser, user_tag, user_set, group, group_tag, all, all_tagDa dove vengono prese le foto? Dopo aver scelto uno di questi, devi dichiarare fino a due parametri specificando il/i tag e/o l’ID del gruppo o set. Questi parametri sono tag (string), gruppi (il valore intero può essere trovato su idgettr), e set (l’intero trovato nell’url di un set specifico (es. la nostra url è …/sets/1632467/ quindi l’ID del set è 1632467), rispettivamente.
sizestrings, t, mLa dimensione della foto. s significa “quadrata”, t miniatura, e m media grandezza. (Tieni presente che la grandezza media equivale alla grandezza piccola quando guardiamo le “taglie disponibili” su una foto. (miniatura di default)

Modifichiamo lo stile dell’output

Una volta incluso il JavaScipt nella nostra pagina, restituirà un output HTML per la visualizzazione nel browser. Dato che stiamo per modificare lo stile dell’output, è necessario sapere con precisione il codice. Questo è un esempio di come è restituito il codice di base:

<div id="flickr_badge_image1">
  <a href="[the photo page]">
    <img width="[xx]" height="[xx]" src="[the url]" title="[The photo's title]" alt="A photo on Flickr" />
  </a>
</div>
<div id="flickr_badge_image2">
  <a href="[the photo page]">
    <img width="[xx]" height="[xx]" src="[the url]" title="[The photo's title]" alt="A photo on Flickr" />
  </a>
</div>
<div id="flickr_badge_image3">
  <a href="[the photo page]">
    <img width="[xx]" height="[xx]" src="[the url]" title="[The photo's title]" alt="A photo on Flickr" />
  </a>
</div>

E così via. Per ogni immagine, l’ID cambierà in un intero.

Ora è possibile creare uno stile appropriato con i CSS, per rendere la gallery Flickr come vogliamo.

Non ti basta?


TheJoe

Mantengo questo blog a livello amatoriale dal 2009. Sono appassionato di grafica, tecnologia, software Open Source. Fra i miei articoli non sarà difficile trovarne circa la musica, ed alcuni di riflessioni personali, ma preferisco indirizzare la linea del blog principalmente verso la tecnologia. Per informazioni contattami.

2 commenti

Separate Collection's blog · 26 Luglio 2010 alle 4:36 PM

grazie grazie grazie grazie

vale · 12 Maggio 2010 alle 10:41 AM

articolo molto interessante..aspetto di vedere il risultato! 😀

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

Questo sito usa Akismet per ridurre lo spam. Scopri come i tuoi dati vengono elaborati.