diff --git a/packages/gatsby-plugin-sharp/src/index.js b/packages/gatsby-plugin-sharp/src/index.js index 72fa2a935b32b..83f476f58e3a8 100644 --- 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 index d60ad3d40bccf..d7c1e92e70694 100644 --- 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 index bf67249770767..4867f02fcbca0 100644 --- 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)