abstracting common image formatting to a figure template; fixing syntax errors

Signed-off-by: Ivan Boothe <git@rootwork.org>

4 files changed, 90 insertions, 109 deletions

diff --git a/layouts/_default/_markup/render-image.html b/layouts/_default/_markup/render-image.html
index 68220e5..fd55c66 100644
--- a/layouts/_default/_markup/render-image.html
+++ b/layouts/_default/_markup/render-image.html
@@ -1,7 +1,6 @@
-{{- $file := .Destination -}}{{/* filename of image */}}
-{{- $alt := .Text -}}{{/* alt text */}}
-{{- $cap := .Title -}}{{/* caption */}}
-
+{{- $file := .Destination -}}
+{{- $alt := .Text -}}
+{{- $cap := .Title -}}
 {{- $scratch := newScratch -}}
 {{- $scratch.Set "classes" "image_figure" -}}
 
@@ -30,55 +29,14 @@
     {{- end -}}
   {{- end -}}
 {{- end -}}
-{{/*
-  If Hugo has been able to access the image, it's now loaded at $image, and we
-  have access to additional attributes.
-
-  If Hugo hasn't been able to access the image, it's still loaded at $file, with
-  only its path available.
-*/}}
-
-<figure>
-  <picture>
-
-    {{/* Generate alternate image format tags. */}}
-    {{- with $file -}}
-      {{ $name := replace $file (path.Ext $file) "" }}
-      {{ $ext := slice "avif" "webp" "jxl" }}
-      {{- range $ext -}}
-        {{ $path := printf "%s" . | printf "%s%s" "." | printf "%s%s" $name | printf "%s" }}
-        {{- if eq $bundle true -}}
-          {{ $path = path.Join "/" $.Page.File.Dir $path }}
-        {{- end -}}
-        {{- if fileExists $path -}}
-          <source srcset="{{ $path }}" type="image/{{ . }}">
-        {{- end -}}
-      {{- end -}}
-    {{- end -}}
-
-    {{/* Render image and attributes. */}}
-    <img
-      loading="lazy"
-      decoding="async"
-      alt="{{ htmlEscape $alt }}"
-      {{ with $image }}
-        class="{{ $scratch.Get "classes" }} image_processed"
-        width="{{ .Width }}"
-        height="{{ .Height }}"
-        src="{{ .RelPermalink }}"
-      {{ else }}
-        class="{{ $scratch.Get "classes" }} image_unprocessed"
-        src="{{ $file }}"
-      {{ end }}
-      {{ with $cap }}
-        title="{{ htmlEscape $cap }}"
-      {{ end }}
-    />
-
-    {{/* Provide caption based on image title, if it is set. */}}
-    {{- with $cap -}}
-      <figcaption>{{ $cap | safeHTML }}</figcaption>
-    {{- end -}}
 
-  </picture>
-</figure>
+{{- partial "figure" (
+  dict
+    "file" $file
+    "image" $image
+    "dir" $.Page.File.Dir
+    "alt" $alt
+    "cap" $cap
+    "classes" ($scratch.Get "classes")
+    "bundle" $bundle
+) -}}
diff --git a/layouts/partials/excerpt.html b/layouts/partials/excerpt.html
index 8bdaa79..bc7a9f3 100644
--- a/layouts/partials/excerpt.html
+++ b/layouts/partials/excerpt.html
@@ -9,7 +9,7 @@
     {{- with .Params.thumbnail }}
     <div class="excerpt_footer partition">
       <div class="excerpt_thumbnail">
-        {{- partial "image" (dict "file" . "alt" $.Title "type" "thumbnail") }}
+        {{- partial "image" (dict "file" . "type" "thumbnail") }}
       </div>
       {{ else }}
       <div class="excerpt_footer">
