gatsby-remark-figure-caption

transforms: ![image with description](path-to-image.jpg) into:

<figure>
  <img src="path-to-image.jpg" />
  <figcaption>image with description</figcaption>
</figure>

Install

npm install --save gatsby-remark-figure-caption

How to use

// In your gatsby-config.js
plugins: [
  {
    resolve: `gatsby-transformer-remark`,
    options: {
      plugins: [
        {
          resolve: `gatsby-remark-figure-caption`,
          options: { figureClassName: "md-figure" },
        },
      ],
    },
  },
];

Options

| Name | Default | Description | | ------------------ | ------- | ------------------------------------------ | | figureClassName | '' | class for the wrapper figure element | | imageClassName | '' | class for the wrapped img element | | captionClassName | '' | class for the wrapped figcaption element |

Disclaimers

only tested with gatsby v2, it may work on v1.

not really a good thing a11y-wise:

• images should have a descriptive alt, that can replace it.
• created for working around cripled markdown tools.
• there are better ways to describe an image.

PRs welcome.