diff --git a/config/plugins/markdown.js b/config/plugins/markdown.js
index e5648c5..6c3ee98 100644
--- a/config/plugins/markdown.js
+++ b/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
+ ? `
+ ${imageMarkup}
+ ${attrs.title}
+ `
+ : `${imageMarkup}`;
+
+ return imageElement;
}
})
.use(markdownItFootnote)
diff --git a/src/posts/2022/2022-10-12-post-with-image.md b/src/posts/2022/2022-10-12-post-with-image.md
index b6bee5b..5e4ce41 100644
--- a/src/posts/2022/2022-10-12-post-with-image.md
+++ b/src/posts/2022/2022-10-12-post-with-image.md
@@ -67,9 +67,20 @@ The class names are passed in the outer container, the `` or ``
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
```
+
+### Figure element with caption
+
+```markdown
+
+
+```
+
+