Repository: kaliber5/ember-responsive-image
Pull request #157 (2021-02-19 22:55:56)

Update helper to support image format


Patch:
diff --git a/addon/helpers/responsive-image-resolve.ts b/addon/helpers/responsive-image-resolve.ts
index 9a394c64..98cf67f3 100644
--- a/addon/helpers/responsive-image-resolve.ts
+++ b/addon/helpers/responsive-image-resolve.ts
@@ -1,7 +1,9 @@
 import { inject as service } from '@ember/service';
 import { htmlSafe } from '@ember/string';
 import Helper from '@ember/component/helper';
-import ResponsiveImageService from 'ember-responsive-image/services/responsive-image';
+import ResponsiveImageService, {
+  ImageType,
+} from 'ember-responsive-image/services/responsive-image';
 
 /**
  * @class responsiveImageResolve
@@ -14,10 +16,14 @@ export default class ResponsiveImageResolve extends Helper {
   responsiveImage!: ResponsiveImageService;
 
   compute(
-    [image, size]: [string, number | undefined] /*, hash*/
+    [image]: [string],
+    { size, format }: { size?: number; format?: ImageType }
   ): ReturnType<typeof htmlSafe> | undefined {
-    const responsive = this.responsiveImage.getImageMetaBySize(image, size)
-      ?.image;
+    const responsive = this.responsiveImage.getImageMetaBySize(
+      image,
+      size,
+      format
+    )?.image;
 
     return responsive ? htmlSafe(responsive) : undefined;
   }
diff --git a/docs/ADVANCED.md b/docs/ADVANCED.md
index dc31775c..3da885d3 100644
--- a/docs/ADVANCED.md
+++ b/docs/ADVANCED.md
@@ -28,17 +28,15 @@ The base width to calculate the necessary image width is the `screen.width` assi
 ## Helper
 
 The `responsive-image-resolve` helper provides the image url that fits for the current screen size. The first parameter is the name of the origin image. 
-The second argument is the width in `vw` and has a default value of `100`, so it can be omitted. 
+
+Optional named arguments are:
+* `size`: the target width in `vw`. Has a default value of `100`, so it can be omitted.
+* `format`: image format. By default, the format of the original source file.
 
 ```hbs
-{{responsive-image-resolve "myImage.png" 100}}
+{{responsive-image-resolve "assets/images/myImage.png" size=50 format="webp"}}
 ```
 
-will result in
-
-```html
-/assets/images/responsive/myImage1080w.png
-```
 
 ## Extensibility hooks
 ### Extend the image processing


Test patch:
diff --git a/tests/integration/helpers/responsive-image-resolve-test.js b/tests/integration/helpers/responsive-image-resolve-test.js
index 741a7d31..b66fcf4b 100644
--- a/tests/integration/helpers/responsive-image-resolve-test.js
+++ b/tests/integration/helpers/responsive-image-resolve-test.js
@@ -13,13 +13,21 @@ module('Helper: ResponsiveImageResolve', function (hooks) {
     assert.dom('h1').hasText('/assets/images/tests/test640w.png');
   });
 
-  test('is size aware', async function (assert) {
+  test('supports size', async function (assert) {
     let service = this.owner.lookup('service:responsive-image');
     service.set('physicalWidth', 100);
     await render(
-      hbs`<h1>{{responsive-image-resolve "assets/images/tests/test.png" 45}}</h1>`
+      hbs`<h1>{{responsive-image-resolve "assets/images/tests/test.png" size=45}}</h1>`
     );
 
     assert.dom('h1').hasText('/assets/images/tests/test50w.png');
   });
+
+  test('supports format', async function (assert) {
+    await render(
+      hbs`<h1>{{responsive-image-resolve "assets/images/tests/test.png" format="webp"}}</h1>`
+    );
+
+    assert.dom('h1').hasText('/assets/images/tests/test640w.webp');
+  });
 });