From 0a61815dcbe50f289cc40085b015646e38f8fae4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Vojt=C4=9Bch=20K=C3=A1n=C4=9B?= Date: Thu, 16 Apr 2020 23:14:46 +0200 Subject: [PATCH 1/7] Add blogPhoto shortcode This shortcode is intended to be used in blogposts to include photos. It downscales them and uses srcset to serve appropriate sizes to the browsers. --- .../patek/layouts/shortcodes/blogPhoto.html | 29 +++++++++++++++++++ 1 file changed, 29 insertions(+) create mode 100644 themes/patek/layouts/shortcodes/blogPhoto.html diff --git a/themes/patek/layouts/shortcodes/blogPhoto.html b/themes/patek/layouts/shortcodes/blogPhoto.html new file mode 100644 index 0000000..3c1396e --- /dev/null +++ b/themes/patek/layouts/shortcodes/blogPhoto.html @@ -0,0 +1,29 @@ +{{- /* +Usage: + +{{< blogPhoto "filename_relative_to_page.ext" "Alt text" >}} + +or + +{{< blogPhoto src="filename_relative_to_page.ext" alt="Alt text" >}} + +*/ -}} +{{- $imageName := false -}} +{{- $alt := false -}} +{{- if .IsNamedParams -}} + {{- $imageName = .Get "src" | default nil -}} + {{- $alt = .Get "alt" | default nil -}} +{{- else -}} + {{- $imageName = .Get 0 -}} + {{- $alt = .Get 1 -}} +{{- end -}} +{{- if (eq $imageName nil) }}{{ errorf "Missing image name in %s" .Position }}{{ end -}} +{{- if (eq $alt nil) }}{{ errorf "Missing alt for image %s in %s" $imageName .Position }}{{ end -}} + +{{- $img := .Page.Resources.GetMatch (printf "%s" $imageName) | default nil -}} +{{- if (eq $img nil) }}{{ errorf "Image %s not found in %s" $imageName .Position }}{{ end -}} +{{- $resizedFullHD := $img.Fit "1920x1080 q50" -}} +{{- $resizedHD := $img.Fit "1280x720 q50" -}} +{{- $resizedSD := $img.Fit "640x360 q50" -}} + +{{ $alt }} From cc5e75e4691a6b0cbb55aff1de786e7ca1b699aa Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Vojt=C4=9Bch=20K=C3=A1n=C4=9B?= Date: Mon, 20 Apr 2020 13:35:43 +0200 Subject: [PATCH 2/7] Fix blogPhoto shortcode w unit inside srcset means width in original photo pixels, not height --- themes/patek/layouts/shortcodes/blogPhoto.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/themes/patek/layouts/shortcodes/blogPhoto.html b/themes/patek/layouts/shortcodes/blogPhoto.html index 3c1396e..823581c 100644 --- a/themes/patek/layouts/shortcodes/blogPhoto.html +++ b/themes/patek/layouts/shortcodes/blogPhoto.html @@ -26,4 +26,4 @@ or {{- $resizedHD := $img.Fit "1280x720 q50" -}} {{- $resizedSD := $img.Fit "640x360 q50" -}} -{{ $alt }} +{{ $alt }} From 315ec5b77bed7299c3cec1d8f451bfc430fd4c8f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Vojt=C4=9Bch=20K=C3=A1n=C4=9B?= Date: Mon, 20 Apr 2020 13:54:08 +0200 Subject: [PATCH 3/7] Generalize blogPhoto shortcode Generate the resized images from simple config array + generate only those, that are actualy smaller then the original. --- themes/patek/layouts/shortcodes/blogPhoto.html | 17 ++++++++++++----- 1 file changed, 12 insertions(+), 5 deletions(-) diff --git a/themes/patek/layouts/shortcodes/blogPhoto.html b/themes/patek/layouts/shortcodes/blogPhoto.html index 823581c..23ba285 100644 --- a/themes/patek/layouts/shortcodes/blogPhoto.html +++ b/themes/patek/layouts/shortcodes/blogPhoto.html @@ -20,10 +20,17 @@ or {{- if (eq $imageName nil) }}{{ errorf "Missing image name in %s" .Position }}{{ end -}} {{- if (eq $alt nil) }}{{ errorf "Missing alt for image %s in %s" $imageName .Position }}{{ end -}} -{{- $img := .Page.Resources.GetMatch (printf "%s" $imageName) | default nil -}} +{{- $img := .Page.Resources.GetMatch $imageName | default nil -}} {{- if (eq $img nil) }}{{ errorf "Image %s not found in %s" $imageName .Position }}{{ end -}} -{{- $resizedFullHD := $img.Fit "1920x1080 q50" -}} -{{- $resizedHD := $img.Fit "1280x720 q50" -}} -{{- $resizedSD := $img.Fit "640x360 q50" -}} +{{- $sizes := slice (slice 640 360 50) (slice 1280 720 50) (slice 1920 1080 50) -}} +{{- $srcset := slice -}} +{{- $largest := index $sizes 0 -}} +{{- range $sizes -}} + {{- if (or (gt $img.Width (index . 0)) (gt $img.Height (index . 1))) -}} + {{- $resized := $img.Fit (printf "%dx%d q%d" (index . 0) (index . 1) (index . 2)) -}} + {{- $srcset = $srcset | append (printf "%s %dw" $resized.RelPermalink (index . 0)) -}} + {{- $largest = $resized -}} + {{- end -}} +{{- end -}} -{{ $alt }} +{{ $alt }} From 891110771e5501dda6dfb6930a8d4817bc7bc61b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Vojt=C4=9Bch=20K=C3=A1n=C4=9B?= Date: Mon, 20 Apr 2020 23:06:27 +0200 Subject: [PATCH 4/7] Include the compressed original image in src/srcset, if it happens to be smaller than the largest size we resize to. --- themes/patek/layouts/shortcodes/blogPhoto.html | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/themes/patek/layouts/shortcodes/blogPhoto.html b/themes/patek/layouts/shortcodes/blogPhoto.html index 23ba285..8b5b361 100644 --- a/themes/patek/layouts/shortcodes/blogPhoto.html +++ b/themes/patek/layouts/shortcodes/blogPhoto.html @@ -24,7 +24,7 @@ or {{- if (eq $img nil) }}{{ errorf "Image %s not found in %s" $imageName .Position }}{{ end -}} {{- $sizes := slice (slice 640 360 50) (slice 1280 720 50) (slice 1920 1080 50) -}} {{- $srcset := slice -}} -{{- $largest := index $sizes 0 -}} +{{- $largest := false -}} {{- range $sizes -}} {{- if (or (gt $img.Width (index . 0)) (gt $img.Height (index . 1))) -}} {{- $resized := $img.Fit (printf "%dx%d q%d" (index . 0) (index . 1) (index . 2)) -}} @@ -33,4 +33,10 @@ or {{- end -}} {{- end -}} +{{- if (lt (len $srcset) (len $sizes)) -}} + {{- $compressed := $img.Fit (printf "%dx%d q50" $img.Width $img.Height) -}} + {{- $srcset = $srcset | append (printf "%s %dw" $compressed.RelPermalink $compressed.Width) -}} + {{- $largest = $compressed -}} +{{- end -}} + {{ $alt }} From e591d16e9d1209cea41428419da164f435c194e8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Vojt=C4=9Bch=20K=C3=A1n=C4=9B?= Date: Tue, 21 Apr 2020 22:55:57 +0200 Subject: [PATCH 5/7] Use
and
in blogPhoto shortcode --- themes/patek/layouts/shortcodes/blogPhoto.html | 13 +++++++++++-- 1 file changed, 11 insertions(+), 2 deletions(-) diff --git a/themes/patek/layouts/shortcodes/blogPhoto.html b/themes/patek/layouts/shortcodes/blogPhoto.html index 8b5b361..786f00d 100644 --- a/themes/patek/layouts/shortcodes/blogPhoto.html +++ b/themes/patek/layouts/shortcodes/blogPhoto.html @@ -5,7 +5,12 @@ Usage: or -{{< blogPhoto src="filename_relative_to_page.ext" alt="Alt text" >}} +{{< blogPhoto src="filename_relative_to_page.ext" alt="Alt text" … >}} + +where possible named params are: +* src - path to the image in page bundle +* alt - textual description of the image, the alt attribute +* caption (optional) - the caption displayed under the image, defaults to `alt`. Set to false to disable caption rendering */ -}} {{- $imageName := false -}} @@ -19,6 +24,7 @@ or {{- end -}} {{- if (eq $imageName nil) }}{{ errorf "Missing image name in %s" .Position }}{{ end -}} {{- if (eq $alt nil) }}{{ errorf "Missing alt for image %s in %s" $imageName .Position }}{{ end -}} +{{- $caption := cond (eq (.Get "caption") false) false (default $alt (.Get "caption")) -}} {{- $img := .Page.Resources.GetMatch $imageName | default nil -}} {{- if (eq $img nil) }}{{ errorf "Image %s not found in %s" $imageName .Position }}{{ end -}} @@ -39,4 +45,7 @@ or {{- $largest = $compressed -}} {{- end -}} -{{ $alt }} +
+ {{ $alt }} + {{ if (ne $caption false) }}
{{ $caption }}
{{ end }} +
From 5be48c59c6062c10ca1949fcc610362db159aceb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Vojt=C4=9Bch=20K=C3=A1n=C4=9B?= Date: Sun, 3 May 2020 14:47:11 +0200 Subject: [PATCH 6/7] Raise the quality of low res images They might be scaled up by the browser making compression artifacts much more visible. --- themes/patek/layouts/shortcodes/blogPhoto.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/themes/patek/layouts/shortcodes/blogPhoto.html b/themes/patek/layouts/shortcodes/blogPhoto.html index 786f00d..ccd3a23 100644 --- a/themes/patek/layouts/shortcodes/blogPhoto.html +++ b/themes/patek/layouts/shortcodes/blogPhoto.html @@ -40,7 +40,7 @@ where possible named params are: {{- end -}} {{- if (lt (len $srcset) (len $sizes)) -}} - {{- $compressed := $img.Fit (printf "%dx%d q50" $img.Width $img.Height) -}} + {{- $compressed := $img.Fit (printf "%dx%d q90" $img.Width $img.Height) -}} {{- $srcset = $srcset | append (printf "%s %dw" $compressed.RelPermalink $compressed.Width) -}} {{- $largest = $compressed -}} {{- end -}} From 058de79991699f6ef1b1ff3321efd3484518db2e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Vojt=C4=9Bch=20K=C3=A1n=C4=9B?= Date: Sun, 3 May 2020 14:55:51 +0200 Subject: [PATCH 7/7] Remove the sizes attribute It defaults to 100vw, which may be wasteful sometimes, but it guarantees smooth experience. I am not aware of any simple way of requesting the current widescreen behavior "make it as wide as possible while not exceeding 30rem height" using the sizes attribute. This setting may be especially wasteful for portrait images, as their rendered width will be much smaller than the viewport width. --- themes/patek/layouts/shortcodes/blogPhoto.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/themes/patek/layouts/shortcodes/blogPhoto.html b/themes/patek/layouts/shortcodes/blogPhoto.html index ccd3a23..e160b54 100644 --- a/themes/patek/layouts/shortcodes/blogPhoto.html +++ b/themes/patek/layouts/shortcodes/blogPhoto.html @@ -46,6 +46,6 @@ where possible named params are: {{- end -}}
- {{ $alt }} + {{ $alt }} {{ if (ne $caption false) }}
{{ $caption }}
{{ end }}