From 07665afe283e8c446b9f1b7f84dd180c8ebbe201 Mon Sep 17 00:00:00 2001
From: Florian du Garage Num <makayabou@gmail.com>
Date: Thu, 30 Nov 2023 17:50:24 +0100
Subject: [PATCH] image processing

---
 .gitignore                            |  2 +-
 layouts/actions_culturelles/list.html |  9 +++++++--
 layouts/compagnie/list.html           | 13 +++++++++----
 layouts/index.html                    |  7 ++++++-
 layouts/partenaires/list.html         | 14 ++++++++++++--
 layouts/presse/list.html              |  6 +++++-
 layouts/spectacles/list.html          | 17 +++++++++++------
 layouts/spectacles/single.html        | 24 ++++++++++++++++++------
 8 files changed, 69 insertions(+), 23 deletions(-)

diff --git a/.gitignore b/.gitignore
index 1b52ad5..6676cd5 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,3 +1,3 @@
 resources
 .hugo_build*
-public/*
\ No newline at end of file
+public
\ No newline at end of file
diff --git a/layouts/actions_culturelles/list.html b/layouts/actions_culturelles/list.html
index 7f7bee9..208c379 100644
--- a/layouts/actions_culturelles/list.html
+++ b/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 }}
-                <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;">
+                {{- $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;">
+                    <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>
diff --git a/layouts/compagnie/list.html b/layouts/compagnie/list.html
index 11aac2e..8554294 100644
--- a/layouts/compagnie/list.html
+++ b/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;">
+                        {{ $img := resources.GetMatch (print .File.Dir "/portrait.*") }}
+                        {{ with $img}}
+                        {{- $jpeg := .Resize "800x jpeg" }}
+                        {{- $webp := .Resize "800x webp picture" }}
                         <figure class="image">
-                            {{ $img := resources.GetMatch (print .File.Dir "/portrait.*") }}
-                            {{ with $img}}
-                            <img src="{{ $img.Permalink }}" alt="Artiste">
-                            {{ end }}
+                            <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 }}
diff --git a/layouts/index.html b/layouts/index.html
index d50c032..7c20d2b 100644
--- a/layouts/index.html
+++ b/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>
diff --git a/layouts/partenaires/list.html b/layouts/partenaires/list.html
index feb1339..ef2c0d3 100644
--- a/layouts/partenaires/list.html
+++ b/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 }}
diff --git a/layouts/presse/list.html b/layouts/presse/list.html
index 83ffc30..4aa2d26 100644
--- a/layouts/presse/list.html
+++ b/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>
diff --git a/layouts/spectacles/list.html b/layouts/spectacles/list.html
index 47dbeab..70e24a8 100644
--- a/layouts/spectacles/list.html
+++ b/layouts/spectacles/list.html
@@ -13,17 +13,22 @@
                     {{ range  .Pages.ByDate.Reverse }}
 
                     <div class="column is-one-quarter">
-                        <figure class="image is-5by3">
+                        <a href="{{ .Permalink|relURL }}">
                             {{ $img := resources.GetMatch (print .File.Dir "/principal*") }}
-                            <a href="{{ .Permalink|relURL }}">
-                                {{ with $img }}
-                                <img src="{{ .Permalink }}">
+                            {{ with $img }}
+                            {{- $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>
+                            </figure>
+                        </a> 
                     </div>
                     {{ end }}
                 </div>
diff --git a/layouts/spectacles/single.html b/layouts/spectacles/single.html
index ceae054..b085a80 100644
--- a/layouts/spectacles/single.html
+++ b/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 := .}}
-           
-                <img src="{{ $img.Permalink }}" alt="{{ $img.Name }}">
-           
+            {{- $jpeg := .Resize "600x jpeg" }}
+            {{- $webp := .Resize "600x webp picture" }}
+            <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>