Cookie

TheJoe.it Into the (open) source

12mag/102

Creare un “badge” Flickr

logo_home

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="http://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.

About

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.

Commenti (2) Trackback (0)
  1. articolo molto interessante..aspetto di vedere il risultato! 😀


Leave a comment

Ancora nessun trackback.