gatsby-remark-images-anywhere icon indicating copy to clipboard operation
gatsby-remark-images-anywhere copied to clipboard

Execute on nested image nodes (for use of <img> inside container <div>)

Open fartinmartin opened this issue 5 years ago • 1 comments

Say I want to create a gallery of images in my markdown body. I might nest some <img>s inside of a <div> or gatsby-transform-remark custom component (as in this codesandbox). Doing so will exclude my images from being processed by gatsby-remark-images-anywhere. Is it possible to for this plugin to access those <img> nodes and process them?

fartinmartin avatar Sep 18 '19 00:09 fartinmartin

Ah yeah, this plugin is currently expecting only one image per node. It should be able to handle multiple image nodes!

The culprit is again this line, since I used Array.prototype.find, it only search for the first image node in the direct children.

It'll need to be rewritten so that it can search deeper & also return an array of results. This means these lines needs to be able to flatten array as well, probably with flatMap or something like that.

I'll take a stab at it when I have a bit more time later this month, but as always if you'd like to explore a PR I'm hugely appreciate it!!

d4rekanguok avatar Sep 18 '19 04:09 d4rekanguok