de de de de fr en de de de en de fa de la de la es la de de de de de de de en en de de fa de es de it de la de de es de es de de de de de fa en sv en de de de de fr en de
Einen Bildwechsler (Karussell, Carousel, Slider) mit Bildlegende (Caption) erstellen | gravik.ch
02.02.2022 carousel custom.css kopiervorlage markdown plugin twig
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
Auch für diese Situation haben die GRAV-Entwickler*innen eine komfortable Möglichkeit bereitgestellt. Für die Herstellung eines Bildwechslers mit Bildlegende sind zwei Plugins erforderlich, die aus der GRAV-Administrationsumgebung mühelos installiert werden können. Zusätzlich muss entweder Markdown in HTML oder die Verarbeitung von Twig erlaubt werden.
Schritt für Schritt zum Bildwechsler mit Bildlegende
In der Administrationsumgebung auf Plugins wechseln
Oben rechts auf Hinzufügen klicken
Im Eingabefeld (Filter) nach Shortcode suchen
Die beiden Plugins Shortcode Core sowie Shortcode Owl Carousel installieren (sind automatisch aktiviert)
Mehr zu Shortcode Core: https://github.com/getgrav/grav-plugin-shortcode-core/blob/master/README.md
Mehr zu Shortcode Owl Carousel: https://github.com/getgrav/grav-plugin-shortcode-owl-carousel/blob/master/README.md
Eine neue Seite («Default»), ein neues Blog-Item oder eine modulare Unterseite hinzufügen und auf «Speichern» klicken
Zu Versuchszwecken folgende Bilder herunterladen und auf der eigenen Seite hochladen (ins Feld «Seitenmedien» ziehen, speichern)
Um zu vermeiden, dass Bilder per HTML-Befehl eingebunden werden müssen, kann man entweder für die Seite Twig-Verarbeitung ermöglichen oder Markdown in HTML erlauben. Das Einbinden per HTML bringt den Nachteil mit sich, dass der Bild-Pfad später in bestimmten Situationen mühsam angepasst werden muss (z.B. Umbenennen einer Seite).
Folgenden Code kopieren und auf der neu hinzugefügten Seite eingeben
[owl-carousel items=1 loop=true autoplay=false nav=true]         Bildlegende mit kleiner Überschrift   Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.            Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.            Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.    [/owl-carousel]
Auf die Registerkarte Erweitert wechseln
Überschreibungen -> Verarbeitung -> bei Twig das Häkchen setzen -> Speichern, nach Belieben anpassen
Folgenden Code kopieren und auf der neu hinzugefügten Seite eingeben
[owl-carousel items=1 loop=true autoplay=false nav=true]   ![image-1](image-1.jpg "image-1")  Bildlegende mit kleiner Überschrift   Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.      ![image-2](image-2.jpg "image-2")     Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.      ![image-3](image-3.jpg "image-3")     Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.    [/owl-carousel]
In der Administrationsumgebung auf Einstellungen/System/Markdown wechseln (mehr zum Thema «Markdown und HTML»)
«Markdown Extra» aktivieren (auf «Ja» klicken, speichern)
Auf die Seite mit dem Bildwechsler wechseln, nach Belieben anpassen
vorheriger Beitrag nächster Beitrag
gravik.ch | Altenbergstrasse 8 | 3013 Bern | Mail