2

The Problem

I would like to have the ability to wrap text around images in markdown. I am usin gatsby-remark-images alongside gatsby-transformer-remark. My gatsiby-config.js file is below.

I have set the float property using the wrapperStyle option of gatsby-remark-images. This does get translated into the style for the span containing the image, but the span has no width, so the image is not displayed on the page.

enter image description here

Now, if I open up dev tools and set a width on the span, I get the image.

enter image description here

So, the problem is that I need a way to set the width of the image in markdown and have gatsby-remark-images translate that size onto the span. It would also be nice to be able to choose the float location of the image in the markdown. Are either of these things possible?

Gatsby config

module.exports = {
  plugins: [
    ...
    {
      resolve: `gatsby-transformer-remark`,
      options: {
        plugins: [
          {
            resolve: `gatsby-remark-images`,
            options: {
              maxWidth: 500,
              wrapperStyle : `float: right; `
            },
          },
        ],
      },
    },
    ...
}

The Markdown

# Some Title

<img width="300" src="../../static/images/air-flow.jpg">

The image should wrap around this paragraph but it is not. I need to set a width
on the image so that it can be displayed
K. Shores
  • 875
  • 1
  • 18
  • 46
  • some moderator deleted my answer. I said the answer was using gatsby-remark-image-attributes, which I linked. He did not like that I linked it. – K. Shores Oct 09 '20 at 11:30
  • Another option is to make your own component https://stackoverflow.com/questions/53804219/variables-in-graphql-queries. Search through the files looking for your image and then you can style the gatsy-image Img component or the wrapper component directly through the props that you write in the markdown file. – K. Shores Oct 17 '20 at 17:16

0 Answers0