Configuring Source Plugins for Image CDN

Contentful

In your gatsby-source-contentful plugin options, make sure the downloadLocal plugin option is not enabled. It’s disabled by default so check your gatsby-config.js and disable it by removing it from your config if it’s enabled.

Any existing queries in your site which use the gatsbyImageData field can be swapped out to use the new gatsbyImagefield. See the section above for more info on differences between these fields.

Query example:

query {
  allContentfulBlogPost {
    nodes {
      heroImage {
        gatsbyImage(width: 1000)
      }
    }
  }
}

The result of data.allContentfulBlogPost.nodes[].heroImage.gatsbyImage should be added as the image prop on the <GatsbyImage /> component.

Example:

<GatsbyImage image={heroImage.gatsbyImage} />

WordPress

For the WP integration you will need to turn off local file node fetching. This option is enabled by default so this is required.

In gatsby-config.js:

module.exports = {
	plugins: [
		{
	    resolve: `gatsby-source-wordpress`,
	    options: {
	      url: process.env.WPGRAPHQL_URL,
	      type: {
	        MediaItem: {
	          createFileNodes: false,
	        },
	      },
	    },
	  }
		]
}

As long as you haven’t turned off html Gatsby Images (with the html.useGatsbyImage plugin option) html fields like the post content will use the new image CDN automatically. Check your gatsby-config.js to make sure you haven’t disabled this option. If you have, enable it by removing the option from your config.

You can also query for Gatsby Image data on connected media item nodes via GraphQL. Example:

query {
  allWpPost {
    nodes {
      featuredImage {
        node {
          gatsbyImage(width: 1000)
        }
      }
    }
  }
}

The result of data.allWpPost.nodes[].featuredImage.node.gatsbyImage should be added as the image prop on the <GatsbyImage /> component.

Example:

<GatsbyImage image={featuredImage.node.gatsbyImage} />