layouts/partials/header.html


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

{{$header := .Params.header}}
<div class="header">
  <div class="container">
    <div class="padder">
      <div class="main-description animated fadeIn">
        {{- with $header.description -}}
          <h1 class="break-word">{{- . | safeHTML -}}</h1>
        {{- end -}}
        {{- with $header.image -}}
          {{- $imageUrl := .url -}}
          {{- $imageAltText := .alt_text -}}
          {{- $responsiveSources := .responsive_sources -}}
          {{- with $imageUrl -}}
            <picture>
              {{- with $responsiveSources -}}
                {{- range $imageWidth, $imageSourceUrl := . -}}
                  {{- $.Scratch.Add "imageSrcSetArray" (slice (print ($imageSourceUrl | relURL) " " $imageWidth "w")) -}}
                {{- end -}}
                <source media="(max-width: 46.25em)" srcset="{{delimit ($.Scratch.Get "imageSrcSetArray") ", "}}">
                {{- $.Scratch.Delete "imageSrcSetArray" -}}
              {{- end -}}
              <img class="project-image" src="{{. | relURL}}" alt="{{$imageAltText}}">
            </picture>
          {{- end -}}
        {{- end -}}
      </div>
    </div>
  </div>
</div>