chore: release 4.8.0 🚀

scaleflex · Jul 16, 2021 · 8c73b35 · 8c73b35
1 parent 3fce406
commit 8c73b35
Show file tree

Hide file tree

Showing 19 changed files with 536 additions and 335 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -25,6 +25,31 @@ Types of changes:
 - ...
 
 -------------
+## 4.8.0 - 2021-06-16
+
+### Deprecated
+
+Property **ignoreNodeImgSize** is deprecated. Use **imageSizeAttributes: 'ignore'** instead
+
+### Added
+- new property: 
+
+##### **imageSizeAttributes**
+
+###### Type: **String** | possible values: 'use', 'ignore', 'take-ratio' | Default: **'use'** 
+
+If width and height attributes are set:
+
+**use** - width & height attributes values will be used to calculate image size (according to user's DPR) and **ratio**. 
+
+**take-ratio** - width & height attributes values will be used only to calculate **ratio**.
+
+**ignore** - width & height attributes will be ignored.
+
+If width and height attributes are NOT set, image container size will be detected to calculate result image size (according to user's DPR)
+
+*Note*: If only width or height attributes is set, ratio is going to be taken from ci-ratio image attribute
+
 ## 4.7.0 - 2020-02-23
 ### added
 - add custom root element to process function

diff --git a/README-BLUR-HASH.md b/README-BLUR-HASH.md
@@ -1,4 +1,4 @@
-[![Release](https://img.shields.io/badge/release-v4.7.0-blue.svg)](https://github.com/scaleflex/js-cloudimage-responsive/releases)
+[![Release](https://img.shields.io/badge/release-v4.8.0-blue.svg)](https://github.com/scaleflex/js-cloudimage-responsive/releases)
 [![Free plan](https://img.shields.io/badge/price-includes%20free%20plan-green.svg)](https://www.cloudimage.io/en/home#b38181a6-b9c8-4015-9742-7b1a1ad382d5)
 [![Contributions welcome](https://img.shields.io/badge/contributions-welcome-orange.svg)](#contributing)
 [![License](https://img.shields.io/badge/license-MIT-blue.svg)](https://opensource.org/licenses/MIT)
@@ -116,7 +116,7 @@ You have to pay attention on the following things:
 Add script tag with CDN link to js-cloudimage-responsive
 
 ```javascript
-<script src="https://cdn.scaleflex.it/plugins/js-cloudimage-responsive/4.7.0/blur-hash/js-cloudimage-responsive.min.js"></script>
+<script src="https://cdn.scaleflex.it/plugins/js-cloudimage-responsive/4.8.0/blur-hash/js-cloudimage-responsive.min.js"></script>
 ```
 
 or using npm
@@ -313,6 +313,23 @@ const cloudimageConfig = {
 
 List of supported device pixel ratios. If there is no need to support retina devices, you should set empty array `devicePixelRatioList: []`
 
+### imageSizeAttributes
+
+###### Type: **String** | possible values: 'use', 'ignore', 'take-ratio' | Default: **'use'** 
+
+If width and height attributes are set:
+
+**use** - width & height attributes values will be used to calculate image size (according to user's DPR) and **ratio**. 
+
+**take-ratio** - width & height attributes values will be used only to calculate **ratio**.
+
+**ignore** - width & height attributes will be ignored.
+
+If width and height attributes are NOT set, image container size will be detected to calculate result image size (according to user's DPR)
+
+*Note*: If only width or height attributes is set, ratio is going to be taken from ci-ratio image attribute
+
+
 ## <a name="image_properties"></a> Image properties
 
 Cloudimage responsive plugin will make image on your page responsive if you replace the `src` with `ci-src` attribute in the `<img>` tag:
@@ -450,7 +467,7 @@ add the following scripts right after js-cloudimage-responsive script
   window.lazySizesConfig = window.lazySizesConfig || {};
   window.lazySizesConfig.init = false;
 </script>
-<script src="https://cdn.scaleflex.it/plugins/js-cloudimage-responsive/4.7.0/blur-hash/js-cloudimage-responsive.min.js"></script>
+<script src="https://cdn.scaleflex.it/plugins/js-cloudimage-responsive/4.8.0/blur-hash/js-cloudimage-responsive.min.js"></script>
 <script src="https://cdn.scaleflex.it/filerobot/js-cloudimage-responsive/lazysizes.min.js"></script>
 ```
 

diff --git a/README-PLAIN.md b/README-PLAIN.md
@@ -1,4 +1,4 @@
-[![Release](https://img.shields.io/badge/release-v4.7.0-blue.svg)](https://github.com/scaleflex/js-cloudimage-responsive/releases)
+[![Release](https://img.shields.io/badge/release-v4.8.0-blue.svg)](https://github.com/scaleflex/js-cloudimage-responsive/releases)
 [![Free plan](https://img.shields.io/badge/price-includes%20free%20plan-green.svg)](https://www.cloudimage.io/en/home#b38181a6-b9c8-4015-9742-7b1a1ad382d5)
 [![Contributions welcome](https://img.shields.io/badge/contributions-welcome-orange.svg)](#contributing)
 [![License](https://img.shields.io/badge/license-MIT-blue.svg)](https://opensource.org/licenses/MIT)
@@ -110,7 +110,7 @@ This version of plugin doesn't add any CSS or change layout thus no effect on yo
 Add script tag with CDN link to js-cloudimage-responsive
 
 ```javascript
-<script src="https://cdn.scaleflex.it/plugins/js-cloudimage-responsive/4.7.0/plain/js-cloudimage-responsive.min.js"></script>
+<script src="https://cdn.scaleflex.it/plugins/js-cloudimage-responsive/4.8.0/plain/js-cloudimage-responsive.min.js"></script>
 ```
 
 or using npm
@@ -310,6 +310,22 @@ ciResponsive.init();
 
 Breakpoints shortcuts to use in image size property, can be overwridden.
 
+### imageSizeAttributes
+
+###### Type: **String** | possible values: 'use', 'ignore', 'take-ratio' | Default: **'use'** 
+
+If width and height attributes are set:
+
+**use** - width & height attributes values will be used to calculate image size (according to user's DPR) and **ratio**. 
+
+**take-ratio** - width & height attributes values will be used only to calculate **ratio**.
+
+**ignore** - width & height attributes will be ignored.
+
+If width and height attributes are NOT set, image container size will be detected to calculate result image size (according to user's DPR)
+
+*Note*: If only width or height attributes is set, ratio is going to be taken from ci-ratio image attribute
+
 ## <a name="image_properties"></a> Image properties
 
 Cloudimage responsive plugin will make image on your page responsive if you replace the `src` with `ci-src` attribute in the `<img>` tag:
@@ -430,7 +446,7 @@ add the following scripts right after js-cloudimage-responsive script
   window.lazySizesConfig = window.lazySizesConfig || {};
   window.lazySizesConfig.init = false;
 </script>
-<script src="https://cdn.scaleflex.it/plugins/js-cloudimage-responsive/4.7.0/plain/js-cloudimage-responsive.min.js"></script>
+<script src="https://cdn.scaleflex.it/plugins/js-cloudimage-responsive/4.8.0/plain/js-cloudimage-responsive.min.js"></script>
 <script src="https://cdn.scaleflex.it/filerobot/js-cloudimage-responsive/lazysizes.min.js"></script>
 ```
 

diff --git a/README.md b/README.md
@@ -1,4 +1,4 @@
-[![Release](https://img.shields.io/badge/release-v4.7.0-blue.svg)](https://github.com/scaleflex/js-cloudimage-responsive/releases)
+[![Release](https://img.shields.io/badge/release-v4.8.0-blue.svg)](https://github.com/scaleflex/js-cloudimage-responsive/releases)
 [![Free plan](https://img.shields.io/badge/price-includes%20free%20plan-green.svg)](https://www.cloudimage.io/en/home#b38181a6-b9c8-4015-9742-7b1a1ad382d5)
 [![Contributions welcome](https://img.shields.io/badge/contributions-welcome-orange.svg)](#contributing)
 [![License](https://img.shields.io/badge/license-MIT-blue.svg)](https://opensource.org/licenses/MIT)
@@ -115,13 +115,13 @@ You have to pay attention to the following things:
 Add a style tag with CDN link to js-cloudimage-responsive in the head of your site
 
 ```javascript
-<link href="https://scaleflex.cloudimg.io/v7/plugins/js-cloudimage-responsive/4.7.0/js-cloudimage-responsive.min.css?vh=a076ef&func=proxy"></link>
+<link href="https://scaleflex.cloudimg.io/v7/plugins/js-cloudimage-responsive/4.8.0/js-cloudimage-responsive.min.css?vh=a076ef&func=proxy"></link>
 ```
 
 Add a script tag with CDN link to js-cloudimage-responsive
 
 ```javascript
-<script src="https://cdn.scaleflex.it/plugins/js-cloudimage-responsive/4.7.0/js-cloudimage-responsive.min.js"></script>
+<script src="https://cdn.scaleflex.it/plugins/js-cloudimage-responsive/4.8.0/js-cloudimage-responsive.min.js"></script>
 ```
 
 or using npm
@@ -328,6 +328,22 @@ Default:
 
 Breakpoints shortcuts to use in image size property, can be overridden.
 
+### imageSizeAttributes
+
+###### Type: **String** | possible values: 'use', 'ignore', 'take-ratio' | Default: **'use'** 
+
+If width and height attributes are set:
+
+**use** - width & height attributes values will be used to calculate image size (according to user's DPR) and **ratio**. 
+
+**take-ratio** - width & height attributes values will be used only to calculate **ratio**.
+
+**ignore** - width & height attributes will be ignored.
+
+If width and height attributes are NOT set, image container size will be detected to calculate result image size (according to user's DPR)
+
+*Note*: If only width or height attributes is set, ratio is going to be taken from ci-ratio image attribute
+
 ## <a name="image_properties"></a> Image properties
 
 The Cloudimage responsive plugin will make an image on your page responsive if you replace the `src` with a `ci-src` attribute in the `<img>` tag:
@@ -456,7 +472,7 @@ add the following scripts right after js-cloudimage-responsive script
   window.lazySizesConfig = window.lazySizesConfig || {};
   window.lazySizesConfig.init = false;
 </script>
-<script src="https://cdn.scaleflex.it/plugins/js-cloudimage-responsive/4.7.0/js-cloudimage-responsive.min.js"></script>
+<script src="https://cdn.scaleflex.it/plugins/js-cloudimage-responsive/4.8.0/js-cloudimage-responsive.min.js"></script>
 <script src="https://cdn.scaleflex.it/filerobot/js-cloudimage-responsive/lazysizes.min.js"></script>
 ```
 

diff --git a/build/blur-hash/js-cloudimage-responsive.min.js b/build/blur-hash/js-cloudimage-responsive.min.js
diff --git a/build/blur-hash/js-cloudimage-responsive.min.js.map b/build/blur-hash/js-cloudimage-responsive.min.js.map
diff --git a/build/low-preview/js-cloudimage-responsive.min.css b/build/low-preview/js-cloudimage-responsive.min.css