feat: load featured image from media library (#2799)

Adds support for loading featured image from media library via `image.filename` param as an alternative to placing a `featured.*` image in the page folder.

Supports setting a default feature image for all pages via Hugo Cascade in Hugo Config.

Supports featured image reuse without duplicating the image within each page folder.

modules/wowchemy/layouts/partials/functions/get_featured_image.html

@@ -0,0 +1,23 @@
+{{/* Function to retrieve the featured image */}}
+{{/* Inputs: page context */}}
+{{/* Output: image resource, or nil if not found */}}
+
+{{/*
+    Featured image is searched in this order:
+      1. Search for a file `*featured*` in the post directory
+      2. Search for a file `.Params.image.filename` in the post directory
+      3. Search for a file `.Params.image.filename` in the `assets/media/` directory
+*/}}
+
+{{/* Search for an image "*featured*" in post folder */}}
+{{ $resource := (.Resources.ByType "image").GetMatch "*featured*" }}
+{{ if eq $resource nil }}
+  {{/* Otherwise fall back the image file specified in front matter */}}
+  {{ $filename := .Params.image.filename }}
+  {{/* Search in post folder */}}
+  {{ $resource = (.Resources.ByType "image").GetMatch $filename }}
+  {{/* Otherwise in `assets/media/` folder */}}
+  {{ if eq $resource nil }} {{ $resource = resources.GetMatch (path.Join "media" $filename) }} {{ end }}
+{{ end }}
+
+{{ return $resource }}

modules/wowchemy/layouts/partials/jsonld/article.html

@@ -1,6 +1,6 @@
 {{- $page := .page }}
 {{ $summary := .summary }}
-{{ $featured_image := ($page.Resources.ByType "image").GetMatch "*featured*" }}
+{{ $featured_image := partial "functions/get_featured_image.html" $page }}
 
 {{/* Get schema type. */}}
 {{ $schema := "Article" }}

modules/wowchemy/layouts/partials/jsonld/event.html

@@ -1,6 +1,6 @@
 {{ $page := .page }}
 {{ $summary := .summary }}
-{{ $featured_image := ($page.Resources.ByType "image").GetMatch "*featured*" }}
+{{ $featured_image := partial "funcctions/get_featured_image.html" $page }}
 {{ $author := partial "functions/get_author_name" $page }}
 
 <script type="application/ld+json">

modules/wowchemy/layouts/partials/page_header.html

@@ -1,5 +1,6 @@
 {{ $page := . }}
-{{ $featured := (.Resources.ByType "image").GetMatch "*featured*" }}
+{{ $featured := partial "functions/get_featured_image.html" $page }}
+
 {{ $anchor := $page.Params.image.focal_point | default "Smart" }}
 
 {{/* Set default titles for node pages */}}

modules/wowchemy/layouts/partials/site_head.html

@@ -247,7 +247,8 @@
 
   {{/* Get page image for sharing. */}}
   {{ $sharing_image := resources.GetMatch (path.Join "media" "sharing.*") }}
-  {{ $featured_image := (.Resources.ByType "image").GetMatch "*featured*" }}
+  {{/* Search for an image "*featured*" in post folder */}}
+  {{ $featured_image := partial "functions/get_featured_image.html" . }}
   {{ $avatar_image := (.Resources.ByType "image").GetMatch "avatar*" }}
   {{ $has_logo := fileExists "assets/media/logo.png" | or (fileExists "assets/media/logo.svg") }}
   {{ $og_image := "" }}

modules/wowchemy/layouts/partials/views/card.html

@@ -41,16 +41,16 @@
     {{ partial "page_metadata" (dict "page" $item "is_list" 1) }}
   {{ end }}
 
-  {{ $resource := ($item.Resources.ByType "image").GetMatch "*featured*" }}
+  {{ $resource := partial "functions/get_featured_image.html" $item }}
   {{ $anchor := $item.Params.image.focal_point | default "Smart" }}
   {{ with $resource }}
-  {{ $image := .Fill (printf "808x455 webp %s" $anchor) }}
-  <a href="{{ $link }}" {{ $target | safeHTMLAttr }}>
-    <div class="img-hover-zoom">
-      <img src="{{ $image.RelPermalink }}" height="{{ $image.Height }}" width="{{ $image.Width }}"
-           class="article-banner" alt="{{ $item.Title }}" loading="lazy">
-    </div>
-  </a>
+    {{ $image := .Fill (printf "808x455 webp %s" $anchor) }}
+    <a href="{{ $link }}" {{ $target | safeHTMLAttr }}>
+      <div class="img-hover-zoom">
+        <img src="{{ $image.RelPermalink }}" height="{{ $image.Height }}" width="{{ $image.Width }}"
+            class="article-banner" alt="{{ $item.Title }}" loading="lazy">
+      </div>
+    </a>
   {{end}}
 
   <div class="section-subheading article-title mb-1 mt-3">

modules/wowchemy/layouts/partials/views/compact.html

@@ -74,13 +74,13 @@
 
   </div>
   <div class="ml-3">
-    {{ $resource := ($item.Resources.ByType "image").GetMatch "*featured*" }}
+    {{ $resource := partial "functions/get_featured_image.html" $item }}
     {{ with $resource }}
-    {{ $image := .Resize "150x webp" }}
-    <a href="{{$link}}" {{ $target | safeHTMLAttr }}>
-      <img src="{{ $image.RelPermalink }}" height="{{ $image.Height }}" width="{{ $image.Width }}"
-           alt="{{ $item.Title }}" loading="lazy">
-    </a>
+      {{ $image := .Resize "150x webp" }}
+      <a href="{{$link}}" {{ $target | safeHTMLAttr }}>
+        <img src="{{ $image.RelPermalink }}" height="{{ $image.Height }}" width="{{ $image.Width }}"
+            alt="{{ $item.Title }}" loading="lazy">
+      </a>
     {{end}}
   </div>
 </div>

modules/wowchemy/layouts/partials/views/masonry.html

@@ -18,7 +18,7 @@
   {{ $summary = $item.Summary }}
 {{ end }}
 
-{{ $resource := ($item.Resources.ByType "image").GetMatch "*featured*" }}
+{{ $resource := partial "functions/get_featured_image.html" $item }}
 
 <div class="card">
   {{ with $resource }}

modules/wowchemy/layouts/partials/views/showcase.html

@@ -49,13 +49,14 @@
 
     </div>
     <div class="col-12 col-md-6 order-first {{$order}}">
-      {{ $resource := ($item.Resources.ByType "image").GetMatch "*featured*" }}
+      {{ $resource := partial "functions/get_featured_image.html" $item }}
+
       {{ with $resource }}
-      {{ $image := .Resize "540x webp" }}
-      {{if $do_link}}<a href="{{ $link }}" {{ $target | safeHTMLAttr }}>{{end}}
-        <img src="{{ $image.RelPermalink }}" height="{{ $image.Height }}" width="{{ $image.Width }}"
-             alt="{{ $item.Title }}" loading="lazy">
-      {{if $do_link}}</a>{{end}}
+        {{ $image := .Resize "540x webp" }}
+        {{if $do_link}}<a href="{{ $link }}" {{ $target | safeHTMLAttr }}>{{end}}
+          <img src="{{ $image.RelPermalink }}" height="{{ $image.Height }}" width="{{ $image.Width }}"
+              alt="{{ $item.Title }}" loading="lazy">
+        {{if $do_link}}</a>{{end}}
       {{end}}
     </div>
   </div>