diff --git a/next-cloudinary/src/helpers/getCldImageUrl.ts b/next-cloudinary/src/helpers/getCldImageUrl.ts index 6af3d44a..12e555a4 100644 --- a/next-cloudinary/src/helpers/getCldImageUrl.ts +++ b/next-cloudinary/src/helpers/getCldImageUrl.ts @@ -12,8 +12,35 @@ export type GetCldImageUrlConfig = ConfigOptions; export type GetCldImageUrlAnalytics = AnalyticsOptions; export function getCldImageUrl(options: GetCldImageUrlOptions, config?: GetCldImageUrlConfig, analytics?: GetCldImageUrlAnalytics) { + let modifiedOptions = { ...options }; + + const isAutoPad = String(modifiedOptions.crop) === 'auto_pad'; + + if (isAutoPad) { + const existingRawTransformations = modifiedOptions.rawTransformations || []; + const rawTransformations = Array.isArray(existingRawTransformations) + ? [...existingRawTransformations] + : [existingRawTransformations]; + + if (String(modifiedOptions.gravity) === 'auto') { + const { gravity, ...optionsWithoutGravity } = modifiedOptions; + modifiedOptions = optionsWithoutGravity; + rawTransformations.push('g_auto'); + } + + if (modifiedOptions.aspectRatio) { + const { aspectRatio, ...optionsWithoutAspectRatio } = modifiedOptions; + modifiedOptions = optionsWithoutAspectRatio; + rawTransformations.push(`ar_${aspectRatio}`); + } + + if (rawTransformations.length > 0) { + modifiedOptions.rawTransformations = rawTransformations; + } + } + return constructCloudinaryUrl({ - options, + options: modifiedOptions, config: getCloudinaryConfig(config), analytics: getCloudinaryAnalytics(analytics) }); diff --git a/next-cloudinary/tests/helpers/getCldImageUrl.spec.js b/next-cloudinary/tests/helpers/getCldImageUrl.spec.js index 54c52d78..54456fc0 100644 --- a/next-cloudinary/tests/helpers/getCldImageUrl.spec.js +++ b/next-cloudinary/tests/helpers/getCldImageUrl.spec.js @@ -28,6 +28,44 @@ describe('Cloudinary', () => { expect(url).toContain(`https://res.cloudinary.com/${cloudName}/image/upload/c_limit,w_100/f_auto/q_auto/v1/turtle`); }); + + it('should support auto_pad crop mode with auto gravity', () => { + const cloudName = 'customtestcloud'; + + process.env.NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME = cloudName; + + const url = getCldImageUrl({ + src: 'turtle', + width: 960, + aspectRatio: '16:9', + crop: 'auto_pad', + gravity: 'auto' + }); + + expect(url).toContain('c_auto_pad'); + expect(url).toContain('g_auto'); + expect(url).toContain('ar_16:9'); + expect(url).toContain('w_960'); + }); + + it('should support auto_pad crop mode with width and height', () => { + const cloudName = 'customtestcloud'; + + process.env.NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME = cloudName; + + const url = getCldImageUrl({ + src: 'turtle', + width: 960, + height: 540, + crop: 'auto_pad', + gravity: 'auto' + }); + + expect(url).toContain('c_auto_pad'); + expect(url).toContain('g_auto'); + expect(url).toContain('w_960'); + expect(url).toContain('h_540'); + }); }); describe('Config', () => {