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.

Bildformate

Video & Audio

Dokument (PDF)

Dateiformate

Bilder

Einzelnes Bild mit Bildtext

Ein image-Block mit src, alt und caption. Das Bild wird als <figure> mit <figcaption> ausgegeben.

Berglandschaft mit Wald — Dieses Bild wurde als image-Block eingebunden. Der caption-Text erscheint als Bildunterschrift.

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.

Blattstruktur im Gegenlicht — Gegenlicht

Galerie als Karten

Sollen die Bilder etwas mehr Rahmen bekommen, eignet sich das card-grid: jede Karte kombiniert Bild, Titel und Kurztext – zum Beispiel für Portfolios, Teamseiten oder Produktübersichten.

Ahorn

Bild, Titel und Kurztext in einer Karte – das Raster sorgt für gleiche Breiten.

Farn

Auf kleinen Bildschirmen stapeln sich die Karten automatisch untereinander.

Monstera

Alles ohne eigenes CSS – nur card-grid und card aus dem Design-System.

Flächen füllen mit img-cover

Ein normales Bild behält seine natürliche Höhe. Mit der Klasse img-cover füllt es stattdessen seinen Container komplett aus – object-fit: cover schneidet den Ausschnitt passend zu. Im Beispiel unten streckt sich das Bild rechts exakt auf die Höhe der Textbox links:

So funktioniert es

Das Efeu-Foto rechts ist ein ganz normales <img> mit der Klasse img-cover:

width und height stehen auf 100%
object-fit: cover füllt die Fläche und beschneidet die Ränder
die Bildmitte bleibt immer sichtbar

Egal wie lang dieser Text wird – das Bild wächst mit. Perfekt für Teaser, Karten und Bild-Text-Reihen mit gleicher Höhe.

Der image-Block im Detail

Jedes Bild auf dieser Seite ist nur ein kleines JSON-Objekt. Die Felder im Überblick – und rechts der echte Block, der das Ahorn-Bild oben rendert:

Feld	Wirkung
`src`	Pfad aus der media_upload-Antwort
`alt`	Bildbeschreibung – Pflicht für Barrierefreiheit und SEO
`caption`	Optional – wird als `<figcaption>` unter dem Bild gerendert
`width` / `height`	Reservieren den Platz schon beim Laden – kein Layout-Springen (CLS)
`loading`	`lazy` lädt das Bild erst kurz bevor es sichtbar wird

{
  "type": "image",
  "data": {
    "src": "/media/2026/06/blatt-ahorn-2c89cd98.jpg",
    "alt": "Ahornblatt in Nahaufnahme",
    "caption": "Optionaler Bildtext",
    "width": 1200,
    "height": 800,
    "loading": "lazy"
  }
}

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>
  <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">
</iframe>

Das Admin-Backend in Bildern

Screenshots sind auch nur Bilder: Die drei Ansichten des CMF-Backends unten sind gewöhnliche image-Blöcke in einem 3-spaltigen columns-Block – mit caption als Bildunterschrift.

CMF Block-Editor mit Inhaltsblöcken einer Seite — Block-Editor: Inhalte als strukturierte Blöcke

CMF Seitenübersicht mit Status und Navigation — Seitenliste: Status, Slug und Navigation im Blick

CMF Theme-Einstellungen mit Farb- und Schriftoptionen — Theme: Farben und Typografie zentral steuern

Unterstützte Dateiformate

Bilder

.jpg / .jpeg
.png
.webp
.gif
.svg

Video & Audio

.mp4 (Video)
.mp3 (Audio)
.wav (Audio)

Dokumente

.pdf

Medien per API hochladen

Jede Datei auf dieser Seite kam über denselben Weg ins CMF: ein POST auf media_upload. Die Antwort liefert direkt den src-Pfad für den image-Block – ideal auch für Skripte und Maschinen-Agenten.

Anfrage

curl -X POST \
  "https://deine-domain.de/api.php?a=media_upload" \
  -H "Authorization: Bearer <API-KEY>" \
  -F "file=@blatt-ahorn.jpg"

Antwort

{
  "ok": true,
  "data": {
    "src": "/media/2026/06/blatt-ahorn-2c89cd98.jpg",
    "filename": "blatt-ahorn-2c89cd98.jpg"
  }
}

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.

CMF herunterladen Mehr Demos