cedricdelpoux / gatsby-remark-images-grid

Use css grid layouts in markdown
MIT License
22 stars 10 forks source link

Plugin not working for me #1

Closed cmdalbem closed 4 years ago

cmdalbem commented 6 years ago

Hi! I couldn't make this plugin work here. Has anyone managed to make this work in conjunction with gatsby-remark-images? I'm wondering it might be a compatibility problem.

I've followed the guide and put it before any other image plugins:

{
  resolve: `gatsby-transformer-remark`,
  options: {
    plugins: [
      {
        resolve: "gatsby-remark-images-grid",
        options: {
          gridGap: "2rem",
        },
      },
      {
        resolve: `gatsby-remark-images`,
        options: {
          maxWidth: 1036,
          linkImagesToOriginal: false
        },
      },
      'gatsby-remark-smartypants',
      `gatsby-remark-reading-time`,
      'gatsby-remark-component',
    ],
  },
},

Here's how it looks like in the markdown code:

```grid|4|test
![](./day2-dev.jpg)
![](./day2-dev2.jpg)
![](./day2-meeting.jpg)
![](./day2-team.jpg)

Here's how the final result looks like when inspected:

image

--

Full project code can be find here: https://github.com/cmdalbem/portfolio

cmdalbem commented 6 years ago

Sooo, I found out that adding this simple additional CSS to my site makes the image appear again:

.gatsby-resp-image-wrapper {
  width: 100%;
}

It does solve my problem, but such a tweak wasn't necessary. Especially considering gatsby-remark-images is such a popular Gatsby plugin :)

cedricdelpoux commented 4 years ago

Fixed in v1.1.0