Skip to content

Commit

Permalink
docs(gatsby-source-contentful): Add info to readme on use with new im…
Browse files Browse the repository at this point in the history
…age plugin (#29297) (#29301)

* docs(gatsby-source-contentful): Add info to readme on use with new image plugin

* Apply suggestions from code review

Co-authored-by: LB <laurie@gatsbyjs.com>

* Add link to plugin

Co-authored-by: LB <laurie@gatsbyjs.com>
(cherry picked from commit c9d4f07)
  • Loading branch information
ascorbic committed Feb 2, 2021
1 parent 1dec045 commit 929281c
Showing 1 changed file with 38 additions and 0 deletions.
38 changes: 38 additions & 0 deletions packages/gatsby-source-contentful/README.md
Expand Up @@ -351,6 +351,44 @@ To get **all** the `CaseStudy` nodes with `ShortText` fields `id`, `slug`, `titl

When querying images you can use the `fixed`, `fluid` or `resize` nodes to get different sizes for the image (for example for using [`gatsby-image`](https://www.gatsbyjs.org/packages/gatsby-image/)). Their usage is documented at the [`gatsby-plugin-sharp`](https://www.gatsbyjs.org/packages/gatsby-plugin-sharp/) package. The only difference is that `gatsby-source-contentful` also allows setting only the `width` parameter for these node types, the height will then automatically be calculated according to the aspect ratio.

## Using the new Gatsby image plugin

You can now use the beta [gatsby-plugin-image](https://gatsbyjs.com/plugins/gatsby-plugin-image/) to display high-performance, responsive images from Contentful. This plugin is the replacement for gatsby-image, and is currently in beta, but can help deliver improved performance, with a cleaner API. Support in gatsby-source-contentful is still experimental.

To use it:

1. Install the plugins:

```shell
npm install gatsby-plugin-image gatsby-plugin-sharp
```

2. Add the plugins to your `gatsby-config.js`:

```javascript
module.exports = {
plugins: [
`gatsby-plugin-sharp`,
`gatsby-plugin-image`,
// ...etc
],
}
```

3. You can then query for image data using the new `gatsbyImageData` resolver:

```graphql
{
allContentfulBlogPost {
nodes {
heroImage {
gatsbyImageData(layout: FULL_WIDTH)
}
}
}
}
```

## More on Queries with Contentful and Gatsby

It is strongly recommended that you take a look at how data flows in a real Contentful and Gatsby application to fully understand how the queries, Node.js functions and React components all come together. Check out the example site at
Expand Down

0 comments on commit 929281c

Please sign in to comment.