{# 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) -%} {{ alt }} {%- elif width > 0 -%} {%- set resized = resize_image(path="static/images/" ~ src, width=width, op="fit_width", quality=85) -%} {{ alt }} {%- else -%} {{ alt }} {%- endif -%} {% endmacro render %}