From 7326912f9ffa627a5ab98d17c6e60f5f7b659581 Mon Sep 17 00:00:00 2001
From: pomeloy <45542782+pomeloy@users.noreply.github.com>
Date: Fri, 19 Jan 2024 14:55:21 +0100
Subject: [PATCH] Fix picture partial img/source attributes

Remove duplicate src attribute from image tag.
Remove not allowed src attribute from source tag.
Add default sizes attributes to img and source tag.
Fix inconsistent srcset width.
---
 layouts/partials/picture.html | 15 +++++++--------
 1 file changed, 7 insertions(+), 8 deletions(-)

diff --git a/layouts/partials/picture.html b/layouts/partials/picture.html
index 75c23994..9764157d 100644
--- a/layouts/partials/picture.html
+++ b/layouts/partials/picture.html
@@ -57,7 +57,7 @@
         <source
           {{ if lt .Width 660 }}
             {{ with .Resize (printf "%dx%d webp" .Width .Height) }}
-              src="{{ .RelPermalink }}"
+              srcset="{{ .RelPermalink }}"
             {{ end }}
           {{ else }}
             srcset=" {{- (.Resize "330x webp").RelPermalink }} 330w,
@@ -70,19 +70,18 @@
               {{ end }}
             {{ end }}
             {{ if gt .Width 1320 }}
-              ,{{ (.Resize "1320x webp").RelPermalink }} 2x
+              ,{{ (.Resize "1320x webp").RelPermalink }} 1320w
             {{ else }}
               {{ with .Resize (printf "%dx%d webp" .Width .Height) }}
                 ,{{ .RelPermalink }} {{ .Width }}w
               {{ end }}
             {{ end }}"
-            src="{{ (.Resize "660x webp").RelPermalink }}"
           {{ end }}
+          sizes="100vw"
           type="image/webp"
         />
       {{ end }}
       <img
-        src="{{ .RelPermalink }}"
         width="{{ $width }}"
         height="{{ $height }}"
         {{ with $class }}class="{{ . }}"{{ end }}
@@ -91,20 +90,20 @@
         {{ if lt .Width 660 }}
           src="{{ .RelPermalink }}"
         {{ else }}
+          src="{{ (.Resize "660x").RelPermalink }}"
           srcset=" {{- (.Resize "330x").RelPermalink }} 330w,
-          {{- (.Resize "660x").RelPermalink }}
-          660w
+          {{- (.Resize "660x").RelPermalink }} 660w
           {{ if gt .Width 1024 }}
             ,{{ (.Resize "1024x").RelPermalink }} 1024w
           {{ else }}
             ,{{ .RelPermalink }} {{ .Width }}w
           {{ end }}
           {{ if gt .Width 1320 }}
-            ,{{ (.Resize "1320x").RelPermalink }} 2x
+            ,{{ (.Resize "1320x").RelPermalink }} 1320w
           {{ else }}
             ,{{ .RelPermalink }} {{ .Width }}w
           {{ end }}"
-          src="{{ (.Resize "660x").RelPermalink }}"
+          sizes="100vw"
         {{ end }}
       />
     </picture>