tw-runner/mysite/layouts/partials/image/responsive-bg-pager.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 box-xl box-primary {{.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.75" }});'>
    {{ partial "components/cards/pager.html" .page }}
  </div>
</div>