birdsounds.media/layouts/partials/photos-list.html
a 9aa43df629 First commit
The basic parts of the layouts/theme should work. I have only populated 2 albums so far.
2024-05-17 21:14:05 -05:00

36 lines
No EOL
1.1 KiB
HTML

<ul class="photos-list">
{{ range . }}
<li>
<a href="{{ .Permalink }}">
{{ $page := . }}
{{ $alt := or .Title "image" }}
<figure class="photo">
{{ with resources.GetMatch .Params.photo_asset}}
{{ $smallw := default "640x webp Lanczos" }}
{{ $mediumw := default "960x webp Lanczos" }}
{{ $largew := default "1280x webp Lanczos" }}
{{ $page.Scratch.Set "small" (.Resize $smallw) }}
{{ $page.Scratch.Set "medium" (.Resize $mediumw) }}
{{ $page.Scratch.Set "large" (.Resize $largew) }}
{{ $small := $page.Scratch.Get "small" }}
{{ $medium := $page.Scratch.Get "medium" }}
{{ $large := $page.Scratch.Get "large" }}
<picture>
<source media="(max-width: 80rem)" srcset="{{ $small.Permalink }}" />
<source media="(max-width: 100rem)" srcset="{{ $medium.Permalink }}" />
<img class="photo-asset" src="{{ $large.Permalink }}" alt="{{ $alt }}" title="{{ $alt }}">
</picture>
{{ end }}
<figcaption class="photo-details">
<p class="photo-title">{{ .Title }}</p>
<p class="photo-summary">{{ .Summary }}</p>
</figcaption>
</figure>
</a>
</li>
{{end}}
</ul>