Alan Orth
f28cf4615c
For now it gets the first three posts with "featured: true" in their frontmatter and displays them in a random order (so no control over the placement of large feature or two smaller features). TODO: gracefully handle the case where there are no pages with the "featured: true" frontmatter so new users don't see a super weird and broken front page.
56 lines
2.6 KiB
HTML
56 lines
2.6 KiB
HTML
{{ $dateFormat := default "Mon Jan 2, 2006" (index .Site.Params "date_format") }}
|
|
{{/* get three random featured posts: 1 for large feature, 2 for small features */}}
|
|
{{ range $index, $element := first 3 (where .Site.RegularPages "Params.featured" true) | shuffle }}
|
|
|
|
{{ if eq $index 0 }}
|
|
<div class="p-4 p-md-5 mb-4 text-white rounded bg-dark">
|
|
<div class="col-md-6 px-0">
|
|
<h1 class="display-4 fst-italic">{{ .Title }}</h1>
|
|
<p class="lead my-3">{{ substr .Description 0 110 }}</p>
|
|
<p class="lead mb-0"><a href="{{ .Permalink }}" class="text-white fw-bold">Continue reading...</a></p>
|
|
</div>
|
|
</div>
|
|
{{ end }}
|
|
|
|
{{ if eq $index 1 }}
|
|
<div class="row mb-2">
|
|
{{ end }}
|
|
|
|
{{ if or (eq $index 1) (eq $index 2) }}
|
|
<div class="col-md-6">
|
|
<div class="row g-0 border rounded overflow-hidden flex-md-row mb-4 shadow-sm h-md-300 position-relative">
|
|
<div class="col p-4 d-flex flex-column position-static">
|
|
<strong class="d-inline-block mb-2 text-primary">World</strong>
|
|
<h3 class="mb-0">{{ .Title }}</h3>
|
|
<div class="mb-1 text-muted">{{ if not .PublishDate.IsZero }}<time {{ .Date.Format "2006-01-02T15:04:05Z07:00" | printf "datetime=%q" | safeHTMLAttr }}>{{ .Date.Format $dateFormat }}</time>{{ end }}</div>
|
|
<p class="card-text mb-auto">{{ substr .Description 0 110 }}</p>
|
|
<a href="{{ .Permalink }}" class="stretched-link">Continue reading</a>
|
|
</div>
|
|
<div class="col-auto d-none d-lg-block">
|
|
{{ range first 1 (.Resources.ByType "image") }}
|
|
{{/* get a local variable for the image because we will change context below */}}
|
|
{{ $image := . }}
|
|
{{/* set orientation to 1 just in case it doesnt exist in Exif */}}
|
|
{{ $orientation := 1 }}
|
|
{{ with .Exif }}
|
|
{{ $orientation = .Tags.Orientation }}
|
|
{{ if eq $orientation 8 }}
|
|
{{/* Rotate image before cropping because Hugo's "Smart" cropping crops differently if we do it at the same time as .Fill with a rotation) and use 2x dimensions to keep the thumbnail crisp */}}
|
|
{{ $RotatedImage := $image.Resize "480x600 r90" }}
|
|
<img src={{ ($RotatedImage.Fill "480x600").RelPermalink }} width="240" height="300" />
|
|
{{ else }}
|
|
<img src={{ ($image.Fill "480x600").RelPermalink }} width="240" height="300" />
|
|
{{ end }}
|
|
{{ else }}
|
|
<img src={{ ($image.Fill "480x600").RelPermalink }} width="240" height="300" />
|
|
{{ end }}
|
|
{{ end }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{{ end }}
|
|
{{ end }}
|
|
</div>
|
|
|
|
{{- /* vim: set ts=2 sw=2 et: */}}
|