Skip to content

Commit

Permalink
Chore: release v3.6.0
Browse files Browse the repository at this point in the history
  • Loading branch information
amrw-js committed Apr 25, 2022
1 parent 80d9ef0 commit 929ba5f
Show file tree
Hide file tree
Showing 5 changed files with 52 additions and 27 deletions.
4 changes: 4 additions & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,10 @@ Types of changes:
-------------

-------------
## 3.6.0 - 2022-04-25
### Fixed
- Update documentations

## 3.6.0-beta.20 - 2022-04-18
### Added
- possibility to render unwrapped image using `disableAnimation` prop
Expand Down
51 changes: 36 additions & 15 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,10 +1,9 @@
[![Release](https://img.shields.io/badge/release-v3.5.1-blue.svg)](https://github.com/scaleflex/react-cloudimage-responsive/releases)
[![Release](https://img.shields.io/badge/release-v3.6.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)
[![Scaleflex team](https://img.shields.io/badge/%3C%2F%3E%20with%20%E2%99%A5%20by-the%20Scaleflex%20team-6986fa.svg)](https://www.scaleflex.com/en/home)

[![Tweet](https://img.shields.io/twitter/url/http/shields.io.svg?style=social)](https://twitter.com/intent/tweet?text=Responsive%20images,%20now%20easier%20than%20ever&url=https://scaleflex.github.io/react-cloudimage-responsive/&via=cloudimage&hashtags=react,images,cloudimage,responsive_images,lazy_loading,web_acceleration,image_optimization,image_CDN,image_CDNwebp,jpeg_xr,jpg_optimization,image_resizing_and_CDN,cropresize)
[![Cloudimage](https://img.shields.io/badge/Powered%20by-cloudimage-blue)](https://www.cloudimage.io/en/home)

## VERSIONS

Expand Down Expand Up @@ -39,7 +38,7 @@
<a href="https://scaleflex.github.io/react-cloudimage-responsive/" target="_blank">Demo</a>
<a href="https://codesandbox.io/s/1840nl707j" target="_blank">Code Sandbox</a>
<a href="https://codesandbox.io/s/react-cloudimage-responsive-example-forked-9yq9tm" target="_blank">Code Sandbox</a>
<a href="https://medium.com/@dmitry_82269/responsive-images-in-2019-now-easier-than-ever-b76e5a43c074" target="_blank">Why?</a>
</strong>
Expand All @@ -64,15 +63,13 @@ Cloudimage, contact us at
<p align="center">
<img
alt="The Lounge"
src="https://demo.cloudimg.io/width/1400/n/https://scaleflex.airstore.io/filerobot/cloudimage-process.jpg?sanitize=true">
src="https://cdn.scaleflex.it/filerobot/cloudimage-process.jpg">
</p>

powered by [Cloudimage](https://www.cloudimage.io/)
([Watch the video here](https://www.youtube.com/watch?time_continue=2&v=JFZSE1vYb0k))

## Table of contents

* [Demo](#demo)
* [Responsive plugins family](#plugin_family)
* [Requirements](#requirements)
* [Step 1: Installation](#installation)
* [Step 2: Initialize](#initialize)
Expand All @@ -95,6 +92,28 @@ Inspector's Network tab to see how Cloudimage delivers the optimal
image size to your browser, hence accelerating the overall page
loading time.

## <a name="plugin_family"></a> Responsive plugins family
In order to use Cloudimage responsive plugins on your single-page application, please check out Cloudimage responsive plugins for vanilla Javascript and the most popular Javascript frameworks.

<details>
<summary>Javascript</summary>
<a href="https://github.com/scaleflex/js-cloudimage-responsive">Js Cloudimage Responsive (Low Quality Preview)</a><br/>
<a href="https://github.com/scaleflex/js-cloudimage-responsive/blob/master/README-BLUR-HASH.md">Js Cloudimage Responsive (Blur-hash)</a><br/>
<a href="https://github.com/scaleflex/js-cloudimage-responsive/blob/master/README-PLAIN.md">Js Cloudimage Responsive (Plain)</a>
</details>

<details>
<summary>Vue.js</summary>
<a href="https://github.com/scaleflex/vue-cloudimage-responsive">Vue Cloudimage Responsive (Low Quality Preview)</a><br/>
<a href="https://github.com/scaleflex/vue-cloudimage-responsive-blur-hash">Vue Cloudimage Responsive (Blur-hash)</a><br/>
<a href="https://github.com/scaleflex/vue-cloudimage-responsive-plain">Vue Cloudimage Responsive (Plain)</a>
</details>

<details>
<summary>Angular</summary>
<a href="https://github.com/scaleflex/ng-cloudimage-responsive">Angular Cloudimage Responsive (Low Quality Preview)</a><br/>
</details>

## <a name="requirements"/> Requirements

To use the Cloudimage Responsive plugin, you will need a
Expand Down Expand Up @@ -124,7 +143,7 @@ import Img, { CloudimageProvider } from 'react-cloudimage-responsive';

const cloudimageConfig = {
token: 'demo',
baseURL: 'https://jolipage.airstore.io/'
baseURL: 'https://cdn.scaleflex.it/demo/'
};

const App = () => {
Expand All @@ -150,7 +169,7 @@ render(<App />, document.body);
NOTE: "ratio" is recommended to prevent page layout jumping. The parameter is used to calculate image height to hold
the image position while image is loading.

<a href="https://codesandbox.io/s/1840nl707j"><img src="https://codesandbox.io/static/img/play-codesandbox.svg" alt="edeit in codesandbox"/></a>
<a href="https://codesandbox.io/s/react-cloudimage-responsive-example-forked-b8zebi"><img src="https://codesandbox.io/static/img/play-codesandbox.svg" alt="edit in codesandbox"/></a>

### BackgroundImg component:

Expand All @@ -160,7 +179,7 @@ the image position while image is loading.
</BackgroundImg>
```

<a href="https://codesandbox.io/s/react-cloudimage-responsive-background-1nin8"><img src="https://codesandbox.io/static/img/play-codesandbox.svg" alt="edeit in codesandbox"/></a>
<a href="https://codesandbox.io/s/react-cloudimage-responsive-example-kvep0t"><img src="https://codesandbox.io/static/img/play-codesandbox.svg" alt="edeit in codesandbox"/></a>

## <a name="configuration"></a> Config

Expand Down Expand Up @@ -197,15 +216,15 @@ Allow to use a specific version of API.
```javascript
const cloudimageConfig = {
token: 'demo',
baseURL: 'https://jolipage.airstore.io/',
baseURL: 'https://cdn.scaleflex.it/demo/',
apiVersion: 'v7' // optional
};
```
- disable API version
```javascript
const cloudimageConfig = {
token: 'demo',
baseURL: 'https://jolipage.airstore.io/',
baseURL: 'https://cdn.scaleflex.it/demo/',
apiVersion: null // optional
};
```
Expand Down Expand Up @@ -266,7 +285,7 @@ Placeholder coloured background while the image is loading or use it to set your

for example

```placeholderBackground: "url('https://scaleflex.airstore.io/filerobot/red-loader.gif') 50% 50% no-repeat"```
```placeholderBackground: "url('https:/https://cdn.scaleflex.it/filerobot/red-loader.gif') 50% 50% no-repeat"```

### lowQualityPreview

Expand All @@ -291,7 +310,7 @@ Default:
```javascript
const cloudimageConfig = {
token: 'demo',
baseUrl: 'https://jolipage.airstore.io/',
baseUrl: 'https://cdn.scaleflex.it/demo/',
...
presets: {
xs: '(max-width: 575px)', // up to 575 PHONE
Expand Down Expand Up @@ -377,6 +396,8 @@ A function to be executed after the image is loaded

If set to true, the plugin will only add query parameters to the provided image source URL.

<a href="https://codesandbox.io/s/react-cloudimage-responsive-example-jtf2e4"><img src="https://codesandbox.io/static/img/play-codesandbox.svg" alt="edeit in codesandbox"/></a>

### disableAnimation

###### Type: **Boolean** | Default: **false** | _optional_
Expand Down
12 changes: 6 additions & 6 deletions examples/src/components/app.js
Original file line number Diff line number Diff line change
Expand Up @@ -505,7 +505,7 @@ function App() {
<i>{image.original_size}</i>
{' '}
<a
href={`https://cloudimage.public.airstore.io/demo/${image.src}`}
href={`https://cdn.scaleflex.it/demo/${image.src}`}
target="_blank"
rel="noreferrer"
>
Expand Down Expand Up @@ -536,7 +536,7 @@ function App() {
<i>{images[17].original_size}</i>
{' '}
<a
href={`https://cloudimage.public.airstore.io/demo/${images[17].src}`}
href={`https://cdn.scaleflex.it/demo/${images[17].src}`}
target="_blank"
rel="noreferrer"
>
Expand Down Expand Up @@ -590,7 +590,7 @@ sizes="
display: 'inline-block', width: 200, height: 200, position: 'relative',
}}
>
<img src="https://doc.cloudimg.io/sample.li/boat.jpg" />
<img src="https://doc.cloudimg.io/sample.li/boat.jpg" alt="boat" />
<div className="border-box" />
</div>
</div>
Expand Down Expand Up @@ -767,13 +767,13 @@ import Img, { CloudimageProvider } from 'react-cloudimage-responsive';
const cloudimageConfig = {
token: 'demo',
baseURL: 'https://jolipage.airstore.io/'
baseURL: 'https://cdn.scaleflex.it/demo/'
};
const cloudimageConfigWithCustomCNAMEDomain = {
token: 'demo',
baseURL: 'https://jolipage.airstore.io/',
customDomain: 'images.airstore.io'
baseURL: 'https://cdn.scaleflex.it/demo/',
customDomain: 'https://cdn.scaleflex.it/demo/'
};
const App = () => {
Expand Down
4 changes: 2 additions & 2 deletions package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "react-cloudimage-responsive",
"version": "3.6.0-beta.20",
"version": "3.6.0",
"main": "dist/index.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 fancy animation on image load.",
"author": "scaleflex",
Expand Down Expand Up @@ -40,7 +40,7 @@
"publish-demo": "npm run build-demo && npm run deploy"
},
"dependencies": {
"cloudimage-responsive-utils": "^2.4.6",
"cloudimage-responsive-utils": "^2.4.7",
"core-js": "^3.15.2",
"prop-types": "^15.8.1",
"react-lazyload": "^3.2.0",
Expand Down
8 changes: 4 additions & 4 deletions yarn.lock
Original file line number Diff line number Diff line change
Expand Up @@ -2005,10 +2005,10 @@
"strip-ansi" "^5.2.0"
"wrap-ansi" "^5.1.0"

"cloudimage-responsive-utils@^2.4.6":
"integrity" "sha512-KMtPdlKXsfSAaXXmajlrSNYQBhoQb/VFZ9R2cqe+TqLTwLL9kkGpQNmGdy4HXXvopxNLLJIYCUqhsAnvE9P90w=="
"resolved" "https://registry.npmjs.org/cloudimage-responsive-utils/-/cloudimage-responsive-utils-2.4.6.tgz"
"version" "2.4.6"
"cloudimage-responsive-utils@^2.4.7":
"integrity" "sha512-bR/4opfax1qF+lnb63e+jUToRFL4/cX1ZNlZemWuqa8j8OiToS7nI5IS9u4YhyhBnKeBQV1vw8W2+m/X/CI+xQ=="
"resolved" "https://registry.npmjs.org/cloudimage-responsive-utils/-/cloudimage-responsive-utils-2.4.7.tgz"
"version" "2.4.7"

"collection-visit@^1.0.0":
"integrity" "sha1-S8A3PBZLwykbTTaMgpzxqApZ3KA="
Expand Down

0 comments on commit 929ba5f

Please sign in to comment.