64 lines
2.7 KiB
HTML
64 lines
2.7 KiB
HTML
{{ define "main" }}
|
|
<article class="container py-5">
|
|
<div class="row justify-content-center">
|
|
<div class="col">
|
|
<h1 class="display-5 fw-bold mb-4">{{ .Title }}</h1>
|
|
<div class="content-body mb-4">
|
|
{{ .Content }}
|
|
</div>
|
|
|
|
<div class="row row-cols-2 row-cols-md-3 row-cols-lg-4 g-4">
|
|
{{ range $index, $image := .Resources.ByType "image" }}
|
|
{{ $thumb := $image.Fill "400x300 Center" }}
|
|
{{ $caption := $image.Params.caption }}
|
|
{{ $modalID := printf "gallery-image-%d" $index }}
|
|
<div class="col">
|
|
<a href="#" class="text-decoration-none" role="button"
|
|
data-bs-toggle="modal" data-bs-target="#{{ $modalID }}">
|
|
<div class="card h-100">
|
|
<img src="{{ $thumb.RelPermalink }}"
|
|
width="{{ $thumb.Width }}" height="{{ $thumb.Height }}"
|
|
class="card-img-top" loading="lazy"
|
|
alt="{{ if $caption }}{{ $caption }}{{ else }}{{ $image.Name }}{{ end }}">
|
|
{{ if $caption }}
|
|
<div class="card-body py-2">
|
|
<p class="card-text small text-center mb-0">{{ $caption }}</p>
|
|
</div>
|
|
{{ end }}
|
|
</div>
|
|
</a>
|
|
</div>
|
|
|
|
<div class="modal fade" id="{{ $modalID }}" tabindex="-1"
|
|
aria-labelledby="{{ $modalID }}-label" aria-hidden="true">
|
|
<div class="modal-dialog modal-dialog-centered modal-lg">
|
|
<div class="modal-content">
|
|
{{ if $caption }}
|
|
<div class="modal-header">
|
|
<h5 class="modal-title" id="{{ $modalID }}-label">{{ $caption }}</h5>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
|
</div>
|
|
{{ else }}
|
|
<div class="modal-header border-0 pb-0">
|
|
<button type="button" class="btn-close ms-auto" data-bs-dismiss="modal" aria-label="Close"></button>
|
|
</div>
|
|
{{ end }}
|
|
<div class="modal-body text-center pt-0">
|
|
<img src="{{ $image.RelPermalink }}" class="img-fluid"
|
|
alt="{{ if $caption }}{{ $caption }}{{ else }}{{ $image.Name }}{{ end }}">
|
|
</div>
|
|
<div class="modal-footer justify-content-center">
|
|
<a href="{{ $image.RelPermalink }}" target="_blank" rel="noopener" class="small">
|
|
View full size ↗
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{{ end }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
{{ end }}
|