adjusted image sizes

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;

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",

src/assets/css/blocks/blog.css

@@ -11,6 +11,6 @@
 }
 
 .blog img {
-  width: 100%;
+  max-inline-size: var(--max-img-width, 100%);
-  height: auto;
+  block-size: auto;
 }

src/assets/css/blocks/page.css

@@ -1,4 +1,4 @@
 .page img {
-  width: 100%;
+  max-inline-size: var(--max-img-width, 100%);
-  height: auto;
+  block-size: auto;
 }

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 %}