extract/reuse logic for optimizing images

layouts/partials/optimize-image.html

@@ -0,0 +1,25 @@
+{{- /* Automatic resizing for HiDPI/retina images */ -}}
+
+{{- $original := .Page.Resources.GetMatch (.Get "src") -}}
+{{- .Scratch.Set "image" $original -}}
+
+{{- $setWidth := 910 -}}
+
+{{- if .Get "width" -}}
+  {{- $setWidth = (int (.Get "width")) -}}
+{{- end -}}
+
+{{- $retinaWidth := (mul $setWidth 2) -}}
+
+{{- if gt $original.Width $retinaWidth -}}
+  {{- $finalWidth := (printf "%dx" $retinaWidth) -}}
+  {{- .Scratch.Set "image" ($original.Resize $finalWidth) -}}
+{{- end -}}
+
+{{- $image := .Scratch.Get "image" -}}
+
+{{- $origRatio := (div (float $image.Height) $image.Width) -}}
+{{- .Scratch.Set "displayWidth" $setWidth -}}
+{{- .Scratch.Set "displayHeight" (math.Ceil (mul $origRatio $setWidth)) -}}
+
+{{- return $image -}}

layouts/shortcodes/image.amp.html

@@ -1,39 +1,12 @@
-{{- /* Automatic resizing for HiDPI/retina images */ -}}
+{{- $optimized := partial "optimize-image" . -}}
-
-{{- $original := .Page.Resources.GetMatch (.Get "src") -}}
-{{- .Scratch.Set "image" $original -}}
-
-{{- $maxWidth := 910 -}}
-{{- $setWidth := 0 -}}
-
-{{- if .Get "width" -}}
-  {{- $setWidth = (int (.Get "width")) -}}
-  {{- $retinaWidth := (mul $setWidth 2) -}}
-
-  {{- if gt $original.Width $retinaWidth -}}
-    {{- $finalWidth := (printf "%dx" $retinaWidth) -}}
-    {{- .Scratch.Set "image" ($original.Resize $finalWidth) -}}
-  {{- end -}}
-{{- else -}}
-  {{- $setWidth = $maxWidth -}}
-  {{- if gt $original.Width 1820 -}}
-    {{- .Scratch.Set "image" ($original.Resize "1820x") -}}
-  {{- end -}}
-{{- end -}}
-
-{{- $image := .Scratch.Get "image" -}}
-
-{{- $origRatio := (div (float $image.Height) $image.Width) -}}
-{{- $displayWidth := $setWidth -}}
-{{- $displayHeight := (math.Ceil (mul $origRatio $setWidth)) -}}
 
 <p class="image">
   <amp-img
     {{- with .Get "alt" }} alt="{{ . | safeHTMLAttr }}" title="{{ . | safeHTMLAttr }}"{{ end }}
     {{- with .Inner }} alt="{{ . | markdownify | plainify | safeHTMLAttr }}" title="{{ . | markdownify | plainify | safeHTMLAttr }}"{{ end }}
-    src="{{ $image.Permalink }}"
+    src="{{ $optimized.Permalink }}"
-    width="{{ $displayWidth }}"
+    width="{{ .Scratch.Get "displayWidth" }}"
-    height="{{ $displayHeight }}"
+    height="{{ .Scratch.Get "displayHeight" }}"
     layout="intrinsic">
   </amp-img>
 </p>

layouts/shortcodes/image.html

@@ -1,41 +1,14 @@
-{{- /* Automatic resizing for HiDPI/retina images */ -}}
+{{- $optimized := partial "optimize-image" . -}}
 
