title: Gatsbyjs: how to implement advanced image styling with gatsby-remark-images and markdown?
body: <p>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.</p>
  
  <pre><code>&lt;div class="gallery"&gt;
      &lt;div class="gallery__item"&gt;
          ![image to the left](./left.jpg) &lt;- is not processed
      &lt;/div&gt;
      &lt;div class="gallery__item"&gt;
          ![image to the right](./right.jpg)
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I cannot add any CSS classes to images neither. I've seen solutions like below in some "markdown-extra" compilers.</p>
  
  <pre><code>![image](./image.jpg){.some-class}
  </code></pre>
  
  <p>Gatsby supports Custom Components (<a href="https://using-remark.gatsbyjs.org/custom-components/" rel="noreferrer">https://using-remark.gatsbyjs.org/custom-components/</a>). Does custom component allow to still process children as a markdown? Is something like in the example below possible?</p>
  
  <pre><code>&lt;image-gallery&gt;
      ![image1](./1.jpg)
      ![image2](./2.jpg)
  &lt;/image-gallery&gt;
  </code></pre>
  
  <p>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.</p>
  
  <p>Any ideas?</p>