feat(gatsby-source-wordpress): generate webp images (#30896)

* feat(gatsby-source-wordpress): generate webp images * feat(gatsby-source-wordpress): add html.generateWebpImages plugin option * feat(gatsby-source-wordpress): add docs for html.generateWebpImages plugin option * Update declare-plugin-options-schema.ts * Update plugin-options.md Co-authored-by: Tyler Barnes <tylerdbarnes@gmail.com>
gatsbyjs · Aug 6, 2021 · fcd0b44 · fcd0b44
1 parent 59a6287
commit fcd0b44
Show file tree

Hide file tree

Showing 3 changed files with 50 additions and 0 deletions.
diff --git a/packages/gatsby-source-wordpress/docs/plugin-options.md b/packages/gatsby-source-wordpress/docs/plugin-options.md
@@ -47,6 +47,7 @@
   - [html.fallbackImageMaxWidth](#htmlfallbackimagemaxwidth)
   - [html.imageQuality](#htmlimagequality)
   - [html.createStaticFiles](#htmlcreatestaticfiles)
+  - [html.generateWebpImages](#htmlgeneratewebpimages)
 - [type](#type)
   - [type.\_\_all](#type__all)
     - [type.\_\_all.where](#type__allwhere)
@@ -960,6 +961,26 @@ When this is true, any url's which are wrapped in "", '', or () and which contai
 
 ```
 
+### html.generateWebpImages
+
+When this is true, .webp images will be generated for images in html fields in addition to the images gatsby-image normally generates.
+
+**Field type**: `Boolean`
+
+**Default value**: `false`
+
+```js
+{
+  resolve: `gatsby-source-wordpress`,
+  options: {
+    html: {
+      generateWebpImages: false,
+    },
+  },
+}
+
+```
+
 ## type
 
 Options related to specific types in the remote schema.

diff --git a/packages/gatsby-source-wordpress/src/steps/declare-plugin-options-schema.ts b/packages/gatsby-source-wordpress/src/steps/declare-plugin-options-schema.ts
@@ -642,6 +642,19 @@ When using this option, be sure to gitignore the wordpress-cache directory in th
               },
             `),
         }),
+      generateWebpImages: Joi.boolean()
+        .default(false)
+        .allow(null)
+        .description(
+          `When this is true, .webp images will be generated for images in html fields in addition to the images gatsby-image normally generates.`
+        )
+        .meta({
+          example: wrapOptions(`
+              html: {
+                generateWebpImages: false,
+              },
+            `),
+        }),
     })
       .description(`Options related to html field processing.`)
       .meta({

diff --git a/packages/gatsby-source-wordpress/src/steps/source-nodes/create-nodes/process-node.js b/packages/gatsby-source-wordpress/src/steps/source-nodes/create-nodes/process-node.js
@@ -608,6 +608,22 @@ const replaceNodeHtmlImages = async ({
               reporter,
               cache,
             })
+
+            if (pluginOptions?.html?.generateWebpImages) {
+              const webpResult = await fluid({
+                file: fileNode,
+                args: {
+                  maxWidth,
+                  quality,
+                  pathPrefix,
+                  toFormat: `WEBP`,
+                },
+                reporter,
+                cache,
+              })
+
+              fluidResult.srcSetWebp = webpResult.srcSet
+            }
           } catch (e) {
             reporter.error(e)
             reporter.warn(