Tempo di lettura stimato: 2 minuti

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:

Parametro	Tipo	Valori	Definizione
conteggio	intero	Un numero intero compreso fra 1 e 10	Il numero di foto da mostrare. (10 di default)
display	string	latest, random	Il badge mostra l’ultima foto o una foto a caso. (l’ultima di default)
layout	string	h, v, x	Ordinare le foto orizzontalmente, verticalmente o non ordinarle. (orizzontale di default)
source	string	user, user_tag, user_set, group, group_tag, all, all_tag	Da 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.
size	string	s, t, m	La 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.