From 95bd4cd9609d5f9118f7f7fd31a901cdabd5dbe8 Mon Sep 17 00:00:00 2001
From: madrilene <hola@lenesaile.com>
Date: Mon, 30 Oct 2023 16:51:00 +0100
Subject: [PATCH] Update image shortcode

---
 config/shortcodes/imagePlaceholder/index.js | 49 +++++++++------------
 1 file changed, 22 insertions(+), 27 deletions(-)

diff --git a/config/shortcodes/imagePlaceholder/index.js b/config/shortcodes/imagePlaceholder/index.js
index d1e80fa..6d072b0 100644
--- a/config/shortcodes/imagePlaceholder/index.js
+++ b/config/shortcodes/imagePlaceholder/index.js
@@ -6,14 +6,14 @@ const imageShortcodePlaceholder = async (
   src,
   alt,
   caption,
-  sizes = '(min-width: 55rem) 820px, 100vw'
+  sizes = '(min-width: 55rem) 880px, 100vw'
 ) => {
   if (!alt) {
     throw new Error(`Missing \`alt\` on myImage from: ${src}`);
   }
 
   let metadata = await Image(src, {
-    widths: [320, 570, 820],
+    widths: [320, 570, 880, 1200],
     formats: ['avif', 'webp', 'jpeg'],
     urlPath: '/assets/images/',
     outputDir: './dist/assets/images/',
@@ -37,31 +37,26 @@ const imageShortcodePlaceholder = async (
   }
 
   return htmlmin.minify(
-    `<figure>
-     <picture>
-    ${Object.values(metadata)
-      .map(imageFormat => {
-        return `  <source type="${imageFormat[0].sourceType}" srcset="${imageFormat
-          .map(entry => entry.srcset)
-          .join(', ')}" sizes="${sizes}">`;
-      })
-      .join('\n')}
-      <img
-        src="/assets/images/image-placeholder.png"
-        data-src="${lowsrc.url}"
-        width="${lowsrc.width}"
-        height="${lowsrc.height}"
-        alt="${alt}"
-				loading = 'lazy'
-        decoding="async">
-    </picture>
-    ${
-      caption
-        ? `<figcaption class="cluster font-display"><p>${caption}</p>
-	</figcaption>`
-        : ``
-    }
-</figure>`,
+    `<figure class="flow">
+      <picture>
+      ${Object.values(metadata)
+        .map(imageFormat => {
+          return `  <source type="${imageFormat[0].sourceType}" srcset="${imageFormat
+            .map(entry => entry.srcset)
+            .join(', ')}" sizes="${sizes}">`;
+        })
+        .join('\n')}
+        <img
+          src="/assets/images/image-placeholder.png"
+          data-src="${lowsrc.url}"
+          width="${lowsrc.width}"
+          height="${lowsrc.height}"
+          alt="${alt}"
+          loading = 'lazy'
+          decoding="async">
+      </picture>
+    ${caption ? `<figcaption>${caption}</figcaption>` : ``}
+    </figure>`,
     {collapseWhitespace: true}
   );
 };