chore: release 1.1.0

Author: amrelbialy

CHANGELOG.md

@@ -28,6 +28,14 @@ Types of changes:
 - ...
 
 ---
+# 1.1.0 - 2021-07-19
+
+### Deprecated
+
+- Property **ignoreNodeImgSize** is deprecated. Use **imageSizeAttributes: 'ignore'** instead
+
+### Added
+- new property: **imageSizeAttributes**
 ## 1.0.6 - 2020-05-13
 ### Added
 - ignoreNodeImgSize props

README.md

@@ -1,4 +1,4 @@
-[![Release](https://img.shields.io/badge/release-v1.0.6-blue.svg)](https://github.com/scaleflex/vue-cloudimage-responsive/releases)
+[![Release](https://img.shields.io/badge/release-v1.1.0-blue.svg)](https://github.com/scaleflex/vue-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)
@@ -313,11 +313,21 @@ Delay for processing an image after rendering component.
 **NOTE:** normally the parameter is not needed, but in some cases with integrating third part libraries it can fix wrong
 calculation of image container.
 
-### ignoreNodeImgSize
+### ImageSizeAttributes
 
-###### Type: **boolean** | Default: **false** | _optional_
+###### Type: **String** | possible values: 'use', 'ignore', 'take-ratio' | Default: **'use'** 
 
-If set to true, the plugin ignores width and height attributes.
+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

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-cloudimage-responsive-plain",
-  "version": "1.0.6",
+  "version": "1.1.0",
   "main": "dist/index.cjs.js",
   "module": "dist/index.es.js",
   "description": "Cloudimage Responsive will smartly resize, compress and accelerate images across the World in your site for all devices. The plugin supports lazy loading technique with blur hash placeholder.",
@@ -36,7 +36,7 @@
     "publish-demo": "npm run build-demo && npm run deploy"
   },
   "dependencies": {
-    "cloudimage-responsive-utils": "^2.0.16",
+    "cloudimage-responsive-utils": "^2.3.0",
     "core-js": "^3.6.5",
     "throttle-debounce": "^2.2.1"
   },
@@ -45,8 +45,6 @@
     "vue-lazyload": "^1.3.3"
   },
   "devDependencies": {
-    "vue": "^2.6.11",
-    "vue-lazyload": "^1.3.3",
     "@babel/cli": "^7.0.0",
     "@babel/core": "^7.10.5",
     "@babel/plugin-proposal-class-properties": "^7.0.0",
@@ -63,24 +61,26 @@
     "babel-loader": "^8.1.0",
     "babel-preset-vue": "^2.0.2",
     "css-loader": "^3.6.0",
+    "deepmerge": "^2.0.1",
     "gh-pages": "^2.0.1",
     "html-webpack-plugin": "^4.3.0",
     "prismjs": "^1.20.0",
     "rimraf": "^3.0.2",
+    "rollup": "^1.14.3",
+    "rollup-plugin-babel": "^4.3.2",
+    "rollup-plugin-commonjs": "^10.0.0",
+    "rollup-plugin-vue": "^5.0.0",
+    "shelljs": "^0.7.6",
     "style-loader": "^1.2.1",
     "throttle-debounce": "^2.2.1",
+    "vue": "^2.6.11",
+    "vue-lazyload": "^1.3.3",
     "vue-loader": "^15.9.3",
     "vue-prism-component": "^1.2.0",
     "vue-style-loader": "^4.1.2",
     "vue-template-compiler": "^2.6.11",
     "webpack": "^4.43.0",
     "webpack-cli": "^3.3.12",
-    "webpack-dev-server": "^3.11.0",
-    "rollup": "^1.14.3",
-    "rollup-plugin-babel": "^4.3.2",
-    "rollup-plugin-commonjs": "^10.0.0",
-    "rollup-plugin-vue": "^5.0.0",
-    "shelljs": "^0.7.6",
-    "deepmerge": "^2.0.1"
+    "webpack-dev-server": "^3.11.0"
   }
-}
+}

src/CloudImageProvider.vue

@@ -30,6 +30,7 @@ export default {
               xl: '(min-width: 1200px)' // from 1200    USUALSCREEN
             },
         params: this.cloudImageConfig.params? processParams(this.cloudImageConfig.params) :'org_if_sml=1',
+        imageSizeAttributes: this.cloudImageConfig.imageSizeAttributes || 'use',
         innerWidth: typeof window !== 'undefined' ? window.innerWidth : null,
         previewQualityFactor: 10,
         doNotReplaceURL: this.cloudImageConfig.doNotReplaceURL || false,