Manuel de rédaction

publié le : mardi 23 février 2021 , par webmaster




Organisation des rubriques

Sommaire - ACCUEIL

- SECTION 1
carousel des images du portfolio de l’article 24
Quoi de neuf affiche les derniers articles
Agenda envoi vers article Agenda
- SECTION-CLUB rub 12
texte et logo de la rubrique
- SECTION-TERRITOIRE rub 5
texte et logo de la rubrique
- SECTION-PATRIMOINE rub 7
texte et logo de la rubrique
- SECTION-PHOTO SEPARATEUR art 30
photo de l’article 30

- PIED DE PAGE

- COPYRIGHT - CONTACTS - AGENDA - MENTIONS LEGALES - DONNEES PERSONNELLES

Gestion d’un diaporama

Dans vos textes, ce raccourci insère un diaporama de toutes les images liées à cet article :

Eglise Saint Jean-Baptiste


Eglise Saint Jean-Baptiste


Eglise Saint Jean-Baptiste


Vous pouvez choisir les documents en les désignant comme ceci :


Vous pouvez choisir la largeur maximum du diaporama, par exemple :

Eglise Saint Jean-Baptiste


Vous pouvez aussi combiner ces paramètres.

Largeur maximum (par défaut 640) : 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.
|largeurmax=350

Hauteur maximum : en laissant le champ vide, les images seront toujours à la largeur maximum possible. Sinon toutes les images seront retaillées en hauteur à cette valeur, en pixels. Si la largeur 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.
|hauteurmax=240

Hauteur automatique : Choisissez ici la façon dont est déterminée la hauteur du diaporama. Par défaut (le champ vide), la hauteur de la première image sert de valeur, « calc » utilisera la hauteur de la plus haute image, et « container » ajustera la hauteur du diaporama à la hauteur de l’image courante. Il est possible de forcer le ratio hauteur/largeur avec une double valeur, par exemple « 600:400 ». La valeur « false » empêchera le script de gérer la hauteur automatiquement.
|autoheight=600:400 ou |autoheight=container

Temps d’affichage pour chaque image (en millisecondes) : choisir « 0 » pour faire un diaporama manuel (cf les boutons « précédent » et « suivant » pour activer le défilement manuel).
|timeout=4000

Temps de transition entre chaque image (en millisecondes)
|speed=1000

Temps d’attente : Temps d’attente avant le départ du diaporama (en millisecondes).
|delay=6000

Effet de transition : voir les exemples en ligne - fade - fadeout - scrollHorz - scrollVert - flipHorz - flipVert - shuffle - tileSlide - tileBlind - carousel - none
exemple : |fx=scrollHorz
pour |fx=tileSlide et |fx=tileBlind, option supplémentaire pour jouer l’animation verticalement
pour |fx=carousel, options supplémentaires pour :
choisir le nombre de diapositives affichées simultanément (carousel-visible) : |carouselvisible=3
le décalage (en pixels) de la première diapositive (carousel-offset) : |carouseloffset=30
définir la dimension des vignettes. Largeur (carousel horizontal) ou hauteur (carousel vertical) d’une diapositive (carousel-slide-dimension) : |carouselslidedimension=130
jouer le déplacement verticalement (carousel-vertical) : |carouselvertical=true ou |carouselvertical=false
adapter le carousel à la mise en page, seulement si horizontal (carousel-fluid) : |carouselfluid=true ou |carouselfluid=false
À l’envers : Joue le diaporama à rebours :
|reverse=true ou |reverse=false

Synchronisation des animations, l’arrivée d’une image est simultanée avec le départ de la précédente :
|sync=true ou |sync=false
Pause au survol : |pauseonhover=true ou |pauseonhover=false

Message lors de la pause au survol, laisser vide pour ne rien afficher :
|pauseonhovercontent=en pause
Ordre aléatoire :
|random=true ou |random=false

Bouton « suivant » : cibler un bloc html par sa classe ou son identifiant. Par défaut « .cycle-next » place une flèche à droite au survol de l’image. [1] :
|next=.cycle-next

Bouton « précédent » : cibler un bloc html par sa classe ou son identifiant. Par défaut « .cycle-prev » place une flèche à gauche au survol de l’image. [1] :
|prev=.cycle-prev

En boucle, à propos des boutons « précédent » et « suivant » : à la fin du diaporama, ne pas revenir au début, ou bien au début, ne pas suivre à la fin (n’empêche pas le diaporama automatique de tourner en continu) :
|allowwrap=true ou |allowwrap=false
Départ arrêté :
|paused=true ou |paused=false

Pagination : cibler un bloc html qui contiendra la pagination en nommant sa classe ou son identifiant css. Par défaut « .cycle-pager » place les boutons par-dessus l’image. [1] :
|pager=.cycle-pager

Afficher une légende pour chaque image [1]. Par défaut « .cycle-caption » :
|caption=.cycle-caption. Il est possible de choisir le contenu de cette légende (cf la documentation) :
Afficher le décompte/le total : par défaut
Afficher le titre du document : |captiontemplate="alt"
Sur-mesure : |captiontemplate="images slideNum sur slideCount"
Sur-mesure : |captiontemplate=image slideNum : cycleTitle cycleDesc

Afficher une seconde légende en surimpression [1], un calque noir/transparent sur le bas de l’image pour afficher une légende avec Titre et Description de l’image :
|overlay=.cycle-overlay

Format de la légende en surimpression, par défaut le titre et la description de l’image, vous pouvez personnaliser le contenu suivant les exemples :
|overlaytemplate=" 
slideNum / slideCount
date - title
desc"

Choisir une couleur de fond, une valeur de couleur hexadécimale avec le « # », ex « #C5E41C ». La valeur « transparent » rétabli la transparence. :
|backgroundcolor=#b5b5b5
en installant le plugin Palette vous pourrez piquer la couleur sur une palette.

plus d’info dans la Documentation du plugin SPIP Cycle2

Gestion de l’agenda

Créer normalement un article dans la rubrique voulue (club ; territoire, patrimoine)
Lui attribuer le mot-clé de la commune concernée du groupe ’communes"
Lui attribuer le mot-clé agenda du groupe ’affichage’

Attribuer une date de READACTION ANTERIEURE qui servira au système pour le tri et affichera la date et l’heure

Nos Partenaires


Mairie de Vimarcé Générations Mouvement