Phoenix template helpers for responsive media markup.
The helper is intentionally thin: callers choose the explicit variant order, and the helper delegates delivery URL resolution to Rindle.Delivery.
Summary
Functions
Renders an <audio> element with <source> entries for each ready variant
and an original-asset src fallback.
Renders a <picture> element with <source> entries for each ready variant
and an <img> fallback to the original asset.
Renders a <video> element with <source> entries for each ready variant
and an original-asset src fallback.
Functions
@spec audio_tag(module(), map(), keyword()) :: Phoenix.HTML.safe()
Renders an <audio> element with <source> entries for each ready variant
and an original-asset src fallback.
Variant order in :variants is preserved as the source order rendered into
the markup. Stale or non-ready variants are skipped, and the root <audio>
always falls back to the original asset URL so callers do not need to branch
on variant readiness.
Options
:variants— list of variant names to render in the order given.:tracks— reserved for future caption/subtitle support; accepted but not rendered in v1.4.- Any other key is rendered as a literal HTML attribute on the
<audio>tag.controlsdefaults totrue;preloaddefaults to"metadata".
@spec picture_tag(module(), map(), keyword()) :: Phoenix.HTML.safe()
Renders a <picture> element with <source> entries for each ready variant
and an <img> fallback to the original asset.
Variant order in :variants is preserved as the source order rendered into
the markup. Stale or non-ready variants are skipped — the fallback <img>
URL always resolves to the original asset.
Options
:variants— list of{name, media_query}tuples,%{name: ..., media: ...}maps, or bare atom variant names. Variants are rendered in the order given.:placeholder— string to use as thesrcattribute when no variant is ready and the asset has no:storage_key.- Any other key is rendered as a literal HTML attribute on the
<img>tag.
Example
<%= Rindle.HTML.picture_tag(MyApp.AvatarProfile, asset,
variants: [{:thumb, "(max-width: 480px)"}, {:large, nil}],
alt: "User avatar"
) %>
@spec video_tag(module(), map(), keyword()) :: Phoenix.HTML.safe()
Renders a <video> element with <source> entries for each ready variant
and an original-asset src fallback.
Variant order in :variants is preserved as the source order rendered into
the markup. Stale or non-ready variants are skipped, and the root <video>
always falls back to the original asset URL so callers do not need to branch
on variant readiness.
Options
:variants— list of variant names to render in the order given.:poster— a ready image variant atom or literal poster URL string.:tracks— reserved for future caption/subtitle support; accepted but not rendered in v1.4.- Any other key is rendered as a literal HTML attribute on the
<video>tag.preloaddefaults to"metadata".