Zoom images
pszafer opened this issue · comments
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?
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.
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
.
@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?
@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
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.