Une galerie de photos flickr dans SPIP

Flickr (prononcer « flikère ») vous permet de stocker vos photos en ligne pour les partager avec ami-e-s & famille et/ou avec tout le Web. C’est un site Canadien dont la vocation est la gestion de bibliothèques d’images publiques ou privées.
Il fait cela si bien qu’on est tenté de lui confier le tri et le stockage des photos, qui est alors autogéré par les internautes, pour se contenter de n’en faire qu’un affichage sélectif. Ceci se fait facilement avec SPIP 1.9 dont le système de syndication s’est enrichit.

Comment faire ?

style='float:right;'>
1 - Rendez-vous sur www.flickr.com à la page souhaitée, par exemple celle des photos comportant le tag « spip », pour y trouver le flux RSS correspondant : référencez cette page et syndiquez-là dans votre site SPIP.

2 - Sélectionnez vos options de syndication, en cochant « syndiquer le contenu complet des articles (au format HTML) », afin de syndiquer également les fichiers images. Les photos de flickr doivent alors s’afficher sur la page du site, dans l’espace privé.

3 - Dans le squelette, on construit donc une boucle SYNDIC_ARTICLES ordinaire pour lister les données ainsi récupérées, par exemple :

<BOUCLE_flickr(SYNDIC_ARTICLES) {!par date}>
<a href="#URL_ARTICLE">#TITRE</a>
</BOUCLE_flickr>

4 - Mais pour y afficher les photos, ce n’est pas si simple : flickr ne distinguant pas l’image du reste, il faut l’extraire du descriptif de l’article syndiqué grâce à |extraire_balise{img}. Comme ceci :

[(#DESCRIPTIF
    |extraire_balise{img}
    |image_reduire{200,180}
    |inserer_attribut{alt,[(#TITRE|textebrut|couper{60})]}
    |inserer_attribut{align,''}
)]

Exemple de code

Voici par exemple le code qui a servi a fabriquer les galeries de photos flickr des sites SPIP Party et tetue.net :

<B_flickr>
#ANCRE_PAGINATION
<ul>
    <BOUCLE_flickr(SYNDIC_ARTICLES) {!par date} {pagination}>
    [<li>
        <h3>#TITRE</h3>
        <a href="#URL_ARTICLE"[ title="(#TITRE|textebrut|couper{80})"]>(#DESCRIPTIF
                |extraire_balise{img}
                |image_reduire{200,180}
                |inserer_attribut{alt,[(#TITRE|textebrut|couper{60})]}
                |inserer_attribut{align,''}
                |unique{photo}
        )</a>
        <p><small>[(#DATE|affdate_court)][, <:par_auteur:> (#LESAUTEURS)]</small></p>
    </li>]
    </BOUCLE_flickr>
</ul>
[<p class="pagination">(#PAGINATION)</p>]
</B_flickr>