docs(gatsby-plugin-image): Update readme #29076
Conversation
gatsbot
bot
added
the
status: triage needed
LekoArts
added
topic: media
|
|
||
| 1. Install `gatsby-plugin-image` and `gatsby-plugin-sharp`: | ||
| 1. Install `gatsby-plugin-image`, `gatsby-source-filesystem` and `gatsby-plugin-sharp`: |
There was a problem hiding this comment.
Should we have a switch case where source-filesystem is for static and transformer is for gatsbyImage? You won't always need it, right?
There was a problem hiding this comment.
No, not always it's true, but it's not as simple as 1:1 though
|
|
||
| 2. **Configure your image.** | ||
|
|
||
| You configure the image by passing arguments to the `gatsbyImageData` resolver. You can change the size and layout, as well as settings such as the type of placeholder used when lazy loading. There are also advanced image processing options available. You can find the full list of options in the API docs. |
There was a problem hiding this comment.
Link to the API docs again in case people are jumping to this section?
| avatar { | ||
| childImageSharp { | ||
| gatsbyImageData( | ||
| width: 200 |
There was a problem hiding this comment.
| width: 200 | |
| width: 200, |
There was a problem hiding this comment.
Commas are optional when it's multiline. Prettier removes them.
There was a problem hiding this comment.
I legit just realized this when I was doing it on my site. Strange.
There was a problem hiding this comment.
I accepted all of the suggesitons, but then started to edit locally before committing then realised prettier just removed them again!
There was a problem hiding this comment.
Ya, I think just leave them out. Hopefully people won't have copy/paste issues. But if it's valid syntax they shouldn't.
| childImageSharp { | ||
| gatsbyImageData( | ||
| width: 200 | ||
| placeholder: BLURRED |
There was a problem hiding this comment.
| placeholder: BLURRED | |
| placeholder: BLURRED, |
| avatar { | ||
| childImageSharp { | ||
| gatsbyImageData( | ||
| width: 200 |
There was a problem hiding this comment.
| width: 200 | |
| width: 200, |
| childImageSharp { | ||
| gatsbyImageData( | ||
| width: 200 | ||
| placeholder: BLURRED |
There was a problem hiding this comment.
| placeholder: BLURRED | |
| placeholder: BLURRED, |
Co-authored-by: LB <[email protected]>
ascorbic
added
the
bot: merge on green
ascorbic
force-pushed
the
docs/images-readme
branch
from
3bf137c to
03c1af8
Compare
* docs(gatsby-plugin-image): Update readme * Update * Apply suggestions from code review Co-authored-by: LB <[email protected]> * Changes from review Co-authored-by: LB <[email protected]>
This is a new readme for gatsby-plugin-image, based on the new docs and API. It should be merged after the reference guide (#28935) and the migration guide (#29036) because it includes links to them.
rendered version