From 1fe36f537464966d7b7346e033eb35979a10b554 Mon Sep 17 00:00:00 2001
From: Federico Agostini <43784886+Agos95@users.noreply.github.com>
Date: Fri, 2 Sep 2022 20:58:04 +0200
Subject: [PATCH] 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.
---
 .../functions/get_featured_image.html         | 23 +++++++++++++++++++
 .../layouts/partials/jsonld/article.html      |  2 +-
 .../layouts/partials/jsonld/event.html        |  2 +-
 .../layouts/partials/page_header.html         |  3 ++-
 .../wowchemy/layouts/partials/site_head.html  |  3 ++-
 .../wowchemy/layouts/partials/views/card.html | 16 ++++++-------
 .../layouts/partials/views/compact.html       | 12 +++++-----
 .../layouts/partials/views/masonry.html       |  2 +-
 .../layouts/partials/views/showcase.html      | 13 ++++++-----
 9 files changed, 51 insertions(+), 25 deletions(-)
 create mode 100644 modules/wowchemy/layouts/partials/functions/get_featured_image.html

diff --git a/modules/wowchemy/layouts/partials/functions/get_featured_image.html b/modules/wowchemy/layouts/partials/functions/get_featured_image.html
new file mode 100644
index 00000000..03a02853
--- /dev/null
+++ b/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 }}
diff --git a/modules/wowchemy/layouts/partials/jsonld/article.html b/modules/wowchemy/layouts/partials/jsonld/article.html
index e3c202af..188a0bee 100644
--- a/modules/wowchemy/layouts/partials/jsonld/article.html
+++ b/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" }}
diff --git a/modules/wowchemy/layouts/partials/jsonld/event.html b/modules/wowchemy/layouts/partials/jsonld/event.html
index a8189451..e0add5b8 100644
--- a/modules/wowchemy/layouts/partials/jsonld/event.html
+++ b/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">
diff --git a/modules/wowchemy/layouts/partials/page_header.html b/modules/wowchemy/layouts/partials/page_header.html
index 33357697..b6dd6f17 100644
--- a/modules/wowchemy/layouts/partials/page_header.html
+++ b/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 */}}
diff --git a/modules/wowchemy/layouts/partials/site_head.html b/modules/wowchemy/layouts/partials/site_head.html
index b7e51a0d..8d3ac65b 100644
--- a/modules/wowchemy/layouts/partials/site_head.html
+++ b/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 := "" }}
diff --git a/modules/wowchemy/layouts/partials/views/card.html b/modules/wowchemy/layouts/partials/views/card.html
index 4cd6cd0f..691acafb 100644
--- a/modules/wowchemy/layouts/partials/views/card.html
+++ b/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">
diff --git a/modules/wowchemy/layouts/partials/views/compact.html b/modules/wowchemy/layouts/partials/views/compact.html
index 13e2626b..55ee4ba9 100644
--- a/modules/wowchemy/layouts/partials/views/compact.html
+++ b/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>
diff --git a/modules/wowchemy/layouts/partials/views/masonry.html b/modules/wowchemy/layouts/partials/views/masonry.html
index d7d89323..06faa786 100644
--- a/modules/wowchemy/layouts/partials/views/masonry.html
+++ b/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 }}
diff --git a/modules/wowchemy/layouts/partials/views/showcase.html b/modules/wowchemy/layouts/partials/views/showcase.html
index 870367f8..92534b84 100644
--- a/modules/wowchemy/layouts/partials/views/showcase.html
+++ b/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>