jbee37142/gatsby-remark-images-medium-zoom

gatsby-remark-images-medium-zoom-plugin 👋

medium-zoom plugin for gatsby with gatsby-remark-images

🗂 Use Case

• gatsby-starter-bee

🚚 Install

$ npm install --save gatsby-remark-images-medium-zoom
$ npm install --save gatsby-remark-images gatsby-transformer-remark
# or
$ yarn add gatsby-remark-images-medium-zoom
$ yarn add gatsby-remark-images gatsby-transformer-remark

🚀 How to use

👉 This plugin requires gatsby-remark-images and either gatsby-transformer-remark or gatsby-plugin-mdx.

The linkImagesToOriginal option needs to be set to false.

Use with gatsby-transformer-remark

// In your gatsby-config.js
plugins: [
  {
    resolve: `gatsby-transformer-remark`,
    options: {
      plugins: [
        {
          resolve: `gatsby-remark-images`,
          options: {
            maxWidth: 590,
            linkImagesToOriginal: false // Important!
          }
        },
        {
          resolve: `gatsby-remark-images-medium-zoom`, // Important!
          options: {
            //...
          }
        }
      ]
    }
  }
]

Use with gatsby-plugin-mdx

// In your gatsby-config.js
plugins: [
  {
    resolve: `gatsby-plugin-mdx`,
    options: {
      // a workaround to solve mdx-remark plugin compat issue
      // https://github.com/gatsbyjs/gatsby/issues/15486
      plugins: [
        `gatsby-remark-images`,
        `gatsby-remark-images-medium-zoom` // Important!
      ],
      gatsbyRemarkPlugins: [
        {
          resolve: `gatsby-remark-images`,
          options: {
            maxWidth: 590,
            linkImagesToOriginal: false // Important!
          }
        },
        {
          resolve: `gatsby-remark-images-medium-zoom`, // Important!
          options: {}
        }
      ]
    }
  }
]

⚙ Options

https://github.com/francoischalifour/medium-zoom#options

In addition, this plugin has its own options:

Author

👤 JaeYeopHan (Jbee)

• Github: @JaeYeopHan
• Twitter: @JbeeLjyhanll

Show your support

Give a ⭐️ if this project helped you!