{{ $disableImageOptimization := .Page.Site.Params.disableImageOptimization | default false }} {{- $images := .Resources.ByType "image" -}} {{- $background := $images.GetMatch "*background*" -}} {{- if not $background }}{{ with .Site.Params.defaultBackgroundImage }}{{ $background = resources.Get . }}{{ end }}{{ end -}} {{- if not $background }}{{ $background = $images.GetMatch "{*cover*,*thumbnail*}" }}{{ end -}} {{- if not $background }}{{ $background = $images.GetMatch "*feature*" }}{{ end -}} {{- $featured := $images.GetMatch "*feature*" -}} {{- if not $featured }}{{ $featured = $images.GetMatch "{*cover*,*thumbnail*}" }}{{ end -}} {{ if .Params.featureimage }} {{- $url:= .Params.featureimage -}} {{- if not $featured }}{{ $featured = resources.GetRemote $url }}{{ end -}} {{ end }} {{- if not $featured }}{{ $featured = $images.GetMatch "*background*" }}{{ end -}} {{- if not $featured }}{{ with .Site.Params.defaultBackgroundImage }}{{ $featured = resources.Get . }}{{ 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)) ) }} {{- with $featured -}} {{ if or $disableImageOptimization (strings.HasSuffix . ".svg")}} {{ with . }} <div class="w-full rounded-md h-36 md:h-56 lg:h-72 single_hero_basic nozoom" style="background-image:url({{ .RelPermalink }});"></div> {{ end }} {{ else }} {{ with .Resize "1200x" }} <div class="w-full rounded-md h-36 md:h-56 lg:h-72 single_hero_basic nozoom" style="background-image:url({{ .RelPermalink }});"></div> {{ end }} {{ end }} {{- end -}} {{- with $background -}} {{ if or $disableImageOptimization (strings.HasSuffix . ".svg")}} {{ with . }} <div class="fixed inset-x-0 top-0 h-[800px] single_hero_background nozoom" style="background-image:url({{ .RelPermalink }});"> <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-30 dark:opacity-60 bg-gradient-to-t from-neutral dark:from-neutral-800 to-neutral dark:to-neutral-800 mix-blend-normal"> </div> </div>{{ end }} {{ else }} {{ with .Resize "1200x" }} <div class="fixed inset-x-0 top-0 h-[800px] single_hero_background nozoom" style="background-image:url({{ .RelPermalink }});"> <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-30 dark:opacity-60 bg-gradient-to-t from-neutral dark:from-neutral-800 to-neutral dark:to-neutral-800 mix-blend-normal"> </div> </div>{{ end }} {{ end }} {{- end -}} {{ 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 }}