DEV Community

Cover image for Implementing Medium's Image Preview with Gatsby Images
Kyle Luke
Kyle Luke

Posted on

Implementing Medium's Image Preview with Gatsby Images

The zoom-in image preview feature used by Medium for their blogs is a really nice way to allow users a deeper look at the images on your project. I wanted to use this feature for displaying past projects on my portfolio site, but ran into issues between the compatibility of the React Medium Image Zoom library and the Gatsby Image tool.

Goal

Have you seen the "Image Preview" zoom feature on Medium? It allows a user to view a lightbox version of the full image, filling up the browser with as large of an image as the size allows while seeing it in full.
Medium Image Zoom Preview Example
There are multiple React libraries that replicate this image-zoom feature, but the one that seems to have the most users and the largest community for support is the react-medium-image-zoom library (built by Robert Pierce)

Issues

The steps for use of React Medium Image Zoom are pretty simple. Start by adding the library to your React project (npm i react-medium-image-zoom), then import Zoom to your desired component, and wrap an image with it.

Example:
import React from 'react'
import Zoom from 'react-medium-image-zoom'
import 'react-medium-image-zoom/dist/styles.css'

const MyComponent = () => (
  <Zoom>
    <img src="../images/example.jpg" width="500" />
  </Zoom>
)

export default MyComponent
Enter fullscreen mode Exit fullscreen mode

When using with Gatsby though, the issue of using the Zoom feature with Gatsby Images quickly becomes apparent. The Gatsby Images no longer show up! Luckily this is only a CSS issue, and has to do with some of the native styling in both.

Resolution

It all comes down to debugging the styling pre-baked into Gatsby Image and the React Medium Zoom library, and implementing fixes that will allow them to both work cohesively together.

Required CSS
// Set Gatsby Image className to 100% width and height
gatsbyImage {
  width: '100%',
  height: '100%'
}

// React Medium Image Zoom styling update to work with Gatsby Images
[data-rmiz-wrap='visible'], [data-rmiz-wrap='hidden'] {
    width: 100%;
    height: 100%;
    display: block;
}
Enter fullscreen mode Exit fullscreen mode

Conclusion

Implementing the Image Zoom feature seen on Medium is a simple, and nice way to improve the user experience in many projects. Hopefully this will help some of you that happen to be trying to implement this feature with Gatsby Images. It's much simpler than I thought to fix, but took me some time to figure out what needed to be done.

Additional Resources

Mikal Mantis's one-component solution to the React Medium Image Zoom with Gatsby Image issue

Discussion (3)

Collapse
madza profile image
Madza

have you tried next and its image component?

Collapse
lukekyl profile image
Kyle Luke Author

I have not yet, would like to use it for a future project soon!
What are your thoughts?

Collapse
madza profile image
Madza

It's pretty awesome and was one of the main reasons everyone loved v10