feat: add image render hook

landscapePhotoWidths = [900, 800, 700, 600, 500]

portraitPhotoWidths = [800, 700, 600, 500]

lqipWidth = "20x"

smallLimit = "300"

# Footer

footer = "Powered by <a href=\"https://www.netlify.com/\">Netlify</a>, <a href=\"https://gohugo.io/\">Hugo</a>, and <a href=\"https://getdoks.org/\">Doks</a>"

{{ $image := .Page.Resources.GetMatch .Destination -}}

{{ $lqip := $image.Resize site.Params.lqipWidth -}}

{{ $imgSrc := "" -}}

{{ $imgSrcSet := slice -}}

{{ $widths := site.Params.landscapePhotoWidths -}}

{{ if gt $image.Height $image.Width -}}

  {{ $widths = site.Params.portraitPhotoWidths -}}

{{ end -}}

{{ range $widths -}}

  {{ $srcUrl := (printf "%dx" . | $image.Resize).Permalink -}}

  {{ if eq $imgSrc "" -}}{{ $imgSrc = $srcUrl -}}{{ end -}}

  {{ $imgSrcSet = $imgSrcSet | append (printf "%s %dw" $srcUrl .) -}}

{{ end -}}

{{ $imgSrcSet = (delimit $imgSrcSet ",") -}}

{{ if gt $image.Width site.Params.smallLimit -}}

  <figure class="figure">

    <img class="figure-img img-fluid lazyload blur-up" data-sizes="auto" src="{{ $lqip.Permalink }}" data-srcset="{{ $imgSrcSet }}" width="{{ $image.Width }}" height="{{ $image.Height }}" alt="{{ $.Text }}">

    <noscript><img class="figure-img img-fluid" sizes="100vw" srcset="{{ $imgSrcSet }}" src="{{ $image.Permalink }}" width="{{ $image.Width }}" height="{{ $image.Height }}" alt="{{ $.Text }}"></noscript>

    {{ with $.Title }}<figcaption class="figure-caption">{{ . | safeHTML }}</figcaption>{{ end -}}

  </figure>

{{ else -}}

  <img class="img-fluid lazyload blur-up" src="{{ $lqip.Permalink }}" data-src="{{ $image.Permalink }}" width="{{ $image.Width }}" height="{{ $image.Height }}" alt="{{ $.Text }}">

{{ end -}}