Implementing Medium's Image Preview with Gatsby Images

#gatsby #beginners #codenewbie #css

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.

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

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;
}

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

Your AI Code Assistant

Automate your code reviews. Catch bugs before your coworkers. Fix security issues in your code. Built to handle large projects, Amazon Q Developer works alongside you from idea to production code.

Get started free in your IDE