diff --git a/static/js/formatters-internal.js b/static/js/formatters-internal.js index 15a0e962..132f9a91 100644 --- 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 index dedd3a00..902b9f97 100644 --- 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'); }); }); }); \ No newline at end of file