How to disable automatic Gatsby styles for images?

[kolstadmagnus]

Hey!

I want my images to be about twice as wide as my paragraphs and to be centered on the page (example). By default, images on the starter-blog template go inside <p> tags. I therefore installed the plug-ins gatsby-remark-unwrap-images and gatsby-remark-figure-caption to be able to target the images differently.

This does change how the images are wrapped. I now have figures with figcaptions instead of images inside paragraphs (with no captions). Yet I’m not getting the result I want—the figures aren’t any wider than the paragraphs.

I know I’ve styled figure and figure img correctly (I’ve styled in the same-ish way as I did in the example):

figure {
  margin-top: 2.4rem;
  margin-bottom: 2rem;
  margin-left: 0;
  margin-right: 0;
}

figure img {
  width: 100%;
}

figcaption {
  margin-top: .5rem;
  line-height: 1.4;
  color: #6B6E7A;
  font-size: .8rem;
  margin-left: 0;
  margin-right: 0;
}

I assume there must be something Gatsby’s plug-ins are doing in my HTML. There appears to be two sets of <span>s as well as a bunch of styling.

Here’s a complete figure now:

<figure class="md-figure"><span class="gatsby-resp-image-wrapper" style="position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 1920px; ">
      <span class="gatsby-resp-image-background-image" style="padding-bottom: 72%; position: relative; bottom: 0px; left: 0px; background-image: url(&quot;data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAOABQDASIAAhEBAxEB/8QAFwAAAwEAAAAAAAAAAAAAAAAAAAQFAv/EABUBAQEAAAAAAAAAAAAAAAAAAAAB/9oADAMBAAIQAxAAAAF/KC6UyQH/xAAbEAACAgMBAAAAAAAAAAAAAAABAgADEBESIv/aAAgBAQABBQJj66huSPa2yScf/8QAFBEBAAAAAAAAAAAAAAAAAAAAEP/aAAgBAwEBPwE//8QAFBEBAAAAAAAAAAAAAAAAAAAAEP/aAAgBAgEBPwE//8QAGRAAAwADAAAAAAAAAAAAAAAAABARASEx/9oACAEBAAY/Al0zIbX/xAAbEAEAAgIDAAAAAAAAAAAAAAABABEhUXGRof/aAAgBAQABPyGol4J0NsC15JjIUwW0vMuf/9oADAMBAAIAAwAAABB83//EABURAQEAAAAAAAAAAAAAAAAAAAEQ/9oACAEDAQE/ECf/xAAVEQEBAAAAAAAAAAAAAAAAAAABEP/aAAgBAgEBPxBn/8QAGhABAAMBAQEAAAAAAAAAAAAAAQARIWExcf/aAAgBAQABPxAksO/WISyj9zIj06iTPzsurLQXq4qf/9k=&quot;); background-size: cover; display: block; transition: opacity 0.5s ease 0.5s; opacity: 0;"></span>
  <img class="gatsby-resp-image-image" alt="stavanger tinghus" title="stavanger tinghus" src="/static/151a523a2543581de1cec4d2f2137a69/0f98f/stavanger-tinghus.jpg" srcset="/static/151a523a2543581de1cec4d2f2137a69/acb04/stavanger-tinghus.jpg 750w,
/static/151a523a2543581de1cec4d2f2137a69/c58a3/stavanger-tinghus.jpg 1500w,
/static/151a523a2543581de1cec4d2f2137a69/0f98f/stavanger-tinghus.jpg 1920w" sizes="(max-width: 1920px) 100vw, 1920px" style="width: 100%; height: 100%; margin: 0px; vertical-align: middle; position: absolute; top: 0px; left: 0px; opacity: 1; transition: opacity 0.5s ease 0s; color: inherit; box-shadow: white 0px 0px 0px 400px inset;" loading="lazy" decoding="async">
    </span><figcaption>Den tiltalte tilsto alle lovbrudd i Stavanger tinghus i går. &lt;cite&gt;Magnus Rengård Kolstad&lt;/cite&gt;</figcaption></figure>

This is what I want my figure to be like:

<figure>
    <img src="image.jpg">
    <figcaption>Caption.</figcaption>
</figure>

How do I change/disable Gatsby’s styling and span tags? GraphQL? gatsby-config.js? Or is there a different solution?

I’m using the Gatsby starter-blog-template.

Any help is much appreciated!

[sweethuman]

gatsby-remark-unwrap-images disabling this will help, because basically, it unwraps the image, you know, both do they're job, but that doesn't mean they work well together, or the other options is this gatsby-remark-images, apparently you can configure the way it renders them, you haven't give much to work with, this is the best I can do

[kolstadmagnus]

I thought this as well, but without the unwrapping plug-in in the config file before the figure plug-in, an empty p paragraph appears before every figure...

Anyway, I’ll gladly provide you with more info if you can help me with this. Do you need the config file, for example?

[sweethuman]

A config file would be helpful. Thanks!