diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index b72c8c893dccf..bdec4b9387545 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -65,7 +65,7 @@ a pull request. additions or modifications here. * Make sure to double check your grammar and capitalise correctly. * Commit and push to your fork. -* Create an pull request from your branch. +* Create a pull request from your branch. ## Development tools diff --git a/docs/docs/awesome-gatsby.md b/docs/docs/awesome-gatsby.md index 96051852b53ae..a5833dba8a0ac 100644 --- a/docs/docs/awesome-gatsby.md +++ b/docs/docs/awesome-gatsby.md @@ -19,3 +19,4 @@ A curated list of interesting Gatsby community projects and learning resources. * [Egghead course — "Build a Blog with React and Markdown using Gatsby"](https://egghead.io/courses/build-a-blog-with-react-and-markdown-using-gatsby) * [Build a photo site with Gatsby — 6 part tutorial](https://jeremey.blog/gatsby-photo/) * [Blazing fast website with Gatsby and Contentful series](https://www.youtube.com/watch?v=Ek4o40w1tH4&list=PL8KiuH6vpACV-F7jXribe4YveGBhBeG9A) +* [Image Optimization Made Easy with Gatsby.js](https://medium.com/@kyle.robert.gill/ridiculously-easy-image-optimization-with-gatsby-js-59d48e15db6e) diff --git a/packages/gatsby-image/README.md b/packages/gatsby-image/README.md index 740aa5e34b283..81f5139819f90 100644 --- a/packages/gatsby-image/README.md +++ b/packages/gatsby-image/README.md @@ -31,7 +31,7 @@ Ideally you would: show a preview of the image while it loads * Hold the image position so your page doesn't jump while images load -Doing this consistantly across a site feels like sisyphean labor. You manually +Doing this consistently across a site feels like sisyphean labor. You manually optimize your images and then… several images are swapped in at the last minute or a design-tweak shaves 100px of width off your images. @@ -56,6 +56,27 @@ The GraphQL query creates multiple thumbnails with optimized JPEG and PNG compression. The `gatsby-image` component automatically sets up the "blur-up" effect as well as lazy loading of images further down the screen. +## Install + +`npm install --save gatsby-image` + +Depending on the gatsby starter you used, you may need to include [gatsby-transformer-sharp](/packages/gatsby-transformer-sharp/) and [gatsby-plugin-sharp](/packages/gatsby-plugin-sharp/) as well, and make sure they are installed and included in your gatsby-config. + +``` +npm install --save gatsby-transformer-sharp +npm install --save gatsby-plugin-sharp +``` + +Then in your `gatsby-config.js`: +``` +plugins: [ + `gatsby-transformer-sharp`, + `gatsby-plugin-sharp` +]; +``` + +## How to use + This is what a component using `gatsby-images` looks like. ```jsx @@ -84,6 +105,8 @@ export const query = graphql` `; ``` +For another explanation of how to get started with gatsby-image, see this blog post by community member Kyle Gill [Image Optimization Made Easy with Gatsby.js](https://medium.com/@kyle.robert.gill/ridiculously-easy-image-optimization-with-gatsby-js-59d48e15db6e) + ## Two types of responsive images There are two types of responsive images supported by gatsby-image.