From b70eaa9c6baec2366e335af99d871537b01a4071 Mon Sep 17 00:00:00 2001
From: George Cushen <gcushen@users.noreply.github.com>
Date: Thu, 19 Oct 2023 18:28:01 +0100
Subject: [PATCH] feat: support animated featured images (GIFs)

Add support for animated GIFs (e.g. featured.gif) in instances of the featured image in page header and all views
---
 modules/wowchemy/layouts/partials/page_header.html    | 7 ++++---
 modules/wowchemy/layouts/partials/views/card.html     | 3 ++-
 modules/wowchemy/layouts/partials/views/compact.html  | 3 ++-
 modules/wowchemy/layouts/partials/views/masonry.html  | 3 ++-
 modules/wowchemy/layouts/partials/views/showcase.html | 7 +++++--
 5 files changed, 15 insertions(+), 8 deletions(-)

diff --git a/modules/wowchemy/layouts/partials/page_header.html b/modules/wowchemy/layouts/partials/page_header.html
index b6dd6f17..b03f82e3 100644
--- a/modules/wowchemy/layouts/partials/page_header.html
+++ b/modules/wowchemy/layouts/partials/page_header.html
@@ -50,14 +50,15 @@
 {{ $image_container := "" }}
 {{ if eq $placement 2}}
   {{ $image_container = "container" }}
-  {{ $image = $featured.Fit "1200x2500 webp" }}
+  {{ $image = $featured.Fit "1200x2500" }}
 {{else if eq $placement 3}}
   {{ $image_container = "container-fluid" }}
-  {{ $image := $featured.Fit "2560x2560 webp" }}
+  {{ $image := $featured.Fit "2560x2560" }}
 {{else}}
   {{ $image_container = "article-container" }}
-  {{ $image = $featured.Fit "720x2500 webp" }}
+  {{ $image = $featured.Fit "720x2500" }}
 {{end}}
+{{ if ne $image.MediaType.SubType "gif" }}{{ $image = $image.Process "webp" }}{{ end }}
 
 <div class="article-container pt-3">
   <h1>{{ $title }}</h1>
diff --git a/modules/wowchemy/layouts/partials/views/card.html b/modules/wowchemy/layouts/partials/views/card.html
index 691acafb..381e50bd 100644
--- a/modules/wowchemy/layouts/partials/views/card.html
+++ b/modules/wowchemy/layouts/partials/views/card.html
@@ -44,7 +44,8 @@
   {{ $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) }}
+    {{ $image := .Fill (printf "808x455 %s" $anchor) }}
+    {{ if ne $image.MediaType.SubType "gif" }}{{ $image = $image.Process "webp" }}{{ end }}
     <a href="{{ $link }}" {{ $target | safeHTMLAttr }}>
       <div class="img-hover-zoom">
         <img src="{{ $image.RelPermalink }}" height="{{ $image.Height }}" width="{{ $image.Width }}"
diff --git a/modules/wowchemy/layouts/partials/views/compact.html b/modules/wowchemy/layouts/partials/views/compact.html
index 55ee4ba9..c27fa4dc 100644
--- a/modules/wowchemy/layouts/partials/views/compact.html
+++ b/modules/wowchemy/layouts/partials/views/compact.html
@@ -76,7 +76,8 @@
   <div class="ml-3">
     {{ $resource := partial "functions/get_featured_image.html" $item }}
     {{ with $resource }}
-      {{ $image := .Resize "150x webp" }}
+      {{ $image := .Resize "150x" }}
+      {{ if ne $image.MediaType.SubType "gif" }}{{ $image = $image.Process "webp" }}{{ end }}
       <a href="{{$link}}" {{ $target | safeHTMLAttr }}>
         <img src="{{ $image.RelPermalink }}" height="{{ $image.Height }}" width="{{ $image.Width }}"
             alt="{{ $item.Title }}" loading="lazy">
diff --git a/modules/wowchemy/layouts/partials/views/masonry.html b/modules/wowchemy/layouts/partials/views/masonry.html
index 06faa786..a315c9b4 100644
--- a/modules/wowchemy/layouts/partials/views/masonry.html
+++ b/modules/wowchemy/layouts/partials/views/masonry.html
@@ -22,7 +22,8 @@
 
 <div class="card">
   {{ with $resource }}
-  {{ $image := .Resize "550x webp" }}
+  {{ $image := .Resize "550x" }}
+  {{ if ne $image.MediaType.SubType "gif" }}{{ $image = $image.Process "webp" }}{{ end }}
   <a href="{{ $link }}" {{ $target | safeHTMLAttr }} class="card-image hover-overlay">
     <img src="{{ $image.RelPermalink }}" height="{{ $image.Height }}" width="{{ $image.Width }}"
          alt="{{ $item.Title }}" class="img-responsive" loading="lazy">
diff --git a/modules/wowchemy/layouts/partials/views/showcase.html b/modules/wowchemy/layouts/partials/views/showcase.html
index 597bbe4c..d289330b 100644
--- a/modules/wowchemy/layouts/partials/views/showcase.html
+++ b/modules/wowchemy/layouts/partials/views/showcase.html
@@ -56,10 +56,13 @@
       {{ $resource := partial "functions/get_featured_image.html" $item }}
 
       {{ with $resource }}
-        {{ $image := .Resize "540x webp" }}
+        {{/* Use CSS to expand images to consistent widths rather than just Hugo as Hugo can significantly increase the
+        filesize of GIFs when processing them, e.g. 400kB --> 1.5MB */}}
+        {{ $image := . }}
+        {{ if ne $image.MediaType.SubType "gif" }}{{ $image = $image.Process "resize 540x webp" }}{{ end }}
         {{if $do_link}}<a href="{{ $link }}" {{ $target | safeHTMLAttr }}>{{end}}
           <img src="{{ $image.RelPermalink }}" height="{{ $image.Height }}" width="{{ $image.Width }}"
-              alt="{{ $item.Title }}" loading="lazy">
+              alt="{{ $item.Title }}" loading="lazy" style="width: 540px; height: auto; object-fit: cover;">
         {{if $do_link}}</a>{{end}}
       {{end}}
     </div>