search

graysonhicks / gatsby-plugin-remote-images

:floppy_disk: A Gatsby.js plugin for downloading and linking remote images from another node's field for the benefits of gatsby-image.
155 stars 39 forks source link

Use with Cloudinary Images #14

Closed davidkartuzinski closed 5 years ago

davidkartuzinski commented 5 years ago

I am trying to figure out how to use your plugin to solve an issue with the way gatsby-image is unable to "find" images that are parsed through react-markdown. My understanding is that it has to do with this issue with Gatsby: https://github.com/gatsbyjs/gatsby/issues/3608, https://github.com/gatsbyjs/gatsby/issues/13353 - both of these issues basically talk about it.

If someone uses a WYSIWYG editor (for example) and within the body of the content images are placed, then the graphQL query gets something like "content", and inside this content, we have the images.

It is those images that gatsby-image cannot find and parse.

Here is an example:

https://strapi-gatsby-postgresql-demo.netlify.com/Article_1 - the top image is directly accessible through the graphQL query as it's own thing. In this case, "header image". If you look at the image, you will see it has been transformed by gatsby-image. The second image on the page, if you inspect is just resized but is 3mgs. This was part of the query parsed by the react-markdown.

My question is, can your plugin "reach in" and find URLs there? And using Cloudinary hosted images as an example, I can't quite figure out how to configure the gatsby-config.js.

Here is the full repo. https://github.com/strapi/strapi-heroku-cms-demo - in case this is helpful. It does NOT have your plugin installed.

Thanks for any insights on this.

graysonhicks commented 5 years ago

Hi @davidkartuzinski ! So you are trying to get an image from the markdown provided in the Strapi api request?

lennoxivius commented 5 years ago

I have the same problem, where my markdown is supplied by Strapi, and the images in the markdown comes from amazon S3. By using react-markdown the image gets correctly transformed to an html image, but it does not get processed by gatsby-image, just the img tag with src. I have tried gatsby-remark-images, but nothing works. Any ideas?

graysonhicks commented 5 years ago

Hm, that should be something that gatsby-remark-images should handle. See this issue for how other CMSs handle that. https://github.com/strapi/gatsby-source-strapi/issues/62 re: contentful

davidkartuzinski commented 5 years ago

Hello. Sorry for the late response. This is definitely a Strapi issue. They know about it and it is documented internally. This issue has something to do with the way the Strapi editor outputs the images. Until the editor is fixed, I cannot give you more data. Thank you.

kaleabmelkie commented 4 years ago

Any updates?

davidkartuzinski commented 4 years ago

@kaleabmelkie I haven't looked at this issue since I stopped working at Strapi. However, I heard that instead of using the gatsby strapi plugin, you can try to use the gatsby source plugin instead and then you will be able to properly manipulate your images. As far as I know, the strapi gatsby plugin has not been updated, but that it is being considered after the stable release of Strapi in the next quarter or so.