fixing social iamges, addressing tests

cloudinary-community · Feb 21, 2024 · 0d5f847 · 0d5f847
1 parent 86c2b2f
commit 0d5f847
Show file tree

Hide file tree

Showing 4 changed files with 47 additions and 49 deletions.
diff --git a/next-cloudinary/src/helpers/getCldOgImageUrl.ts b/next-cloudinary/src/helpers/getCldOgImageUrl.ts
@@ -18,6 +18,7 @@ export function getCldOgImageUrl(options: GetCldOgImageUrlOptions) {
     crop: options.crop || {
       crop: 'fill',
       gravity: 'center',
+      source: true
     }
   });
 }
diff --git a/next-cloudinary/src/loaders/cloudinary-loader.ts b/next-cloudinary/src/loaders/cloudinary-loader.ts
@@ -50,6 +50,7 @@ export function cloudinaryLoader({ loaderOptions, imageProps, cldOptions, cldCon
     // The Fill option does not allow someone to pass in a width or a height
     // If this is the case, we still need to define a width for sizing optimization but also
     // for responsive sizing to take effect, so we can utilize the loader width for the base width
+    options.width = loaderOptions?.width;
   }
 
   // @ts-ignore

diff --git a/next-cloudinary/tests/helpers/getCldOgImageUrl.spec.js b/next-cloudinary/tests/helpers/getCldOgImageUrl.spec.js
@@ -1,5 +1,5 @@
 import { getCldOgImageUrl } from '../../src/helpers/getCldOgImageUrl';
-import { OG_IMAGE_WIDTH, OG_IMAGE_WIDTH, OG_IMAGE_HEIGHT } from '../../src/constants/sizes';
+import { OG_IMAGE_WIDTH, OG_IMAGE_HEIGHT } from '../../src/constants/sizes';
 
 describe('Cloudinary', () => {
   const OLD_ENV = process.env;

diff --git a/next-cloudinary/tests/loaders/cloudinary-loader.spec.js b/next-cloudinary/tests/loaders/cloudinary-loader.spec.js
@@ -31,20 +31,28 @@ describe('Cloudinary Loader', () => {
 
     it('should return a Cloudinary URL with advanced options', () => {
       const imageProps = {
-        width: '987',
-        height: '1481',
+        width: 987,
+        height: 1481,
         src: 'images/woman-headphones',
         sizes: '100vw',
       }
 
       const loaderOptions = {
         src: 'images/woman-headphones',
-        width: 987
+        width: 987,
       }
 
       const cldOptions = {
         removeBackground: true,
-        crop: 'thumb',
+        crop: [
+          {
+            crop: 'thumb',
+            source: true
+          },
+          {
+            crop: 'scale'
+          }
+        ],
         gravity: 'faces',
         tint: '40:253f8c',
         underlays: [
@@ -59,7 +67,9 @@ describe('Cloudinary Loader', () => {
 
       const result = cloudinaryLoader({ loaderOptions, imageProps, cldOptions, cldConfig });
 
-      expect(result).toContain('https://res.cloudinary.com/test-cloud/image/upload/e_background_removal/c_thumb,w_987,h_1481,g_faces/e_tint:40:253f8c/u_images:city-skyline,w_987,h_987,c_fill/fl_layer_apply,fl_no_overflow/f_auto/q_auto/v1/images/woman-headphones')
+      // Note: g_auto is expected in the initial transformation as we can't infer usage of
+      // gravity for which transformation to apply it to via URL Loader
+      expect(result).toContain(`https://res.cloudinary.com/test-cloud/image/upload/e_background_removal/c_thumb,w_987,h_1481,g_auto/e_tint:40:253f8c/u_images:city-skyline,w_987,h_987,c_fill/fl_layer_apply,fl_no_overflow/c_scale,w_${imageProps.width},h_${imageProps.height}/f_auto/q_auto/v1/images/woman-headphones`)
     });
 
     it('should return a Cloudinary URL with fetch features', async () => {
@@ -94,82 +104,68 @@ describe('Cloudinary Loader', () => {
       // The resulting widths should only be resized from imageProps if the value is smaller, to avoid upscaling an image
       const loaderOptions1 = { width: 2048 };
       const result1 = cloudinaryLoader({ loaderOptions: loaderOptions1, imageProps, cldOptions, cldConfig });
-      expect(result1).toContain(`https://res.cloudinary.com/test-cloud/image/fetch/c_limit,w_${imageProps.width}/c_limit,w_${loaderOptions1.width}/f_auto/q_auto/https://upload.wikimedia.org/wikipedia/commons/4/44/Jelly_cc11.jpg`)
-
-      const loaderOptions2 = { width: 3840 };
-      const result2 = cloudinaryLoader({ loaderOptions: loaderOptions2, imageProps, cldOptions, cldConfig });
-      expect(result2).toContain(`https://res.cloudinary.com/test-cloud/image/fetch/c_limit,w_${imageProps.width}/c_limit,w_${loaderOptions2.width}/f_auto/q_auto/https://upload.wikimedia.org/wikipedia/commons/4/44/Jelly_cc11.jpg`)
-
-      const loaderOptions3 = { width: 640 };
-      const result3 = cloudinaryLoader({ loaderOptions: loaderOptions3, imageProps, cldOptions, cldConfig });
-      expect(result3).toContain(`https://res.cloudinary.com/test-cloud/image/fetch/c_limit,w_${imageProps.width}/c_limit,w_${loaderOptions3.width}/f_auto/q_auto/https://upload.wikimedia.org/wikipedia/commons/4/44/Jelly_cc11.jpg`)
-    });
-
-    it('should return responsive images without upscaling for smaller images', async () => {
-      const imageProps = {
-        height: '600',
-        sizes: '100vw',
-        src: 'https://upload.wikimedia.org/wikipedia/commons/4/44/Jelly_cc11.jpg',
-        width: '960',
-        deliveryType: 'fetch'
-      }
-
-      const cldOptions = {};
-
-      // The resulting widths should only be resized from imageProps if the value is smaller, to avoid upscaling an image
-
-      const loaderOptions1 = { width: 2048 };
-      const result1 = cloudinaryLoader({ loaderOptions: loaderOptions1, imageProps, cldOptions, cldConfig });
-      expect(result1).toContain(`https://res.cloudinary.com/test-cloud/image/fetch/c_limit,w_${imageProps.width}/f_auto/q_auto/https://upload.wikimedia.org/wikipedia/commons/4/44/Jelly_cc11.jpg`)
+      expect(result1).toContain(`https://res.cloudinary.com/test-cloud/image/fetch/c_limit,w_${loaderOptions1.width}/f_auto/q_auto/https://upload.wikimedia.org/wikipedia/commons/4/44/Jelly_cc11.jpg`)
 
       const loaderOptions2 = { width: 3840 };
       const result2 = cloudinaryLoader({ loaderOptions: loaderOptions2, imageProps, cldOptions, cldConfig });
-      expect(result2).toContain(`https://res.cloudinary.com/test-cloud/image/fetch/c_limit,w_${imageProps.width}/f_auto/q_auto/https://upload.wikimedia.org/wikipedia/commons/4/44/Jelly_cc11.jpg`)
+      expect(result2).toContain(`https://res.cloudinary.com/test-cloud/image/fetch/c_limit,w_${loaderOptions2.width}/f_auto/q_auto/https://upload.wikimedia.org/wikipedia/commons/4/44/Jelly_cc11.jpg`)
 
       const loaderOptions3 = { width: 640 };
       const result3 = cloudinaryLoader({ loaderOptions: loaderOptions3, imageProps, cldOptions, cldConfig });
-      expect(result3).toContain(`https://res.cloudinary.com/test-cloud/image/fetch/c_limit,w_${imageProps.width}/c_limit,w_${loaderOptions3.width}/f_auto/q_auto/https://upload.wikimedia.org/wikipedia/commons/4/44/Jelly_cc11.jpg`)
+      expect(result3).toContain(`https://res.cloudinary.com/test-cloud/image/fetch/c_limit,w_${loaderOptions3.width}/f_auto/q_auto/https://upload.wikimedia.org/wikipedia/commons/4/44/Jelly_cc11.jpg`)
     });
 
-    it('should return a responsive images with height when crop is not limit without upscaling', async () => {
+    it('should add any resizing after any effects are added', async () => {
       const imageProps = {
-        height: '600',
+        height: 600,
         sizes: '100vw',
         src: 'https://upload.wikimedia.org/wikipedia/commons/4/44/Jelly_cc11.jpg',
-        width: '960',
+        width: 960,
         deliveryType: 'fetch',
       }
 
       const cldOptions = {
-        crop: 'fill'
+        crop: 'fill',
+        overlays: [{
+          url: 'https://user-images.githubusercontent.com/1045274/199872380-ced2b84d-fce4-4fc9-9e76-48cb4a7fb35f.png'
+        }]
       };
 
+      const urlBufer = Buffer.from(cldOptions.overlays[0].url);
+      const urlBase64 = urlBufer.toString('base64');
+      const urlParam = encodeURIComponent(urlBase64);
+
       // The resulting widths should only be resized from imageProps if the value is smaller, to avoid upscaling an image
 
       const loaderOptions1 = { width: 2048 };
       const result1 = cloudinaryLoader({ loaderOptions: loaderOptions1, imageProps, cldOptions, cldConfig });
-      expect(result1).toContain(`https://res.cloudinary.com/test-cloud/image/fetch/c_fill,w_${imageProps.width},h_${imageProps.height},g_auto/f_auto/q_auto/https://upload.wikimedia.org/wikipedia/commons/4/44/Jelly_cc11.jpg`)
+      expect(result1).toContain(`https://res.cloudinary.com/test-cloud/image/fetch/l_fetch:${urlParam}/fl_layer_apply,fl_no_overflow/c_fill,w_${loaderOptions1.width},h_${(loaderOptions1.width / imageProps.width) * imageProps.height},g_auto/f_auto/q_auto/https://upload.wikimedia.org/wikipedia/commons/4/44/Jelly_cc11.jpg`)
 
       const loaderOptions2 = { width: 3840 };
       const result2 = cloudinaryLoader({ loaderOptions: loaderOptions2, imageProps, cldOptions, cldConfig });
-      expect(result2).toContain(`https://res.cloudinary.com/test-cloud/image/fetch/c_fill,w_${imageProps.width},h_${imageProps.height},g_auto/f_auto/q_auto/https://upload.wikimedia.org/wikipedia/commons/4/44/Jelly_cc11.jpg`)
+      expect(result2).toContain(`https://res.cloudinary.com/test-cloud/image/fetch/l_fetch:${urlParam}/fl_layer_apply,fl_no_overflow/c_fill,w_${loaderOptions2.width},h_${(loaderOptions2.width / imageProps.width) * imageProps.height},g_auto/f_auto/q_auto/https://upload.wikimedia.org/wikipedia/commons/4/44/Jelly_cc11.jpg`)
 
       const loaderOptions3 = { width: 640 };
       const result3 = cloudinaryLoader({ loaderOptions: loaderOptions3, imageProps, cldOptions, cldConfig });
-      expect(result3).toContain(`https://res.cloudinary.com/test-cloud/image/fetch/c_fill,w_${imageProps.width},h_${imageProps.height},g_auto/c_limit,w_${loaderOptions3.width}/f_auto/q_auto/https://upload.wikimedia.org/wikipedia/commons/4/44/Jelly_cc11.jpg`)
+      expect(result3).toContain(`https://res.cloudinary.com/test-cloud/image/fetch/l_fetch:${urlParam}/fl_layer_apply,fl_no_overflow/c_fill,w_${loaderOptions3.width},h_${(loaderOptions3.width / imageProps.width) * imageProps.height},g_auto/f_auto/q_auto/https://upload.wikimedia.org/wikipedia/commons/4/44/Jelly_cc11.jpg`)
     });
 
-    it('should add any resizing after any effects are added', async () => {
+    it('should add two-stage resizing and cropping', async () => {
       const imageProps = {
-        height: '600',
+        height: 600,
         sizes: '100vw',
         src: 'https://upload.wikimedia.org/wikipedia/commons/4/44/Jelly_cc11.jpg',
-        width: '960',
+        width: 960,
         deliveryType: 'fetch',
       }
 
       const cldOptions = {
-        crop: 'fill',
+        crop: {
+          width: 1234,
+          height: 4321,
+          crop: 'fill',
+          source: true
+        },
         overlays: [{
           url: 'https://user-images.githubusercontent.com/1045274/199872380-ced2b84d-fce4-4fc9-9e76-48cb4a7fb35f.png'
         }]
@@ -183,15 +179,15 @@ describe('Cloudinary Loader', () => {
 
       const loaderOptions1 = { width: 2048 };
       const result1 = cloudinaryLoader({ loaderOptions: loaderOptions1, imageProps, cldOptions, cldConfig });
-      expect(result1).toContain(`https://res.cloudinary.com/test-cloud/image/fetch/c_fill,w_${imageProps.width},h_${imageProps.height},g_auto/l_fetch:${urlParam}/fl_layer_apply,fl_no_overflow/f_auto/q_auto/https://upload.wikimedia.org/wikipedia/commons/4/44/Jelly_cc11.jpg`)
+      expect(result1).toContain(`https://res.cloudinary.com/test-cloud/image/fetch/c_${cldOptions.crop.crop},w_${cldOptions.crop.width},h_${cldOptions.crop.height},g_auto/l_fetch:${urlParam}/fl_layer_apply,fl_no_overflow/c_limit,w_${loaderOptions1.width}/f_auto/q_auto/https://upload.wikimedia.org/wikipedia/commons/4/44/Jelly_cc11.jpg`)
 
       const loaderOptions2 = { width: 3840 };
       const result2 = cloudinaryLoader({ loaderOptions: loaderOptions2, imageProps, cldOptions, cldConfig });
-      expect(result2).toContain(`https://res.cloudinary.com/test-cloud/image/fetch/c_fill,w_${imageProps.width},h_${imageProps.height},g_auto/l_fetch:${urlParam}/fl_layer_apply,fl_no_overflow/f_auto/q_auto/https://upload.wikimedia.org/wikipedia/commons/4/44/Jelly_cc11.jpg`)
+      expect(result2).toContain(`https://res.cloudinary.com/test-cloud/image/fetch/c_${cldOptions.crop.crop},w_${cldOptions.crop.width},h_${cldOptions.crop.height},g_auto/l_fetch:${urlParam}/fl_layer_apply,fl_no_overflow/c_limit,w_${loaderOptions2.width}/f_auto/q_auto/https://upload.wikimedia.org/wikipedia/commons/4/44/Jelly_cc11.jpg`)
 
       const loaderOptions3 = { width: 640 };
       const result3 = cloudinaryLoader({ loaderOptions: loaderOptions3, imageProps, cldOptions, cldConfig });
-      expect(result3).toContain(`https://res.cloudinary.com/test-cloud/image/fetch/c_fill,w_${imageProps.width},h_${imageProps.height},g_auto/l_fetch:${urlParam}/fl_layer_apply,fl_no_overflow/c_limit,w_${loaderOptions3.width}/f_auto/q_auto/https://upload.wikimedia.org/wikipedia/commons/4/44/Jelly_cc11.jpg`)
+      expect(result3).toContain(`https://res.cloudinary.com/test-cloud/image/fetch/c_${cldOptions.crop.crop},w_${cldOptions.crop.width},h_${cldOptions.crop.height},g_auto/l_fetch:${urlParam}/fl_layer_apply,fl_no_overflow/c_limit,w_${loaderOptions3.width}/f_auto/q_auto/https://upload.wikimedia.org/wikipedia/commons/4/44/Jelly_cc11.jpg`)
     });
 
     it('should add any resizing when fill is set to true without a width or height', async () => {