Use GatsbyImage component from gatsby-plugin-image in zoomImg props

[lezan]

Hello @rpearce, just an idea about a new feature to extend the compatibility with the gatsby-plugin-image. It would be cool if it were possibility to use a GatbsyImage component as zoomImg props.

Something like:

<Zoom
  zoomImg={
    <GatsbyImage
      className="image-zoom"
      alt={alt}
      image={getImage(large)}
    />
  }
>
  <GatsbyImage
    className="image-zoom"
    alt={alt}
    image={getImage(small)}
  />
</Zoom>

[rpearce]

@lezan Can you help me understand what this buys you over passing the src, sizes, srcset, and other image props, oneself? At present this should work (I'm assuming getImage(large) returns a src):

<Zoom zoomImg={{ alt, src: getImage(large) }}>
  <GatsbyImage
    className="image-zoom"
    alt={alt}
    image={getImage(small)}
  />
</Zoom>

In case you didn't know: I recommend styling things by either overriding the selectors in https://github.com/rpearce/react-medium-image-zoom/blob/main/source/styles.css or by copying the CSS file and adding your own values.

[lezan]

@rpearce I was wrong!

If you wanna give a try:

• https://codesandbox.io/s/silent-platform-o3ci0s?file=/src/pages/index.js
• https://github.com/lezan/zoom-test-gatsby

From my side, there is always the same (smaller) image.

EDIT: could be related to the override at

react-medium-image-zoom/source/Controlled.tsx

Line 212 in 3ee3e98

{...isZoomImgLoaded && modalState === ModalState.LOADED ? zoomImg : {}}

? Because sizes, src and srcset are the same.

[lezan]

@rpearce removing into Zoom component the gatsby-plugin-image and adding <img /> work as expected. The issue seems to be related to how to make working the override with the StaticImage and GatsbyImage, I think.

[rpearce]

@lezan ok, I will check out your repo tonight and see what I can do.

[rpearce]

@lezan Here's a pull request for you: lezan/zoom-test-gatsby#2

[lezan]

@rpearce work like a charm!