Medien
Das CMF unterstützt verschiedene Medientypen direkt. Diese Seite zeigt live, wie Bilder, Videos und Dokumente eingebunden werden – von einfachen Einzelbildern bis zu responsiven Galerien und eingebetteten Videos.
Bilder
Einzelnes Bild mit Bildtext
Ein image-Block mit src, alt und caption. Das Bild wird als <figure> mit <figcaption> ausgegeben.
Bild mit Text daneben
Ein klassisches Bild-Text-Layout entsteht mit einem 2-spaltigen columns-Block. Ideal für Produktfotos, Teamporträts oder illustrierte Abschnitte.
Bild und Text im Raster
Links ein Bild, rechts beschreibender Text. Auf kleinen Bildschirmen stapeln sich die Spalten automatisch untereinander.
- Bilder immer über media_upload hochladen
- Den zurückgegebenen src-Pfad verwenden
- alt-Text immer inhaltlich beschreiben
- loading: lazy für alle Bilder unter dem Fold
Bildergalerie
Mehrere Bilder nebeneinander – ein columns-Block mit je einem image-Block pro Spalte. Responsiv: auf kleinen Bildschirmen stapeln sie sich.
Video
Responsives Video
Videos werden per html-Block eingebunden. Die Klasse .video-responsive sorgt für ein 16:9-Seitenverhältnis auf allen Bildschirmgrößen.
Zwei Wege:
- Eigene MP4-Datei über
media_upload - YouTube/Vimeo per
<iframe>Embed-URL
Mit poster wird ein Vorschaubild gesetzt, preload="none" spart Bandbreite.
Audio & Dokumente
Audio
MP3- und WAV-Dateien werden per <audio>-Tag eingebunden. Der Browser zeigt einen nativen Player.
<audio controls style="width:100%">
<source src="/media/.../audio.mp3">
</audio>PDF-Dokumente
PDFs als Download-Link oder eingebettet per <iframe>. Beide Varianten funktionieren über html-Blöcke.
<iframe src="/media/.../dok.pdf"
style="width:100%;height:500px">
</iframe>Unterstützte Dateiformate
Bilder
- .jpg / .jpeg
- .png
- .webp
- .gif
- .svg
Video & Audio
- .mp4 (Video)
- .mp3 (Audio)
- .wav (Audio)
Dokumente
Medien hochladen und loslegen
Lade Bilder, Videos und Dokumente über das Admin-Backend oder die API hoch – und binde sie direkt in deine Seiten ein.