2

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?

1 Answer 1

0

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.

4
  • I'll try and let you know!
    – emaprov
    Commented Jan 19, 2021 at 16:33
  • I run into ReferenceError: _ is not defined error don't know why. Hovering the _ element it seem it recognise where it came from, but it doesn't work
    – emaprov
    Commented Jan 19, 2021 at 19:14
  • _ stands for lodash. As you can see in the github.com/gatsbyjs/gatsby/blob/master/packages/… it's a dependency. Commented Jan 20, 2021 at 6:55
  • Unfortunately it doesn't work right now, I'll find a better way later in the evening.
    – emaprov
    Commented Jan 20, 2021 at 12:32

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.