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

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. |

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 }}
   <div
     id="hero-background"
-    class="hero-canvas-fade fixed inset-x-0 top-0 h-[800px] single_hero_background nozoom">
+    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 @@
   </div>
 
   {{ if $shouldBlur | default false }}
-    {{ $heroFade := resources.Get "js/hero-scroll-fade.js" }}
+    {{ if $isClassic }}
-    {{ $heroFade = $heroFade | resources.Minify | resources.Fingerprint ($.Site.Params.fingerprintAlgorithm | default "sha512") }}
+      <div
-    <script
+        id="background-blur"
-      type="text/javascript"
+        class="fixed opacity-0 inset-x-0 top-0 h-full single_hero_background nozoom backdrop-blur-xl bg-neutral-100/75 dark:bg-neutral-800/60"></div>
-      src="{{ $heroFade.RelPermalink }}"
+      {{ $backgroundBlur := resources.Get "js/background-blur.js" }}
-      integrity="{{ $heroFade.Data.Integrity }}"
+      {{ $backgroundBlur = $backgroundBlur | resources.Minify | resources.Fingerprint ($.Site.Params.fingerprintAlgorithm | default "sha512") }}
-      data-hero-id="hero-background"
+      <script
-      data-fade-distance="500"></script>
+        type="text/javascript"
+        src="{{ $backgroundBlur.RelPermalink }}"
+        integrity="{{ $backgroundBlur.Data.Integrity }}"
+        data-blur-id="background-blur"></script>
+    {{ else }}
+      {{ $heroFade := resources.Get "js/hero-scroll-fade.js" }}
+      {{ $heroFade = $heroFade | resources.Minify | resources.Fingerprint ($.Site.Params.fingerprintAlgorithm | default "sha512") }}
+      <script
+        type="text/javascript"
+        src="{{ $heroFade.RelPermalink }}"
+        integrity="{{ $heroFade.Data.Integrity }}"
+        data-hero-id="hero-background"
+        data-fade-distance="500"></script>
+    {{ end }}
   {{ end }}
 {{- end -}}