millironx/pages
1
0
Fork 0
Code Issues Pull requests Releases Packages Activity

feat: Add thumbnail-smart page listings

Browse source
This commit is contained in:
Thomas A. Christensen II 2023-04-01 00:14:32 -05:00
parent 92b49ab4aa
commit 50ea4e509c
Signed by: millironx
GPG key ID: 09335146883990B9
2 changed files with 47 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
assets/styles/mix-twbs.scss
View file

@ -152,4 +152,8 @@ h1 {
.fixed-bottom {
left: 25%;
}
.md-max-width-33 {
max-width: 33%;
}
}

43
layouts/_default/list.html
View file

@ -6,5 +6,48 @@
{{ .Content }}
{{ end }}
</div>
<div class="row" data-masonry='{"percentPosition": true}'>
{{ range .Pages }}
<div class="col-xl-auto mb-4">
<div class="card">
<div class="card-body">
{{/* Thumbnail images should be stored as 'thumbnail'.* in the page bundle, but
historically they might have been referenced as 'thumbnail' in the front
matter, or (even more historically) as 'cardImage'. Use scratch to
normalize all these different systems.
*/}}
{{ $bundleGlob := "thumbnail.*" }}
{{ $frontThumbGlob := print "images/" (.Params.thumbnail) ".*" }}
{{ $frontCardGlob := print "images/" (.Params.cardImage) ".jpg" }}
{{ $allThumbnailGlob := print "{" $frontThumbGlob "," $frontCardGlob "," $bundleGlob "}" }}
{{ with .Resources.GetMatch $allThumbnailGlob }}
{{ $thumbnail := . }}
{{ $thumbnailResized := $thumbnail.Resize "600x" }}
<img
class="img img-thumbnail float-start me-3 md-max-width-33"
src="{{ $thumbnailResized.RelPermalink }}"
alt="Thumbnail of {{ .Title }}"
/>
{{ end }}
<a href="{{ .RelPermalink }}"
><h3 class="card-title">{{ .Title }}</h3></a
>
<p class="card-text">
{{ .Summary }}
<strong
><small
><a href="{{ .RelPermalink }}">Read more &raquo;</a></small
></strong
>
</p>
</div>
</div>
<!-- </card> -->
</div>
<!-- </col> -->
{{ end }}
</div>
<!-- </row> -->
</section>
{{ end }}