bunteshaus.de/themes/buha/layouts/partials/snippets/banner.html

{{ $title := .Title }}
{{ $title = singularize $title }}
{{ $title = i18n $title }}
{{ if not $title }}
    {{ $title = .Title }}
{{ end }}

{{ $what := "none" }}
{{ $img := "none" }}
{{ if eq .Kind "home" }}
    {{ $what = "home" }}
{{ else }}
    {{ with .File }}
        {{ $what = .File.ContentBaseName }}
    {{ end }}
{{ end }}
{{ $banner := printf "/images/banner/%s*" $what }}
{{ if resources.GetMatch $banner }}
    {{  $img = (resources.GetMatch $banner).Fill "1280x480 smart" }}
{{ end }}
{{ $height := safeCSS "min-height: 460px; max-height: 480px;" }}
{{ if and (resources.GetMatch $banner) (ne .Params.banner false) }}
    {{ $height = safeCSS (printf "height: calc(%spx - 5rem);" (string $img.Height)) }}
    <div style="background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.1)), url({{- $img.Permalink -}}); {{ $height }}" class="banner banner-shadow"><h1 class="dark-shadow">{{ $title }}</h1></div>
{{ else if and (.Resources.Match "banner*") (ne .Params.banner false) }}
        {{ $img = (.Resources.GetMatch "banner*").Fill "1280x480 smart" }}
        {{ $height = safeCSS (printf "height: calc(%spx - 5rem);" (string $img.Height)) }}
    <div style="background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.1)), url({{- $img.Permalink -}}); {{ $height }}" class="banner banner-shadow"><h1 class="dark-shadow">{{ $title }}</h1></div>
{{ else if and (.Resources.ByType "image") (ne .Params.banner false) }}
        {{ $img = (index (.Resources.ByType "image") 0).Fill "1280x480 smart" }}
        {{ $height = safeCSS (printf "height: calc(%spx - 5rem);" (string $img.Height)) }}
    <div style="background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.1)), url({{- $img.Permalink -}}); {{ $height }}" class="banner banner-shadow"><h1 class="dark-shadow">{{ $title }}</h1></div>
{{ else }}
    <div style="background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.1)); {{ $height }}" class="banner"><h1>{{ $title }}</h1></div>
{{ end }}