Bilder und Videos in Grav

Diese Seite demonstriert die Verwendung von echten Medien in Grav.

1. Bild im Original

Demo-Bild

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

2. Bild mit Grav-Modifikatoren

Verkleinert (resize)

Verkleinert

Graustufen

Weichgezeichnet (blur)

Blur

Mit Rahmen und Rotation

Rotiert

3. Responsive Bild-Sizes

Responsiv

4. SVG-Grafik

5. PNG-Icon

6. HTML5 Video

7. YouTube einbinden

8. Audio einbinden

Markup-Erklärung

Markdown-Syntax für Bilder

Syntax	Wirkung
`![Alt-Text](demo.jpg)`	Originalbild
`![Alt](demo.jpg?resize=400,200)`	Verkleinert auf 400×200
`![Alt](demo.jpg?grayscale)`	Schwarzweiß-Filter
`![Alt](demo.jpg?blur=5)`	Weichzeichner
`![Alt](demo.jpg?rotate=90)`	90° Rotation
`![Alt](demo.jpg?sizes=200,400,800)`	Responsive srcset

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 <iframe>-Tags als Text rendert, gibt es drei Lösungswege:

JavaScript-Injection (wie oben): <div id="yt"> + <script> fügt iframe dynamisch ein
Twig-Template: Eigenes default.html.twig Partial mit include-Anweisung
Shortcode-Plugin: Eigenen Shortcode registrieren

Tip

Grav verarbeitet Bilder automatisch über URL-Parameter. <video> und <audio> Tags werden direkt gerendert. <iframe> Tags benötigen JavaScript-Injection oder Twig-Templates, da der Markdown-Parser sie escaped.