Un diaporama paramétrable pour Spip

Diaporama

• Pour une utilisation courante, le diaporama (slider pour les anglophones) s’insère dans les textes par le modèle <articleN|cycle> où « N » est le numéro de l’article dont on veut afficher les images.

<article258|cycle>
<article385|cycle>

On peut insérer ce modèle dans n’importe quel autre article que l’article N lui-même
Chaque paramètre de la configuration générale est actif et en même temps corrigible lors de l’inclusion.

– En dehors de ces paramètres généraux, voici quelques paramètres optionnels pour ce modèle

• Alignement dans le texte
  Comme un autre document, on peut aligner le diaporama : |left, |right ou |center comme ceci <article258|cycle|left>
  <article258|cycle|left>
  S’il n’est pas précisé, l’alignement est « centré ».

• Choisir les images
  <articleN|cycle|docs=1,5> fait tourner les images 1 et 5 de l’article « N » en diaporama, dans l’ordre du titre des images.
  « N » n’est pas obligatoire. On peut maintenant écrire <article|cycle|docs=1,2,3,6,9> pour demander les images 1,2,3,6,9 même si elles sont liées à des articles différents, voir des rubriques ou d’autres objets.

• Plusieurs diaporamas par page
  On peut inclure plusieurs diaporamas par page de la même façon :

  <articleX|cycle>
  <articleY|cycle>
  <articleZ|cycle>

Dans ce cas, si les boutons « suivant/précédent » sont activés dans la configuration générale, ils actionneront tous les diaporamas en même temps. Pour corriger cet effet, il est préférable de personnaliser chaque diaporama

• Paramètre « lien_parent »
  |lien_parent=oui
  Crée un lien sur chaque image vers l’objet auquel elle est liée, que ce soit les images d’un seul article, ou bien sélectionnées individuellement |docs=1,2,3,6,9. Si une image est liée à plusieurs objets, ce sera le dernier en date qui sera utilisé.

• Paramètres « lien_article » et « forcer_lien_reference »

  <articleN|cycle|lien_article=XXX|forcer_lien_reference=oui>

Permet de poser un lien sur le diaporama vers un article, celui qui contient les images ou un autre. Dans le cas d’un site multilingue, fournir l’id de l’article de référence, le modèle se charge de trouver l’id de l’article correspondant à la langue du visiteur.

• Paramètres « liens_individuels »
  <articleN|cycle|liens_individuels=article>
  Permet de poser un lien sur chaque image du diaporama vers un article, une rubrique ou un site externe suivant la valeur du paramètre (article, rubrique, externe). Si la valeur vaut article ou rubrique, l’identifiant de l’objet est pris dans le champ descriptif de chaque image. Si la valeur vaut externe, le champ descriptif de chaque image doit contenir un lien http.

• Paramètre « limite » :
  <articleN|cycle|limite=3>
  Sortira les trois premières images de l’article « N » dans le diaporama.

• Diaporama des images d’une rubrique
  Le modèle rubrique_cycle.html est fait pour ça.
  <rubriqueN|cycle> où « N » est l’identifiant de la rubrique concernée.

• Diaporama des albums
  Le plugins Albums permet de regrouper des documents.
  L’inclusion de <albumN|cycle> affiche un diaporama des images de l’album

• Paramétrage général des diaporamas du site.
  Chaque paramètre peut être corrigé à la rédaction lors de l’inclusion d’un diaporama

• Largeur maximale
  Toutes les images seront retaillées en largeur à cette valeur, en pixels. Les diaporamas étant en taille proportionnelle, ils s’adapteront à la largeur définie par l’interface du site, mais dans la limite définie ici.
  <article258|cycle|largeurmax=150>
  <article258|cycle|largeurmax=150>

• Hauteur maximale
  En laissant le champ vide, les images seront toujours à la hauteur maximale possible. Sinon toutes les images seront retaillées en hauteur à cette valeur, en pixels. Si la hauteur de l’image n’est pas suffisante, la couleur de fond configurée sera visible. La valeur de couleur de fond "transparent" rendra par contre un fond blanc.
  <articleN|cycle|hauteurmax=80>
  <article258|cycle|hauteurmax=80>

et bien d’autre réglage que je vous laisse découvrir via URL DE VOTRE SITE/ecrire/ ?exec=configurer_sjcycle

• Pour mettre un bandeau en place, on va :
  • faire une copie de inc-bandeau.html de /escal/inclusions vers /squelettes/inclusions et dans ce fichier, effacer tout le code et mettre juste

    <div id="bandeau">
    [(#MODELE{article_cycle,id_article=N,docs=21|22|24})]
    </div>

ou

    <div id="bandeau">
[(#MODELE{article_cycle,docs=21|22|24})]
    </div>

Choisir les images
<articleN|cycle|docs=1,5> fait tourner les images 1 et 5 de l’article « N » en diaporama, dans l’ordre du titre des images.

« N » n’est pas obligatoire.

On peut maintenant écrire <article|cycle|docs=1,2,3,6,9> pour demander les images 1,2,3,6,9 même si elles sont liées à des articles différents, voir des rubriques ou d’autres objets.