eryn/erynwells.me
1
0
Fork 0
Code Issues 8 Pull requests 1 Projects Releases Packages Activity Actions

Prepare thumbnails of all images in the photo post

Browse source 
Add <img> tags for all thumbnails to the photos list entry. I'm hoping with lazy
loading and some JavaScript this will not be terrible!

Break the logic for preparing a thumbnail into a separate helper partial
template so it can be reused.
This commit is contained in:
Eryn Wells 2023-04-06 08:42:58 -07:00
parent da994bd6b7
commit afb59e7862
3 changed files with 85 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

12
layouts/photos/li_thumbnail_in_grid.html
View file

@ -1,11 +1,11 @@
{{- $thumbnail := partial "photos/thumbnail.html" (dict "Page" . "Width" 600 "Height" 600) -}}
{{- $thumbnail = $thumbnail.Crop "600x600" -}}
{{- $altText := $thumbnail.Params.alt -}}
{{- $numberOfImages := len (partial "photos/list.html" .) -}}
{{- $hasMultipleImages := gt $numberOfImages 1 -}}
<a href="{{ .RelPermalink }}" title="{{ .Title }}">
{{ if $hasMultipleImages }}
<div class="badge">{{ $numberOfImages }}</div>
{{ end }}
<img src="{{ $thumbnail.RelPermalink }}"{{ with $altText }} alt="{{ . }}"{{ end }}>
<a href="{{ .RelPermalink }}" title="{{ .Title }}" data-number-of-images="{{ $numberOfImages }}">
{{ if $hasMultipleImages }}<div class="badge">{{ $numberOfImages }}</div>{{ end }}
{{ range partial "photos/thumbnails.html" (dict "Page" . "Height" 600 "Width" 600) -}}
{{- $altText := .Params.alt -}}
<img src="{{ .RelPermalink }}"{{ with $altText }} alt="{{ . }}"{{ end }} loading="lazy">
{{- end }}
</a>