motiejus/jakstys.lt
1
Fork 0
Code Releases Activity

more specific image widths

Browse Source
This commit is contained in:
Motiejus Jakštys
2025-04-06 21:46:51 +03:00
parent 48f68c53b7
commit 97b0f98beb
2 changed files with 47 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

64
layouts/shortcodes/img.html
View File

@@ -2,20 +2,20 @@
# Responsive images and resizing
Our picture width is 700 css pixels. "Retina" screens have 2 device pixel ratio
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 700*4=2800px.
care about is 648*4=2592px.
-->
<!-- 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" }}
{{ $j324 := $src.Resize "324x" }}
{{ $j648 := $src.Resize "648x" }}
{{ $j1296 := $src.Resize "1296x" }}
{{ $j2592 := $src.Resize "2592x" }}
{{ $width := cond (eq (.Get "half") "true") "350px" "700px" }}
{{ $width := cond (eq (.Get "half") "true") "324px" "648px" }}
{{ with .Get "hint" }}
{{ else }}
@@ -23,46 +23,50 @@ care about is 700*4=2800px.
{{ 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 ) }}
{{ $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) 350px, {{ $width }}"
sizes="(max-width: 600px) 324px, {{ $width }}"
srcset='
{{- if ge $src.Width "350" }}
{{ with $w350.RelPermalink }}{{.}} 350w{{ end }}
{{- if ge $src.Width "324" }}
{{ with $w324.RelPermalink }}{{.}} 324w{{ end }}
{{- end }}
{{- if ge $src.Width "700" }}
{{ with $w700.RelPermalink }}, {{.}} 700w{{ end }}
{{- if ge $src.Width "648" }}
{{ with $w648.RelPermalink }}, {{.}} 648w{{ end }}
{{- end }}
{{- if ge $src.Width "1400" }}
{{ with $w1400.RelPermalink }}, {{.}} 1400w{{ end }}
{{- if ge $src.Width "1296" }}
{{ with $w1296.RelPermalink }}, {{.}} 1296w{{ end }}
{{- end }}
{{- if ge $src.Width "2800" }}
{{ with $w2800.RelPermalink }}, {{.}} 2800w{{ end }}
{{- if ge $src.Width "2592" }}
{{ with $w2592.RelPermalink }}, {{.}} 2592w{{ end }}
{{- end }}
{{ with $wmax.RelPermalink }}, {{.}} {{ $src.Width }}w
{{- end }}'
/>
<img
sizes="(max-width: 600px) 350px, 700px"
sizes="(max-width: 600px) 324px, 648px"
srcset='
{{- if ge $src.Width "350" }}
{{ with $j350.RelPermalink }}{{.}} 350w{{ end }}
{{- if ge $src.Width "324" }}
{{ with $j324.RelPermalink }}{{.}} 324w{{ end }}
{{- end }}
{{- if ge $src.Width "700" }}
{{ with $j700.RelPermalink }}, {{.}} 700w{{ end }}
{{- if ge $src.Width "648" }}
{{ with $j648.RelPermalink }}, {{.}} 648w{{ end }}
{{- end }}
{{- if ge $src.Width "1400" }}
{{ with $j1400.RelPermalink }}, {{.}} 1400w{{ end }}
{{- if ge $src.Width "1296" }}
{{ with $j1296.RelPermalink }}, {{.}} 1296w{{ end }}
{{- end }}
{{- if ge $src.Width "2800" }}
{{ with $j2800.RelPermalink }}, {{.}} 2800w{{ end }}
{{- if ge $src.Width "2592" }}
{{ with $j2592.RelPermalink }}, {{.}} 2592w{{ end }}
{{- end }}
{{ with $jmax.RelPermalink }}, {{.}} {{ $src.Width}}w
{{- end }}'
src="{{ $j700.RelPermalink }}"
src="{{ $j648.RelPermalink }}"
{{ if or (.Get "alt") (.Get "caption") }}alt="{{ with .Get "alt" }}{{ . }}{{ else }}{{ .Get "caption" }}{{ end }}"{{ end }}
/>
</picture>