| {{ $_hugo_config := `{ "version": 1 }` }} |
| {{ $blockID := printf "td-cover-block-%d" .Ordinal }} |
| {{ $promo_image := (.Page.Resources.ByType "image").GetMatch "**background*" }} |
| {{ $logo_image := (.Page.Resources.ByType "image").GetMatch "**logo*" }} |
| {{ $col_id := .Get "color" | default "dark" }} |
| {{ $image_anchor := .Get "image_anchor" | default "smart" }} |
| {{ $logo_anchor := .Get "logo_anchor" | default "smart" }} |
| {{/* Height can be one of: auto, min, med, max, full. */}} |
| {{ $height := .Get "height" | default "max" }} |
| {{ with $promo_image }} |
| {{ $promo_image_big := (.Fill (printf "1920x1080 %s" $image_anchor)) }} |
| {{ $promo_image_small := (.Fill (printf "960x540 %s" $image_anchor)) }} |
| <link rel="preload" as="image" href="{{ $promo_image_small.RelPermalink }}" media="(max-width: 1200px)"> |
| <link rel="preload" as="image" href="{{ $promo_image_big.RelPermalink }}" media="(min-width: 1200px)"> |
| <style> |
| #{{ $blockID }} { |
| background-image: url({{ $promo_image_small.RelPermalink }}); |
| } |
| @media only screen and (min-width: 1200px) { |
| #{{ $blockID }} { |
| background-image: url({{ $promo_image_big.RelPermalink }}); |
| } |
| } |
| </style> |
| {{ end }} |
| <section id="{{ $blockID }}" class="row td-cover-block td-cover-block--height-{{ $height }} js-td-cover td-overlay td-overlay--dark -bg-{{ $col_id }} td-box--1"> |
| <div class="container td-overlay__inner"> |
| <div class="col-12"> |
| <div class="text-center"> |
| {{ with .Get "title" }}<h1 class="display-1 mt-0 mt-md-5 pb-4">{{ $title := . }}{{ with $logo_image }}{{ $logo_image_resized := (.Fit (printf "70x70 %s" $logo_anchor)) }}<img class="td-cover-logo" src="{{ $logo_image_resized.RelPermalink }}" alt="{{ $title | html }} Logo">{{ end }}{{ $title | html }}</h1>{{ end }} |
| {{ with .Get "subtitle" }}<p class="display-2 text-uppercase mb-0">{{ . | html }}</p>{{ end }} |
| <div class="pt-3 lead"> |
| {{ .Inner | markdownify}} |
| </div> |
| </div> |
| </div> |
| <a class="btn btn-link text-info icon-arrow" href="javascript:;"><i class="fa fa-chevron-circle-down" style="font-size: 220%"></i></a> |
| </div> |
| </section> |
