jakstys.lt/layouts/shortcodes/img.html

<!--

# Responsive images and resizing

Our picture width is 700 css pixels. "Retina" screens have 2 device pixel ratio
(dpr), crazy folks have 4. So the maximum width of the picture we can possibly
care about is 700*4=2800px.
-->

<!-- image -->
{{ $src := resources.GetMatch (.Get "src") | resources.Fingerprint }}
{{ $jmax := $src | resources.Fingerprint }}
{{ $j350 := $src.Resize "350x" }}
{{ $j700 := $src.Resize "700x" }}
{{ $j1400 := $src.Resize "1400x" }}
{{ $j2800 := $src.Resize "2800x" }}

{{ $width := cond (eq (.Get "half") "true") "350px" "700px" }}

{{ with .Get "hint" }}
{{ else }}
  {{ errorf "missing value for param 'hint': %s" .Position }}
{{ end }}
{{ $hint := .Get "hint" }}
{{ $wmax := $src.Resize (printf "%dx%d webp" $src.Width $src.Height) }}
{{ $w350 := $src.Resize (print "350x webp " $hint ) }}
{{ $w700 := $src.Resize (print "700x webp " $hint ) }}
{{ $w1400 := $src.Resize (print "1400x webp " $hint ) }}
{{ $w2800 := $src.Resize (print "2800x webp " $hint ) }}

<figure {{ with .Get "class" }}class="{{.}}"{{ end }}>
    {{ with .Get "link" }}<a href="{{ . }}">{{ end }}
    <picture>
      <source type="image/webp"
          sizes="(max-width: 600px) 350px, {{ $width }}"
          {{- if eq $hint "graph" }}
            srcset='{{ $wmax.RelPermalink}} {{ $wmax.Width}}w'
          {{- else }}
            srcset='
            {{- if ge $src.Width "350" }}
              {{ with $w350.RelPermalink }}{{.}} 350w{{ end }}
            {{- end }}
            {{- if ge $src.Width "700" }}
              {{ with $w700.RelPermalink }}, {{.}} 700w{{ end }}
            {{- end }}
            {{- if ge $src.Width "1400" }}
              {{ with $w1400.RelPermalink }}, {{.}} 1400w{{ end }}
            {{- end }}
            {{- if ge $src.Width "2800" }}
              {{ with $w2800.RelPermalink }}, {{.}} 2800w{{ end }}
            {{- end }}'
        {{- end }}
      />
      <img
        sizes="(max-width: 600px) 350px, 700px"
        {{- if eq $hint "graph" }}
          srcset='{{ $jmax.RelPermalink}} {{ $jmax.Width}}w'
        {{- else }}
          srcset='
          {{- if ge $src.Width "350" }}
            {{ with $j350.RelPermalink }}{{.}} 350w{{ end }}
          {{- end }}
          {{- if ge $src.Width "700" }}
            {{ with $j700.RelPermalink }}, {{.}} 700w{{ end }}
          {{- end }}
          {{- if ge $src.Width "1400" }}
            {{ with $j1400.RelPermalink }}, {{.}} 1400w{{ end }}
          {{- end }}
          {{- if ge $src.Width "2800" }}
            {{ with $j2800.RelPermalink }}, {{.}} 2800w{{ end }}
          {{- end }}'
        {{- end }}
        src="{{ $j700.RelPermalink }}"
        {{ if or (.Get "alt") (.Get "caption") }}alt="{{ with .Get "alt" }}{{ . }}{{ else }}{{ .Get "caption" }}{{ end }}"{{ end }}
      />
    </picture>
    {{ if .Get "link" }}</a>{{ end }}
    {{ if or (or (.Get "title") (.Get "caption")) (.Get "attr") }}
    <figcaption>{{ if isset .Params "title" }}
        <h4>{{ .Get "title" }}</h4>{{ end }}
        {{ if or (.Get "caption") (.Get "attr") }}<p>
        {{ .Get "caption" }}
        {{ with .Get "attrlink" }}<a href="{{ . }}"> {{ end }}
            {{ .Get "attr" }}
        {{ if .Get "attrlink" }}</a> {{ end }}
        </p> {{ end }}
    </figcaption>
    {{ end }}
</figure>
<!-- image -->