Merge pull request #311 from kaliber5/imgix-custom-params

Support custom parameters for imgix provider
simonihmig · Jul 23, 2021 · 013d44e · 013d44e
2 parents a8d3483 + c9a4c36
commit 013d44e
Show file tree

Hide file tree

Showing 4 changed files with 31 additions and 1 deletion.
diff --git a/addon/helpers/responsive-image-imgix-provider.ts b/addon/helpers/responsive-image-imgix-provider.ts
@@ -10,6 +10,7 @@ interface ImgixConfig {
 }
 
 interface ImgixOptions {
+  params?: Record<string, string | number>;
   formats?: ImageType[];
 }
 
@@ -35,6 +36,12 @@ export const provider = (
       params.set('w', String(width));
       params.set('fit', 'max');
 
+      if (options.params) {
+        for (const [key, value] of Object.entries(options.params)) {
+          params.set(key, String(value));
+        }
+      }
+
       return url.toString();
     },
   };

diff --git a/docs/providers/imgix.md b/docs/providers/imgix.md
@@ -6,6 +6,16 @@
 <ResponsiveImage @src={{responsive-image-imgix-provider "path/to/image.jpg"}}/>
 ```
 
+### Custom parameters
+
+Besides the transformations that the addon itself implicitly adds (related to resizing images)
+you can add your own [imgix parameters](https://docs.imgix.com/apis/rendering) by passing a `params` hash:
+
+```hbs
+<ResponsiveImage @src={{responsive-image-imgix-provider "path/to/image.jpg" params=(hash monochrome="44768B" px=10)}}/>
+```
+
+
 ### Image formats
 
 By default, all image formats supported by imgix (PNG, JPEG, WEBP, but no AVIF yet) are referenced in the generated `<source>` tags.

diff --git a/tests/dummy/app/templates/index.hbs b/tests/dummy/app/templates/index.hbs
@@ -9,7 +9,7 @@
 
 <h2>imgix</h2>
 
-<ResponsiveImage @src={{responsive-image-imgix-provider "pages/approach/agile_2000x1200.jpg"}} @width={{320}}/>
+<ResponsiveImage @src={{responsive-image-imgix-provider "pages/approach/agile_2000x1200.jpg" params=(hash monochrome="44768B")}} @width={{320}}/>
 
 <h2>Local</h2>
 

diff --git a/tests/integration/helpers/responsive-image-imgix-provider-test.ts b/tests/integration/helpers/responsive-image-imgix-provider-test.ts
@@ -44,6 +44,19 @@ module(
       );
     });
 
+    test('it supports custom params', async function (assert) {
+      await render(
+        hbs`{{dump (responsive-image-imgix-provider "foo/bar.jpg" params=(hash monochrome="44768B" px=10))}}`
+      );
+
+      const data = getData() as ProviderResult;
+
+      assert.equal(
+        data.imageUrlFor(100, 'jpeg'),
+        'https://kaliber5.imgix.net/foo/bar.jpg?fm=jpg&w=100&fit=max&monochrome=44768B&px=10'
+      );
+    });
+
     test('it supports custom image formats', async function (assert) {
       await render(
         hbs`{{dump (responsive-image-imgix-provider "foo/bar.jpg" formats=(array "webp" "jpeg"))}}`