Afficher une planche contact des images du site

Réaliser une planche contact aléatoire des images documents dans le site.

Lorsque votre site commence à s’étoffer, on a tendance à oublier les vieux articles... On peut bien sûr réaliser un plan du site ... une alternative plus ludique consiste à réaliser une planche contact aléatoire des images contenus dans les articles.

Par exemple, voir la planche contact du site de l’école d’art en provence

La boucle en SPIP 1.9

<BOUCLE_docuImg(DOCUMENTS){doublons}{par hasard}{extension==jpg|png|gif}{0,20}>    
        <BOUCLE_chercheLienArticle(SPIP_DOCUMENTS_ARTICLES){id_document}>#SET{current_id_art, #ID_ARTICLE}</BOUCLE_chercheLienArticle>
        <BOUCLE_vignetteArticle(ARTICLES){id_article=#GET{current_id_art}}{0,1}>[<a href="#URL_ARTICLE">(#FICHIER|reduire_image{0,200})</a>]</BOUCLE_vignetteArticle>
</BOUCLE_docuImg>

La planche contact est générée avec trois boucles imbriquées :
-  la boucle DOCUMENTS docuImg permet de récupérer 20 documents images au hasard
-  la boucle SPIP_DOCUMENTS_ARTICLES chercheLienArticle n’est pas standard ... elle permet à partir de l’id d’un document de trouver l’article qui lui est lié.
-  la boucle ARTICLES vignetteArticle permet de simplement afficher la vignette avec le lien sur l’article associé

Si vous voulez que cette page soit différente à chaque chargement de page, il faut désactiver le cache en placant sur votre page la balise #CACHE{0}. Attention toutefois, ce script est gourmand en ressources puisque l’on demande de créer une dizaine de vignettes d’un coup...

La boucle en SPIP 2.0

SPIP 2.0 a entièrement revu la gestion des documents et leurs liaisons avec les objets SPIP (rubriques, articles, brèves ...)

La boucle devient

      <BOUCLE_img(DOCUMENTS){extension==jpg|png|gif}{par hasard}{0,20}>
          [(#REM) document lie a un article ?]
          <BOUCLE_lien_a(DOCUMENTS_LIENS){id_document}{objet=article}>
               <BOUCLE_lien_article(ARTICLES){id_article=#ID_OBJET}><a href="#URL_ARTICLE">[(#_img:FICHIER|reduire_image{0,200})]</a></BOUCLE_lien_article>
          </BOUCLE_lien_a></B_lien_a>
              [(#REM) non, document lie a une rubrique ?]
              <BOUCLE_lien_r(DOCUMENTS_LIENS){id_document}{objet=rubrique}>
                  <BOUCLE_lien_rubrique(RUBRIQUES){id_rubrique=#ID_OBJET}><a href="#URL_RUBRIQUE">[(#_img:FICHIER|reduire_image{0,200})]</a></BOUCLE_lien_rubrique>
              </BOUCLE_lien_r>
          <//B_lien_a>
      </BOUCLE_img>
  1. La boucle img récupère 20 documents ayant comme extension jpg, png ou gif au hasard
  2. On recherche la liaison avec un article,
    1. si oui, on affiche le lien vers cet article et la vignette de l’image
    2. si non, on recherche la liaison avec une rubrique
      1. si oui, on affiche le lien vers la rubrique et la vignette de l’image

La boucle en SPIP 2.1

la syntaxe a un peu évoluée. Il faut passer le nom de la table en minuscule

<BOUCLE_img(DOCUMENTS){extension==jpg|png|gif}{par hasard}{0,40}>
    [(#REM) document lie a un article ?]
    <BOUCLE_lien_a(spip_documents_liens){id_document}{objet=article}>
         <BOUCLE_lien_article(ARTICLES){id_article=#ID_OBJET}><a href="#URL_ARTICLE">[(#_img:FICHIER|image_reduire{0,200})]</a></BOUCLE_lien_article>
    </BOUCLE_lien_a></B_lien_a>
          [(#REM) non, document lie a une rubrique ?]
          <BOUCLE_lien_r(spip_documents_liens){id_document}{objet=rubrique}>
                  <BOUCLE_lien_rubrique(RUBRIQUES){id_rubrique=#ID_OBJET}><a href="#URL_RUBRIQUE">[(#_img:FICHIER|image_reduire{0,200})]</a></BOUCLE_lien_rubrique>
          </BOUCLE_lien_r>
    <//B_lien_a>
</BOUCLE_img>

Le modèle associé

Pour les paresseux, voici la version en tant que modèle prêt à l’emploi (fichier à placer votre répertoire modeles). Pour l’utiliser, simplement placer dans le corps de l’un de vos articles ou rubriques, le raccourci <planche_contactX> où X est le nombre de vignettes désiré sur votre planche contact.

modèle planche contact (spip 1.9)


modèle planche contact (spip 2.1)

sur une idée de Douglas Edric Stanley

Discussion

5 discussions

  • Thiébaut

    Bonjour et tout d’abord merci pour cette boucle bien pratique !
    Même les nuls comme moi y arrivent (sous Spip 3)

    Je voudrais faire une petite adaptation pour les images reliées à des albums (plugin Album) eux-même reliés à des articles. L’idée est que le lien renvoie directement à l’article.

    Pour l’instant, je ne réussis qu’à renvoyer à la page album, avec cette boucle :

    <BOUCLE_lien_alb(spip_documents_liens){id_document}{objet=album}>
    <BOUCLE_lien_album(ALBUMS){id_album=#ID_OBJET}>
    <a href="#URL_ALBUM">[(#_img:FICHIER|image_reduire{0,150})]</a>
    </BOUCLE_lien_album>
     </BOUCLE_lien_alb>

    Il doit y avoir une astuce toute simple, mais je ne suis pas assez aguerri aux boucles.

    Merci par avance ! ;-)

    Répondre à ce message

  • 4

    Bonjour,

    cela fonctionne très bien sur mon site (SPIP2).
    Par contre il semblerait que l’argument X dans <planche_contactX>
    ne serve a rien vu que dans la 1re boucle on ...{par hasard}{0,20}...
    Si on souhaite diminuer ou augmenter le nombre de vignette, il faut modifier ce paramètre « 20 ».

    Comment récupérer proprement le paramètre X ?

    • bonjour, le parametre X est bien pris en compte dans le modèle, il s’agit de #ENV{id} dans la boucle du modèle :

      <BOUCLE_img(DOCUMENTS){par hasard}{extension==jpg|png|gif}{0,#ENV{id}}> 

      j’ai en profité pour ajouter en téléchargement le modèle planche contact en version SPIP 2.1

    • Merci.
      Je me doutais bien d’un truc comme ça, mais sur la page au dessus le paramètre #ENV{id} n’apparaît pas dans les boucles :
      pour spip 1.9 on a :

      <BOUCLE_docuImg(DOCUMENTS){doublons}{par hasard}{extension==jpg|png|gif}{0,20}>  

      pour spip 2.0 on a aussi :

      <BOUCLE_img(DOCUMENTS){extension==jpg|png|gif}{par hasard}{0,20}>

      et pour spip 2.1 on a :

      <BOUCLE_img(DOCUMENTS){extension==jpg|png|gif}{par hasard}{0,40}>

      Il faudrait corriger cela pour faire apparaître #ENV{id} à la place de 20 ou 40...

      Tant que j’y suis...
      J’ai essayé d’insérer la balise #CACHE{0} dans mon modèle, mais il semblerait qu’elle ne soit pas prise en compte (site avec spip 2.010). Ne faut-il pas que cette balise soit entre <head> et </head> ? Comment faire cela à partir d’un modèle ?

    • attention de bien distinguer :

      • les boucles pour l’intégrer en dur dans un squelette (par ex. pour faire une page dédiée genre spip.php?page=planche . dans ce cas on indique en dur le nombre d’image que l’on souhaite ex. {0,30}et le cache via #CACHE{0}.
      • les modèles pour un usage dynamique (pour un rédacteur au sein d’un article par exemple). Pour le modèle, il me semble qu’il n’est pas possible d’indiquer un cache nul.
    • Merci pour les éclaircissements.
      Je n’avais effectivement pas fait cette distinction.
      Dommage pour le cache dans le modèle :-(

    Répondre à ce message

  • 1
    El’Biglouch

    Bonjour.

    Il semblerai que cette boucle ne fonctionne pas avec SPIP 2.0 car lorsque je l’inclus dans le sommaire par exemple, une erreur de squelette se produit, indiquant qu’il n’arrive pas à trouver les liens images.

    Si quelqu’un avait la solution ce serai formidable !

    Merci infiniment pour tout !

    Répondre à ce message

  • 3

    Excellent idée, et un mode de navigation original ! Je rencontre toutefois une difficulté, car j’ai supprimé pas mal d’articles de mon site, or SPIP n’efface pas les documents joints. Chez moi la boucle « bugge » donc pas mal car elle essaye, je crois, de sélectionner des articles qui n’existent plus.

    Une idée pour améliorer les choses de façon « propre » et automatique ? (je n’en voie qu’une a priori : que je balaye à la main mes tables SPIP pour supprimer de la table des documents, les entrées correspondant à des documents liés à des articles supprimés...)

    • Il faudrait mieux nettoyer votre base. Sinon rajouter le critère {statut=publié} résoudra peut-être votre problème :

      Ce qui donne :
      <BOUCLE_vignetteArticle(ARTICLES){id_article=#GET{current_id_art}}{0,1}{statut=publie}>

    • tipou13

      Bonjour. Je vous remercie pour cette trouvaille magnifique. J’aimerais l’utiliser pour mon site et exclure certaines rubrique. Ne pas afficher les images de certaines rubriques.
      Je vous remercie de m’éclairer.
      ibigdeze@hotmail.com

    • Même demande, j’utilise cette boucle mais j’aimerais lui interdire l’accés à une rubrique particulière (pour ne pas lister les images de la partie blog du site). si quelqu’un a une réponse ?

    Répondre à ce message

  • ManuDevil, concepteur multimédia... avec SPIP

    J’ai remarqué un bug assez curieux... J’utilise cette contrib fort sympathique pour un de mes sites, et bizarrement, dans la liste des images, il y en avait toujours une qui pointait vers le mauvais article. Des fois, même, deux fois la même image avec deux liens différents.

    Je pense avoir corrigé en imbriquant les boucles de manière différentes :

                            [(#REM) Images au hasard ]
                            <B_docuImg>
                            <div style="text-align: center">
                            <BOUCLE_docuImg(DOCUMENTS){doublons}{par hasard}{extension==jpg|png|gif}{0,10}>                               <BOUCLE_chercheLienArticle(SPIP_DOCUMENTS_ARTICLES){id_document=#ID_DOCUMENT}>#SET{current_id_art, #ID_ARTICLE}
                                       <BOUCLE_vignetteArticle(ARTICLES){id_article=#GET{current_id_art}}{0,1}{statut=publie}>[<a href="#URL_ARTICLE">(#FICHIER|reduire_image{0,150})</a>]</BOUCLE_vignetteArticle>
                                       </BOUCLE_chercheLienArticle>
                            </BOUCLE_docuImg>
                            </div>
                            </B_docuImg>

    Volontairement, je n’en affiche que 10.

    Répondre à ce message

Ajouter un commentaire

Qui êtes-vous ?

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 champ accepte les raccourcis SPIP {{gras}} {italique} -*liste [texte->url] <quote> <code> et le code HTML <q> <del> <ins>. Pour créer des paragraphes, laissez simplement des lignes vides.

Ajouter un document

Suivre les commentaires : RSS 2.0 | Atom

Dernière modification de cette page le 21 juin 2013