From afb59e7862d48f435240026636e6bc5182c90a38 Mon Sep 17 00:00:00 2001
From: Eryn Wells <eryn@erynwells.me>
Date: Thu, 6 Apr 2023 08:42:58 -0700
Subject: [PATCH] Prepare thumbnails of all images in the photo post

Add <img> tags for all thumbnails to the photos list entry. I'm hoping with lazy
loading and some JavaScript this will not be terrible!

Break the logic for preparing a thumbnail into a separate helper partial
template so it can be reused.
---
 .../partials/photos/thumbnail_for_list.html   | 28 ++++++++++
 layouts/partials/photos/thumbnails.html       | 51 +++++++++++++++++++
 layouts/photos/li_thumbnail_in_grid.html      | 12 ++---
 3 files changed, 85 insertions(+), 6 deletions(-)
 create mode 100644 layouts/partials/photos/thumbnail_for_list.html
 create mode 100644 layouts/partials/photos/thumbnails.html

diff --git a/layouts/partials/photos/thumbnail_for_list.html b/layouts/partials/photos/thumbnail_for_list.html
new file mode 100644
index 0000000..952218f
--- /dev/null
+++ b/layouts/partials/photos/thumbnail_for_list.html
@@ -0,0 +1,28 @@
+{{ $thumbnailResource := .Image }}
+
+{{ $orientation := partial "images/orientation_angle.html" $thumbnailResource }}
+
+{{ $targetWidth := 0 }}
+{{ if isset . "Width" }}
+  {{ $targetWidth = .Width }}
+{{ else }}
+  {{ $targetWidth = $thumbnailResource.Width }}
+{{ end }}
+
+{{ $targetHeight := 0 }}
+{{ if isset . "Height" }}
+  {{ $targetHeight = .Height }}
+{{ else }}
+  {{ $targetHeight = $thumbnailResource.Height }}
+{{ end }}
+
+{{ $thumbnail := false }}
+{{ if not (and (eq $orientation 0)
+               (eq $targetWidth $thumbnailResource.Width)
+               (eq $targetHeight $thumbnailResource.Height)) }}
+  {{ $thumbnail = $thumbnailResource.Fit (printf "%dx%d r%d" $targetWidth $targetHeight (sub 360 $orientation)) }}
+{{ else }}
+  {{ $thumbnail = $thumbnailResource }}
+{{ end }}
+
+{{ return $thumbnail }}
diff --git a/layouts/partials/photos/thumbnails.html b/layouts/partials/photos/thumbnails.html
new file mode 100644
index 0000000..06ddb01
--- /dev/null
+++ b/layouts/partials/photos/thumbnails.html
@@ -0,0 +1,51 @@
+{{ $page := .Page }}
+
+{{ $thumbnails := slice }}
+{{ with $thumbnailNamesList := $page.Params "thumbnails" }}
+  {{/* Specify a list of thumbnails to use with the page "thumbnails" param */}}
+  {{ range $thumbnailNamesList }}
+    {{ with $page.Resources.GetMatch . }}
+      {{ $thumbnails = $thumbnails | append . }}
+    {{ else }}
+      {{ errorf "No image resources available for %s from thumbnails param" . }}
+    {{ end }}
+  {{ end }}
+{{ else }}
+  {{/* Get a list of all the image resources and see if any of them specify
+       thumbnails for themselves. If they do, use those, otherwise use the image
+       resource itself. */}}
+  {{ range $img := $page.Resources.ByType "image" }}
+    {{ with $thumbnailResourceName := $img.params.thumbnail }}
+      {{ with $page.Resources.GetMatch $thumbnailResourceName }}
+        {{ $thumbnails = $thumbnails | append . }}
+      {{ else }}
+        {{ errorf "No image resources available for '%s' from thumbnail param for image resources %s"
+            $thumbnailResourceName
+            $img.Name }}
+      {{ end }}
+    {{ else }}
+      {{/* TODO: Look for a named image that indicates it's a thumbnail of 
+           another resources. Something like ${imgBasename}_thumbnail.${ext}.
+           I don't know how easy Hugo makes filename processing, so this could 
+           be painful. */}}
+      {{ $thumbnails = $thumbnails | append $img }}
+    {{ end }}
+  {{ end }}
+{{ end }}
+
+{{ if eq (len $thumbnails) 0 }}
+  {{ errorf "Couldn't find any thumbnails for %s" $page.Permalink }}
+{{ end }}
+
+{{ $thumbnailOptions := dict }}
+{{ if isset . "Width" }}{{ $thumbnailOptions = $thumbnailOptions | merge (dict "Width" .Width) }}{{ end }}
+{{ if isset . "Height" }}{{ $thumbnailOptions = $thumbnailOptions | merge (dict "Height" .Height) }}{{ end }}
+
+{{ $processedThumbnails := slice }}
+{{ range $thumbnails }}
+  {{ $options := $thumbnailOptions | merge "Image" . }}
+  {{ $processedThumbnail := partial "photos/thumbnail_for_list.html" $options }}
+  {{ $processedThumbnails = $processedThumbnails | append $processedThumbnail }}
+{{ end }}
+
+{{ return $processedThumbnails }}
diff --git a/layouts/photos/li_thumbnail_in_grid.html b/layouts/photos/li_thumbnail_in_grid.html
index 5d9890e..d7c9418 100644
--- a/layouts/photos/li_thumbnail_in_grid.html
+++ b/layouts/photos/li_thumbnail_in_grid.html
@@ -1,11 +1,11 @@
 {{- $thumbnail := partial "photos/thumbnail.html" (dict "Page" . "Width" 600 "Height" 600) -}}
 {{- $thumbnail = $thumbnail.Crop "600x600" -}}
-{{- $altText := $thumbnail.Params.alt -}}
 {{- $numberOfImages := len (partial "photos/list.html" .) -}}
 {{- $hasMultipleImages := gt $numberOfImages 1 -}}
-<a href="{{ .RelPermalink }}" title="{{ .Title }}">
-  {{ if $hasMultipleImages }}
-  <div class="badge">{{ $numberOfImages }}</div> 
-  {{ end }}
-  <img src="{{ $thumbnail.RelPermalink }}"{{ with $altText }} alt="{{ . }}"{{ end }}>
+<a href="{{ .RelPermalink }}" title="{{ .Title }}" data-number-of-images="{{ $numberOfImages }}">
+  {{ if $hasMultipleImages }}<div class="badge">{{ $numberOfImages }}</div>{{ end }}
+  {{ range partial "photos/thumbnails.html" (dict "Page" . "Height" 600 "Width" 600)  -}}
+    {{- $altText := .Params.alt -}}
+    <img src="{{ .RelPermalink }}"{{ with $altText }} alt="{{ . }}"{{ end }} loading="lazy">
+  {{- end }}
 </a>