GARAGENUM
/
ltqf
13
0
Fork 0
Code Issues 5 Pull Requests Packages Projects Releases Wiki Activity

responsive images

Browse Source
pull/11/head
Florian Roger 9 months ago
parent b4eed16f43
commit 8bd9230b7f
1 changed files with 14 additions and 7 deletions
Show Stats Download Patch File Download Diff File

21
layouts/index.html
Unescape Escape View File

@ -8,16 +8,23 @@
<div id="galerie" class="carousel">
{{ $carouselImages := resources.Match "carousel/*"}}
{{ range $index, $image := $carouselImages }}
{{- $jpeg := $image.Resize (printf "%dx jpeg q%d" 2200 75) }}
{{- $webp := $image.Resize (printf "%dx webp q%d picture" 2200 75) }}
{{- $jpegs := $image.Resize (printf "%dx jpeg q%d" 768 75) }}
{{- $jpegm := $image.Resize (printf "%dx jpeg q%d" 1440 75) }}
{{- $jpegl := $image.Resize (printf "%dx jpeg q%d" 2200 75) }}
{{- $webps := $image.Resize (printf "%dx webp q%d picture" 768 75) }}
{{- $webpm := $image.Resize (printf "%dx webp q%d picture" 1440 75) }}
{{- $webpl := $image.Resize (printf "%dx webp q%d picture" 2200 75) }}
<figure class="image">
<picture>
<source srcset="{{ $webp.Permalink }}" type="image/webp">
<img src='{{ $jpeg.Permalink }}'
<source type="image/webp"
srcset="{{ $jpegs.Permalink }} {{ $jpegs.Width }}w,{{ $jpegm.Permalink }} {{ $jpegm.Width }}w,{{ $jpegl.Permalink }} {{ $jpegl.Width }}w"
sizes="(max-width: {{ $jpegs.Width }}px) {{ $jpegs.Width }}px, (max-width: {{ $jpegm.Width }}px) {{ $jpegm.Width }}px, {{ $jpegl.Width }}px"
>
<img src='{{ $jpegl.Permalink }}'
{{ if ne $index 0 }} loading="lazy" {{ end }}
width="{{ $webp.Width }}" height="{{ $webp.Height }}" alt="{{ $image.Permalink }}">
srcset="{{ $jpegs.Permalink }} {{ $jpegs.Width }}w,{{ $jpegm.Permalink }} {{ $jpegm.Width }}w,{{ $jpegl.Permalink }} {{ $jpegl.Width }}w"
sizes="(max-width: {{ $jpegs.Width }}px) {{ $jpegs.Width }}px, (max-width: {{ $jpegm.Width }}px) {{ $jpegm.Width }}px, {{ $jpegl.Width }}px"
alt="{{ $image.Permalink }}">
</picture>
</figure>
{{ end }}

Write Preview
Loading…
Cancel
Save