# Demo: Bilder, Galerien, Video & Audio im CMF

> So bindet CMF Medien ein: Bildergalerien, Bild-Text-Layouts, img-cover, Video, Audio und Upload per API – als Live-Demo direkt aus dem Block-Editor.

Kanonische URL: https://cmf.brosemedien.de/medien

---

# Medien

Bilder, Videos, Audio und PDFs – alles über `media_upload` hochladen und über strukturierte Blöcke einbinden.

*Eigene Videos liegen direkt auf deinem Server – externe Quellen (wie in dieser Demo) funktionieren genauso.*

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.

5
Bildformate

3
Video & Audio

1
Dokument (PDF)

10
Dateiendungen

## Bilder

### Einzelnes Bild mit Bildtext

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

![Berglandschaft mit Wald](/media/2026/03/berge-ad105964.jpg)
*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.

![Einzelner Baum](/media/2026/03/baum-ccef037f.jpg)

#### 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.

![Grünes Blatt Nahaufnahme](/media/2026/03/blatt3-d6204eda.jpg)
*Nahaufnahme*

![Blattstruktur im Gegenlicht](/media/2026/03/blatt2-a039aec7.jpg)
*Gegenlicht*

![Blattdetail mit Wassertropfen](/media/2026/03/blatt1-3a30ad09.jpg)
*Detail*

### 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.

![Ahornblatt in Nahaufnahme](/media/2026/06/blatt-ahorn-2c89cd98.jpg)

#### Ahorn

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

![Farnwedel mit feinen Fiederblättern](/media/2026/06/blatt-farn-30797c5f.jpg)

#### Farn

Auf kleinen Bildschirmen stapeln sich die Karten automatisch untereinander.

![Monstera-Blatt mit typischen Schlitzen](/media/2026/06/blatt-monstera-bca4329f.jpg)

#### 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.

![Dicht bewachsene Efeu-Wand](/media/2026/06/efeu-oben-dd98ed79.jpg)

### Der image-Block im Detail

Jedes Bild auf dieser Seite ist nur ein kleines JSON-Objekt. Die Felder im Überblick – und rechts ein vollständiger Beispiel-Block mit dem Ahorn-Bild aus der Karten-Galerie:

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` Optional, nur per API oder im JSON-Modus – wirken nur, wenn beide größer als 0 sind, und reservieren dann den Platz schon beim Laden (kein Layout-Springen)
`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](/media/2026/06/screenshot_editor-265a1f57.png)
*Block-Editor: Inhalte als strukturierte Blöcke*

![CMF Seitenübersicht mit Status und Navigation](/media/2026/06/screenshot_seiten-b928dfbe.png)
*Seitenliste: Status, Slug und Navigation im Blick*

![CMF Theme-Einstellungen mit Farb- und Schriftoptionen](/media/2026/06/screenshot_theme-6432e438.png)
*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

Per API kommt jede Datei ü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 KI-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 (HTTP 201, gekürzt)

```
{
  "ok": true,
  "data": {
    "src": "/media/2026/06/blatt-ahorn-2c89cd98.jpg",
    "url": "https://deine-domain.de/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](/download)[Mehr Demos](/demos)