Gatsbyjs: how to implement advanced image styling with gatsby-remark-images and markdown?

Question

I have a blog built on Gatsby. Posts are written with markdown. I'm using also gatsby-remark-images. Everything is great so far. I would like to add more options to align/format images in blog posts. I.e. gallery of two or three images in one row, different size options per image etc. My research so far didn't bring any solution. I can use HTML directly in markdown file, but then I'm losing all advantage of gatsby-remark-images as a content of HTML is not processed as markdown.

<div class="gallery">
    <div class="gallery__item">
        ![image to the left](./left.jpg) <- is not processed
    </div>
    <div class="gallery__item">
        ![image to the right](./right.jpg)
    </div>
</div>

I cannot add any CSS classes to images neither. I've seen solutions like below in some "markdown-extra" compilers.

![image](./image.jpg){.some-class}

Gatsby supports Custom Components (https://using-remark.gatsbyjs.org/custom-components/). Does custom component allow to still process children as a markdown? Is something like in the example below possible?

<image-gallery>
    ![image1](./1.jpg)
    ![image2](./2.jpg)
</image-gallery>

Could you recommend any other solution? I just want to be more flexible with image styling and have options per image or set of images. Compare to adding images on Medium. You can make them full screen, fit container, or float to one side. I think I need only to be able to pass different CSS classes to images or their container and the rest is easy.

Any ideas?

Answer 1

it was easier than expected, just use HTML and gatsby-remark-images will transform tag properly too

<div class="gallery">
    <div class="gallery__item">
        <img alt="01" src="./01.jpg" />
    </div>
    <div class="gallery__item">
        <img alt="02" src="./02.jpg" />
    </div>
</div>

Answer 2

gatsby-remark-image-attributes plug-in may provide what you need without injecting the component to markdown.

Base on author's readme, together with gatsby-remark-images configured, the following markdown:

![party](./images/emojis/party.png#box-shadow=2px 2px 6px 0px;float=right)

would produce the HTML markup as below:

<span style="box-shadow: 2px 2px 6px 0px; float: right;">
  <span class="gatsby-resp-image-wrapper" ...>
    <span class="gatsby-resp-image-background-image" ...></span>
    <img
      class="gatsby-resp-image-image"
      alt="party"
      title="party"
      src="/static/4d415e7127c0f88799cd9f357aabc732/b7060/party.png"
      ...
  /></span>
</span>

However, there is an outstanding issue, prevent it working with gatsby: 2.24.2.