From b5a0bc1c46293f97c5cdb09dee86e3f0b823f452 Mon Sep 17 00:00:00 2001 From: raae Date: Sun, 28 Jul 2024 21:50:01 +0200 Subject: [PATCH] fix: ignoring gatsby image sizing and format --- plugin/gatsby-plugin-image/asset-data.js | 3 +- .../gatsby-plugin-image/generate-asset-url.js | 15 +++-- .../generate-asset-url.test.js | 64 +++++++++++++++++-- plugin/gatsby-plugin-image/resolve-asset.js | 3 + 4 files changed, 73 insertions(+), 12 deletions(-) diff --git a/plugin/gatsby-plugin-image/asset-data.js b/plugin/gatsby-plugin-image/asset-data.js index f5a5bd1..7c781d6 100644 --- a/plugin/gatsby-plugin-image/asset-data.js +++ b/plugin/gatsby-plugin-image/asset-data.js @@ -24,7 +24,8 @@ const probeImage = async (url) => { exports.getAssetAsTracedSvg = async ({ cldAssetData, args }) => { const svgUrl = generateCloudinaryAssetUrl({ - cldAssetData: { ...cldAssetData, format: 'svg' }, + format: 'svg', + cldAssetData: cldAssetData, options: args, tracedSvg: { options: { diff --git a/plugin/gatsby-plugin-image/generate-asset-url.js b/plugin/gatsby-plugin-image/generate-asset-url.js index 8a74ddb..8b05057 100644 --- a/plugin/gatsby-plugin-image/generate-asset-url.js +++ b/plugin/gatsby-plugin-image/generate-asset-url.js @@ -6,12 +6,12 @@ const SDK_CODE = 'X'; const SDK_SEMVER = pluginPkg.version; const TECH_VERSION = gatsbyPkg.version; -const generateTransformations = ({ cldAssetData = {}, options = {} }) => { +const generateTransformations = ({ width, height, format, options = {} }) => { return [ { - fetch_format: cldAssetData.format || 'auto', - width: cldAssetData.width, - height: cldAssetData.height, + fetch_format: format || 'auto', + width: width, + height: height, raw_transformation: (options.transformations || []).join(','), }, ...(options.chained || []).map((transformations) => { @@ -34,13 +34,18 @@ const generateTracedSVGTransformation = ({ options, width }) => { // Create Cloudinary image URL with transformations. exports.generateCloudinaryAssetUrl = ({ + width, + height, + format, cldAssetData = {}, options = {}, flags, tracedSvg, }) => { const transformation = generateTransformations({ - cldAssetData, + width, + height, + format, options, }); diff --git a/plugin/gatsby-plugin-image/generate-asset-url.test.js b/plugin/gatsby-plugin-image/generate-asset-url.test.js index c5a6434..82b9954 100644 --- a/plugin/gatsby-plugin-image/generate-asset-url.test.js +++ b/plugin/gatsby-plugin-image/generate-asset-url.test.js @@ -13,21 +13,28 @@ describe('generateCloudinaryAssetUrl', () => { const cldAssetData = { publicId: 'public-id', cloudName: 'cloud-name', - width: 400, - height: 600, - format: 'jpg', + width: 2450, + height: 4503, + format: 'png', }; describe('generates correct Cloudinary url', () => { - it('when no options', () => { - const url = generateCloudinaryAssetUrl({ cldAssetData }); + it('when no transformation', () => { + const url = generateCloudinaryAssetUrl({ + height: 600, + width: 400, + cldAssetData: cldAssetData, + }); expect(url).toBe( - `http://res.cloudinary.com/cloud-name/image/upload/f_jpg,h_600,w_400/public-id?_a=${ANALYTICS_CODE}` + `http://res.cloudinary.com/cloud-name/image/upload/f_auto,h_600,w_400/public-id?_a=${ANALYTICS_CODE}` ); }); it('with transformations option', () => { const url = generateCloudinaryAssetUrl({ + height: 600, + width: 400, + format: 'jpg', cldAssetData: cldAssetData, options: { transformations: ['e_grayscale', 'e_pixelate'], @@ -40,6 +47,9 @@ describe('generateCloudinaryAssetUrl', () => { it('with chained option', () => { const url = generateCloudinaryAssetUrl({ + height: 600, + width: 400, + format: 'jpg', cldAssetData: cldAssetData, options: { chained: ['t_lwj', 'e_pixelate'], @@ -52,6 +62,9 @@ describe('generateCloudinaryAssetUrl', () => { it('with secure option set to true', () => { const url = generateCloudinaryAssetUrl({ + height: 600, + width: 400, + format: 'jpg', cldAssetData: cldAssetData, options: { secure: true, @@ -64,6 +77,9 @@ describe('generateCloudinaryAssetUrl', () => { it('with secure cldAssetData set to true', () => { const url = generateCloudinaryAssetUrl({ + height: 600, + width: 400, + format: 'jpg', cldAssetData: { ...cldAssetData, secure: true }, }); expect(url).toBe( @@ -73,6 +89,9 @@ describe('generateCloudinaryAssetUrl', () => { it('with secure cldAssetData set to true and secure option set to false', () => { const url = generateCloudinaryAssetUrl({ + height: 600, + width: 400, + format: 'jpg', cldAssetData: { ...cldAssetData, secure: true }, options: { secure: false }, }); @@ -83,6 +102,9 @@ describe('generateCloudinaryAssetUrl', () => { it('with custom secure_distribution option and secure option set to true', () => { const url = generateCloudinaryAssetUrl({ + height: 600, + width: 400, + format: 'jpg', cldAssetData: cldAssetData, options: { secure: true, @@ -96,6 +118,9 @@ describe('generateCloudinaryAssetUrl', () => { it('with custom secure_distribution cldAssetData and secure option set to true', () => { const url = generateCloudinaryAssetUrl({ + height: 600, + width: 400, + format: 'jpg', cldAssetData: { ...cldAssetData, secureDistribution: 'example.com' }, options: { secure: true, @@ -108,6 +133,9 @@ describe('generateCloudinaryAssetUrl', () => { it('with custom secure_distribution cldAssetData and secure cldAssetData set to true', () => { const url = generateCloudinaryAssetUrl({ + height: 600, + width: 400, + format: 'jpg', cldAssetData: { ...cldAssetData, secureDistribution: 'example.com', @@ -121,6 +149,9 @@ describe('generateCloudinaryAssetUrl', () => { it('with custom cname option/cldAssetData and secure option set to false', () => { const url = generateCloudinaryAssetUrl({ + height: 600, + width: 400, + format: 'jpg', cldAssetData: { ...cldAssetData, cname: 'example-shoud-be-overriden.com', @@ -137,6 +168,9 @@ describe('generateCloudinaryAssetUrl', () => { it('with custom cname option and secure cldAssetData set to false', () => { const url = generateCloudinaryAssetUrl({ + height: 600, + width: 400, + format: 'jpg', cldAssetData: { ...cldAssetData, secure: false }, options: { cname: 'example.com', @@ -149,6 +183,9 @@ describe('generateCloudinaryAssetUrl', () => { it('with custom cname cldAssetData and secure cldAssetData set to false', () => { const url = generateCloudinaryAssetUrl({ + height: 600, + width: 400, + format: 'jpg', cldAssetData: { ...cldAssetData, secure: false, cname: 'example.com' }, }); expect(url).toBe( @@ -158,6 +195,9 @@ describe('generateCloudinaryAssetUrl', () => { it('for private_cdn option set to true and secure option set to true', () => { const url = generateCloudinaryAssetUrl({ + height: 600, + width: 400, + format: 'jpg', cldAssetData: cldAssetData, options: { secure: true, @@ -171,6 +211,9 @@ describe('generateCloudinaryAssetUrl', () => { it('for private_cdn cldAssetData set to true and secure option set to true', () => { const url = generateCloudinaryAssetUrl({ + height: 600, + width: 400, + format: 'jpg', cldAssetData: { ...cldAssetData, privateCdn: true }, options: { secure: true, @@ -183,6 +226,9 @@ describe('generateCloudinaryAssetUrl', () => { it('for private_cdn option set to true and secure option set to false', () => { const url = generateCloudinaryAssetUrl({ + height: 600, + width: 400, + format: 'jpg', cldAssetData: cldAssetData, options: { secure: false, @@ -196,6 +242,9 @@ describe('generateCloudinaryAssetUrl', () => { it('for private_cdn and secure in both cldAssetData and options', () => { const url = generateCloudinaryAssetUrl({ + height: 600, + width: 400, + format: 'jpg', cldAssetData: { ...cldAssetData, privateCdn: false, secure: true }, options: { secure: false, @@ -209,6 +258,9 @@ describe('generateCloudinaryAssetUrl', () => { it('generates correct Cloudinary url in traced SVG mode', () => { const url = generateCloudinaryAssetUrl({ + height: 600, + width: 400, + format: 'jpg', cldAssetData: cldAssetData, tracedSvg: { options: { diff --git a/plugin/gatsby-plugin-image/resolve-asset.js b/plugin/gatsby-plugin-image/resolve-asset.js index 7471c8d..4b77fd0 100644 --- a/plugin/gatsby-plugin-image/resolve-asset.js +++ b/plugin/gatsby-plugin-image/resolve-asset.js @@ -16,6 +16,9 @@ const { resolverReporter } = require('./resolver-reporter'); const generateCloudinaryImageSource = (cldAssetData) => (_filename, width, height, format, _fit, options) => { const cloudinarySrcUrl = generateCloudinaryAssetUrl({ + width, + height, + format, cldAssetData, options, });