fix: ignoring gatsby image sizing and format

cloudinary-community · Jul 28, 2024 · ebf84be · ebf84be
1 parent 2d98c60
commit ebf84be
Show file tree

Hide file tree

Showing 4 changed files with 73 additions and 12 deletions.
diff --git 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
@@ -6,12 +6,12 @@ const SDK_CODE = 'X';
 const SDK_SEMVER = pluginPkg.version;
 const TECH_VERSION = gatsbyPkg.version;
 
-const generateTransformations = ({ cldAssetData = {}, options = {} }) => {
+const generateTransformations = ({ height, width, 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
@@ -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
@@ -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,
     });