image processing

.gitignore

@@ -1,3 +1,3 @@
 resources
 .hugo_build*
-public/*
+public

layouts/actions_culturelles/list.html

@@ -36,8 +36,13 @@
             <div class="box has-background-warning-light is-flex is-flex-direction-column is-justify-content-center" style="height: 40vh;">
                 {{ $img := resources.GetMatch (print .File.Dir "/illustration.*") }}
                 {{ with $img }}
+                {{- $jpeg := .Resize (printf "%dx%d jpeg" .Width .Height) }}
+                {{- $webp := .Resize (printf "%dx%d webp picture" .Width .Height) }}
                 <figure class="image is-flex is-justify-content-center"  style="max-width: 100%; max-height: 100%; width: auto;">
-                    <img src="{{ $img.Permalink }}" style="max-width: 100%; max-height: 100%; width: auto;">
+                    <picture>
+                        <source srcset="{{ $webp.Permalink }}" type="image/webp">
+                        <img src='{{ $jpeg.Permalink }}' loading="lazy" width="{{ .Width }}" height="{{ .Height }}"  alt="{{ .Permalink }}"  style="max-width: 100%; max-height: 100%; width: auto;">
+                    </picture>
                 </figure>
                 {{ end }}
             </div>

layouts/compagnie/list.html

@@ -15,12 +15,17 @@
             <div class="columns is-justify-content-center ">
                 {{ range .Pages }}
                     <div class="column is-4" style="overflow:hidden;">
-                        <figure class="image">
                         {{ $img := resources.GetMatch (print .File.Dir "/portrait.*") }}
                         {{ with $img}}
-                            <img src="{{ $img.Permalink }}" alt="Artiste">
+                        {{- $jpeg := .Resize "800x jpeg" }}
-                            {{ end }}
+                        {{- $webp := .Resize "800x webp picture" }}
+                        <figure class="image">
+                            <picture>
+                                <source srcset="{{ $webp.Permalink }}" type="image/webp">
+                                <img src='{{ $jpeg.Permalink }}' loading="lazy" width="{{ $webp.Width }}" height="{{ $webp.Height }}" alt="{{ .Permalink }}">
+                            </picture>
                         </figure>
+                        {{ end }}
                         <p class="is-size-5"> {{ .Title }}</p>
                     </div>
                 {{ end }}

layouts/index.html

@@ -8,8 +8,13 @@
         <div id="galerie" class="carousel">
                 {{ $carouselImages := resources.Match "carousel/*"}}
                 {{ range $carouselImages }}
+                {{- $jpeg := .Resize (printf "%dx%d jpeg" .Width .Height) }}
+                {{- $webp := .Resize (printf "%dx%d webp picture" .Width .Height) }}
                 <figure class="image">
-                    <img src='{{ .Permalink }}' alt="{{ .Permalink }}">
+                    <picture>
+                        <source srcset="{{ $webp.Permalink }}" type="image/webp">
+                        <img src='{{ $jpeg.Permalink }}' loading="lazy" width="{{ .Width }}" height="{{ .Height }}"  alt="{{ .Permalink }}">
+                    </picture>
                 </figure>
                 {{ end }}
         </div>

layouts/partenaires/list.html

@@ -19,9 +19,14 @@
             <p class="mb-6">{{ .Title }}</p>
             <div class="columns is-multiline is-mobile is-justify-content-center">
                 {{ range $img }}
+                {{- $jpeg := .Resize "600x jpeg" }}
+                {{- $webp := .Resize "600x webp text" }}
                 <div class="column  is-one-quarter-mobile is-2-tablet p-1">
                     <figure class="image">
-                        <img src="{{ .Permalink }}">
+                        <picture>
+                            <source srcset="{{ $webp.Permalink }}" type="image/webp">
+                            <img src='{{ $jpeg.Permalink }}' loading="lazy" width="{{ $webp.Width }}" height="{{ $webp.Height }}"  alt="{{ .Permalink }}">
+                        </picture>
                     </figure>
                 </div>
                 {{ end }}
@@ -37,9 +42,14 @@
             <p class="mb-6">{{ .Title }}</p>
             <div class="columns is-multiline is-mobile">
                 {{ range $img }}
+                {{- $jpeg := .Resize "600x jpeg" }}
+                {{- $webp := .Resize "600x webp text" }}
                 <div class="column is-one-quarter-mobile is-2-tablet p-1">
                     <figure class="image">
-                        <img src="{{ .Permalink }}">
+                        <picture>
+                            <source srcset="{{ $webp.Permalink }}" type="image/webp">
+                            <img src='{{ $jpeg.Permalink }}' loading="lazy" width="{{ $webp.Width }}" height="{{ $webp.Height }}"  alt="{{ .Permalink }}">
+                        </picture>
                     </figure>
                 </div>
                 {{ end }}

layouts/presse/list.html

@@ -14,8 +14,12 @@
       {{ if and (isset .Params "presse") (.Params.presse) }}
 
         {{ $img := resources.GetMatch (print .File.Dir "/principal.*") }}
+        {{ with $img }}
+        {{- $jpeg := .Crop "1400x400 jpeg" }}
+        {{- $webp := .Crop "1400x400 webp picture" }}
 
-        <div class="columns fond border my-6 p-6 has-background-black" style="background-image: url('{{ $img.Permalink }}');">
+        <div class="columns fond border my-6 p-6 has-background-black" style="background-image: url('{{ $webp.Permalink }}');">
+        {{ end }}
           <div class="column border has-background-black has-text-white">
             <!--  <div class="gauche"> -->
               <p class="mb-3 is-uppercase">{{ .Title }}</p>

layouts/spectacles/list.html

@@ -13,17 +13,22 @@
                     {{ range  .Pages.ByDate.Reverse }}
 
                     <div class="column is-one-quarter">
-                        <figure class="image is-5by3">
-                            {{ $img := resources.GetMatch (print .File.Dir "/principal*") }}
                         <a href="{{ .Permalink|relURL }}">
+                            {{ $img := resources.GetMatch (print .File.Dir "/principal*") }}
                             {{ with $img }}
-                                <img src="{{ .Permalink }}">
+                            {{- $jpeg := .Resize "600x jpeg" }}
+                            {{- $webp := .Resize "600x webp picture" }}
+                            <figure class="image is-5by3">
+                                <picture>
+                                    <source srcset="{{ $webp.Permalink }}" type="image/webp">
+                                    <img src="{{ $jpeg.Permalink }}" loading="lazy" width="{{ $webp.Width }}" height="{{ $webp.Height }}"  alt="{{ .Permalink }}">
+                                </picture>
                                 {{ end }}
                                 <div class="overlay">
                                     <span class="has-text-black is-size-3-mobile is-size-5-tablet is-size-3-widescreen">{{ .Title }}</span>
                                 </div>
-                            </a>
                             </figure>
+                        </a> 
                     </div>
                     {{ end }}
                 </div>

layouts/spectacles/single.html

@@ -17,8 +17,13 @@
         <div class="column is-four-fifths p-0 m-0 has-background-danger">
             {{ $img := resources.GetMatch (print .File.Dir "/principal.*") }}
             {{ with $img }}
+            {{- $jpeg := .Resize (printf "%dx%d jpeg" .Width .Height) }}
+            {{- $webp := .Resize (printf "%dx%d webp picture" .Width .Height) }}
             <figure class="image">
-                <img src="{{ .Permalink }}">
+                <picture>
+                    <source srcset="{{ $webp.Permalink }}" type="image/webp">
+                    <img src='{{ $jpeg.Permalink }}' loading="lazy" width="{{ .Width }}" height="{{ .Height }}"  alt="{{ .Permalink }}">
+                </picture>
             </figure>
             {{ end }}
         </div>
@@ -83,8 +88,13 @@
         <div class="column is-three-fifths p-0 m-0  has-background-danger  is-hidden-mobile">
             {{ $img := resources.GetMatch ( print .File.Dir "/savoir.*") }}
             {{ with $img }}
+            {{- $jpeg := .Resize (printf "%dx%d jpeg" .Width .Height) }}
+            {{- $webp := .Resize (printf "%dx%d webp picture" .Width .Height) }}
             <figure class="image">
-                <img src="{{ .Permalink }}">
+                <picture>
+                    <source srcset="{{ $webp.Permalink }}" type="image/webp">
+                    <img src='{{ $jpeg.Permalink }}' loading="lazy" width="{{ .Width }}" height="{{ .Height }}"  alt="{{ .Permalink }}">
+                </picture>
             </figure>
             {{ end }}
         </div>
@@ -118,10 +128,12 @@
 
             {{ with $imgs }}
             {{ range $imgs }}
-            {{ $img := .}}
+            {{- $jpeg := .Resize "600x jpeg" }}
-           
+            {{- $webp := .Resize "600x webp picture" }}
-                <img src="{{ $img.Permalink }}" alt="{{ $img.Name }}">
+            <picture>
-           
+                <source srcset="{{ $webp.Permalink }}" type="image/webp">
+                <img src='{{ $jpeg.Permalink }}' loading="lazy" width="{{ $webp.Width }}" height="{{ $webp.Height }}"  alt="{{ .Name }}">
+            </picture>         
             {{ end}}
             {{ end }}
         </div>