/
page_header.html
101 lines (87 loc) · 3.48 KB
/
page_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
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
{{ $page := . }}
{{ $featured := partial "blox-core/functions/get_featured_image.html" $page }}
{{ $anchor := $page.Params.image.focal_point | default "Smart" }}
{{/* Set default titles for node pages */}}
{{ $title := .Title }}
{{ if and (not $title) .IsNode }}
{{ if eq .Type "post" }}
{{ $title = i18n "posts" }}
{{ else if eq .Type "event" }}
{{ $title = i18n "talks" }}
{{ else if eq .Type "publication" }}
{{ $title = i18n "publications" }}
{{end}}
{{end}}
{{/* Banner image */}}
{{ if and .Params.banner.image (not (and $featured (not .Params.image.preview_only))) }}
<div class="article-header">
{{- $img := "" -}}
{{ $alt := (.Params.banner.caption | default "") | plainify }}
{{ $destination := .Params.banner.image }}
{{ $is_remote := strings.HasPrefix $destination "http" }}
{{- if not $is_remote -}}
{{- $img = (.Page.Resources.ByType "image").GetMatch $destination -}}
{{- if not $img -}}
{{- $img = resources.Get (path.Join "media" $destination) -}}
{{- end -}}
{{- end -}}
{{ if $img }}
<img src="{{$img.RelPermalink}}" width="{{$img.Width}}" height="{{$img.Height}}" class="article-banner" alt="{{$alt}}">
{{ else }}
<img src="{{ .Params.banner.image }}" class="article-banner" alt="{{$alt}}">
{{ end }}
{{ with .Params.banner.caption }}<span class="article-header-caption">{{ . | markdownify | emojify }}</span>{{ end }}
</div>
{{end}}
{{/* Featured image layout */}}
{{ if and $featured (not .Params.image.preview_only) }}
{{/* Fit image within max size. */}}
{{ $image := $featured }}
{{/* Determine image placement. */}}
{{ $placement := .Params.image.placement | default 1 }}{{/* Default to full column width. */}}
{{/* Fit image to container's max width */}}
{{ $image_container := "" }}
{{ if eq $placement 2}}
{{ $image_container = "container" }}
{{ $image = $featured.Fit "1200x2500" }}
{{else if eq $placement 3}}
{{ $image_container = "container-fluid" }}
{{ $image := $featured.Fit "2560x2560" }}
{{else}}
{{ $image_container = "article-container" }}
{{ $image = $featured.Fit "720x2500" }}
{{end}}
{{ if ne $image.MediaType.SubType "gif" }}{{ $image = $image.Process "webp" }}{{ end }}
<div class="article-container pt-3">
<h1>{{ $title }}</h1>
{{ with $page.Params.subtitle }}
<p class="page-subtitle">{{ . | markdownify | emojify }}</p>
{{end}}
{{ partial "page_metadata" (dict "page" $page "is_list" 0 "share" true) }}
{{ partial "page_links_div.html" $page }}
</div>
{{/* Featured image */}}
<div class="article-header {{$image_container}} featured-image-wrapper mt-4 mb-4" style="max-width: {{$image.Width}}px; max-height: {{$image.Height}}px;">
<div style="position: relative">
<img src="{{ $image.RelPermalink }}" width="{{ $image.Width }}" height="{{ $image.Height }}" alt="{{ with $.Params.image.alt_text }}{{.}}{{ end }}" class="featured-image">
{{ with $.Params.image.caption }}<span class="article-header-caption">{{ . | markdownify | emojify }}</span>{{ end }}
</div>
</div>
{{else}}
{{/* Case when page has no image */}}
{{/* Wider container for nodes */}}
{{ $ctnr := "article-container" }}
{{ if $page.IsNode }}
{{ $ctnr = "universal-wrapper" }}
{{end}}
<div class="{{$ctnr}} pt-3">
<h1>{{ $title }}</h1>
{{ with $page.Params.subtitle }}
<p class="page-subtitle">{{ . | markdownify | emojify }}</p>
{{end}}
{{ if not .IsNode }}
{{ partial "page_metadata" (dict "page" $page "is_list" 0 "share" true) }}
{{ partial "page_links_div.html" $page }}
{{end}}
</div>
{{end}}