hero.html 2.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566
  1. {{ $ := .root }}
  2. {{ $page := .page }}
  3. {{ $bg := $page.Params.design.background }}
  4. {{ if $page.Params.hero_media }}
  5. <div class="row">
  6. <div class="col-12 col-md-6 order-md-1 text-center text-md-left">
  7. {{ end }}
  8. <h1 class="hero-title">
  9. {{ with $page.Title }}{{ . | markdownify }}{{ end }}
  10. </h1>
  11. {{ with $page.Content }}
  12. <div class="hero-lead">{{ . }}</div>
  13. {{ end }}
  14. {{/* Call-to-action link */}}
  15. {{ if $page.Params.cta.url }}
  16. {{ $pack := or $page.Params.cta.icon_pack "fas" }}
  17. {{ $pack_prefix := $pack }}
  18. {{ if in (slice "fab" "fas" "far" "fal") $pack }}
  19. {{ $pack_prefix = "fa" }}
  20. {{ end }}
  21. {{ $link := $page.Params.cta.url }}
  22. {{ $scheme := (urls.Parse $link).Scheme }}
  23. {{ $target := "" }}
  24. {{ if not $scheme }}
  25. {{ $link = $link | relLangURL }}
  26. {{ else if in (slice "http" "https") $scheme }}
  27. {{ $target = "target=\"_blank\" rel=\"noopener\"" }}
  28. {{ end }}
  29. <p class="cta-btns">
  30. <a href="{{ $link | safeURL }}" {{ $target | safeHTMLAttr }} class="btn {{if $bg.text_color_light}}btn-light{{else}}btn-primary{{end}} btn-lg">{{ if $page.Params.cta.icon }}<i class="{{ $pack }} {{ $pack_prefix }}-{{ $page.Params.cta.icon }} pr-1" aria-hidden="true"></i>{{end}}{{ $page.Params.cta.label | markdownify | emojify | safeHTML }}</a>
  31. {{/* Alternative Call-to-action link */}}
  32. {{ if $page.Params.cta_alt.url }}
  33. {{ $link := $page.Params.cta_alt.url }}
  34. {{ $scheme := (urls.Parse $link).Scheme }}
  35. {{ $target := "" }}
  36. {{ if not $scheme }}
  37. {{ $link = $link | relLangURL }}
  38. {{ else if in (slice "http" "https") $scheme }}
  39. {{ $target = "target=\"_blank\" rel=\"noopener\"" }}
  40. {{ end }}
  41. <a href="{{ $link | safeURL }}" {{ $target | safeHTMLAttr }} class="hero-cta-alt pl-4">{{ $page.Params.cta_alt.label | markdownify | emojify | safeHTML }} <i class="fas fa-angle-right"></i></a>
  42. {{ end }}
  43. </p>
  44. {{ end }}
  45. {{/* Call-to-action note */}}
  46. {{ with $page.Params.cta_note }}
  47. <p class="hero-note text-muted mb-0">
  48. {{ .label | markdownify | emojify | safeHTML }}
  49. </p>
  50. {{ end }}
  51. {{/* Hero image */}}
  52. {{ if $page.Params.hero_media }}
  53. {{ $media_dir := $.Scratch.Get "media_dir" }}
  54. </div>
  55. <div class="col-12 mx-auto col-md-6 order-md-2 hero-media">
  56. <img src="{{ printf "%s/%s" $media_dir $page.Params.hero_media | relURL }}" alt="">
  57. </div>
  58. </div>
  59. {{ end }}