diff options
Diffstat (limited to 'themes/blowfish/layouts/partials/hero/thumbAndBackground.html')
-rw-r--r-- | themes/blowfish/layouts/partials/hero/thumbAndBackground.html | 70 |
1 files changed, 70 insertions, 0 deletions
diff --git a/themes/blowfish/layouts/partials/hero/thumbAndBackground.html b/themes/blowfish/layouts/partials/hero/thumbAndBackground.html new file mode 100644 index 0000000..4b807ac --- /dev/null +++ b/themes/blowfish/layouts/partials/hero/thumbAndBackground.html @@ -0,0 +1,70 @@ +{{ $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 }} + |