How can I use CDN for Media files.

[dipankarmaikap]

I've an AWS CDN set up for my sites media files, But when I do Gatsby develop or Gatsby build it still downloads files from the WordPress site not using the CDN. How can I use CDN for the media files.

[8ctopotamus]

Here are a few ideas to try:

Post/Page/CPT Content

First confirm that you see the CDN URLs in the_content of posts/pages/ctps in the GraphQL IDE in your WP Site.

Once confirmed, to allow the_content to use the CDN URLs instead of generating Gatsby Images, add this option to your gatsby-source-wordpress-experimental config object:

{
  resolve: `gatsby-source-wordpress-experimental`,
  options: {
    html: {
      createStaticFiles: false, // +
      useGatsbyImage: false, // +
    },
  }
}  

Featured Image

Depending on the CDN plugin you're using, it may not may not modify the FeaturedImage URLs. You do get a lot of information on the featuredImage node with which you could build the CDN URL in your JSX, otherwise you always have the option on modifying the output of WPGraphQL on the Wordpress side to suit your needs: https://www.wpgraphql.com/docs/graphql-resolvers/

[TylerBarnes]

Hi @dipankarmaikap , for MediaItem nodes you will need to make sure that WPGraphQL points to the CDN url for the MediaItem.sourceUrl field (or MediaItem.mediaItemUrl if sourceUrl isn't available). For images in html those will work as is but won't be transformed into optimized Gatsby images, if you want that feature please vote for it here https://portal.gatsbyjs.com/gatsby-cloud/p/gatsby-source-wordpress-allow-non-wp-hosted-images-in-html