{{ $disableImageOptimization := .Page.Site.Params.disableImageOptimization | default false }} {{- $images := .Resources.ByType "image" -}} {{- $featured := $images.GetMatch "*background*" -}} {{- if not $featured }}{{ $featured = $images.GetMatch "*feature*" }}{{ end -}} {{- if not $featured }}{{ $featured = $images.GetMatch "{*cover*,*thumbnail*}" }}{{ end -}} {{ if and .Params.featureimage (not $featured) }} {{- $url:= .Params.featureimage -}} {{ $featured = resources.GetRemote $url }} {{ end }} {{- if not $featured }} {{ with .Site.Params.defaultBackgroundImage }} {{ if or (strings.HasPrefix . "http:") (strings.HasPrefix . "https:") }} {{ $featured = resources.GetRemote . }} {{ else }} {{ $featured = resources.Get . }} {{ end }} {{ end }} {{ end -}} {{ $isParentList := eq (.Scratch.Get "scope") "list" }} {{ $shouldBlur := $.Params.layoutBackgroundBlur | default (or (and ($.Site.Params.article.layoutBackgroundBlur | default true) (not $isParentList)) (and ($.Site.Params.list.layoutBackgroundBlur | default true) ($isParentList)) ) }} {{ $shouldAddHeaderSpace := $.Params.layoutBackgroundHeaderSpace | default (or (and ($.Site.Params.article.layoutBackgroundHeaderSpace | default true) (not $isParentList)) (and ($.Site.Params.list.layoutBackgroundHeaderSpace | default true) ($isParentList)) ) }} {{- with $featured -}} {{ if $shouldAddHeaderSpace | default true}} <div id="hero" class="h-[150px] md:h-[200px]"></div> {{ end }} {{ if or $disableImageOptimization (strings.HasSuffix $featured ".svg")}} {{ with . }} <div class="fixed inset-x-0 top-0 h-[800px] single_hero_background nozoom" style="background-image:url({{ .RelPermalink }});"> {{ end }} {{ else }} {{ with .Resize "1200x" }} <div class="fixed inset-x-0 top-0 h-[800px] single_hero_background nozoom" style="background-image:url({{ .RelPermalink }});"> {{ end }} {{ end }} <div class="absolute inset-0 bg-gradient-to-t from-neutral dark:from-neutral-800 to-transparent mix-blend-normal"> </div> <div class="absolute inset-0 opacity-60 bg-gradient-to-t from-neutral dark:from-neutral-800 to-neutral-100 dark:to-neutral-800 mix-blend-normal"> </div> </div> {{ if $shouldBlur | default false }} <div id="background-blur" class="fixed opacity-0 inset-x-0 top-0 h-full single_hero_background nozoom backdrop-blur-2xl"></div> <script> window.addEventListener('scroll', function (e) { var scroll = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0; var background_blur = document.getElementById('background-blur'); background_blur.style.opacity = (scroll / 300) }); </script> {{ end }} {{- end -}}