Rindle.HTML (Rindle v0.1.5)

Copy Markdown View Source

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

audio_tag(profile, asset, opts \\ [])

@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. controls defaults to true; preload defaults to "metadata".

picture_tag(profile, asset, opts \\ [])

@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 the src attribute 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"
    ) %>

video_tag(profile, asset, opts \\ [])

@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. preload defaults to "metadata".