From c9d4f07f7784b6e3e236c54f324669c7b0c629ae Mon Sep 17 00:00:00 2001 From: Matt Kane Date: Tue, 2 Feb 2021 15:17:40 +0000 Subject: [PATCH] docs(gatsby-source-contentful): Add info to readme on use with new image plugin (#29297) * docs(gatsby-source-contentful): Add info to readme on use with new image plugin * Apply suggestions from code review Co-authored-by: LB * Add link to plugin Co-authored-by: LB --- packages/gatsby-source-contentful/README.md | 38 +++++++++++++++++++++ 1 file changed, 38 insertions(+) diff --git a/packages/gatsby-source-contentful/README.md b/packages/gatsby-source-contentful/README.md index eddaec6481c07..9bcc639294b73 100644 --- a/packages/gatsby-source-contentful/README.md +++ b/packages/gatsby-source-contentful/README.md @@ -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