Merge pull request #52 from imagekit-developer/lqip-raw-parameter

Issue 49 - Lqip doesn't work with restrict unnamed transformation

README.md

@@ -178,7 +178,7 @@ The `IKImage` component renders an `img` tag. It is used for rendering and manip
 | transformationPosition | String |Optional. The default value is `path` that places the transformation string as a URL path parameter. It can also be specified as `query`, which adds the transformation string as the URL's query parameter i.e.`tr`. If you use `src` parameter to create the URL, then the transformation string is always added as a query parameter. |
 | queryParameters  | Object |Optional. These are the other query parameters that you want to add to the final URL. These can be any query parameters and not necessarily related to ImageKit. Especially useful if you want to add some versioning parameter to your URLs. |
 | loading  | String |Optional. Pass `lazy` to lazy load images. Note: Component does not accept change in this value after it has mounted. |
-| lqip  | Object |Optional. You can use this to show a low-quality blurred placeholder while the original image is being loaded e.g. `{active:true, quality: 20, blur: 6`}. The default value of `quality` is `20` and `blur` is `6`. <br /> Note: Component does not accept change in this value after it has mounted.|
+| lqip  | Object |Optional. You can use this to show a low-quality blurred placeholder while the original image is being loaded e.g. `{active:true, quality: 20, blur: 6, raw: "n-lqip_named_transformation"`}. The default value of `quality` is `20`, and `blur` is `6`. If `raw` transformation is provided, SDK uses that and ignores the `quality` and `blur` parameters. <br /> Note: Component does not accept change in this value after it has mounted.|
 
 ### Basic resizing examples
 
@@ -292,6 +292,7 @@ See the complete list of transformations supported in ImageKit [here](https://do
 | effectContrast | e-contrast |
 | effectGray | e-grayscale |
 | original | orig |
+| raw | The string provided in raw will be added in the URL as it is. |
 
 </details>
 
@@ -366,6 +367,15 @@ By default, the SDK uses the `quality:20` and `blur:6`. You can change this. For
 />
 ```
 
+You can also specify a `raw` transformation if you want more control over the URL of the low-quality image placeholder. In this case, the SDK ignores `quality` and `blur` parameters.
+
+```js
+<IKImage
+  path="/default-image.jpg"
+  lqip={{active:true, raw: "n-lqip_named_transformation"}}
+/>
+```
+
 ### Combining lazy loading with low-quality placeholders
 You have the option to lazy-load the original image only when the user scrolls near them. Until then, only a low-quality placeholder is loaded. This saves a lot of network bandwidth if the user never scrolls further down.
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "imagekitio-react",
-  "version": "1.0.11",
+  "version": "1.1.0",
   "description": "React SDK for ImageKit.io which implements client-side upload and URL generation for use inside a react application.",
   "scripts": {
     "build": "rm -rf dist*;rollup -c",

src/components/IKImage/index.js

@@ -20,7 +20,7 @@ class IKImage extends ImageKitComponent {
       lqipSrc: lqipSrc,
       originalSrcLoaded: false,
       intersected: false,
-	    contextOptions : {}
+      contextOptions: {}
     };
   }
 
@@ -45,10 +45,16 @@ class IKImage extends ImageKitComponent {
       var quality = parseInt((lqip.quality || lqip.threshold), 10) || 20;
       var blur = parseInt((lqip.blur || lqip.blur), 10) || 6;
       var newTransformation = options.transformation ? [...options.transformation] : [];
-      newTransformation.push({
-        quality,
-        blur
-      })
+      if (lqip.raw && typeof lqip.raw === "string" && lqip.raw.trim() != "") {
+        newTransformation.push({
+          raw: lqip.raw.trim()
+        });
+      } else {
+        newTransformation.push({
+          quality,
+          blur
+        })
+      }
       result.lqipSrc = ikClient.url({
         ...options,
         transformation: newTransformation
@@ -128,7 +134,7 @@ class IKImage extends ImageKitComponent {
 
   componentDidMount() {
     this.updateImageUrl();
-	  this.setState({ contextOptions : this.getContext() });
+    this.setState({ contextOptions: this.getContext() });
 
     const image = this.imageRef.current;
     const { lqip, loading } = this.props;

tests/jest/IKImage.test.js

@@ -173,6 +173,25 @@ describe('IKImage', () => {
         expect(ikImage.find('img').prop('src')).toEqual(transformURL);
         expect(ikImage.find('img').prop('id')).toEqual('lqip');
       });
+
+      test("lqip with raw transformation", () => {
+        const ikImage = shallow(
+          <IKImage
+            urlEndpoint={urlEndpoint}
+            lqip={{ active: true, quality: 50, blur: 25, raw: "n-lqip" }}
+            path={nestedImagePath}
+            transformation={[{
+              named: "thumbnail"
+            }]}
+            id="lqip"
+          />
+        );
+
+        const transformURL = `${urlEndpoint}/tr:n-thumbnail:n-lqip${nestedImagePath}?${global.SDK_VERSION}`;
+        expect(ikImage.find('img').prop('src')).toEqual(transformURL);
+        expect(ikImage.find('img').prop('id')).toEqual('lqip');
+      });
+
     });
 
     describe('Transformation', () => {