Gatsby: Styling images when using gatsby-remark-images

[attfarhan]

Description

I'm using gatsby-remark-images and I notice that the generated image wrapper has inline styles to center the image. Is there an option to override the inline-styles or add any custom styles to of the images?

[calcsam]

Nope. This would be tricky because markdown files don't contain image formatting details. You probably want to use custom components which just got merged last week!

https://using-remark.gatsbyjs.org/custom-components/

[KyleAMathews]

There is actually an option for setting styling options on the generated wrapper image except... it wasn't documented :-) Fixed that in the PR linked above.

[attfarhan]

Awesome, thanks @calcsam @KyleAMathews!

[krzysu]

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. portrait images look bad when stretched to the whole container width, two or three images in one row 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}

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.

What do you think?

[KyleAMathews]

You can't put markdown inside html. Change the markdown image to a regular image and it should work.

[krzysu]

You are right! I don't know why I thought I have to write images in markdown for gatsby-remark-images to process them :man_facepalming:
Thanks a lot!

[jeffwillette]

If using the HTML tags in the markdown file can you still refer to the pre processed image location and let remark images do the rest?

Or do you have to stick it in the static folder in order to get the proper path?

[jabranr]

I have come across an issue where I did not want the wrapper, injected styles around images and not various width images through different templates/pages. Should I create an issue to make styling for images optional? I possibly be able to push a PR for this too.