<!-- # 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 -->