Gatsby: Zoom Image Like Medium

[deadcoder0904]

Feature Request

Medium Image Zoom in Markdown Preview will be helpful because on my 15" screen side-by-side pane for Markdown looks very small & Image can't be read completely

Basic Example

So something like https://rpearce.github.io/react-medium-image-zoom/ might be helpful in Markdown Preview :)

Motivation

The images in the docs are too small that I can't read everything clearly so adding a few lines of JS won't hurt for Gatsby :)

[LekoArts]

I actually did implement something like that with zooming locally in one of my projects with ´gatsby-remark-images`. I could do a PR up if I find time this weekend.

[m-allanson]

Hey @deadcoder0904 I'm curious to know which images were too small? Maybe we can improve the images or layout so that they're clearer?

[deadcoder0904]

Anything with GraphiQL like https://next.gatsbyjs.org/tutorial/part-five/

I mean you can read it but I don't have to bleed my eyes if it already has Zoom button. I want to look at the actual details on the right side of GraphiQL panel. Also, IMHO if its some website with images then a Zoom in should be the most common thing. But that's just my opinion :)

[johncmunson]

FYI, it's slightly hacky, but someone has written a blog post showing how to achieve this in Gatsby. It's a great pattern and I'd love to somehow see this added as a first class citizen to gatsby-image

[LekoArts]

In addition to the blogpost and custom components in markdown: You also can use gatsby-mdx and use React components out of the box.

I'll close this issue as answered :)

[shinework]

Hi there! I've just published http://github.com/premieroctet/gatsby-remark-images-zoom. It brings medium-zoom on top of gatsby-remark-images

[deadcoder0904]

@shinework That looks solid. Love it & it works yay 🎉

Thank you ❤️

[rchrdnsh]

hmmmm...is there a version of this plugin for ‘gatsby-image’...would love to be able to zoom in to all images on a gatsby site, not just the images in a markdown file...

[xmflsct]

Found this solution if anyone needs https://gist.github.com/MantasMikal/a04b2b6b760ef3ef796a00bd84716160