More comments

yext · Apr 25, 2024 · b2a35ba · b2a35ba
1 parent 07039f0
commit b2a35ba
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 30 deletions.
diff --git a/static/js/formatters-internal.js b/static/js/formatters-internal.js
@@ -366,17 +366,15 @@ function _getImageFormatOptions(desiredSize, atLeastAsLarge, fullSizeWidth, full
   let desiredDims = desiredSize.split('x');
   const hasDesiredWidth = desiredDims[0] !== '';
   const hasDesiredHeight = desiredDims[1] !== '';
+  let formatOptions = ['fit=contain'];
 
   // both dimensions are not provided, return original image
   if (!hasDesiredWidth && !hasDesiredHeight) {
-    return '';
+    return `/${formatOptions.join(',')}`;
   }
 
-  const originalRatio =
-    (!!fullSizeWidth && !!fullSizeHeight) ? (fullSizeWidth / fullSizeHeight) : undefined;
   let desiredWidth;
   let desiredHeight;
-  let formatOptions = ['fit=contain'];
   if (hasDesiredWidth) {
     desiredWidth = Number.parseInt(desiredDims[0]);
     if (Number.isNaN(desiredWidth)) {
@@ -390,31 +388,29 @@ function _getImageFormatOptions(desiredSize, atLeastAsLarge, fullSizeWidth, full
     }
   }
 
-  // only width is provided
-  if (hasDesiredWidth && !hasDesiredHeight) {
-    formatOptions.push(`width=${desiredWidth}`);
+  const originalRatio =
+    (!!fullSizeWidth && !!fullSizeHeight) ? (fullSizeWidth / fullSizeHeight) : undefined;
 
-    return `/${formatOptions.join(',')}`;
-  }
+  // both dimensions are provided
+  if (hasDesiredWidth && hasDesiredHeight && originalRatio) {
+    const width = atLeastAsLarge
+      ? Math.max(desiredWidth, Math.round(desiredHeight * originalRatio))
+      : Math.min(desiredWidth, Math.round(desiredHeight * originalRatio));
+    const height = atLeastAsLarge
+      ? Math.max(desiredHeight, Math.round(desiredWidth / originalRatio))
+      : Math.min(desiredHeight, Math.round(desiredWidth / originalRatio));
 
-  // only height is provided
-  if (!hasDesiredWidth && hasDesiredHeight) {
-    formatOptions.push(`height=${desiredHeight}`);
+    formatOptions.push(`width=${width}`);
+    formatOptions.push(`height=${height}`);
 
     return `/${formatOptions.join(',')}`;
   }
 
-  // both dimensions are provided
-  if (!!originalRatio) {
-    if (atLeastAsLarge) {
-      formatOptions.push(`width=${Math.max(desiredWidth, Math.round(desiredHeight * originalRatio))}`);
-      formatOptions.push(`height=${Math.max(desiredHeight, Math.round(desiredWidth / originalRatio))}`);
-    } else {
-      formatOptions.push(`width=${Math.min(desiredWidth, Math.round(desiredHeight * originalRatio))}`);
-      formatOptions.push(`height=${Math.min(desiredHeight, Math.round(desiredWidth / originalRatio))}`);
-    }
-  } else {
+  if (hasDesiredWidth) {
     formatOptions.push(`width=${desiredWidth}`);
+  }
+
+  if (hasDesiredHeight) {
     formatOptions.push(`height=${desiredHeight}`);
   }
 

diff --git a/tests/static/js/formatters-internal/image.js b/tests/static/js/formatters-internal/image.js
@@ -145,22 +145,22 @@ describe('image formatter', () => {
 
     it('do not transform image regardless of atLeastAsLarge\'s', () => {
       let photoImgUrl = Formatters.image(photoImg, 'x', false).url;
-      expect(photoImgUrl).toEqual('https://dyn.mktgcdn.com/p/FOO');
+      expect(photoImgUrl).toEqual('https://dyn.mktgcdn.com/p/FOO/fit=contain');
       let oldFileImgUrl = Formatters.image(oldFileImg, 'x', false).url;
-      expect(oldFileImgUrl).toEqual('https://dyn.mktgcdn.com/f/0/FOO.jpg');
+      expect(oldFileImgUrl).toEqual('https://dyn.mktgcdn.com/f/0/FOO.jpg/fit=contain');
       let newFileImgUrl = Formatters.image(newFileImg, 'x', false).url;
-      expect(newFileImgUrl).toEqual('https://dyn.mktgcdn.com/f/FOO.jpg');
+      expect(newFileImgUrl).toEqual('https://dyn.mktgcdn.com/f/FOO.jpg/fit=contain');
       let euFileImgUrl = Formatters.image(euFileImg, 'x', false).url;
-      expect(euFileImgUrl).toEqual('https://dyn.eu.mktgcdn.com/f/0/FOO.jpg');
+      expect(euFileImgUrl).toEqual('https://dyn.eu.mktgcdn.com/f/0/FOO.jpg/fit=contain');
 
       photoImgUrl = Formatters.image(photoImg, 'x', true).url;
-      expect(photoImgUrl).toEqual('https://dyn.mktgcdn.com/p/FOO');
+      expect(photoImgUrl).toEqual('https://dyn.mktgcdn.com/p/FOO/fit=contain');
       oldFileImgUrl = Formatters.image(oldFileImg, 'x', true).url;
-      expect(oldFileImgUrl).toEqual('https://dyn.mktgcdn.com/f/0/FOO.jpg');
+      expect(oldFileImgUrl).toEqual('https://dyn.mktgcdn.com/f/0/FOO.jpg/fit=contain');
       newFileImgUrl = Formatters.image(newFileImg, 'x', true).url;
-      expect(newFileImgUrl).toEqual('https://dyn.mktgcdn.com/f/FOO.jpg');
+      expect(newFileImgUrl).toEqual('https://dyn.mktgcdn.com/f/FOO.jpg/fit=contain');
       euFileImgUrl = Formatters.image(euFileImg, 'x', true).url;
-      expect(euFileImgUrl).toEqual('https://dyn.eu.mktgcdn.com/f/0/FOO.jpg');
+      expect(euFileImgUrl).toEqual('https://dyn.eu.mktgcdn.com/f/0/FOO.jpg/fit=contain');
     });
   });
 });