Zoom images

[pszafer]

Hi, I'm trying to add zoom-in/zoom-out feature to my images. I'm configuring gatsby as:

`gatsby-transformer-sharp`,
    `gatsby-plugin-sharp`,
    {
      resolve: `gatsby-mdx`,
      options: {
        gatsbyRemarkPlugins: [
          {
            resolve: "gatsby-remark-images",
            options: {
              maxWidth: 1035,
              sizeByPixelDensity: true,
              withWebp: true,
              linkImagesToOriginal: true
            }
          }
        ]
      }
    },
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        path: `${__dirname}/blog`,
        name: `blog`,
      },
    }
  ],

My attempts:

• add medium-zoom library - impossible because lack of <picture> element support
• adding <MDXProvider components={components}>

  a: ({ children, ...props }) => {
      if (props.className == "gatsby-resp-image-link"){
        return <MdxImg>{children}</MdxImg>
      }
      return <MdxLink {...props} />
    },

  and then implement this https://popmotion.io/pose/learn/react-tutorial-medium-style-image-zoom/ but this puts <div> inside <p>, so many HTML warnings occured and actually some failed to render it.

• tried this also https://416serg.me/building-a-custom-accessible-image-lightbox-in-gatsbyjs/ but I have to double each <picture> and it seems unecessary

Do you know any good example or how to do it properly (gatsby way) if I want use features of gatsby-remark-images and add zoom feature?

[JulesBlm]

Hi, you could try this Gatsby remark plug-in: https://github.com/premieroctet/gatsby-remark-images-zoom. I'm not sure if it works with MDX though.

[ChristopherBiscardi]

I haven't implemented zoom myself. Given that there seems to be a plugin that solves this (thanks @JulesBlm) and that this isn't a gatsby-mdx issue I'm going to close it.

You could probably achieve this by taking control of the rendering of gatsby-remark-image's output using MDXProvider (the remark output can look like this https://github.com/gatsbyjs/gatsby/blob/86ee22e6a5cd57ef566f1a427e94e35e33f0fa99/packages/gatsby-remark-images/src/index.js#L196-L216) and you can override picture, source, or img using MDXProvider.

[pszafer]

@JulesBlm medium-zoom is not working with picture tags properly. It is only working with <img>.

@ChristopherBiscardi is it possible with MdxProvider to extract <picture> / <span> from <p> element?

[ChristopherBiscardi]

@pszafer I'm not sure what you mean by extract. You can take control of any renderable element via MDXProvider. Check the docs here: https://mdxjs.com/advanced/components#mdxprovider

[pszafer]

I ended up doing my modal as gatsby plugin, so this is no problem for me anymore https://github.com/pszafer/gatsby-remark-images-modal

But what I meant is that by default <picture> is put in <p> like this:

<p>
  <span ...>
    <picture>...</picture>
  </span>
</p>

I wanted to extract it from <p> so I can put <div> and other DOM elements there.