Pierre-Olivier Mercier
1258d9ff2e
Adds loading="lazy" attribute to defer off-screen carousel images, improving initial page load performance especially on mobile. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
14 lines
639 B
HTML
14 lines
639 B
HTML
{{ if isset .Site.Params "carousel" }}
|
|
{{ if gt (len .Site.Params.carousel) 0 }}
|
|
<section id="screenshots" class="carousel text-light p-4 pt-5 d-flex flex-nowrap align-items-center" style="gap: 1em 1em; overflow-x: scroll">
|
|
{{ range sort .Site.Params.carousel "weight" }}
|
|
<figure class="my-5 mr-5 text-center" style="min-width: 65vw">
|
|
<a href="{{ .image }}">
|
|
<img class="rounded img-thumbnail" src="{{ .image }}" alt="{{ .title }}" loading="lazy" style="max-height: 80vh;">
|
|
</a>
|
|
<figcaption class="mt-2 text-center">{{ .description | markdownify }}</figcaption>
|
|
</figure>
|
|
{{ end }}
|
|
</section>
|
|
{{ end }}
|
|
{{ end }}
|