 |
Zusammenfassung | Fügt einen oder mehrere Bildkarussells zu einem Beitrag hinzu |
 |
Repository | GitHub - NateDhaliwal/discourse-post-image-carousel: Adds a image carousel in posts |
 |
Installationsanleitung | So installieren Sie ein Theme oder eine Theme-Komponente |
 |
Neu bei Discourse Themes? | Anfängerleitfaden zur Verwendung von Discourse Themes |
Installieren Sie diese Theme-Komponente
Diese Komponente fügt ein Bildkarussell mit Splide/Swiper in Beiträge ein. Swiper-Karussells bieten mehr Funktionen wie Miniaturansichten und verschiedene Animationen.
Swiper:
Swiper mit aktivierten Miniaturansichten:
Splide:
Es gibt eine Schaltfläche in der Werkzeugleiste des Komponisten, um Karussells mit einem Platzhalterbild hinzuzufügen:
Die Markup für Karussells lautet wie folgt:
[wrap="Carousel" autoplay=true/false interval=<Dauer in ms>/false loop=true/false thumbs=true/false thumbs_loop=true/false]
![image1]()
![image2]()
![image3]()
...
[/wrap]
Um die Erstellung von Karussells zu vereinfachen, öffnet ein Klick auf die Schaltfläche in der Werkzeugleiste des Komponisten ein Modal (danke an Discourse GIFs TC!), in dem Sie die Konfiguration des Karussells auswählen können:
Sie können dann weitere Bilder im [wrap] hinzufügen.
Die (pro Karussell) Einstellungen sind wie folgt:
enable_thumbnails: Zeigt die Miniaturansichten der Bilder unter dem Karussell an.
enable_loop: Lässt das Karussell am Anfang neu beginnen, wenn es das Ende erreicht.
enable_thumbnail_loop: Lässt die Miniaturansichten des Karussells am Anfang neu beginnen, wenn sie das Ende erreichen.
Wenn Sie zu wenige Bilder haben, kann die Aktivierung dieser Einstellung zu einer fehlerhaften, ruckartigen Bewegung des Karussells führen. Es wird empfohlen, mehr Bilder zu haben, bevor Sie diese aktivieren.
enable_autoplay: Lässt das Karussell von selbst abspielen.
autoplay_interval: Die Anzahl der Millisekunden, die gewartet werden muss, bevor die nächste Folie abgespielt wird. Wird in Verbindung mit enable_autoplay verwendet. Wenn Sie dies leer lassen, wird standardmäßig 5000 verwendet.
Einstellungen
Die (globalen) Einstellungen sind wie folgt:
carousel_software: Welche Software die Karussells verwenden werden (Swiper/Splide); Swiper wird bevorzugt und ist der Standard.
image_carousel_placeholder: Das Standardbild für das Karussell, wenn es erstellt wird. Es ist standardmäßig ein enthaltenes reguläres Platzhalterbild:
show_pagination_buttons: Zeigt Paginierungspunkte unter dem Karussell an, um die Navigation zwischen den Bildern zu erleichtern.
image_transition_animation: [Nur für Swiper] Animation des Übergangs der Bilder zum nächsten; Standard ist ‘slide’, Optionen sind:
- cube
- fade
- cards
- flip
- slide (Standard)
pagination_button_color: Die Farbe der Paginierungspunkte; wenn dies leer gelassen wird, werden die Standardwerte von Swiper/Splide verwendet.
active_pagination_button_color: Die Farbe des Paginierungspunkts, wenn er sich auf dieser Folie befindet; wenn dies leer gelassen wird, werden die Standardwerte von Swiper/Splide verwendet.
Hinweise
Die aktuelle Unterstützung für Splide in dieser TC erlaubt keine Miniaturansichten und Übergangsanimationen. Ich freue mich über PRs für Splide-Miniaturansichten (die komplizierter sind).
Wenn jemand vertikale Miniaturansichten implementieren möchte, habe ich dafür Code im Repository (auskommentiert), der nicht sehr gut funktioniert. Ich freue mich über PRs, um dies hinzuzufügen (oder auf der aktuellen Implementierung aufzubauen).
Eine weitere Sache: Ich untersuche derzeit eine Möglichkeit, die Bilder des Karussells im Erstellungsmodal hinzuzufügen, stoße aber auf ein Problem, das hier beschrieben wird. Ich würde mich freuen, wenn jemand dort antworten könnte!
Danke
Danke an @Arkshine für die Inspiration hier. Ich verstehe, dass er das Repository hier erstellt hat (ich habe mich jedoch entschieden, mich für diese TC nicht auf dieses Repository zu beziehen).
Ich hoffe, das ist für jemanden nützlich!
Ich habe noch nichts gepostet, weil ich am Rich-Editor (Prosemirror)-View arbeite und es Zeit braucht, all diese neuen Dinge zu verstehen.