feat(image-sharp): add trim option (gatsbyjs#14137)

* feat(sharp): add trim option * fix: trim option only as number
ajordanow · May 31, 2019 · cf0e77b · cf0e77b
1 parent 524817a
commit cf0e77b
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 0 deletions.
diff --git a/packages/gatsby-plugin-sharp/src/index.js b/packages/gatsby-plugin-sharp/src/index.js
@@ -154,6 +154,10 @@ async function generateBase64({ file, args, reporter }) {
     return null
   }
 
+  if (options.trim) {
+    pipeline = pipeline.trim(options.trim)
+  }
+
   const forceBase64Format =
     args.toFormatBase64 || pluginOptions.forceBase64Format
   if (forceBase64Format) {
@@ -384,6 +388,7 @@ async function fluid({ file, args = {}, reporter, cache }) {
       duotone: options.duotone,
       grayscale: options.grayscale,
       rotate: options.rotate,
+      trim: options.trim,
       toFormat: options.toFormat,
       toFormatBase64: options.toFormatBase64,
       width: base64Width,

diff --git a/packages/gatsby-plugin-sharp/src/process-file.js b/packages/gatsby-plugin-sharp/src/process-file.js
@@ -41,6 +41,7 @@ const argsWhitelist = [
   `jpegProgressive`,
   `grayscale`,
   `rotate`,
+  `trim`,
   `duotone`,
   `fit`,
   `background`,
@@ -57,6 +58,7 @@ const argsWhitelist = [
  * @property {boolean} jpegProgressive
  * @property {boolean} grayscale
  * @property {number} rotate
+ * @property {number} trim
  * @property {object} duotone
  */
 
@@ -89,6 +91,10 @@ exports.processFile = (file, transforms, options = {}) => {
 
     let clonedPipeline = transforms.length > 1 ? pipeline.clone() : pipeline
 
+    if (args.trim) {
+      clonedPipeline = clonedPipeline.trim(args.trim)
+    }
+
     if (!args.rotate) {
       clonedPipeline = clonedPipeline.rotate()
     }

diff --git a/packages/gatsby-transformer-sharp/src/extend-node-type.js b/packages/gatsby-transformer-sharp/src/extend-node-type.js
@@ -161,10 +161,22 @@ const fixedNodeType = ({
         type: ImageCropFocusType,
         defaultValue: sharp.strategy.attention,
       },
+      fit: {
+        type: ImageFitType,
+        defaultValue: sharp.fit.cover,
+      },
+      background: {
+        type: GraphQLString,
+        defaultValue: `rgba(0,0,0,1)`,
+      },
       rotate: {
         type: GraphQLInt,
         defaultValue: 0,
       },
+      trim: {
+        type: GraphQLFloat,
+        defaultValue: false,
+      },
     },
     resolve: (image, fieldArgs, context) => {
       const file = getNodeAndSavePathDependency(image.parent, context.path)
@@ -310,6 +322,10 @@ const fluidNodeType = ({
         type: GraphQLInt,
         defaultValue: 0,
       },
+      trim: {
+        type: GraphQLFloat,
+        defaultValue: false,
+      },
       sizes: {
         type: GraphQLString,
         defaultValue: ``,
@@ -488,10 +504,22 @@ module.exports = ({
           type: ImageCropFocusType,
           defaultValue: sharp.strategy.attention,
         },
+        fit: {
+          type: ImageFitType,
+          defaultValue: sharp.fit.cover,
+        },
+        background: {
+          type: GraphQLString,
+          defaultValue: `rgba(0,0,0,1)`,
+        },
         rotate: {
           type: GraphQLInt,
           defaultValue: 0,
         },
+        trim: {
+          type: GraphQLFloat,
+          defaultValue: 0,
+        },
       },
       resolve: (image, fieldArgs, context) => {
         const file = getNodeAndSavePathDependency(image.parent, context.path)