tw-runner/mysite/layouts/partials/image/responsive-bg.html

Run and manage Tower Website projects with this utility.

{{ $image := "" }}

{{ if .page }}
  {{ $image = .page.Resources.GetMatch .page.Params.background }}
{{ else }}
  {{ $image = resources.Get .src }}
{{ end }}

{{ if $image }}
{{ $small := $image.Fit "640x360 webp" }}
{{ $medium := $image.Fit "1280x720 webp" }}
{{ $large := $image.Fit "1920x1080 webp" }}

<style>
    #image-body-{{.name}} {
      background-image: url('{{ $small.RelPermalink }}');
    }

    @media (min-width: 768px) {
      #image-body-{{.name}} {
          background-image: url('{{ $medium.RelPermalink }}');
      }
    }

    @media (min-width: 1024px) {
      #image-body-{{.name}} {
          background-image: url('{{ $large.RelPermalink }}');
      }
    }
</style>
{{ end }}

<div id="image-body-{{.name}}" class="box {{.dimensions}} p-0 bg-center bg-cover overflow-hidden {{.styles}}">
  <div class="h-full w-full p-4 text-ground-text {{.overlayStyles}}" style='background-color: rgba(11, 19, 43, {{ or .opacity "0.5" }});'>
    {{ partial "components/cards/base.html" (dict
      "heading" (or .heading .page.Title)
      "noHeading" .noHeading
      "content" .content
      "cta" .cta
      "noShare" .noShare
      "url" (or .url .page.Permalink)
      "styles" .baseStyles
      "headingStyles" .headingStyles
      "contentStyles" .contentStyles
      "pStyles" .pStyles
      "footerStyles" .footerStyles
      "ctaStyles" .ctaStyles
    )}}
  </div>
</div>