Problem

Wie sich «out-of-the-box» ein Bildwechsler ohne Bildunterschrift erstellen lässt, kann hier nachgelesen werden. Und wenn zusätzlich eine Bildlegende erwünscht ist?

Lösung

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

1. In der Administrationsumgebung auf Plugins wechseln
2. Oben rechts auf Hinzufügen klicken
3. Im Eingabefeld (Filter) nach Shortcode suchen
4. 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
5. Eine neue Seite («Default»), ein neues Blog-Item oder eine modulare Unterseite hinzufügen und auf «Speichern» klicken
6. 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).

Variante 1: Twig

7. Folgenden Code kopieren und auf der neu hinzugefügten Seite eingeben

[owl-carousel items=1 loop=true autoplay=false nav=true]
<div>
<img title="image-1" alt="image-1" src="{{ page.media['image-1.jpg'].url }}" >
<p></p>
<h6>Bildlegende mit kleiner Überschrift</h6> 
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
</div>
<div>
<img  title="image-2" alt="image-2" src="{{ page.media['image-2.jpg'].url }}" >
<p></p> 
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
</div>
<div>
<img title="image-3" alt="image-3" src="{{ page.media['image-3.jpg'].url }}" >
<p></p>    
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
</div>
[/owl-carousel]

8. Auf die Registerkarte Erweitert wechseln
9. Überschreibungen -> Verarbeitung -> bei Twig das Häkchen setzen -> Speichern, nach Belieben anpassen

Variante 2: Markdown

7. Folgenden Code kopieren und auf der neu hinzugefügten Seite eingeben

[owl-carousel items=1 loop=true autoplay=false nav=true]
<div markdown="1">
![image-1](image-1.jpg "image-1")
<h6>Bildlegende mit kleiner Überschrift</h6>  
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
</div>
<div markdown="1">
![image-2](image-2.jpg "image-2")
<p></p> 
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
</div>
<div markdown="1">
![image-3](image-3.jpg "image-3")
<p></p>    
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
</div>
[/owl-carousel]

8. In der Administrationsumgebung auf Einstellungen/System/Markdown wechseln (mehr zum Thema «Markdown und HTML»)
9. «Markdown Extra» aktivieren (auf «Ja» klicken, speichern)
10. Auf die Seite mit dem Bildwechsler wechseln, nach Belieben anpassen