Use this plugin with markdown images

[Brixy]

Thank you for this plugin.

It would be great if it was possible to use this plugin with markdown images.

![Alt text](/img/image.jpg "Optional title text -> besomes image caption")

![Alt text](/img/image.svg "Optional title text -> besomes image caption")

Some ideas:

• Only use this plugin if image wider than a defined width (e.g. 500px).
• Use optional markdown title attribute as image caption (figcaption).

Thanks!

[zachleat]

Some more context here: https://github.com/markdown-it/markdown-it/blob/master/docs/development.md#i-need-async-rule-how-to-do-it

fwiw it doesn’t look like markdown-it handles async plugins

[Alexs7zzh]

All the code is put in this gist.

1. Transform images in markdown

I am using transforms to achieve this.

Since eleventy-img provides Image.statsSync function, as long as you have null in the widths option of eleventy-img, you can get the width of the original image. You can then compare its width to your defined width to decide if you want to transform the image.

It can cover all images in your website including the ones from markdown files, as long as you set a proper query selector. (i.e., article img, main img)

To be noted, I use the variable index to add loading=lazy and decoding=async attributes to all images except the first image on every page. Also I use process.env.ELEVENTY_ENV to only transform images in the production build. Please adjust these and the options for eleventy-img according to your use case.

2. Use figcaption

To use figcaption, I wrote a markdown-it plugin which is also included in the gist. Originally, an image element will be rendered as:

<p>
  <img src="" alt="" title="" />
</p>

With this plugin, it will be rendered as:

// if title is not defined
<figure>
  <img src="" alt="" title="" />
</figure>

// if title is defined
<figure>
  <img src="" alt="" title="title" />
  <figcaption>title</figcaption>
</figure>

To use this plugin, you can configure markdown-it in your .eleventy.js as following:

const md = require('markdown-it')()
  .use(require('./figure')) // the plugin in the gist, adjust this depending on where you put the file

eleventyConfig.setLibrary('md', md)

[mahnunchik]

@Alexs7zzh good approach but I don't understand the reason to use 2 stages. All sync/async image transformation can be done in transform filter.

[solution-loisir]

Hi @Brixy, I know this is a pretty old discussion and you might already have found a solution or maybe it's not relevant anymore. Anyhow, to answer this:

It would be great if it was possible to use this plugin with markdown images.

I just published a markdown-it plugin that uses eleventy-img to process images. Check it out here. If you end up trying it, let me know what you think.

[shirooo39]

Hi @Brixy, I know this is a pretty old discussion and you might already have found a solution or maybe it's not relevant anymore. Anyhow, to answer this:

It would be great if it was possible to use this plugin with markdown images.

I just published a markdown-it plugin that uses eleventy-img to process images. Check it out here. If you end up trying it, let me know what you think.

this looks really good! thanks! I'm still so new to Eleventy but I'll give it a try later.

[solution-loisir]

Great! Let me know what you think. :smile:

[zachleat]

Related: #208

[zachleat]

The docs have been updated to recommend #208 moving forward for synchronous use cases like Markdown. I think we can consider this one resolved with Eleventy v3.0.0-canary.5 and Eleventy Image v4.0.1.

https://www.11ty.dev/docs/plugins/image/#synchronous-shortcode

Thanks y’all!