Referenz

HeroML

Media

Blocks for embedding videos, audio, image galleries, feeds and any external content (category media, scope all). Video and audio embeds are responsive (aspect ratio via ratio: 16:9, 4:3, 1:1, 9:16) and load lazily (loading=lazy).

Provider embeds build a fixed, trusted iframe address from the id or URL — HeroML stays “data, not code”.

External embeds (YouTube, Vimeo, Twitch, Spotify, embed) transfer data — including the IP address — to the provider when they load. HeroCMS therefore loads them only after explicit consent by default: a notice surface appears first, and only a click on “Load content” embeds the provider. Optionally, “always load” can be remembered per provider (stored only in the visitor’s browser). The preview below shows exactly that surface.

Before consent, nothing is loaded from the provider (no iframe, no thumbnail from their servers).
feed (the server fetches it), video/audio and gallery are self-hosted and need no consent.
Configure under Admin → Settings → Media & privacy: consent on/off and a link to the privacy policy (linked in the notice). A self-hosted poster serves as a data-frugal preview.

youtube

Embeds a YouTube video (privacy-friendly via youtube-nocookie.com). The id is detected from id or any YouTube url.

Attribute	Values	Effect
`id` / `url`	video id or YouTube link	which video
`ratio`	16:9 · 4:3 · 1:1 · 9:16	aspect ratio (default 16:9)
`title`	text	title for accessibility

youtube id=aqz-KE-bpKQ

Result ↓

vimeo

Like youtube, for Vimeo. id or a Vimeo url; ratio and title as above.

vimeo id=76979871
vimeo url=https://vimeo.com/76979871 ratio=4:3

twitch

Embeds a Twitch channel, video or clip. The required parent parameter is set automatically from the page’s domain.

Attribute	Values	Effect
`channel`	channel name	the channel’s live stream
`video`	video id	a recorded video
`clip`	clip slug	a clip

twitch channel=monstercat
twitch video=1234567890

video · audio

Self-hosted media via the HTML5 player. src is required; video optionally takes poster and ratio.

video src=/uploads/clip.mp4 poster=/uploads/still.jpg
audio src=/uploads/episode-12.mp3

gallery

A responsive image grid from child image blocks. A click opens the image large (lightbox).

Attribute	Values	Effect
`cols`	2–5 (default 3)	column count (two columns below 640px)
children: `image`		`src`, `alt` per image

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

Result ↓

feed

Shows the latest entries of an RSS or Atom feed. The feed is fetched server-side and cached (10 minutes).

Attribute	Values	Effect
`url`	https URL	feed address (RSS/Atom)
`count`	1–20 (default 5)	number of entries
`title`	text	heading above the list

feed url=https://example.com/blog.rss count=5 title="From the blog"

embed

A generic, responsive iframe embed for any https content — maps, polls or calendars, for example.

Attribute	Values	Effect
`url`	https URL	page to embed
`ratio`	16:9 · 4:3 · 1:1 · 9:16	aspect ratio

embed url=https://www.openstreetmap.org/export/embed.html ratio=4:3

spotify

Embeds a Spotify track, album, playlist or episode.

Attribute	Values	Effect
`id`	Spotify id	what to embed
`type`	track · album · playlist · episode · show · artist	content type (default track)

spotify id=4cOdK2wGLETKBW3PvgPWqT type=track