From 2e7ebcb112de0fa4725796e1353b771275ae8560 Mon Sep 17 00:00:00 2001
From: madrilene <hola@lenesaile.com>
Date: Tue, 11 Apr 2023 13:38:26 +0200
Subject: [PATCH] adjusted image sizes

---
 config/shortcodes/imagePlaceholder/index.js | 11 ++++++++---
 package.json                                |  2 +-
 src/assets/css/blocks/blog.css              |  4 ++--
 src/assets/css/blocks/page.css              |  4 ++--
 src/posts/2022-10-12-post-with-image.md     |  9 ++++++++-
 5 files changed, 21 insertions(+), 9 deletions(-)

diff --git a/config/shortcodes/imagePlaceholder/index.js b/config/shortcodes/imagePlaceholder/index.js
index c475374..d1e80fa 100644
--- a/config/shortcodes/imagePlaceholder/index.js
+++ b/config/shortcodes/imagePlaceholder/index.js
@@ -2,13 +2,18 @@ const Image = require('@11ty/eleventy-img');
 const path = require('path');
 const htmlmin = require('html-minifier-terser');
 
-const imageShortcodePlaceholder = async (src, alt, caption, sizes = '100vw') => {
+const imageShortcodePlaceholder = async (
+  src,
+  alt,
+  caption,
+  sizes = '(min-width: 55rem) 820px, 100vw'
+) => {
   if (!alt) {
     throw new Error(`Missing \`alt\` on myImage from: ${src}`);
   }
 
   let metadata = await Image(src, {
-    widths: [400, 700, 1280],
+    widths: [320, 570, 820],
     formats: ['avif', 'webp', 'jpeg'],
     urlPath: '/assets/images/',
     outputDir: './dist/assets/images/',
@@ -20,7 +25,7 @@ const imageShortcodePlaceholder = async (src, alt, caption, sizes = '100vw') =>
     }
   });
 
-  let lowsrc = metadata.jpeg[0];
+  let lowsrc = metadata.jpeg[metadata.jpeg.length - 1];
 
   // getting the url  to use
   let imgSrc = src;
diff --git a/package.json b/package.json
index 5fce4ac..18b1e55 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "eleventy-excellent",
-  "version": "1.4.7",
+  "version": "1.4.8",
   "description": "Eleventy starter based on the workflow suggested by Andy Bell's buildexcellentwebsit.es.",
   "author": "Lene Saile",
   "license": "ISC",
diff --git a/src/assets/css/blocks/blog.css b/src/assets/css/blocks/blog.css
index 5c92521..48a576b 100644
--- a/src/assets/css/blocks/blog.css
+++ b/src/assets/css/blocks/blog.css
@@ -11,6 +11,6 @@
 }
 
 .blog img {
-  width: 100%;
-  height: auto;
+  max-inline-size: var(--max-img-width, 100%);
+  block-size: auto;
 }
diff --git a/src/assets/css/blocks/page.css b/src/assets/css/blocks/page.css
index 63bb33c..b31cf62 100644
--- a/src/assets/css/blocks/page.css
+++ b/src/assets/css/blocks/page.css
@@ -1,4 +1,4 @@
 .page img {
-  width: 100%;
-  height: auto;
+  max-inline-size: var(--max-img-width, 100%);
+  block-size: auto;
 }
diff --git a/src/posts/2022-10-12-post-with-image.md b/src/posts/2022-10-12-post-with-image.md
index 467cf86..da3e81e 100644
--- a/src/posts/2022-10-12-post-with-image.md
+++ b/src/posts/2022-10-12-post-with-image.md
@@ -6,6 +6,13 @@ date: 2022-10-12
 
 This starter uses Eleventy's build-time image transformations. Find more info on https://www.11ty.dev/docs/plugins/image/ and edit settings in `config/shortcodes/imagePlaceholder`.
 
+For now there are three image sizes: 320px, 550px and 820px.
+820px is the maximum size, equivalent to the width set for our content wrapper in `prose.css`: `--wrapper-max-width: 55rem;`.
+
+The `sizes` attribute is set to `sizes = '(min-width: 55rem) 820px, 100vw'`.
+
+If you want to adjust the wrapper width you should also adjust the image size in the shortcode accordingly.
+
 ## Syntax
 
 {% raw %}
@@ -16,7 +23,7 @@ This starter uses Eleventy's build-time image transformations. Find more info on
 
 {% endraw %}
 
-Or add your own `sizes` attribute (note how I set an empty string for the caption):
+Add your own `sizes` attribute (note how I set an empty string for the caption):
 
 {% raw %}