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
HugoBlox · Oct 19, 2023 · b70eaa9 · b70eaa9
1 parent 2fc3e6a
commit b70eaa9
Show file tree

Hide file tree

Showing 5 changed files with 15 additions and 8 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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>