image

Responsive `<picture>` element generator targeting AVIF and WebP sources on the assets CDN.

≈ 2 min read 210 words Updated 2026-08-23

On this page

macros/image.html is the canonical way to render images on www.wheelofheaven.world. The cdn macro emits a <picture> element with AVIF + WebP sources fetched from assets.wheelofheaven.world, with sensible defaults for sizing and lazy loading.

Source: themes/bifrost/templates/macros/image.html · CDN: assets.wheelofheaven.world

Public API#

{%/* import "macros/image.html" as img */%}

{{ img::cdn(path="wiki/human-genesis", alt="Human Genesis illustration") }}

{{ img::cdn(
    path="timeline/equinox_1945",
    alt="Equinox 1945",
    class="hero-image",
    lazy=true
) }}

{{ img::cdn(
    path="library/le-message-book",
    alt="Le Message book cover",
    sizes="(max-width: 768px) 100vw, 50vw"
) }}

Parameters#

ParamTypeRequiredDefaultWhat
pathstringyes—Image path relative to CDN /images/ (no extension).
altstringyes—Alt text. Required for accessibility.
classstringno""Optional CSS class(es).
lazyboolnofalseIf true, loading="lazy" + shows thumbnail first.
sizesstringno"100vw"Responsive sizes attribute.
widthstringno""Optional width attribute.
heightstringno""Optional height attribute.

CDN base URL#

Pulled from config.extra.cdn_url, falling back to https://assets.wheelofheaven.world. The macro never hardcodes the CDN.

Why this is a macro#

<picture> elements with AVIF + WebP sources are too verbose to write manually in every template. Centralising the pattern in one macro means:

  • Adding a new format (e.g. JPEG XL) is one edit.
  • Switching CDN provider is one config change.
  • Lazy-loading defaults can be tuned globally.

Edit this page on GitHub