From 43f0d7a64f4909fbc49b4e200df383e1e95de328 Mon Sep 17 00:00:00 2001 From: Manu Chaudhary Date: Thu, 25 Nov 2021 10:26:40 +0530 Subject: [PATCH] Issue 49 - Lqip doesn't work with restrict unnamed transformation --- README.md | 12 ++++++++- package-lock.json | 43 ++++++++++++++++----------------- package.json | 2 +- src/components/IKImage/index.js | 18 +++++++++----- tests/jest/IKImage.test.js | 19 +++++++++++++++ 5 files changed, 64 insertions(+), 30 deletions(-) diff --git a/README.md b/README.md index 8828a80..8292a5f 100644 --- a/README.md +++ b/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`.
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.
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. | @@ -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 + +``` + ### 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. diff --git a/package-lock.json b/package-lock.json index da2c732..0538d02 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "imagekitio-react", - "version": "1.0.9", + "version": "1.1.0", "lockfileVersion": 1, "requires": true, "dependencies": { @@ -3238,18 +3238,18 @@ "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=", "dev": true }, + "colorette": { + "version": "1.2.2", + "resolved": "https://registry.npmjs.org/colorette/-/colorette-1.2.2.tgz", + "integrity": "sha512-MKGMzyfeuutC/ZJ1cba9NqcNpfeqMUcYmyF1ZFY6/Cn7CNSAKx6a+s48sqLqyAiZuaP2TcqMhoo+dlwFnVxT9w==", + "dev": true + }, "colors": { "version": "1.4.0", "resolved": "https://registry.npmjs.org/colors/-/colors-1.4.0.tgz", "integrity": "sha512-a+UqTh4kgZg/SlGvfbzDHpgRu7AAQOmmqRHJnxhRZICKFUT91brVhNNt58CMWU9PsBbv3PDCZUHbVxuDiH2mtA==", "dev": true, "optional": true - }, - "colorette": { - "version": "1.2.2", - "resolved": "https://registry.npmjs.org/colorette/-/colorette-1.2.2.tgz", - "integrity": "sha512-MKGMzyfeuutC/ZJ1cba9NqcNpfeqMUcYmyF1ZFY6/Cn7CNSAKx6a+s48sqLqyAiZuaP2TcqMhoo+dlwFnVxT9w==", - "dev": true }, "combined-stream": { "version": "1.0.8", @@ -3802,21 +3802,12 @@ "safer-buffer": "^2.1.0" } }, -<<<<<<< HEAD - "electron-to-chromium": { - "version": "1.3.578", - "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.578.tgz", - "integrity": "sha512-z4gU6dA1CbBJsAErW5swTGAaU2TBzc2mPAonJb00zqW1rOraDo2zfBMDRvaz9cVic+0JEZiYbHWPw/fTaZlG2Q==", - "dev": true - }, "elegant-spinner": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/elegant-spinner/-/elegant-spinner-1.0.1.tgz", "integrity": "sha1-2wQ1IcldfjA/2PNFvtwzSc+wcp4=", "dev": true }, -======= ->>>>>>> d2d77d99e8952cad24eadbdd6db656e450d99f89 "emittery": { "version": "0.7.1", "resolved": "https://registry.npmjs.org/emittery/-/emittery-0.7.1.tgz", @@ -4574,7 +4565,8 @@ "version": "1.3.0", "resolved": "https://registry.npmjs.org/growly/-/growly-1.3.0.tgz", "integrity": "sha1-8QdIy+dq+WS3yWyTxrzCivEgwIE=", - "dev": true + "dev": true, + "optional": true }, "har-schema": { "version": "2.0.0", @@ -4810,9 +4802,9 @@ } }, "imagekit-javascript": { - "version": "1.3.6", - "resolved": "https://registry.npmjs.org/imagekit-javascript/-/imagekit-javascript-1.3.6.tgz", - "integrity": "sha512-zKr8vOvLdF/K0w6QGHuAVibneTqDxE6LRotQNTd1eUUDYdro7rrywuKqQb0XFbG43RQXdHNE+mB1RCj+/wQgIw==" + "version": "1.4.3", + "resolved": "https://registry.npmjs.org/imagekit-javascript/-/imagekit-javascript-1.4.3.tgz", + "integrity": "sha512-2582LzgGl2x0LghhhCXt6xNAss/Rkih1ABbC/eFLgEo2rRq6+LMna/OZyy39wL7t7wW06kxxAGRahX9uE+qfuQ==" }, "import-local": { "version": "3.0.2", @@ -5214,6 +5206,7 @@ "resolved": "https://registry.npmjs.org/is-wsl/-/is-wsl-2.2.0.tgz", "integrity": "sha512-fKzAra0rGJUUBwGBgNkHZuToZcn+TtXHpeCgmkMJMMYx1sQDYaCSyjJBSCa2nH1DGm7s3n1oBnohoVTBaN7Lww==", "dev": true, + "optional": true, "requires": { "is-docker": "^2.0.0" } @@ -7389,6 +7382,7 @@ "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz", "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==", "dev": true, + "optional": true, "requires": { "yallist": "^4.0.0" } @@ -7642,6 +7636,7 @@ "resolved": "https://registry.npmjs.org/node-notifier/-/node-notifier-8.0.1.tgz", "integrity": "sha512-BvEXF+UmsnAfYfoapKM9nGxnP+Wn7P91YfXmrKnfcYCx6VBeoN5Ez5Ogck6I8Bi5k4RlpqRYaw75pAwzX9OphA==", "dev": true, + "optional": true, "requires": { "growly": "^1.3.0", "is-wsl": "^2.2.0", @@ -7656,6 +7651,7 @@ "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.4.tgz", "integrity": "sha512-tCfb2WLjqFAtXn4KEdxIhalnRtoKFN7nAwj0B3ZXCbQloV2tq5eDbcTmT68JJD3nRJq24/XgxtQKFIpQdtvmVw==", "dev": true, + "optional": true, "requires": { "lru-cache": "^6.0.0" } @@ -7665,6 +7661,7 @@ "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz", "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==", "dev": true, + "optional": true, "requires": { "isexe": "^2.0.0" } @@ -8903,7 +8900,8 @@ "version": "0.1.1", "resolved": "https://registry.npmjs.org/shellwords/-/shellwords-0.1.1.tgz", "integrity": "sha512-vFwSUfQvqybiICwZY5+DAWIPLKsWO31Q91JSKl3UYv+K5c2QRPzn0qzec6QPu1Qc9eHYItiP3NdJqNVqetYAww==", - "dev": true + "dev": true, + "optional": true }, "signal-exit": { "version": "3.0.3", @@ -9987,7 +9985,8 @@ "version": "4.0.0", "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz", "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==", - "dev": true + "dev": true, + "optional": true }, "yargs": { "version": "15.4.1", diff --git a/package.json b/package.json index 41c8d29..5b7f610 100755 --- a/package.json +++ b/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", diff --git a/src/components/IKImage/index.js b/src/components/IKImage/index.js index 2885386..9c51eb3 100755 --- a/src/components/IKImage/index.js +++ b/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; diff --git a/tests/jest/IKImage.test.js b/tests/jest/IKImage.test.js index 9b03b5d..0edf726 100644 --- a/tests/jest/IKImage.test.js +++ b/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( + + ); + + 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', () => {