docs(gatsby-plugin-image): Add image plugin toolkit docs #29483
Merged
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
gatsbot
bot
added
the
status: triage needed
gillkyle
reviewed
Feb 12, 2021
Contributor
gillkyle
left a comment
gillkyle
left a comment
There was a problem hiding this comment.
This is looking really good 🙂
I left a few suggestions that you're welcome to consider. I think a section at the end that links to places where this is implemented in other source plugins would be really helpful too.
docs/docs/how-to/plugins-and-themes/adding-gatsby-image-support.md
Outdated
Show resolved
Hide resolved
docs/docs/how-to/plugins-and-themes/adding-gatsby-image-support.md
Outdated
Show resolved
Hide resolved
| } | ||
|
|
||
| // You could also calculate dominant color, and pass that as `backgroundColor` | ||
| // gatsby-plugin-sharp includes helpers that you can use to generate a tracedSVG or calculate |
Contributor
There was a problem hiding this comment.
I'm not exactly sure what these helpers are, maybe it could be possible to link to some docs/code (wherever it exists?)
Contributor
Author
There was a problem hiding this comment.
Yes, I need to document these!
docs/docs/how-to/plugins-and-themes/adding-gatsby-image-support.md
Outdated
Show resolved
Hide resolved
docs/docs/how-to/plugins-and-themes/adding-gatsby-image-support.md
Outdated
Show resolved
Hide resolved
Co-authored-by: Kyle Gill <[email protected]>
LekoArts
added
topic: media
docs/docs/how-to/plugins-and-themes/adding-gatsby-image-support.md
Outdated
Show resolved
Hide resolved
Co-authored-by: Frederick Fogerty <[email protected]>
Contributor
laurieontech
left a comment
laurieontech
left a comment
There was a problem hiding this comment.
Really great job! I understand the two paths a lot better now. Left small edits and comments.
docs/docs/how-to/plugins-and-themes/adding-gatsby-image-support.md
Outdated
Show resolved
Hide resolved
| --- | ||
|
|
||
| The [new Gatsby image plugin](https://www.gatsbyjs.com/docs/how-to/images-and-media/using-gatsby-plugin-image) includes React components for displaying images, and these can be used with data from plugins. The plugin handles all of the hard parts of displaying responsive images that follow best practices for performance. In fact we are confident that it is the fastest way to render images in React, as it can handle blur-up and lazy-loading before React hydration. | ||
| Support for these are available out of the box in `gatsby-transformer-sharp`, so if your plugin downloads images and processes them locally then your users can use the [`gatsbyImageData` resolver](https://www.gatsbyjs.com/docs/how-to/images-and-media/using-gatsby-plugin-image#dynamic-images). However, if your CDN can deliver images of multiple sizes with a URL-based API, then the plugin includes a toolkit to allow you to give your users the same great experience without needing to download the images locally. It also allows you to create components that display these images dynamically at runtime, without needing to add a GraphQL resolver. |
|
|
||
| There are three steps to add a basic `gatsbyImageData` resolver: | ||
|
|
||
| 1. [Create the `generateImageSource` function](#create-the-generateimagesource-function) |
Contributor
There was a problem hiding this comment.
I might put this earlier to help give context? Not sold on that approach though.
docs/docs/how-to/plugins-and-themes/adding-gatsby-image-support.md
Outdated
Show resolved
Hide resolved
docs/docs/how-to/plugins-and-themes/adding-gatsby-image-support.md
Outdated
Show resolved
Hide resolved
docs/docs/how-to/plugins-and-themes/adding-gatsby-image-support.md
Outdated
Show resolved
Hide resolved
docs/docs/how-to/plugins-and-themes/adding-gatsby-image-support.md
Outdated
Show resolved
Hide resolved
docs/docs/how-to/plugins-and-themes/adding-gatsby-image-support.md
Outdated
Show resolved
Hide resolved
docs/docs/how-to/plugins-and-themes/adding-gatsby-image-support.md
Outdated
Show resolved
Hide resolved
docs/docs/how-to/plugins-and-themes/adding-gatsby-image-support.md
Outdated
Show resolved
Hide resolved
Co-authored-by: LB <[email protected]>
laurieontech
approved these changes
Feb 17, 2021
Contributor
laurieontech
left a comment
laurieontech
left a comment
There was a problem hiding this comment.
This is certainly ready to go in. Any smaller changes can be made later.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
WIP: docs for plugin authors
rendered view