From 9570264992f1f4923255bd8522a99c5552595d65 Mon Sep 17 00:00:00 2001
From: Patrick Kollitsch <83281+davidsneighbour@users.noreply.github.com>
Date: Sun, 07 Jun 2026 03:36:45 +0000
Subject: [PATCH] fix: generate responsive hero background images (#970)
---
layouts/_partials/func/GetFeaturedImageResource.html | 45 ++++++++++++++++++++++
layouts/_partials/page-header.html | 27 +++++++++++++
2 files changed, 71 insertions(+), 1 deletions(-)
diff --git a/layouts/_partials/func/GetFeaturedImageResource.html b/layouts/_partials/func/GetFeaturedImageResource.html
new file mode 100644
index 0000000..2ff28d8
--- /dev/null
+++ b/layouts/_partials/func/GetFeaturedImageResource.html
@@ -0,0 +1,45 @@
+{{/*
+ GetFeaturedImageResource
+
+ This partial gets the featured image resource for a given page.
+
+ If a featured_image was set in the page's front matter and it matches a page
+ resource, then that resource will be used.
+
+ If no featured_image was set, this will use the first matching page resource from
+ the page's images front matter array.
+
+ If not set, this will search page resources to find an image that contains the word
+ "cover" or "feature", and if found, returns that resource.
+
+ If no matching page resource can be found, this partial returns false.
+
+ @return Featured image resource, or false if not found.
+
+*/}}
+
+{{ $resource := false }}
+{{ $matches := "feature,cover" }}
+{{ with .Params.featured_image }}
+ {{ with $.Resources.GetMatch . }}
+ {{ $resource = . }}
+ {{ end }}
+{{ else }}
+ {{ with .Params.images }}
+ {{ range first 1 . }}
+ {{ with . }}
+ {{ with $.Resources.GetMatch . }}
+ {{ $resource = . }}
+ {{ end }}
+ {{ end }}
+ {{ end }}
+ {{ else }}
+ {{ with .Resources.ByType "image" }}
+ {{ with .GetMatch (fmt.Printf "**{%s}*" $matches) }}
+ {{ $resource = . }}
+ {{ end }}
+ {{ end }}
+ {{ end }}
+{{ end }}
+
+{{ return $resource }}
diff --git a/layouts/_partials/page-header.html b/layouts/_partials/page-header.html
index bb3880e..393988c 100644
--- a/layouts/_partials/page-header.html
+++ b/layouts/_partials/page-header.html
@@ -1,10 +1,35 @@
{{ $featured_image := partials.Include "func/GetFeaturedImage.html" . }}
+{{ $featured_image_resource := partials.Include "func/GetFeaturedImageResource.html" . }}
{{ if $featured_image }}
{{/* Trimming the slash and adding absURL make sure the image works no matter where our site lives */}}
{{ $featured_image_class := .Params.featured_image_class | compare.Default "cover bg-center" }}
{{ $cover_dimming_class := .Params.cover_dimming_class | compare.Default "bg-black-60" }}
{{ $header_section_class := .Param "header_section_class" | compare.Default "tc-l pv6 ph3 ph4-ns" }}
- <header class="{{ $featured_image_class }}" style="background-image: url('{{ $featured_image }}');">
+ {{ $responsive_image_widths := .Site.Params.ananke.responsive_image_widths | compare.Default (slice 480 960 1440 1920) }}
+ {{ $responsive_header_id := "" }}
+ {{ $background_image := $featured_image }}
+ {{ if and $featured_image_resource (compare.Ne $featured_image_resource.MediaType.SubType "svg") }}
+ {{ $responsive_header_id = printf "featured-image-%s" (crypto.MD5 $featured_image_resource.RelPermalink) }}
+ {{ range first 1 $responsive_image_widths }}
+ {{ if compare.Le . $featured_image_resource.Width }}
+ {{ $resized_image := $featured_image_resource.Resize (printf "%dx" .) }}
+ {{ $background_image = $resized_image.RelPermalink }}
+ {{ end }}
+ {{ end }}
+ {{ end }}
+ {{ if $responsive_header_id }}
+ <style>
+ {{ range $responsive_image_widths }}
+ {{ if compare.Le . $featured_image_resource.Width }}
+ {{ $resized_image := $featured_image_resource.Resize (printf "%dx" .) }}
+ @media screen and (min-width: {{ . }}px) {
+ #{{ $responsive_header_id }} { background-image: url('{{ $resized_image.RelPermalink }}'); }
+ }
+ {{ end }}
+ {{ end }}
+ </style>
+ {{ end }}
+ <header {{ with $responsive_header_id }}id="{{ . }}" {{ end }}class="{{ $featured_image_class }}" style="background-image: url('{{ $background_image }}');">
<div class="{{ $cover_dimming_class }}">
{{ partials.Include "site-navigation.html" . }}
<div class="{{ $header_section_class }}">
--
Gitblit v1.10.0