Alan Orth
eb65845f60
This gets three random posts and uses the first for the top feature and the second and third for the two smaller features.
54 lines
2.5 KiB
HTML
54 lines
2.5 KiB
HTML
{{ $dateFormat := default "Mon Jan 2, 2006" (index .Site.Params "date_format") }}
|
|
{{/* get three random posts: 1 for large feature, 2 for small features */}}
|
|
{{ range $index, $element := first 3 (where .Site.RegularPages "Section" "in" .Site.Params.mainSections) | 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 font-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 }}
|
|
{{ end }}
|
|
{{ end }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{{ end }}
|
|
{{ end }}
|
|
</div>
|
|
|
|
{{- /* vim: set ts=2 sw=2 et: */}}
|