Skip to content

Commit 8c73b35

Browse files
chore: release 4.8.0 🚀
1 parent 3fce406 commit 8c73b35

19 files changed

+536
-335
lines changed

Diff for: CHANGELOG.md

+25
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,31 @@ Types of changes:
2525
- ...
2626

2727
-------------
28+
## 4.8.0 - 2021-06-16
29+
30+
### Deprecated
31+
32+
Property **ignoreNodeImgSize** is deprecated. Use **imageSizeAttributes: 'ignore'** instead
33+
34+
### Added
35+
- new property:
36+
37+
##### **imageSizeAttributes**
38+
39+
###### Type: **String** | possible values: 'use', 'ignore', 'take-ratio' | Default: **'use'**
40+
41+
If width and height attributes are set:
42+
43+
**use** - width & height attributes values will be used to calculate image size (according to user's DPR) and **ratio**.
44+
45+
**take-ratio** - width & height attributes values will be used only to calculate **ratio**.
46+
47+
**ignore** - width & height attributes will be ignored.
48+
49+
If width and height attributes are NOT set, image container size will be detected to calculate result image size (according to user's DPR)
50+
51+
*Note*: If only width or height attributes is set, ratio is going to be taken from ci-ratio image attribute
52+
2853
## 4.7.0 - 2020-02-23
2954
### added
3055
- add custom root element to process function

Diff for: README-BLUR-HASH.md

+20-3
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
[![Release](https://img.shields.io/badge/release-v4.7.0-blue.svg)](https://github.com/scaleflex/js-cloudimage-responsive/releases)
1+
[![Release](https://img.shields.io/badge/release-v4.8.0-blue.svg)](https://github.com/scaleflex/js-cloudimage-responsive/releases)
22
[![Free plan](https://img.shields.io/badge/price-includes%20free%20plan-green.svg)](https://www.cloudimage.io/en/home#b38181a6-b9c8-4015-9742-7b1a1ad382d5)
33
[![Contributions welcome](https://img.shields.io/badge/contributions-welcome-orange.svg)](#contributing)
44
[![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:
116116
Add script tag with CDN link to js-cloudimage-responsive
117117

118118
```javascript
119-
<script src="https://cdn.scaleflex.it/plugins/js-cloudimage-responsive/4.7.0/blur-hash/js-cloudimage-responsive.min.js"></script>
119+
<script src="https://cdn.scaleflex.it/plugins/js-cloudimage-responsive/4.8.0/blur-hash/js-cloudimage-responsive.min.js"></script>
120120
```
121121

122122
or using npm
@@ -313,6 +313,23 @@ const cloudimageConfig = {
313313

314314
List of supported device pixel ratios. If there is no need to support retina devices, you should set empty array `devicePixelRatioList: []`
315315

316+
### imageSizeAttributes
317+
318+
###### Type: **String** | possible values: 'use', 'ignore', 'take-ratio' | Default: **'use'**
319+
320+
If width and height attributes are set:
321+
322+
**use** - width & height attributes values will be used to calculate image size (according to user's DPR) and **ratio**.
323+
324+
**take-ratio** - width & height attributes values will be used only to calculate **ratio**.
325+
326+
**ignore** - width & height attributes will be ignored.
327+
328+
If width and height attributes are NOT set, image container size will be detected to calculate result image size (according to user's DPR)
329+
330+
*Note*: If only width or height attributes is set, ratio is going to be taken from ci-ratio image attribute
331+
332+
316333
## <a name="image_properties"></a> Image properties
317334

318335
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
450467
window.lazySizesConfig = window.lazySizesConfig || {};
451468
window.lazySizesConfig.init = false;
452469
</script>
453-
<script src="https://cdn.scaleflex.it/plugins/js-cloudimage-responsive/4.7.0/blur-hash/js-cloudimage-responsive.min.js"></script>
470+
<script src="https://cdn.scaleflex.it/plugins/js-cloudimage-responsive/4.8.0/blur-hash/js-cloudimage-responsive.min.js"></script>
454471
<script src="https://cdn.scaleflex.it/filerobot/js-cloudimage-responsive/lazysizes.min.js"></script>
455472
```
456473

Diff for: README-PLAIN.md

+19-3
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
[![Release](https://img.shields.io/badge/release-v4.7.0-blue.svg)](https://github.com/scaleflex/js-cloudimage-responsive/releases)
1+
[![Release](https://img.shields.io/badge/release-v4.8.0-blue.svg)](https://github.com/scaleflex/js-cloudimage-responsive/releases)
22
[![Free plan](https://img.shields.io/badge/price-includes%20free%20plan-green.svg)](https://www.cloudimage.io/en/home#b38181a6-b9c8-4015-9742-7b1a1ad382d5)
33
[![Contributions welcome](https://img.shields.io/badge/contributions-welcome-orange.svg)](#contributing)
44
[![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
110110
Add script tag with CDN link to js-cloudimage-responsive
111111

112112
```javascript
113-
<script src="https://cdn.scaleflex.it/plugins/js-cloudimage-responsive/4.7.0/plain/js-cloudimage-responsive.min.js"></script>
113+
<script src="https://cdn.scaleflex.it/plugins/js-cloudimage-responsive/4.8.0/plain/js-cloudimage-responsive.min.js"></script>
114114
```
115115

116116
or using npm
@@ -310,6 +310,22 @@ ciResponsive.init();
310310

311311
Breakpoints shortcuts to use in image size property, can be overwridden.
312312

313+
### imageSizeAttributes
314+
315+
###### Type: **String** | possible values: 'use', 'ignore', 'take-ratio' | Default: **'use'**
316+
317+
If width and height attributes are set:
318+
319+
**use** - width & height attributes values will be used to calculate image size (according to user's DPR) and **ratio**.
320+
321+
**take-ratio** - width & height attributes values will be used only to calculate **ratio**.
322+
323+
**ignore** - width & height attributes will be ignored.
324+
325+
If width and height attributes are NOT set, image container size will be detected to calculate result image size (according to user's DPR)
326+
327+
*Note*: If only width or height attributes is set, ratio is going to be taken from ci-ratio image attribute
328+
313329
## <a name="image_properties"></a> Image properties
314330

315331
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
430446
window.lazySizesConfig = window.lazySizesConfig || {};
431447
window.lazySizesConfig.init = false;
432448
</script>
433-
<script src="https://cdn.scaleflex.it/plugins/js-cloudimage-responsive/4.7.0/plain/js-cloudimage-responsive.min.js"></script>
449+
<script src="https://cdn.scaleflex.it/plugins/js-cloudimage-responsive/4.8.0/plain/js-cloudimage-responsive.min.js"></script>
434450
<script src="https://cdn.scaleflex.it/filerobot/js-cloudimage-responsive/lazysizes.min.js"></script>
435451
```
436452

Diff for: README.md

+20-4
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
[![Release](https://img.shields.io/badge/release-v4.7.0-blue.svg)](https://github.com/scaleflex/js-cloudimage-responsive/releases)
1+
[![Release](https://img.shields.io/badge/release-v4.8.0-blue.svg)](https://github.com/scaleflex/js-cloudimage-responsive/releases)
22
[![Free plan](https://img.shields.io/badge/price-includes%20free%20plan-green.svg)](https://www.cloudimage.io/en/home#b38181a6-b9c8-4015-9742-7b1a1ad382d5)
33
[![Contributions welcome](https://img.shields.io/badge/contributions-welcome-orange.svg)](#contributing)
44
[![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:
115115
Add a style tag with CDN link to js-cloudimage-responsive in the head of your site
116116

117117
```javascript
118-
<link href="https://scaleflex.cloudimg.io/v7/plugins/js-cloudimage-responsive/4.7.0/js-cloudimage-responsive.min.css?vh=a076ef&func=proxy"></link>
118+
<link href="https://scaleflex.cloudimg.io/v7/plugins/js-cloudimage-responsive/4.8.0/js-cloudimage-responsive.min.css?vh=a076ef&func=proxy"></link>
119119
```
120120

121121
Add a script tag with CDN link to js-cloudimage-responsive
122122

123123
```javascript
124-
<script src="https://cdn.scaleflex.it/plugins/js-cloudimage-responsive/4.7.0/js-cloudimage-responsive.min.js"></script>
124+
<script src="https://cdn.scaleflex.it/plugins/js-cloudimage-responsive/4.8.0/js-cloudimage-responsive.min.js"></script>
125125
```
126126

127127
or using npm
@@ -328,6 +328,22 @@ Default:
328328

329329
Breakpoints shortcuts to use in image size property, can be overridden.
330330

331+
### imageSizeAttributes
332+
333+
###### Type: **String** | possible values: 'use', 'ignore', 'take-ratio' | Default: **'use'**
334+
335+
If width and height attributes are set:
336+
337+
**use** - width & height attributes values will be used to calculate image size (according to user's DPR) and **ratio**.
338+
339+
**take-ratio** - width & height attributes values will be used only to calculate **ratio**.
340+
341+
**ignore** - width & height attributes will be ignored.
342+
343+
If width and height attributes are NOT set, image container size will be detected to calculate result image size (according to user's DPR)
344+
345+
*Note*: If only width or height attributes is set, ratio is going to be taken from ci-ratio image attribute
346+
331347
## <a name="image_properties"></a> Image properties
332348

333349
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
456472
window.lazySizesConfig = window.lazySizesConfig || {};
457473
window.lazySizesConfig.init = false;
458474
</script>
459-
<script src="https://cdn.scaleflex.it/plugins/js-cloudimage-responsive/4.7.0/js-cloudimage-responsive.min.js"></script>
475+
<script src="https://cdn.scaleflex.it/plugins/js-cloudimage-responsive/4.8.0/js-cloudimage-responsive.min.js"></script>
460476
<script src="https://cdn.scaleflex.it/filerobot/js-cloudimage-responsive/lazysizes.min.js"></script>
461477
```
462478

Diff for: build/blur-hash/js-cloudimage-responsive.min.js

+3-3
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

Diff for: build/blur-hash/js-cloudimage-responsive.min.js.map

+1-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

Diff for: build/low-preview/js-cloudimage-responsive.min.css

+2-2
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)