87 lines
3.1 KiB
HTML
87 lines
3.1 KiB
HTML
<!--
|
|
|
|
# Responsive images and resizing
|
|
|
|
Our picture width is 648 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 648*4=2592px.
|
|
-->
|
|
|
|
<!-- image -->
|
|
{{ $src := resources.GetMatch (.Get "src") | resources.Fingerprint }}
|
|
{{ $jmax := $src | resources.Fingerprint }}
|
|
{{ $j324 := $src.Resize "324x" }}
|
|
{{ $j648 := $src.Resize "648x" }}
|
|
{{ $j1296 := $src.Resize "1296x" }}
|
|
{{ $j2592 := $src.Resize "2592x" }}
|
|
|
|
{{ $width := cond (eq (.Get "half") "true") "324px" "648px" }}
|
|
|
|
{{ 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) }}
|
|
{{ $w324 := $src.Resize (print "324x webp " $hint ) }}
|
|
{{ $w648 := $src.Resize (print "648x webp " $hint ) }}
|
|
{{ $w1296 := $src.Resize (print "1296x webp " $hint ) }}
|
|
{{ $w2592 := $src.Resize (print "2592x webp " $hint ) }}
|
|
|
|
<figure {{ with .Get "class" }}class="{{.}}"{{ end }}>
|
|
<a href="{{ $jmax.RelPermalink }}">
|
|
<picture>
|
|
<source type="image/webp"
|
|
sizes="(max-width: 600px) 324px, {{ $width }}"
|
|
srcset='
|
|
{{- if ge $src.Width "324" }}
|
|
{{ with $w324.RelPermalink }}{{.}} 324w{{ end }}
|
|
{{- end }}
|
|
{{- if ge $src.Width "648" }}
|
|
{{ with $w648.RelPermalink }}, {{.}} 648w{{ end }}
|
|
{{- end }}
|
|
{{- if ge $src.Width "1296" }}
|
|
{{ with $w1296.RelPermalink }}, {{.}} 1296w{{ end }}
|
|
{{- end }}
|
|
{{- if ge $src.Width "2592" }}
|
|
{{ with $w2592.RelPermalink }}, {{.}} 2592w{{ end }}
|
|
{{- end }}
|
|
{{ with $wmax.RelPermalink }}, {{.}} {{ $src.Width }}w
|
|
{{- end }}'
|
|
/>
|
|
<img
|
|
sizes="(max-width: 600px) 324px, 648px"
|
|
srcset='
|
|
{{- if ge $src.Width "324" }}
|
|
{{ with $j324.RelPermalink }}{{.}} 324w{{ end }}
|
|
{{- end }}
|
|
{{- if ge $src.Width "648" }}
|
|
{{ with $j648.RelPermalink }}, {{.}} 648w{{ end }}
|
|
{{- end }}
|
|
{{- if ge $src.Width "1296" }}
|
|
{{ with $j1296.RelPermalink }}, {{.}} 1296w{{ end }}
|
|
{{- end }}
|
|
{{- if ge $src.Width "2592" }}
|
|
{{ with $j2592.RelPermalink }}, {{.}} 2592w{{ end }}
|
|
{{- end }}
|
|
{{ with $jmax.RelPermalink }}, {{.}} {{ $src.Width}}w
|
|
{{- end }}'
|
|
src="{{ $j648.RelPermalink }}"
|
|
{{ if or (.Get "alt") (.Get "caption") }}alt="{{ with .Get "alt" }}{{ . }}{{ else }}{{ .Get "caption" }}{{ end }}"{{ end }}
|
|
/>
|
|
</picture>
|
|
</a>
|
|
{{ 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 -->
|