Bilder und Videos in Grav

Diese Seite demonstriert die Verwendung von echten Medien in Grav.

1. Bild im Original

Das Bild liegt im gleichen Ordner wie default.md und wird automatisch von Grav erkannt.

2. Bild mit Grav-Modifikatoren

Verkleinert (resize)

Graustufen

Weichgezeichnet (blur)

Mit Rahmen und Rotation

3. Responsive Bild-Sizes

4. SVG-Grafik

5. PNG-Icon

6. HTML5 Video

Das video-Tag wird in Grav direkt im Markdown gerendert. Beispiel-Syntax (als Text):

[video controls width="100%" style="max-width:640px;border-radius:8px"]
  [source src="video.mp4" type="video/mp4"]
  Ihr Browser unterstützt kein video-Tag.
[/video]

Das Video wird mit dem HTML5 video-Tag eingebunden. Die Quelle wird über ein source-Tag referenziert.

7. YouTube einbinden

YouTube-Videos erfordern ein iframe-Tag. Da Grav's Markdown-Parser spitze Klammern escaped, gibt es drei Lösungswege (siehe unten).

8. Audio einbinden

Das audio-Tag wird ebenfalls direkt gerendert. Beispiel-Syntax:

[audio controls style="width:100%;max-width:640px"]
  [source src="audio.mp3" type="audio/mpeg"]
  Ihr Browser unterstützt kein audio-Tag.
[/audio]

Markup-Erklärung

Markdown-Syntax für Bilder

HTML5 Video

[video controls width="100%" style="max-width:640px"]
  [source src="video.mp4" type="video/mp4"]
[/video]

YouTube einbinden

Da Grav's Markdown-Parser das iframe-Tag als Text rendert, gibt es drei Lösungswege:

1. JavaScript-Injection: Ein div-Tag mit ID plus ein script-Tag fügt das iframe dynamisch ein
2. Twig-Template: Eigenes default.html.twig Partial mit include-Anweisung
3. Shortcode-Plugin: Eigenen Shortcode registrieren

7. YouTube einbinden