Support Cloudinary's chained transformations

simonihmig · Jul 23, 2021 · f360c27 · f360c27
1 parent 658eeeb
commit f360c27
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 11 deletions.
diff --git a/addon/helpers/responsive-image-cloudinary-provider.ts b/addon/helpers/responsive-image-cloudinary-provider.ts
@@ -42,16 +42,18 @@ export const provider = (
   return {
     imageTypes: options.formats ?? ['png', 'jpeg', 'webp', 'avif'],
     imageUrlFor(width: number, type: ImageType = 'jpeg'): string {
-      const params = [
-        `w_${width}`,
-        'c_limit',
-        'q_auto',
-        deliveryType !== 'upload' ? `f_${type}` : undefined,
-        options.transformations,
-      ];
-      return `https://res.cloudinary.com/${cloudName}/image/${deliveryType}/${params
-        .filter(Boolean)
-        .join(',')}/${imageId}${deliveryType === 'upload' ? '.' + type : ''}`;
+      let resizeParams = `w_${width},c_limit,q_auto`;
+      if (deliveryType !== 'upload') {
+        resizeParams += `,f_${type}`;
+      }
+
+      const params = options.transformations
+        ? `${options.transformations}/${resizeParams}`
+        : resizeParams;
+
+      return `https://res.cloudinary.com/${cloudName}/image/${deliveryType}/${params}/${imageId}${
+        deliveryType === 'upload' ? '.' + type : ''
+      }`;
     },
   };
 };

diff --git a/tests/integration/helpers/responsive-image-cloudinary-provider-test.ts b/tests/integration/helpers/responsive-image-cloudinary-provider-test.ts
@@ -53,7 +53,20 @@ module(
 
       assert.equal(
         data.imageUrlFor(100, 'jpeg'),
-        'https://res.cloudinary.com/kaliber5/image/upload/w_100,c_limit,q_auto,co_rgb:20a020,e_colorize:50/samples/animals/three-dogs.jpeg'
+        'https://res.cloudinary.com/kaliber5/image/upload/co_rgb:20a020,e_colorize:50/w_100,c_limit,q_auto/samples/animals/three-dogs.jpeg'
+      );
+    });
+
+    test('it supports custom chained transformations', async function (assert) {
+      await render(
+        hbs`{{dump (responsive-image-cloudinary-provider "samples/animals/three-dogs" transformations="co_rgb:20a020,e_colorize:50/ar_1.0,c_fill,w_150/r_max")}}`
+      );
+
+      const data = getData() as ProviderResult;
+
+      assert.equal(
+        data.imageUrlFor(100, 'jpeg'),
+        'https://res.cloudinary.com/kaliber5/image/upload/co_rgb:20a020,e_colorize:50/ar_1.0,c_fill,w_150/r_max/w_100,c_limit,q_auto/samples/animals/three-dogs.jpeg'
       );
     });