search

gatsbyjs / gatsby-source-wordpress-experimental

The upcoming v4 of gatsby-source-wordpress, currently in beta
MIT License
385 stars 100 forks source link

How can I use CDN for Media files. #363

Closed dipankarmaikap closed 3 years ago

dipankarmaikap commented 3 years ago

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 commented 3 years ago

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 commented 3 years ago

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