Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[gatsby-remark-images] Option to download remote images #16780

Closed
rikakomoe opened this issue Aug 20, 2019 · 8 comments

Comments

@rikakomoe
Copy link

@rikakomoe rikakomoe commented Aug 20, 2019

Summary

gatsby-remark-images doesn't process images located on other hosts, may there be an option to download remote images

Basic example

If the image path appears not hosted locally, run createRemoteFileNode API and replace the original image path with file node's publicURL

Motivation

To use the fancy lazy load and blur in feature with a CMS backend, instead of local md files

@jamessimone

This comment has been minimized.

Copy link
Contributor

@jamessimone jamessimone commented Aug 25, 2019

@rikakomoe this is not a total solution, but I wrote a blog post about how to do this with createRemoteFileNode as a local plugin for gatsby. The article may need some updating - your suggestion of using the file node's publicURL may be all that is necessary, instead of what I do (which is using react-dom to fully render the gatsby-image component), but I won't have the chance to test that theory at the moment as I am traveling.

Hopefully the final example code at the end of my post ends up being of some use to you; if gatsby-remark-images can pick up on the presence of remotely downloaded files by just swapping the URL referenced after downloading the images with createRemoteFileNode, please let me know. Otherwise, I will follow up when I have some more time to attempt that solution myself.

@rikakomoe

This comment has been minimized.

Copy link
Author

@rikakomoe rikakomoe commented Aug 25, 2019

@jamessimone Thanks for the post and response.

I guess it won't be a problem for gatsby-remark-images to do this since it handles the process of local images at the moment and there shouldn't be so much differences after a remote image is downloaded.

However I'm just suggesting this feature, never have I read the code thoroughly so there could be something I've missed.

@gatsbot

This comment has been minimized.

Copy link

@gatsbot gatsbot bot commented Sep 25, 2019

Hiya!

This issue has gone quiet. Spooky quiet. 👻

We get a lot of issues, so we currently close issues after 30 days of inactivity. It’s been at least 20 days since the last update here.

If we missed this issue or if you want to keep it open, please reply here. You can also add the label "not stale" to keep this issue open!

As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request. Check out gatsby.dev/contribute for more information about opening PRs, triaging issues, and contributing!

Thanks for being a part of the Gatsby community! 💪💜

@rikakomoe

This comment has been minimized.

Copy link
Author

@rikakomoe rikakomoe commented Sep 26, 2019

Replying doesn't keep the issue open, I just had an issue closed by the bot 🙃

@joewood

This comment has been minimized.

Copy link

@joewood joewood commented Oct 7, 2019

I forked the remark-images plugin and changed the Markdown Image find to use the url property, rather than the dirname. This seems to have worked (as long as you preload your remote images into the tree first). I can do a PR and add a "remote mode" for this plugin, but there is the assumption that the image nodes would be created first.

@rikakomoe

This comment has been minimized.

Copy link
Author

@rikakomoe rikakomoe commented Oct 7, 2019

@joewood Glad to hear that but I wished it could fetch the remote image automatically ("createRemoteFileNode" after it parsed the Markdown document) couldn't it? I didn't know what image will be included in the Markdown document so there's no way can I do this "preload" outside the plugin.

@joewood

This comment has been minimized.

Copy link

@joewood joewood commented Oct 7, 2019

That's really a separate phase of the build process. It's quite easy to parse the markdown for images and call createRemoteFileNode for the image URL. The complete fix for this will depend very much on your the source of your nodes.

@gatsbot

This comment has been minimized.

Copy link

@gatsbot gatsbot bot commented Oct 18, 2019

Hey again!

It’s been 30 days since anything happened on this issue, so our friendly neighborhood robot (that’s me!) is going to close it.

Please keep in mind that I’m only a robot, so if I’ve closed this issue in error, I’m HUMAN_EMOTION_SORRY. Please feel free to reopen this issue or create a new one if you need anything else.

As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request. Check out gatsby.dev/contribute for more information about opening PRs, triaging issues, and contributing!

Thanks again for being part of the Gatsby community!

@gatsbot gatsbot bot closed this Oct 18, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
4 participants
You can’t perform that action at this time.