diff --git a/layouts/partials/figure.html b/layouts/partials/figure.html
new file mode 100644
index 0000000..163af57
--- /dev/null
+++ b/layouts/partials/figure.html
@@ -0,0 +1,63 @@
+{{/*
+  If Hugo has been able to access the image, it's loaded at .image, and we have
+  access to additional attributes.
+
+  If Hugo hasn't been able to access the image, it's loaded at .file, with only
+  its path available.
+
+  We set the Hugo variables to strings to allow for logical operations and
+  replacements.
+*/}}
+
+{{- $file := .file -}}
+{{- $image := .image -}}
+{{- $dir := .dir -}}
+{{- $alt := .alt -}}
+{{- $cap := .cap -}}
+{{- $classes := .classes -}}
+{{- $bundle := .bundle -}}
+
+<figure>
+  <picture>
+
+    {{/* Generate alternate image format tags. */}}
+    {{- with $file -}}
+      {{ $name := replace $file (path.Ext $file) "" }}
+      {{ $ext := slice "avif" "webp" "jxl" }}
+      {{- range $ext -}}
+        {{ $path := printf "%s" . | printf "%s%s" "." | printf "%s%s" $name | printf "%s" }}
+        {{- if eq $bundle true -}}
+          {{ $path = path.Join "/" $dir $path }}
+        {{- end -}}
+        {{- if fileExists $path -}}
+          <source srcset="{{ $path }}" type="image/{{ . }}">
+        {{- end -}}
+      {{- end -}}
+    {{- end -}}
+
+    {{/* Render image and attributes. */}}
+    <img
+      loading="lazy"
+      decoding="async"
+      alt="{{ htmlEscape $alt }}"
+      {{ with $image }}
+        class="{{ $classes }} image_processed"
+        width="{{ .Width }}"
+        height="{{ .Height }}"
+        src="{{ .RelPermalink }}"
+      {{ else }}
+        class="{{ $classes }} image_unprocessed"
+        src="{{ $file }}"
+      {{ end }}
+      {{ with $cap }}
+        title="{{ htmlEscape $cap }}"
+      {{ end }}
+    />
+
+    {{/* Provide caption based on image title, if it is set. */}}
+    {{- with $cap -}}
+      <figcaption>{{ $cap | safeHTML }}</figcaption>
+    {{- end -}}
+
+  </picture>
+</figure>
diff --git a/layouts/partials/image.html b/layouts/partials/image.html
index 5acd865..7ff4ee7 100644
--- a/layouts/partials/image.html
+++ b/layouts/partials/image.html
@@ -1,7 +1,6 @@
-{{- $file := .file -}}{{/* base filename of image */}}
-{{- $alt := .Text -}}{{/* alt text */}}
-{{- $cap := .Title -}}{{/* caption */}}
-
+{{- $file := .file -}}
+{{- $alt := .Text -}}
+{{- $cap := .Title -}}
 {{- $scratch := newScratch -}}
 {{- $scratch.Set "classes" "image_figure" -}}
 
@@ -34,52 +33,13 @@
   {{- end -}}
 {{- end -}}
 
-{{/*
-  If Hugo has been able to access the image, it's now loaded at $image, and we
-  have access to additional attributes.
-
-  If Hugo hasn't been able to access the image, it's still loaded at $file, with
-  only its path available.
-*/}}
-
-<figure>
-  <picture>
-
-    {{/* Generate alternate image format tags. */}}
-    {{- with $file -}}
-      {{ $name := replace $image (path.Ext $file) "" }}
-      {{ $ext := slice "avif" "webp" "jxl" }}
-      {{- range $ext -}}
-        {{ $path := printf "%s" . | printf "%s%s" "." | printf "%s%s" $name | printf "%s" }}
-        {{- if fileExists $path -}}
-          <source srcset="{{ $path }}" type="image/{{ . }}">
-        {{- end -}}
-      {{- end -}}
-    {{- end -}}
-
-    {{/* Render image and attributes. */}}
-    <img
-      loading="lazy"
-      decoding="async"
-      alt="{{ htmlEscape $alt }}"
-      {{ with $image }}
-        class="{{ $scratch.Get "classes" }} image_processed"
-        width="{{ .Width }}"
-        height="{{ .Height }}"
-        src="{{ .RelPermalink | absURL }}"
-      {{ else }}
-        class="{{ $scratch.Get "classes" }} image_unprocessed"
-        src="{{ $file }}"
-      {{ end }}
-      {{ with $cap }}
-        title="{{ htmlEscape $cap }}"
-      {{ end }}
-    />
-
-    {{/* Provide caption based on image title, if it is set. */}}
-    {{- with $cap -}}
-      <figcaption>{{ $cap | safeHTML }}</figcaption>
-    {{- end -}}
-
-  </picture>
-</figure>
+{{- partial "figure" (
+  dict
+    "file" $file
+    "image" $image
+    "dir" $.Page.File.Dir
+    "alt" $alt
+    "cap" $cap
+    "classes" ($scratch.Get "classes")
+    "bundle" $bundle
+) -}}