add caption for markdown images

config/plugins/markdown.js

@@ -56,9 +56,29 @@ const markdownLib = markdownIt({
       decoding: 'async',
       sizes: '90vw'
     },
-		// prepend src for markdown images
+    // prepend src for markdown images
     resolvePath: (filepath, env) => {
       return path.join('src', filepath);
+    },
+    renderImage(image, attributes) {
+      const [Image, options] = image;
+      const [src, attrs] = attributes;
+
+      Image(src, options);
+
+      const metadata = Image.statsSync(src, options);
+      const imageMarkup = Image.generateHTML(metadata, attrs, {
+        whitespaceMode: 'inline'
+      });
+
+      const imageElement = attrs.title
+        ? `<figure class="flow">
+			${imageMarkup}
+					<figcaption>${attrs.title}</figcaption>
+				</figure>`
+        : `${imageMarkup}`;
+
+      return imageElement;
     }
   })
   .use(markdownItFootnote)

src/posts/2022/2022-10-12-post-with-image.md

@@ -67,9 +67,20 @@ The class names are passed in the outer container, the `<picture>` or `<figure>`
 
 Thanks to the [markdown-it-eleventy-img](https://github.com/solution-loisir/markdown-it-eleventy-img) package markdown also has it own image syntax. `src` is already prepended here, see `config/plugins/markdown.js`.
 
+### Picture element
+
 ```markdown
 ![alt text](/path/to/image)
 ![Close-up with unfocused background of a vibrant large blue butterfly gracefully perched on a delicate flower amidst lush green gras](/assets/images/gallery/asturias-4.jpg)
 ```
 
 ![Close-up with unfocused background of a vibrant large blue butterfly gracefully perched on a delicate flower amidst lush green gras](/assets/images/gallery/asturias-4.jpg)
+
+### Figure element with caption
+
+```markdown
+![alt text](/path/to/image 'caption text')
+![A picturesque valley showcasing majestic mountains and lush forests, creating a serene and captivating landscape](/assets/images/gallery/asturias-1.jpg 'Inside the Somiedo Natural Park, Asturias')
+```
+
+![A picturesque valley showcasing majestic mountains and lush forests, creating a serene and captivating landscape](/assets/images/gallery/asturias-1.jpg 'Inside the Somiedo Natural Park, Asturias')