cover.html 2.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354
  1. {{ $_hugo_config := `{ "version": 1 }` -}}
  2. {{ $blockID := printf "td-cover-block-%d" .Ordinal -}}
  3. {{ $promo_image := (.Page.Resources.ByType "image").GetMatch "**background*" -}}
  4. {{ $logo_image := (.Page.Resources.ByType "image").GetMatch "**logo*" -}}
  5. {{ $col_id := .Get "color" | default "dark" -}}
  6. {{ $image_anchor := .Get "image_anchor" | default "smart" -}}
  7. {{ $logo_anchor := .Get "logo_anchor" | default "smart" -}}
  8. {{/* Height can be one of: auto, min, med, max, full. */ -}}
  9. {{ $height := .Get "height" | default "max" -}}
  10. {{ with $promo_image -}}
  11. {{ $promo_image_big := . -}}
  12. {{ $promo_image_small := . -}}
  13. {{ if ne $promo_image.MediaType.SubType "svg" -}}
  14. {{ $promo_image_big = .Fill (printf "1920x1080 %s" $image_anchor) -}}
  15. {{ $promo_image_small = .Fill (printf "960x540 %s" $image_anchor) -}}
  16. {{ end -}}
  17. <link rel="preload" as="image" href="{{ $promo_image_small.RelPermalink }}" media="(max-width: 1200px)">
  18. <link rel="preload" as="image" href="{{ $promo_image_big.RelPermalink }}" media="(min-width: 1200px)">
  19. <style>
  20. #{{ $blockID }} {
  21. background-image: url({{ $promo_image_small.RelPermalink }});
  22. }
  23. @media only screen and (min-width: 1200px) {
  24. #{{ $blockID }} {
  25. background-image: url({{ $promo_image_big.RelPermalink }});
  26. }
  27. }
  28. </style>
  29. {{ end -}}
  30. <section id="{{ $blockID }}" class="row td-cover-block td-cover-block--height-{{ $height -}}
  31. {{ if not .Site.Params.ui.navbar_translucent_over_cover_disable }} js-td-cover
  32. {{- end }} td-overlay td-overlay--dark -bg-{{ $col_id }}">
  33. <div class="col-12">
  34. <div class="container td-overlay__inner">
  35. <div class="text-center">
  36. {{ 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 }}
  37. {{ with .Get "subtitle" }}<p class="display-2 text-uppercase mb-0">{{ . | html }}</p>{{ end }}
  38. <div class="pt-3 lead">
  39. {{ if eq .Page.File.Ext "md" }}
  40. {{ .Inner | markdownify }}
  41. {{ else }}
  42. {{ .Inner | htmlUnescape | safeHTML }}
  43. {{ end }}
  44. </div>
  45. </div>
  46. </div>
  47. </div>
  48. {{ with .Get "byline" | default "" -}}
  49. <div class="byline">{{ . }}</div>
  50. {{- end }}
  51. </section>
  52. {{/**/ -}}