From 4a0eecac2f7533dbed30716f47680737060a9c42 Mon Sep 17 00:00:00 2001
From: Patrick Kollitsch <83281+davidsneighbour@users.noreply.github.com>
Date: Sun, 17 May 2026 08:42:42 +0000
Subject: [PATCH] fix: generate responsive hero background images
---
layouts/_partials/page-header.html | 27 ++++++++++++++++++++++++++-
1 files changed, 26 insertions(+), 1 deletions(-)
diff --git a/layouts/_partials/page-header.html b/layouts/_partials/page-header.html
index 815cb95..10d290e 100644
--- a/layouts/_partials/page-header.html
+++ b/layouts/_partials/page-header.html
@@ -1,9 +1,34 @@
{{ $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 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="tc-l pv6 ph3 ph4-ns">
--
Gitblit v1.10.0