-{{- $original := .Page.Resources.GetMatch (.Get "src") -}}
+{{- with .Inner }}
-{{- .Scratch.Set "image" $original -}}
-
-{{- $maxWidth := 910 -}}
-{{- $setWidth := 0 -}}
-
-{{- if .Get "width" -}}
-  {{- $setWidth = (int (.Get "width")) -}}
-  {{- $retinaWidth := (mul $setWidth 2) -}}
-
-  {{- if gt $original.Width $retinaWidth -}}
-    {{- $finalWidth := (printf "%dx" $retinaWidth) -}}
-    {{- .Scratch.Set "image" ($original.Resize $finalWidth) -}}
-  {{- end -}}
-{{- else -}}
-  {{- $setWidth = $maxWidth -}}
-  {{- if gt $original.Width 1820 -}}
-    {{- .Scratch.Set "image" ($original.Resize "1820x") -}}
-  {{- end -}}
-{{- end -}}
-
-{{- $image := .Scratch.Get "image" -}}
-
-{{- $origRatio := (div (float $image.Height) $image.Width) -}}
-{{- $displayWidth := $setWidth -}}
-{{- $displayHeight := (math.Ceil (mul $origRatio $setWidth)) -}}
-
-{{ with .Inner }}
 <figure>
   <picture>
-    <img src="{{ $image.Permalink }}" width="{{ $displayWidth }}" height="{{ $displayHeight }}"
+    <img src="{{ $optimized.Permalink }}" width="{{ $.Scratch.Get "displayWidth" }}" height="{{ $.Scratch.Get "displayHeight" }}"
          alt="{{ . | markdownify | plainify | safeHTMLAttr }}" title="{{ . | markdownify | plainify | safeHTMLAttr }}">
   </picture>
   <figcaption>{{ $.Page.RenderString . | safeHTML }}</figcaption>
 </figure>
-{{ else }}
+{{- else -}}
-<p><img src="{{ $image.Permalink }}" width="{{ $displayWidth }}" height="{{ $displayHeight }}"
+<p><img src="{{ $optimized.Permalink }}" width="{{ $.Scratch.Get "displayWidth" }}" height="{{ $.Scratch.Get "displayHeight" }}"
      {{- with .Get "alt" }} alt="{{ . | safeHTMLAttr }}" title="{{ . | safeHTMLAttr }}"{{ end }}></p>
-{{ end }}
+{{- end }}

layouts/shortcodes/image.rss.html

@@ -1,34 +1,7 @@
-{{- /* Automatic resizing for HiDPI/retina images */ -}}
+{{- $optimized := partial "optimize-image" . -}}
-
-{{- $original := .Page.Resources.GetMatch (.Get "src") -}}
-{{- .Scratch.Set "image" $original -}}
-
-{{- $maxWidth := 910 -}}
-{{- $setWidth := 0 -}}
-
-{{- if .Get "width" -}}
-  {{- $setWidth = (int (.Get "width")) -}}
-  {{- $retinaWidth := (mul $setWidth 2) -}}
-
-  {{- if gt $original.Width $retinaWidth -}}
-    {{- $finalWidth := (printf "%dx" $retinaWidth) -}}
-    {{- .Scratch.Set "image" ($original.Resize $finalWidth) -}}
-  {{- end -}}
-{{- else -}}
-  {{- $setWidth = $maxWidth -}}
-  {{- if gt $original.Width 1820 -}}
-    {{- .Scratch.Set "image" ($original.Resize "1820x") -}}
-  {{- end -}}
-{{- end -}}
-
-{{- $image := .Scratch.Get "image" -}}
-
-{{- $origRatio := (div (float $image.Height) $image.Width) -}}
-{{- $displayWidth := $setWidth -}}
-{{- $displayHeight := (math.Ceil (mul $origRatio $setWidth)) -}}
 
 <p style="text-align: center;">
-<img src="{{ $image.Permalink }}" width="{{ $displayWidth }}" height="{{ $displayHeight }}"
+<img src="{{ $optimized.Permalink }}" width="{{ .Scratch.Get "displayWidth" }}" height="{{ .Scratch.Get "displayHeight" }}"
      {{- with .Get "alt" }} alt="{{ . | safeHTMLAttr }}" title="{{ . | safeHTMLAttr }}"{{ end }}
      {{- with .Inner }} alt="{{ . | markdownify | plainify | safeHTMLAttr }}" title="{{ . | markdownify | plainify | safeHTMLAttr }}"{{ end }}>
 {{ with .Inner }}<br>{{ $.Page.RenderString . | safeHTML }}{{ end -}}