Mélangeons documents SPIP et photos flickr

Il est assez simple de réaliser un portfolio avec SPIP, et l’on peut aussi faire une galerie de photos flickr, mais le mélange des deux est plus complexe, surtout du fait des critères de sélection souhaités. Car nous voulons :

• toutes les images du site sauf les trop petites et les trop grandes,
• pas tous les documents syndiqués : seulement les photos de flickr.

Voici comment je m’en suis sortie aujourd’hui sous SPIP 1.9.2b [9381], avec les plugins Thickbox v2 et Podcast client.

Affichage avec effet Thickbox

• Pour obtenir une page vraiment synthétique, nous choisissons l’effet Thickbox parce qu’il permet d’afficher les images d’une page en diaporama, sans quitter ladite page. Téléchargeons donc ce plugin depuis cette page.
• Précisons le type de document dans le lien, ainsi que son titre : <a href="#URL_DOCUMENT" type="#MIME_TYPE"[ title="(#TITRE|texte_backend)"]>
• Les documents listés étant très nombreux, il est préférable de les paginer, par exemple : <BOUCLE_doc(DOCUMENTS) {!par date} {pagination 50}>.
  Mais le diaporama Thickbox n’affiche alors que les cinquante documents contenus dans la page, or nous souhaitons qu’il puisse afficher la totalité des documents listés par notre boucle. Il faut tricher un peu :
  1. Une première boucle liste la totalité des documents souhaités, de façon à ce qu’ils soient effectivement tous disponibles pour le diaporama, mais sans les afficher :
     [<a href="#URL_DOCUMENT" type="#MIME_TYPE"[ title="(#TITRE|texte_backend)"]>(#FICHIER|?{' ',''})</a>]
  2. La boucle suivante, semblable mais paginée, réalise l’affichage dans la page d’une galerie de jolies petites vignettes :
     [<a href="#URL_DOCUMENT" type="#MIME_TYPE"[ title="(#TITRE|texte_backend)"]>(#FICHIER|copie_locale|image_reduire{0,100})</a>]

En réalité, nous ferons 3 boucles :

1. la première liste (sans les afficher) les images du site,
2. la seconde liste (sans les afficher) les photos flickr,
3. et la dernière réalise l’affichage mélangé des documents trouvés par les boucles précédentes, grâce aux critères {doublons} sur les précédentes et {!doublons} sur la dernière.

D’abord des images du site

• Commençons tout simplement par lister les documents visuels du site : <BOUCLE_doc_tous(DOCUMENTS) {distant=non} {extension IN png,jpg,gif}>
• Certains documents, de trop petite ou trop grande taille, ne sont pas du plus bel effet dans notre galerie photo avec Thickbox ; on va donc les exclure en limitant la taille des images par les critères suivants : {largeur>=225}{hauteur>145}{hauteur<700}
  Attention : ces critères de dimension ne peuvent être appliqués aux documents issus de la syndication, parce qu’étant distants, SPIP n’en connaît pas les dimensions qui sont donc considérées comme étant nulles. Les filtrer avec ces critères ne renverrait donc aucun résultat. C’est pourquoi nous les traitons à part, dans une boucle différente (ci-après).

Ensuite les photos flickr

• Récupérons maintenant les documents visuels issus de la syndication : <BOUCLE_doc_syndic(DOCUMENTS) {distant=oui} {extension IN png,jpg,gif}>
• Premier souci : cette boucle ne nous renvoie aucune photo de flickr !! Il faut forcer l’ajout des photos flickr à la table des documents pour pouvoir les manipuler de la même façon. Heureusement ceci se fait grâce au plugin Podcast client [1] dont voici le Zip.
• Second souci : cette boucle récupére absolument tous les documents visuels diffusés par les sites syndiqués, dont certains n’ont qu’un rapport indirect avec notre sujet, et dont les visuels ne nous intéressent pas. Il faut donc faire le tri.
  Pour ne garder que les photos flickr utilisons ce critère : {fichier==flickr}
• Troisième souci : flickr ne diffuse qu’une image de taille réduite. On remarque alors que les urls des photos flickr sont toutes construites de la même façon et qu’il suffit d’en supprimer le « _m » final pour obtenir la photo en plein format. Nous écrirons donc :

  <a href="[(#URL_DOCUMENT|match{flickr}|?
          {#URL_DOCUMENT|replace{_m\.jpg$,.jpg}
          ,
          #URL_DOCUMENT
  })]">

Enfin mélangeons tout !

Voici un exemple de mise en œuvre sur le site des Trois Tiers, qui présente une galerie de plusieurs centaines de photos, auto-complétée de photos déposées sur flickr par les internautes fidèles au site.

<BOUCLE_doc_flickr(DOCUMENTS) {distant=oui} {fichier==flickr} {extension IN png,jpg,gif} {!par date} {doublons}>
[<a href="#URL_DOCUMENT" type="#MIME_TYPE"[ title="(#TITRE|texte_backend)"]>(#FICHIER|?{' ',''})</a>]
</BOUCLE_doc_flickr>

<BOUCLE_doc_tous(DOCUMENTS) {distant=non} {extension IN png,jpg,gif} {largeur>=225}{hauteur>145}{hauteur<700} {!par date} {doublons}>
[<a href="#URL_DOCUMENT" type="#MIME_TYPE"[ title="(#TITRE|texte_backend)"]>(#FICHIER|?{' ',''})</a>]
</BOUCLE_doc_tous>

<B_doc>
[(#ANCRE_PAGINATION|vide)]
<p class="pagination">[(#PAGINATION) | ]#GRAND_TOTAL&nbsp;photos</p>

<BOUCLE_doc(DOCUMENTS) {!par date} {!doublons} {pagination 50}>
[<a href="[(#URL_DOCUMENT|match{flickr}|?{#URL_DOCUMENT|replace{_m\.jpg$,.jpg},#URL_DOCUMENT})]" type="#MIME_TYPE"[ title="(#TITRE|texte_backend)"]>(#FICHIER|copie_locale|image_reduire{0,100}|image_recadre{69,69,center}|image_aplatir{jpg,ffffff})</a>]
</BOUCLE_doc>