<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>