Create using-gatsby-image.md #8131
Conversation
Issue gatsbyjs#8103: This is for the second task, "using gatsby-image to prevent image bloat". I did my best to make sure the links from the original article were still present. Not sure how to navigate the fact that in the original article, it's specifically Kyle talking, so right now everything's still in first-person. I also cut the last line, which was leading to the next section of the article so wouldn't be relevant here (unless I should have included that next section as well?). Let me know if there's anything you'd like me to change - this is my first-ever contribution to an open source project (currently in a web dev bootcamp), so I'm sorry if I screwed anything up!
docs/docs/using-gatsby-image.md
Outdated
| Using gatsby-image to prevent image bloat | ||
| ==== | ||
|
|
||
| I recently introduced a new Gatsby/React component called [gatsby-image](https://www.gatsbyjs.org/packages/gatsby-image/). |
There was a problem hiding this comment.
To avoid saying "I" here, maybe just turn this sentence into an introduction to the article. I just realized you could copy the introduction to the plugin READme file here: You know what I just realized! I ought to also have included the plugin READme file as a suggestion for what to include in this doc. I think the intro and then the "Problem" and "Solution" sections would be great to include in this doc: https://www.gatsbyjs.org/packages/gatsby-image/
Also somehow keeping the link to the plugin READme file would be great :)
docs/docs/using-gatsby-image.md
Outdated
|
|
||
| I recently introduced a new Gatsby/React component called [gatsby-image](https://www.gatsbyjs.org/packages/gatsby-image/). | ||
|
|
||
| It has some nice tricks that you’d expect from a modern image component. It uses the new [IntersectionObserver API](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API) to cheaply lazy load images. It holds an image’s position so your page doesn’t jump around as images load. It makes it easy to add a placeholder—either a gray background or a blurry version of the image. |
There was a problem hiding this comment.
You know what I just realized! I ought to also have included the plugin READme file as a suggestion for what to include in this doc. I think the "Problem" and "Solution" sections of the plugin READme file should follow this paragraph: https://www.gatsbyjs.org/packages/gatsby-image/
shannonbux
added
the
type: documentation
Updated with suggested changes!
|
Thanks so much, Shannon! I went through and did my best to incorporate all of the changes you requested - please let me know if I've missed anything or if you'd like anything changed. I'd love to keep tackling some more articles as well - I'll see about getting some others done as time allows. |
KyleAMathews
force-pushed
the
master
branch
2 times, most recently
from
884c5c0
to
837f628
Compare
KyleAMathews
force-pushed
the
master
branch
from
837f628
to
51b3e36
Compare
|
This looks great, @AttilaTheHen! Thanks! |
KyleAMathews
force-pushed
the
master
branch
2 times, most recently
from
fc4ca3e
to
2116fff
Compare
|
Thanks! |
|
Holy buckets, @AttilaTheHen — we just merged your PR to Gatsby! 💪💜 Gatsby is built by awesome people like you. Let us say “thanks” in two ways:
If there’s anything we can do to help, please don’t hesitate to reach out to us: tweet at @gatsbyjs and we’ll come a-runnin’. Thanks again! |
Issue #8103: This is for the second task, "using gatsby-image to prevent image bloat". I did my best to make sure the links from the original article were still present.
Not sure how to navigate the fact that in the original article, it's specifically Kyle talking, so right now everything's still in first-person. I also cut the last line, which was leading to the next section of the article so wouldn't be relevant here (unless I should have included that next section as well?).
Let me know if there's anything you'd like me to change - this is my first-ever contribution to an open source project (currently in a web dev bootcamp), so I'm sorry if I screwed anything up!