Medien
Blöcke zum Einbetten von Videos, Audio, Bildergalerien, Feeds und beliebigen externen Inhalten (Kategorie media, Scope all). Video- und Audio-Einbettungen sind responsiv (Seitenverhältnis über ratio: 16:9, 4:3, 1:1, 9:16) und laden verzögert (loading=lazy).
DSGVO: Zwei-Klick-Einwilligung
Externe Einbettungen (YouTube, Vimeo, Twitch, Spotify, embed) übertragen beim Laden Daten — u. a. die IP-Adresse — an den Anbieter. HeroCMS lädt sie deshalb standardmäßig erst nach ausdrücklicher Einwilligung: Es erscheint zunächst eine Hinweis-Fläche; erst ein Klick auf „Inhalt laden" bindet den Anbieter ein. Optional lässt sich pro Anbieter „künftig immer laden" merken (nur im Browser des Besuchers gespeichert). Die Vorschau unten zeigt genau diese Fläche.
- Vor der Einwilligung wird nichts vom Anbieter geladen (kein iframe, kein Vorschaubild von dessen Servern).
feed(der Server holt den Feed),video/audioundgallerysind selbst gehostet und benötigen keine Einwilligung.- Konfiguration unter Admin → Einstellungen → Medien & Datenschutz: Einwilligung an/aus und ein Link zur Datenschutzerklärung (im Hinweis verlinkt). Ein selbst gehostetes
posterdient als datensparsame Vorschau.
youtube
Bettet ein YouTube-Video ein (datenschutzfreundlich über youtube-nocookie.com). Die ID wird aus id oder einer beliebigen YouTube-url erkannt.
| Attribut | Werte | Wirkung |
|---|---|---|
id / url | Video-ID oder YouTube-Link | welches Video |
ratio | 16:9 · 4:3 · 1:1 · 9:16 | Seitenverhältnis (Standard 16:9) |
title | Text | Titel für Barrierefreiheit |
youtube id=aqz-KE-bpKQvimeo
Wie youtube, für Vimeo. id oder Vimeo-url; ratio und title analog.
vimeo id=76979871 vimeo url=https://vimeo.com/76979871 ratio=4:3
twitch
Bettet einen Twitch-Kanal, ein Video oder einen Clip ein. Der erforderliche parent-Parameter wird automatisch aus der Domain der Seite gesetzt.
| Attribut | Werte | Wirkung |
|---|---|---|
channel | Kanalname | Live-Stream des Kanals |
video | Video-ID | aufgezeichnetes Video |
clip | Clip-Slug | ein Clip |
twitch channel=monstercat twitch video=1234567890
video · audio
Selbstgehostete Medien über den HTML5-Player. src ist Pflicht; video nimmt optional poster und ratio.
video src=/uploads/clip.mp4 poster=/uploads/still.jpg audio src=/uploads/folge-12.mp3
gallery
Ein responsives Bilder-Raster aus untergeordneten image-Blöcken. Ein Klick öffnet das Bild groß (Lightbox).
| Attribut | Werte | Wirkung |
|---|---|---|
cols | 2–5 (Standard 3) | Spaltenzahl (ab 640px zweispaltig) |
Kinder: image | src, alt je Bild | |
gallery cols=3
image src=data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22400%22%20height%3D%22400%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22g%22%20x1%3D%220%22%20y1%3D%220%22%20x2%3D%221%22%20y2%3D%221%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%23ea580c%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%237c2d12%22%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22url(%23g)%22%2F%3E%3Ctext%20x%3D%2250%25%22%20y%3D%2250%25%22%20fill%3D%22%23fff%22%20font-family%3D%22Georgia%2Cserif%22%20font-size%3D%2222%22%20text-anchor%3D%22middle%22%20dominant-baseline%3D%22middle%22%20opacity%3D%220.9%22%3EFoto%201%3C%2Ftext%3E%3C%2Fsvg%3E
image src=data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22400%22%20height%3D%22400%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22g%22%20x1%3D%220%22%20y1%3D%220%22%20x2%3D%221%22%20y2%3D%221%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%230d9488%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23134e4a%22%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22url(%23g)%22%2F%3E%3Ctext%20x%3D%2250%25%22%20y%3D%2250%25%22%20fill%3D%22%23fff%22%20font-family%3D%22Georgia%2Cserif%22%20font-size%3D%2222%22%20text-anchor%3D%22middle%22%20dominant-baseline%3D%22middle%22%20opacity%3D%220.9%22%3EFoto%202%3C%2Ftext%3E%3C%2Fsvg%3E
image src=data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22400%22%20height%3D%22400%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22g%22%20x1%3D%220%22%20y1%3D%220%22%20x2%3D%221%22%20y2%3D%221%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%237c3aed%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%234c1d95%22%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22url(%23g)%22%2F%3E%3Ctext%20x%3D%2250%25%22%20y%3D%2250%25%22%20fill%3D%22%23fff%22%20font-family%3D%22Georgia%2Cserif%22%20font-size%3D%2222%22%20text-anchor%3D%22middle%22%20dominant-baseline%3D%22middle%22%20opacity%3D%220.9%22%3EFoto%203%3C%2Ftext%3E%3C%2Fsvg%3E
image src=data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22400%22%20height%3D%22400%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22g%22%20x1%3D%220%22%20y1%3D%220%22%20x2%3D%221%22%20y2%3D%221%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%232563eb%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%231e3a8a%22%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22url(%23g)%22%2F%3E%3Ctext%20x%3D%2250%25%22%20y%3D%2250%25%22%20fill%3D%22%23fff%22%20font-family%3D%22Georgia%2Cserif%22%20font-size%3D%2222%22%20text-anchor%3D%22middle%22%20dominant-baseline%3D%22middle%22%20opacity%3D%220.9%22%3EFoto%204%3C%2Ftext%3E%3C%2Fsvg%3E
image src=data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22400%22%20height%3D%22400%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22g%22%20x1%3D%220%22%20y1%3D%220%22%20x2%3D%221%22%20y2%3D%221%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%23db2777%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23831843%22%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22url(%23g)%22%2F%3E%3Ctext%20x%3D%2250%25%22%20y%3D%2250%25%22%20fill%3D%22%23fff%22%20font-family%3D%22Georgia%2Cserif%22%20font-size%3D%2222%22%20text-anchor%3D%22middle%22%20dominant-baseline%3D%22middle%22%20opacity%3D%220.9%22%3EFoto%205%3C%2Ftext%3E%3C%2Fsvg%3E
image src=data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22400%22%20height%3D%22400%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22g%22%20x1%3D%220%22%20y1%3D%220%22%20x2%3D%221%22%20y2%3D%221%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%2316a34a%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%2314532d%22%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22url(%23g)%22%2F%3E%3Ctext%20x%3D%2250%25%22%20y%3D%2250%25%22%20fill%3D%22%23fff%22%20font-family%3D%22Georgia%2Cserif%22%20font-size%3D%2222%22%20text-anchor%3D%22middle%22%20dominant-baseline%3D%22middle%22%20opacity%3D%220.9%22%3EFoto%206%3C%2Ftext%3E%3C%2Fsvg%3E%22%2F%3E%3Ctext%20x%3D%2250%25%22%20y%3D%2250%25%22%20fill%3D%22%23fff%22%20font-family%3D%22Georgia%2Cserif%22%20font-size%3D%2222%22%20text-anchor%3D%22middle%22%20dominant-baseline%3D%22middle%22%20opacity%3D%220.9%22%3EFoto%201%3C%2Ftext%3E%3C%2Fsvg%3E)
%22%2F%3E%3Ctext%20x%3D%2250%25%22%20y%3D%2250%25%22%20fill%3D%22%23fff%22%20font-family%3D%22Georgia%2Cserif%22%20font-size%3D%2222%22%20text-anchor%3D%22middle%22%20dominant-baseline%3D%22middle%22%20opacity%3D%220.9%22%3EFoto%202%3C%2Ftext%3E%3C%2Fsvg%3E)
%22%2F%3E%3Ctext%20x%3D%2250%25%22%20y%3D%2250%25%22%20fill%3D%22%23fff%22%20font-family%3D%22Georgia%2Cserif%22%20font-size%3D%2222%22%20text-anchor%3D%22middle%22%20dominant-baseline%3D%22middle%22%20opacity%3D%220.9%22%3EFoto%203%3C%2Ftext%3E%3C%2Fsvg%3E)
%22%2F%3E%3Ctext%20x%3D%2250%25%22%20y%3D%2250%25%22%20fill%3D%22%23fff%22%20font-family%3D%22Georgia%2Cserif%22%20font-size%3D%2222%22%20text-anchor%3D%22middle%22%20dominant-baseline%3D%22middle%22%20opacity%3D%220.9%22%3EFoto%204%3C%2Ftext%3E%3C%2Fsvg%3E)
%22%2F%3E%3Ctext%20x%3D%2250%25%22%20y%3D%2250%25%22%20fill%3D%22%23fff%22%20font-family%3D%22Georgia%2Cserif%22%20font-size%3D%2222%22%20text-anchor%3D%22middle%22%20dominant-baseline%3D%22middle%22%20opacity%3D%220.9%22%3EFoto%205%3C%2Ftext%3E%3C%2Fsvg%3E)
%22%2F%3E%3Ctext%20x%3D%2250%25%22%20y%3D%2250%25%22%20fill%3D%22%23fff%22%20font-family%3D%22Georgia%2Cserif%22%20font-size%3D%2222%22%20text-anchor%3D%22middle%22%20dominant-baseline%3D%22middle%22%20opacity%3D%220.9%22%3EFoto%206%3C%2Ftext%3E%3C%2Fsvg%3E)
feed
Zeigt die neuesten Einträge eines RSS- oder Atom-Feeds. Der Feed wird server-seitig geladen und zwischengespeichert (10 Minuten).
| Attribut | Werte | Wirkung |
|---|---|---|
url | https-URL | Feed-Adresse (RSS/Atom) |
count | 1–20 (Standard 5) | Anzahl der Einträge |
title | Text | Überschrift über der Liste |
feed url=https://example.com/blog.rss count=5 title="Aus dem Blog"
embed
Eine generische, responsive iframe-Einbettung für beliebige https-Inhalte — etwa Karten, Umfragen oder Kalender.
| Attribut | Werte | Wirkung |
|---|---|---|
url | https-URL | einzubettende Seite |
ratio | 16:9 · 4:3 · 1:1 · 9:16 | Seitenverhältnis |
embed url=https://www.openstreetmap.org/export/embed.html ratio=4:3
spotify
Bettet einen Spotify-Titel, ein Album, eine Playlist oder eine Folge ein.
| Attribut | Werte | Wirkung |
|---|---|---|
id | Spotify-ID | was eingebettet wird |
type | track · album · playlist · episode · show · artist | Art des Inhalts (Standard track) |
spotify id=4cOdK2wGLETKBW3PvgPWqT type=track