romy.tetue.net

Conception web et développement front
X-HTML, CSS, SPIP, sémantique et accessibilité


Une galerie de photos flickr dans SPIP


16 janvier 2007,
par Romy Duhem-Verdière

Ou comment afficher une galerie de photos stockées ailleurs et choisies par les internautes ?

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 ?

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 :

Voter pour cet artice sur hellocoton.fr

Vos commentaires

  • Le 14 février à 19:35, par Paolo

    Merci, Romy, ça marche très bien. Le problème que je rencontre est que le flux RSS de Flickr met les photos dans un tout autre ordre que celui qui s’affiche sur la page de Flickr. Ce dernier doit être réglé par un paramètre qui n’est pas transmis dans le flux RSS, je pense. Pour la page que j’aimerais faire, c’est important. Et je crois qu’il n’y a rien à faire :(

  • Le 19 février à 22:15, par Paolo

    Et, d’après mes essais, cette boucle ne marche plus avec SPIP 2.1. Ou je me trompe ?

  • Le 24 février à 23:37, par havath

    This is really excellent ! je vous y encourage vraiment et merci bcp pour tout ceci !

Un message, un commentaire ?


Qui êtes-vous ? (optionnel)

Pour afficher votre trombine avec votre message, enregistrez-la d'abord sur gravatar.com (gratuit et indolore) et n'oubliez pas d'indiquer votre adresse e-mail ici.

Ajoutez votre commentaire ici
  • Ce formulaire accepte les raccourcis SPIP et le code HTML.

Suivre les commentaires : RSS 2.0 | Atom



© 2000-2010 Romy Duhem-Verdière | Certains droits réservés | Qui suis-je ? | Contact | Aide | Top ↑
Vérifiez vous-même la qualité du code de cette page en la soumettant aux validateurs XHTML et CSS.