make images responsives

.eleventy.js

@@ -10,11 +10,14 @@ const mditAttrs = require('markdown-it-attrs');
 const mditHighlight = require('markdown-it-highlightjs');
 const Image = require('@11ty/eleventy-img');
 
+// sizes and formats of resized images to make them responsive
+// it can be overwriten when using the "Picture" short code
 const Images = {
   WIDTHS: [426, 460, 580, 768, 1200], // sizes of generated images
   FORMATS: ['webp', 'jpeg'], // formats of generated images
-  SIZES: '(max-width: 1200px) 60vw, 1200px' // size of image rendered
+  SIZES: '(max-width: 1200px) 70vw, 1200px' // size of image rendered
 }
+
 module.exports = async function(eleventyConfig) {
 
   const { EleventyHtmlBasePlugin } = await import("@11ty/eleventy");
@@ -33,7 +36,7 @@ module.exports = async function(eleventyConfig) {
   }
   const mdLib = mdit(mditOptions).use(mditAttrs).use(mditHighlight, { inline: true }).disable('code')
 
-  // generate responsive images from img Markdown
+  // generate responsive images from Markdown img
   // from https://tomichen.com/blog/posts/20220416-responsive-images-in-markdown-with-eleventy-image/
   mdLib.renderer.rules.image = (tokens, idx, options, env, self) => {
     const token = tokens[idx]
@@ -45,7 +48,7 @@ module.exports = async function(eleventyConfig) {
     const htmlOptions = {
       alt: imgAlt,
       class: className,
-      sizes: '(max-width: 400px) 380px, (max-width: 470px) 450px, (max-width: 841px) 640px, (max-width: 1100px) 640px, 764px',
+      sizes: Images.SIZES,
       loading: className?.includes('lazy') ? 'lazy' : undefined,
       decoding: 'async',
       title: imgTitle
@@ -70,10 +73,7 @@ module.exports = async function(eleventyConfig) {
   // process css
   eleventyConfig.addNunjucksAsyncFilter('postcss', postcssFilter);
 
-  // images
-  ///////////
-
-  // Picture shortcode with <picture>
+  // Image shortcode with <picture>
   eleventyConfig.addShortcode("Picture", async (
     page,
     src,
@@ -219,10 +219,9 @@ const stringifyAttributes = (attributeMap) => {
     urlPath = "/" + urlPath.join("/");
 
     const options = {
-      // widths: [...widths, null],
       widths: widths
-      .concat(widths.map((w) => w * 2)) // generate 2x sizes
-      .filter((v, i, s) => s.indexOf(v) === i), // dedupe
+        .concat(widths.map((w) => w * 2)) // generate 2x sizes
+        .filter((v, i, s) => s.indexOf(v) === i), // dedupe
       formats: [...formats, null],
       outputDir: outputFolder,
       urlPath: urlPath,

src/pages/documentation/index.md

@@ -16,4 +16,5 @@ ismarkdown: true
 
 ## wind 🌬️
 
-{% Picture page, "vera.jpg", "Wind is playing with the grass and they are dancing and enjoying the magical moment in their lives. Tinos, Greece", undefined, undefined, undefined, "(max-width: 1200px) 40vw, 1200px" %}
+![Wind is playing with the grass and they are dancing and enjoying the magical moment in their lives. Tinos, Greece](/documentation/vera.jpg)
+

src/pages/index.html

@@ -5,7 +5,7 @@
 layout: base.njk
 ---
   <div class="w-full sm:w-2/3 sm:p-4 md:border sm:border-black mx-auto">
-    {% Picture page, "vera-davidova.jpg", "Wind is playing with the grass and they are dancing and enjoying the magical moment in their lives. Tinos, Greece", undefined, undefined, undefined, "(max-width: 1200px) 40vw, 1200px" %}
+    {% Picture page, "vera-davidova.jpg", "Wind is playing with the grass and they are dancing and enjoying the magical moment in their lives. Tinos, Greece", undefined, undefined, undefined, undefined %}
     <!-- 
     Picture attributes: 
     page, file name, alt text, class, widths, formats, sizes