{{- /*
  Image render hook.

  Emits intrinsic width and height so the browser can reserve space before the
  image loads, which is what stops the page shifting as images arrive
  (Cumulative Layout Shift). Hugo reports .Width/.Height for raster images it
  can decode; SVGs are not decoded, so the dimensions are read from the
  viewBox instead.

  Markdown attributes are preserved, so `![alt](img.png){ .img-fluid }` keeps
  its classes.
*/ -}}

{{- $dest := .Destination -}}
{{- $res := or (.Page.Resources.GetMatch $dest) (resources.GetMatch $dest) -}}

{{- /* Rendered content outlives the page it was written on: .Summary is reused
       on list pages and the home page, and the same HTML goes into the RSS
       feed. A bundle-relative destination like `hugo-logo.svg` resolves against
       whatever URL is displaying it, so it 404s everywhere except the post
       itself. Publishing the resource's own path keeps the image reachable from
       any context. Destinations we cannot resolve - absolute URLs, static files
       - are passed through untouched. */ -}}
{{- $src := $dest -}}

{{- $w := "" -}}
{{- $h := "" -}}
{{- with $res -}}
  {{- $src = .RelPermalink -}}
  {{- if eq .MediaType.SubType "svg" -}}
    {{- with (findRESubmatch `viewBox="[\d.-]+ +[\d.-]+ +([\d.]+) +([\d.]+)"` .Content 1) -}}
      {{- $vb := index . 0 -}}
      {{- $w = index $vb 1 -}}
      {{- $h = index $vb 2 -}}
    {{- end -}}
  {{- else -}}
    {{- $w = .Width -}}
    {{- $h = .Height -}}
  {{- end -}}
{{- end -}}

{{- /* The first image on a page is often the largest contentful paint, so it
       is left eager; later ones are lazy. */ -}}
<img src="{{ $src | safeURL }}" alt="{{ .Text }}"
  {{- with .Title }} title="{{ . }}"{{ end }}
  {{- if and $w $h }} width="{{ $w }}" height="{{ $h }}"{{ end }}
  {{- if .Ordinal }} loading="lazy"{{ end }}
  {{- range $k, $v := .Attributes }}{{ with $v }} {{ $k }}="{{ $v }}"{{ end }}{{ end -}}
>