Le principal avantage de cette nouvelle version : l’affichage est adapté aux différentes largeurs d’écrans (responsive design) selon l’interface du site.
Il est nécessaire d’utiliser un squelette qui respecte la norme HTML5.
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.
Pour la compatibilité avec le plugin « jQuery Cycle » le modèle <sjcycleN>
est tout à fait fonctionnel. La différence est que ce dernier n’affiche les images de l’article « N » que lorsqu’il est inclus dans l’article « N » lui-même.
Paramétrage général
Si un paramètre de la librairie a été implémenté, il l’a été fidèlement, pour rester dans une logique simple par rapport à Cycle2. On retrouve toute la documentation de référence ici : http://jquery.malsup.com/cycle2/api/.
Par exemple : data-cycle-random=true
est un paramétrage du plugin d’origine qui fait tourner les images dans un ordre aléatoire. Ce paramètre est transposé dans le plugin SPIP, et on lui donne une valeur à l’insertion du modèle comme ceci : <articleN|cycle|random=true>
.
Si le paramétrage général du plugin prévoit déjà l’ordre aléatoire, toutes les insertions de <articleN|cycle>
joueront le diaporama dans un ordre aléatoire. Mais dans ce cas, il est aussi possible d’insérer un diaporama sans ce paramètre avec l’écriture <articleN|cycle|random=false>
-
La page de configuration (dans l’administration de SPIP, une fois le plugin installé comme les autres, se rendre dans « Squelettes > Cycle2 », accès limité aux webmestres du site) offre un certains nombre d’options qui s’appliqueront à toutes les inclusions du modèle <articleN|cycle>
:
- 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="<span class=left> <br>{{slideNum}} / {{slideCount}}</span>{{date}} - {{title}}<br>{{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.
Paramètres tooltip et mediabox
- Info au survol avec Tooltip : peut être surchargé lors de l’inclusion avec |tooltip=oui ou |tooltip=non
- Afficher les caractéristiques techniques de l’image : peut être surchargé lors de l’inclusion avec |tooltip_carac=oui ou |tooltip_carac=non
- Mediabox : ouvre l’image d’origine suivant vos paramétrages de la mediabox (dans l’administration : Squelettes > Boîte multimédia. Peut être surchargé lors de l’inclusion avec |mediabox=oui ou |mediabox=non
Inclure le modèle <articleN|cycle>
On l’a déjà vu plus haut, pour une utilisation courante, le diaporama 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. 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 corrigeable lors de l’inclusion. (cf. plus haut pour chacun d’eux)
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 <articleN|cycle|left>
S’il n’est pas précisé, l’alignement est « centré ». L’effet rendu dépendra de la valeur saisie pour le paramètre « Largeur maximum » et de l’interface du site. L’alignement flottant est intéressant si le diaporama est significativement moins large que le texte lui-même.
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.
Attention : dans le cas d’une utilisation dans un squelette, l’écriture diffère :
[(#MODELE{article_cycle,id_article=N,docs=21|22|24})]
ou
[(#MODELE{article_cycle,docs=21|22|24})]
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 comme ceci :
<articleN|cycle|prev=.pre1|next=.suiv1>
<a href="#" class="pre1">précédent</a>
<a href="#" class="suiv1">suivant</a>
<articleN|cycle|prev=.pre2|next=.suiv2>
<a href="#" class="pre2">précédent</a>
<a href="#" class="suiv2">suivant</a>
<articleN|cycle|prev=.pre3|next=.suiv3>
<a href="#" class="pre3">précédent</a>
<a href="#" class="suiv3">suivant</a>
Encore faut-il ensuite styler ces balises HTML aux couleurs de votre site...
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. Cette option désactive l’ouverture vers une box. Si l’article n’existe pas dans la langue courante on met ou pas un lien vers l’article de référence suivant que le paramètre forcer_lien_reference soit défini ou pas.
Exemple dans le cas d’une insertion dans un squelette sur une page sommaire :
- [(#MODELE{article_cycle,id_article=16,lien_article=171})]
: diaporama sur toutes les images de l’article 16 avec un lien vers l’article 171 (ou sa traduction)
-
[(#MODELE{article_cycle,id_article=16,lien_article=171|forcer_lien_reference=oui})]
: c’est pareil sauf que le lien ne se fera pas sur la traduction même si elle existe.
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. Cette option désactive l’ouverture vers une box.
Exemple :
- <article16|cycle|center|liens_individuels=article>
: diaporama sur toutes les images de l’article 16 avec sur chaque image un lien vers l’article dont l’identifiant est contenu dans le descriptif de l’image.
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.
Pour compatibilité, le modèle sjcycle_rubrique.html est conservé et permet d’inclure <sjcycle6|rubrique>
Diaporama des sites
Le modèle sjcycle_sites.html est conservé et transposé pour cette version du plugin.
Diaporama des albums
Le plugins Albums permet de regrouper des documents.
L’inclusion de <albumN|cycle>
affiche un diaporama des images de l’album N.
Discussions par date d’activité
49 discussions
Bonjour,
je voudrais savoir si il est prévu de faire supporté les images avec l’extension .webp par le plugin
merci
C’est évoqué sur le ticket https://git.spip.net/spip-contrib-extensions/albums/issues/27 donc ça devrait venir... Ah non ce ticket est pour le plugin Album !
Ben faut regarder s’il y a un ticket pour Cycle2 et en faire un sinon...
Répondre à ce message
Bonjour,
Je suis en train de migrer un site 3.2 vers 4.2 et j’ai l’impression qu’il y a un petit truc qui coince sous SPIP 4.2
J’ai une page "diaporama" appelée par articleXX|cycle.
C’est cycle ou plugins-dist/filtres_images qui est en cause ?
Contrairement à ce qui est indiqué dans la doc, il semble qu’il faille indiquer une valeur au champ « Hauteur maximum » dans le panneau de configuration du plugin.
La doc indique que : « en laissant le champ vide, les images seront toujours à la largeur maximum possible(..) »,
- si on ne rentre pas de valeur dans ce champ, cela provoque l’erreur indiquée ci-dessus.
- En saisissant une valeur, l’erreur disparaît.
(SPIP 4.2 + PHP 8.2)
Pourrais tu regarder dans ta version quel est le code qui figure en ligne (380) dans ta version de /plugins-dist/filtres_images/filtres/images_transforme.php et le citer ici et indiquer quelle est la fonction (définie juste au dessus) qui inclue ce code ?
Répondre à ce message
Bonjour et merci pour ce plugin... Y a-t-il un retour pour l’utilisation de ce plugin sous spip 4.2 ? Quelqu’un a-t-il déjà essayé en modifiant les bornes de version ?
Répondre à ce message
Bonjour
Quelques tests avec un spip 4.1.5 et php 8.1
Public
Si on ne définit pas la hauteurmax dans le raccourci, on a le message d’erreur signalé par spipfactory :
Privé
Plein de « Warning : Undefined array key in ... » dans la page de configuration.
Il faudrait donc définir une valeur pour chaque clé dans sjcycle_administrations.php
Pour compléter : si on indique une valeur pour la hauteurmax dans la configuration du plugin, on n’a plus d’erreur d’exécution. Peut-être faudrait-il mettre une valeur par défaut ?
Répondre à ce message
Yo
malgré un revert en php 7.4
j’ai toujours le pb, il semble ne plus fonctionné
<article201|cycle|center|next=.cycle-next|prev=.cycle-prev|overlay=.cycle-overlay>
exemple :
https://nature-en-tarentaise.org/201
une idée
Bug trouvé pour php 7.4 c’et un
PEBCAK
dsl du bruit
Répondre à ce message
Bonsoir,
je rencontre un bug suite au passage a php8
SPIP 4.1.5 + SPIP Cycle2 3.5.3
une bonne ame pour me donner une piste
merci
Répondre à ce message
Salut
j’ai par mégarde supprimer ce plugin. Je l’ai donc réinstallé et depuis il a un comportement bizarre. Les photos s’enchainent à toute vitesse et je ne peux rien controler.
Voici un exemple de page https://lairederien.net/915
J’ai pourtant chercher à comprendre avant de vous écrire... je deviens un peu chèvre, j’avoue. Merci pour vos conseils à venir.
Je suis en spip 3.2.1 et j’utilise la version 3.5 de sjcycle.
Elle est notée en test, est-ce ceci ? Aurais je mis une version trop récente ?
Christophe.
En remettant la version 3.4.21 le diapo remarche... bonne journée. C.
En effet, je confirme, la version 3.4.21 fonctionne très bien en spip4.
Il y a donc un souci avec la version 3.5.0
bonjour, suite à vos information j’ai tenté de remplacer la version 3.5 par la version 3.4 21. Je l’ai installée manuellement dans le dossier plugin. Il s’est affiché comme plugin incompatible et quand j’ai voulu la mettre en place spip a refusé de le faire en raison de son incompatibilité en générant une erreur. y a t il d’autres solutions car j’utilisais aussi Galleria qui ne fonctionne plus également. Je me contente de nivoslider que j’aime moins mais qui fonctionne. Malheureusement je n’ai pas les compétences pour aider à trouver la solution je vais donc retenter ma chance ultérieurement.
dr
Bonjour
Pour utiliser des plugins spip3 avec spip4, il faut mettre ceci
dans config/mes_options.php
Répondre à ce message
Bonjour tout le monde,
je rapporte un bug que j’expérimente sur un site en dev sur un seveur local.
Le carousel fonctionne bien, mais dès lors que je change les valeurs de de l’image, en hauteur et en largeur, sur la partie admin du plugin, plus rien ne fonctionne.
j’ai une erreur qui s’affiche :
Erreur d’exécution plugins/auto/sjcycle/v3.5.0/modeles/article_cycle.html | File […]/plugins-dist/filtres_images/filtres/images_transforme.php Line 384 : Unsupported operand types : string - string
Il semblerait qu’un integer soit attendu et non un string.
Merci de vos réponse
Répondre à ce message
bonjour,
ravi de cette mise à jour pour Spip4 ! J’étais passé en en Spip 4 et contraint de laisser mes pages avec les codes cycle dedans. Je viens de remettre donc la version 3.5 sur un squelette html5 : Html5up Editorial 1.3.12 et avec le code que j’avais en spip 3.2
je n’ai que l’image 476 (la dernière) qui s’affiche. je sais fouiller dans le code : que vous faut-il faire pour vous aider à la mise au point svp ?
merci d’avance.
Bonjour,
il me semble que le diaporama reste sur l’image et ne tourne pas.
Je ne vois pas trop pourquoi, je fais un ticket...
Répondre à ce message
Bonjour,
Ce plugin est indiqué comme compatible avec Spip4, je souhaitais m’en assurer. Dans le code source,
https://git.spip.net/spip-contrib-extensions/sjcycle.git
il est indiqué : « Version 3.5.0 en test, compatible SPIP 3.0-4.0 avec quelques refactoring ». J’en déduis qu’il faut faire quelques aménagements ? Que faut-il faire exactement ?
Pour l’instant, aprés l’avoir simplement sous spip téléchargé et activé, il ne fonctionne pas sur mon site même si je désactive les autres plugins.
En remerciant par avance ceux qui ont des idées de les partager.
Cordialement à tous. Luc
Répondre à ce message
Ajouter un commentaire
Avant de faire part d’un problème sur un plugin X, merci de lire ce qui suit :
Merci d’avance pour les personnes qui vous aideront !
Par ailleurs, n’oubliez pas que les contributeurs et contributrices ont une vie en dehors de SPIP.
Suivre les commentaires : |