Fluid images in .mdx file

user_14461469 0
Viewed 209

there's some way to make fluid an image imported in a .mdx file? I have a Gatsby site base on mdx file post, I install gatsby-remark-image-attributes and gatsby-remark-images.

{
      resolve: `gatsby-plugin-mdx`,
      options: {
        defaultLayouts: {
          posts: require.resolve("./src/templates/blog-post.js"),
          default: require.resolve("./src/components/layout.js"),
        },
        extensions: [`.mdx`, `.md`],
        gatsbyRemarkPlugins: [
          {
            resolve: `gatsby-remark-images`,
            options: {
              maxWidth: 966,
              withWebp: true,
            },
          },
          {
            resolve: `gatsby-remark-image-attributes`,
            options: {
              styleAttributes: true,
              dataAttributes: false
            },
          },
          {
            resolve: `gatsby-remark-highlight-code`,
          },
        ]
      },

The style seems to work, but the images I pass in my mdx files aren't fluid at all.

![IO thumbnail](img.jpg#lightbox=true;max-width=270px;margin-right=23px)

Anyone knows if it is possible to have fluid images in mdx file?

gatsby reactjs javascript
1 Answers

What about adding something like:

{
  resolve: `gatsby-remark-images`,
  options: {
    maxWidth: 800,
    wrapperStyle: fluidResult => `flex:${_.round(fluidResult.aspectRatio, 2)};`,
  },
}

Credits: gatsby-remark-images docs

Disclaimer: _ stands for lodash dependency. As you can see in the package.json (line 15) it's a dependency of the gatsby-remark-images. I would not recommend installing a huge library as lodash is only for this utility since it will increase your bundle size. You can achieve the same result as _.round using some vanilla JavaScript approach but as testing purposes may be interesting to try lodash to know if with this approach you are able to create a fluid wrapper.

user_55853710
Related