 |
Résumé | Ajoute un carrousel d’images (ou plusieurs) à un message |
 |
Dépôt | GitHub - NateDhaliwal/discourse-post-image-carousel: Adds a image carousel in posts |
 |
Guide d’installation | Comment installer un thème ou un composant de thème |
 |
Nouveau sur les thèmes Discourse ? | Guide pour débutants sur l’utilisation des thèmes Discourse |
Installer ce composant de thème
Ce composant ajoute un carrousel d’images alimenté par Splide/Swiper dans les messages. Les carrousels Swiper ont plus de fonctionnalités comme les miniatures et différentes animations.
Swiper :
Swiper avec miniatures activées :
Splide :
Un bouton est ajouté à la barre d’outils de l’éditeur pour ajouter des carrousels, avec une image d’espace réservé :
Le balisage pour les carrousels est le suivant :
[wrap="Carousel" autoplay=true/false interval=<durée en ms>/false loop=true/false thumbs=true/false thumbs_loop=true/false]
![image1]()
![image2]()
![image3]()
...
[/wrap]
Pour faciliter un processus de création de carrousels plus simple, cliquer sur le bouton de la barre d’outils de l’éditeur ouvrira une modale (merci au composant Discourse GIFs !), où vous pourrez choisir la configuration du carrousel :
Vous pouvez ensuite ajouter d’autres images dans le [wrap].
Les paramètres (par carrousel) sont les suivants :
enable_thumbnails : Afficher les miniatures des images sous le carrousel.
enable_loop : Faire boucler le carrousel au début lorsqu’il atteint la fin.
enable_thumbnail_loop : Faire boucler la miniature du carrousel lorsqu’elle atteint la fin.
Si vous avez trop peu d’images, l’activation de ce paramètre peut provoquer un mouvement saccadé et glitché du carrousel. Il est conseillé d’avoir plus d’images avant d’activer ceci.
enable_autoplay : Laisser le carrousel se jouer tout seul.
autoplay_interval : Le nombre de millisecondes à attendre avant de jouer la diapositive suivante. Utilisé en conjonction avec enable_autoplay. Si vous laissez ce champ vide, il sera par défaut à 5000.
Paramètres
Les paramètres (globaux) sont les suivants :
carousel_software : Quel logiciel les carrousels utiliseront (Swiper/Splide) ; Swiper est préféré et est le défaut.
image_carousel_placeholder : L’image par défaut pour le carrousel lors de sa création. Elle utilise par défaut une image d’espace réservé régulière incluse :
show_pagination_buttons : Afficher les points de pagination sous le carrousel pour faciliter la navigation entre les images.
image_transition_animation : [Uniquement pour Swiper] Animation des images lors de la transition vers la suivante ; par défaut ‘slide’, les options sont :
- cube
- fade
- cards
- flip
- slide (défaut)
pagination_button_color : La couleur des points de pagination ; laisser ce champ vide utilise les valeurs par défaut de Swiper/Splide.
active_pagination_button_color : La couleur du point de pagination lorsqu’il est sur la diapositive actuelle ; laisser ce champ vide utilise les valeurs par défaut de Swiper/Splide.
Notes
Le support actuel de Splide sur ce composant ne permet pas les miniatures et les animations de transition. J’accepterai volontiers les PR pour les miniatures Splide (qui sont plus compliquées).
Si quelqu’un souhaite implémenter des miniatures verticales, j’ai du code dans le dépôt pour cela (commenté) qui ne fonctionne pas très bien. Je serais heureux d’accepter des PR pour ajouter cela (ou pour améliorer l’implémentation actuelle).
Une chose de plus, j’explore actuellement un moyen d’ajouter les images du carrousel dans la modale de création, mais je rencontre un problème décrit ici. Je serais ravi si quelqu’un pouvait répondre là-bas !
Remerciements
Merci à @Arkshine pour l’inspiration ici. Je comprends qu’il a créé le dépôt ici (cependant, j’ai choisi de ne pas me référer à ce dépôt pour ce composant).
J’espère que cela sera utile à quelqu’un !
Je n’ai pas encore posté car je travaille sur la vue de l’éditeur riche (prosemirror) et il faut du temps pour comprendre toutes ces nouvelles choses.