From 063830e6166f6cf2edc6ec253b6552f3e3f70cf3 Mon Sep 17 00:00:00 2001 From: or1k Date: Sun, 20 Sep 2026 23:17:29 +0300 Subject: [PATCH] Added classic blur option for background hero style (issue #3089) v3 replaced hero/background.html's persistent full-viewport blur overlay with hero-scroll-fade.js, which fades the hero band to nothing after 500px of scroll - reusing the same layoutBackgroundBlur flag to gate the new behavior, with no way back to the old look. Added layoutBackgroundBlurStyle (fade default, classic opt-in) to restore the pre-v3 persistent blur overlay, reusing the same background-blur.js still used by hero/thumbAndBackground.html --- .../content/docs/configuration/index.md | 4 ++ layouts/partials/hero/background.html | 43 +++++++++++++++---- 2 files changed, 38 insertions(+), 9 deletions(-) diff --git a/exampleSite/content/docs/configuration/index.md b/exampleSite/content/docs/configuration/index.md index f89c1adf..43187ad9 100644 --- a/exampleSite/content/docs/configuration/index.md +++ b/exampleSite/content/docs/configuration/index.md @@ -288,6 +288,7 @@ Many of the article defaults here can be overridden on a per article basis by sp | `article.showHero` | `false` | Whether the thumbnail image will be shown as a hero image within each article page. | | `article.heroStyle` | _Not set_ | Style to display the hero image, valid options are: `basic`, `big`, `background`, `thumbAndBackground`. Effective only if `article.showHero = true`. | | `article.layoutBackgroundBlur` | `true` | Makes the background image in the background article heroStyle blur with the scroll. Only used when `heroStyle` equals `background` or `thumbAndBackground`. | +| `article.layoutBackgroundBlurStyle` | `fade` | Valid options are `fade` (the hero image fades out as you scroll) or `classic` (a blurred panel stays fixed behind the whole page). Only used when `heroStyle` equals `background` and `layoutBackgroundBlur` is enabled. | | `article.layoutBackgroundHeaderSpace` | `true` | Add space between the header and the body. Only used when `heroStyle` equals `background`. | | `article.showBreadcrumbs` | `false` | Whether or not breadcrumbs are displayed in the article header. | | `article.showDraftLabel` | `true` | Whether or not the draft indicator is shown next to articles when site is built with `--buildDrafts`. | @@ -321,6 +322,7 @@ Many of the article defaults here can be overridden on a per article basis by sp | `list.showHero` | `false` | Whether the thumbnail image will be shown as a hero image within each list page. | | `list.heroStyle` | _Not set_ | Style to display the hero image, valid options are: `basic`, `big`, `background`, `thumbAndBackground`. Effective only if `list.showHero = true`. | | `list.layoutBackgroundBlur` | `true` | Makes the background image in the background list heroStyle blur with the scroll. Only used when `heroStyle` equals `background` or `thumbAndBackground`. | +| `list.layoutBackgroundBlurStyle` | `fade` | Valid options are `fade` (the hero image fades out as you scroll) or `classic` (a blurred panel stays fixed behind the whole page). Only used when `heroStyle` equals `background` and `layoutBackgroundBlur` is enabled. | | `list.layoutBackgroundHeaderSpace` | `true` | Add space between the header and the body. Only used when `heroStyle` equals `background`. | | `list.showBreadcrumbs` | `false` | Whether or not breadcrumbs are displayed in the header on list pages. | | `list.showTableOfContents` | `false` | Whether or not the table of contents is displayed on list pages. | @@ -349,6 +351,7 @@ Many of the article defaults here can be overridden on a per article basis by sp | `taxonomy.showHero` | `false` | Whether the thumbnail image will be shown as a hero image within each taxonomy page. | | `taxonomy.heroStyle` | _Not set_ | Style to display the hero image, valid options are: `basic`, `big`, `background`, `thumbAndBackground`. Effective only if `taxonomy.showHero = true`. | | `taxonomy.layoutBackgroundBlur` | `true` | Makes the background image in the background taxonomy heroStyle blur with the scroll. Only used when `heroStyle` equals `background` or `thumbAndBackground`. | +| `taxonomy.layoutBackgroundBlurStyle` | `fade` | Valid options are `fade` (the hero image fades out as you scroll) or `classic` (a blurred panel stays fixed behind the whole page). Only used when `heroStyle` equals `background` and `layoutBackgroundBlur` is enabled. | | `taxonomy.layoutBackgroundHeaderSpace` | `true` | Add space between the header and the body. Only used when `heroStyle` equals `background`. | | `taxonomy.showBreadcrumbs` | `false` | Whether or not breadcrumbs are displayed in the taxonomy header. | | `taxonomy.showViews` | `false` | Whether or not article views are displayed. This requires firebase integrations to be enabled, look below. | @@ -363,6 +366,7 @@ Many of the article defaults here can be overridden on a per article basis by sp | `term.showHero` | `false` | Whether the thumbnail image will be shown as a hero image within each term page. | | `term.heroStyle` | _Not set_ | Style to display the hero image, valid options are: `basic`, `big`, `background`, `thumbAndBackground`. Effective only if `term.showHero = true`. | | `term.layoutBackgroundBlur` | `true` | Makes the background image in the background term heroStyle blur with the scroll. Only used when `heroStyle` equals `background` or `thumbAndBackground`. | +| `term.layoutBackgroundBlurStyle` | `fade` | Valid options are `fade` (the hero image fades out as you scroll) or `classic` (a blurred panel stays fixed behind the whole page). Only used when `heroStyle` equals `background` and `layoutBackgroundBlur` is enabled. | | `term.layoutBackgroundHeaderSpace` | `true` | Add space between the header and the body. Only used when `heroStyle` equals `background`. | | `term.showBreadcrumbs` | `false` | Whether or not breadcrumbs are displayed in the term header. | | `term.showViews` | `false` | Whether or not article views are displayed. This requires firebase integrations to be enabled, look below. | diff --git a/layouts/partials/hero/background.html b/layouts/partials/hero/background.html index c22516ec..50efd835 100644 --- a/layouts/partials/hero/background.html +++ b/layouts/partials/hero/background.html @@ -64,6 +64,18 @@ (and ($.Site.Params.term.layoutBackgroundHeaderSpace | default true) (eq $scope "term")) ) }} +{{ $siteBlurStyle := "fade" }} +{{ if eq $scope "single" }} + {{ $siteBlurStyle = $.Site.Params.article.layoutBackgroundBlurStyle | default "fade" }} +{{ else if eq $scope "list" }} + {{ $siteBlurStyle = $.Site.Params.list.layoutBackgroundBlurStyle | default "fade" }} +{{ else if eq $scope "terms" }} + {{ $siteBlurStyle = $.Site.Params.taxonomy.layoutBackgroundBlurStyle | default "fade" }} +{{ else if eq $scope "term" }} + {{ $siteBlurStyle = $.Site.Params.term.layoutBackgroundBlurStyle | default "fade" }} +{{ end }} +{{ $blurStyle := $.Params.layoutBackgroundBlurStyle | default $siteBlurStyle }} +{{ $isClassic := eq $blurStyle "classic" }} {{- with $featuredURL -}} {{ if $shouldAddHeaderSpace | default true }} @@ -71,7 +83,7 @@ {{ end }}
+ class="{{ if not $isClassic }}hero-canvas-fade {{ end }}fixed inset-x-0 top-0 h-[800px] single_hero_background nozoom"> {{ $style := "" }} {{ $defaultPosition := cond $useDefault site.Params.imagePosition false }} {{ with $.Params.imagePosition | default $defaultPosition }} @@ -90,13 +102,26 @@
{{ if $shouldBlur | default false }} - {{ $heroFade := resources.Get "js/hero-scroll-fade.js" }} - {{ $heroFade = $heroFade | resources.Minify | resources.Fingerprint ($.Site.Params.fingerprintAlgorithm | default "sha512") }} - + {{ if $isClassic }} +
+ {{ $backgroundBlur := resources.Get "js/background-blur.js" }} + {{ $backgroundBlur = $backgroundBlur | resources.Minify | resources.Fingerprint ($.Site.Params.fingerprintAlgorithm | default "sha512") }} + + {{ else }} + {{ $heroFade := resources.Get "js/hero-scroll-fade.js" }} + {{ $heroFade = $heroFade | resources.Minify | resources.Fingerprint ($.Site.Params.fingerprintAlgorithm | default "sha512") }} + + {{ end }} {{ end }} {{- end -}}