Skip to content

Commit

Permalink
Add sample code showing off gatsby-image + image processing to query …
Browse files Browse the repository at this point in the history
…with GraphQL page (#3589)

* Add sample code showing off gatsby-image + image processing to query with GraphQL page

* Update querying-with-graphql.md

* Update README.md
  • Loading branch information
KyleAMathews authored Jan 18, 2018
1 parent 2cec6f5 commit 9f8c2a5
Show file tree
Hide file tree
Showing 2 changed files with 29 additions and 2 deletions.
27 changes: 27 additions & 0 deletions docs/docs/querying-with-graphql.md
Original file line number Diff line number Diff line change
Expand Up @@ -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-image` looks like:

```jsx
import React from "react";
import Img from "gatsby-image";
export default ({ data }) => (
<div>
<h1>Hello gatsby-image</h1>
<Img resolutions={data.file.childImageSharp.resolutions} />
</div>
);
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/)
Expand Down
4 changes: 2 additions & 2 deletions packages/gatsby-image/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand All @@ -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
Expand Down

0 comments on commit 9f8c2a5

Please sign in to comment.