{# Image-rendering macro, used both by templates (directly via import)
and indirectly by the `img` shortcode (which forwards to it).
Modes:
- `srcset_widths="480,768,…"` non-empty: emit a responsive `srcset`
over those widths. `sizes` should describe the layout (e.g.
"100vw" for the full-width hero). The `src` fallback uses the
largest width. CSV form because Tera macros only allow scalar
defaults, not arrays.
- `width > 0`: single resized variant via Zola's image pipeline.
- `width = 0` (default): raw
straight from /static/images/.
In all modes we omit the HTML width/height attributes — the theme CSS
sizes the image, matching the live Grav site's pattern. Avoiding the
HTML width attribute sidesteps a stretch artefact triggered by
Bootstrap-3's `img { height: auto !important }` interacting with
`.float-right` padding.
`lazy=false` switches off `loading="lazy"`. Use it for above-the-fold
images (LCP candidates) like the first hero slide. #}
{% macro render(src, width=0, alt="", class="", srcset_widths="", sizes="", lazy=true) %}
{%- set width = width | int -%}
{%- set loading_attr = "" -%}
{%- if lazy -%}{%- set loading_attr = ' loading="lazy"' -%}{%- endif -%}
{%- if srcset_widths -%}
{%- set widths = srcset_widths | split(pat=",") -%}
{%- set largest = widths | last | trim | int -%}
{%- set fallback = resize_image(path="static/images/" ~ src, width=largest, op="fit_width", quality=82) -%}
{%- elif width > 0 -%}
{%- set resized = resize_image(path="static/images/" ~ src, width=width, op="fit_width", quality=85) -%}
{%- else -%}
{%- endif -%}
{% endmacro render %}