From f8d2f76e81bd7a8161880acd655997bfdb82f7c6 Mon Sep 17 00:00:00 2001 From: Kyle Mathews Date: Thu, 18 Jan 2018 10:17:33 -0800 Subject: [PATCH 1/3] Add sample code showing off gatsby-image + image processing to query with GraphQL page --- docs/docs/querying-with-graphql.md | 27 +++++++++++++++++++++++++++ packages/gatsby-image/README.md | 4 ++-- 2 files changed, 29 insertions(+), 2 deletions(-) diff --git a/docs/docs/querying-with-graphql.md b/docs/docs/querying-with-graphql.md index 34f0b33b17079..19f1e9bc84a13 100644 --- a/docs/docs/querying-with-graphql.md +++ b/docs/docs/querying-with-graphql.md @@ -159,6 +159,33 @@ Gatsby has rich support for processing images. Responsive images are a big part Combined with a special Gatsby image component, [gatsby-image](/packages/gatsby-image/), you have a very powerful set of primatives for building sites with images. +This is what a component using `gatsby-images` looks like: + +```jsx +import React from "react"; +import Img from "gatsby-image"; + +export default ({ data }) => ( +
+

Hello gatsby-image

+ +
+); + +export const query = graphql` + query GatsbyImageSampleQuery { + file(relativePath: { eq: "blog/avatars/kyle-mathews.jpeg" }) { + childImageSharp { + # Specify the image processing specifications right in the query. + # Makes it trivial to update as your page's design changes. + resolutions(width: 125, height: 125) { + ...GatsbyImageSharpResolutions + } + } + } + } +`; + See also the following blog posts: * [Making Website Building Fun](/blog/2017-10-16-making-website-building-fun/) diff --git a/packages/gatsby-image/README.md b/packages/gatsby-image/README.md index bd850e352dea8..ab8744f862bbf 100644 --- a/packages/gatsby-image/README.md +++ b/packages/gatsby-image/README.md @@ -78,7 +78,7 @@ plugins: [ ## How to use -This is what a component using `gatsby-images` looks like. +This is what a component using `gatsby-images` looks like: ```jsx import React from "react"; @@ -95,7 +95,7 @@ export const query = graphql` query GatsbyImageSampleQuery { file(relativePath: { eq: "blog/avatars/kyle-mathews.jpeg" }) { childImageSharp { - # Specify the image processing steps right in the query + # Specify the image processing specifications right in the query. # Makes it trivial to update as your page's design changes. resolutions(width: 125, height: 125) { ...GatsbyImageSharpResolutions From 3b851e56d5e7ae343bfa5e5fd74e79b5ed768e48 Mon Sep 17 00:00:00 2001 From: Kyle Mathews Date: Thu, 18 Jan 2018 10:18:58 -0800 Subject: [PATCH 2/3] Update querying-with-graphql.md --- docs/docs/querying-with-graphql.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/docs/querying-with-graphql.md b/docs/docs/querying-with-graphql.md index 19f1e9bc84a13..5eddb46964d36 100644 --- a/docs/docs/querying-with-graphql.md +++ b/docs/docs/querying-with-graphql.md @@ -159,7 +159,7 @@ Gatsby has rich support for processing images. Responsive images are a big part Combined with a special Gatsby image component, [gatsby-image](/packages/gatsby-image/), you have a very powerful set of primatives for building sites with images. -This is what a component using `gatsby-images` looks like: +This is what a component using `gatsby-image` looks like: ```jsx import React from "react"; From 2ea15369abd0ffc8edc52e77f420ba2ba5848717 Mon Sep 17 00:00:00 2001 From: Kyle Mathews Date: Thu, 18 Jan 2018 10:19:20 -0800 Subject: [PATCH 3/3] Update README.md --- packages/gatsby-image/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/gatsby-image/README.md b/packages/gatsby-image/README.md index ab8744f862bbf..386bdce2f7abf 100644 --- a/packages/gatsby-image/README.md +++ b/packages/gatsby-image/README.md @@ -78,7 +78,7 @@ plugins: [ ## How to use -This is what a component using `gatsby-images` looks like: +This is what a component using `gatsby-image` looks like: ```jsx import React from "react";