Chore: Release v1.3.4

Author: amrw-js

CHANGELOG.md

@@ -25,6 +25,10 @@ Types of changes:
 - ...
 
 -------------
+## 1.3.4 - 2022-04-26
+### Fixed
+- Low preview image width
+
 ## 1.3.3 - 2022-04-18
 ### Added
 - possibility to add `doNotReplaceURL` to single image

README.md

@@ -1,11 +1,9 @@
-[![Release](https://img.shields.io/badge/release-v1.3.3-blue.svg)](https://github.com/scaleflex/vue-cloudimage-responsive-blur-hash/releases)
+[![Release](https://img.shields.io/badge/release-v1.3.4-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.it/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/vue-cloudimage-responsive-blur-hash/&via=cloudimage&hashtags=vue,images,cloudimage,responsive_images,lazy_loading,web_acceleration,image_optimization,image_CDN,image_CDNwebp,jpeg_xr,jpg_optimization,image_resizing_and_CDN,cropresize)
-
+[![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)
+[![Cloudimage](https://img.shields.io/badge/Powered%20by-cloudimage-blue)](https://www.cloudimage.io/en/home)
 ## VERSIONS
 
 - [**Low Quality Preview**](https://github.com/scaleflex/vue-cloudimage-responsive)
@@ -39,7 +37,7 @@
 		•
    <a href="https://scaleflex.github.io/vue-cloudimage-responsive-blur-hash/" target="_blank">Demo</a>
 		•
-		<a href="https://codesandbox.io/s/vue-cloudimage-responsive-blur-hash-example-b3u5n" target="_blank">Code Sandbox</a>
+		<a href="https://codesandbox.io/s/vue-cloudimage-responsive-blur-hash-example-u66i2s" 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>
@@ -64,7 +62,7 @@ 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/)
@@ -73,13 +71,13 @@ powered by [Cloudimage](https://www.cloudimage.io/)
 ## Table of contents
 
 - [Demo](#demo)
+- [Responsive plugins family](#plugin_family)
 - [Requirements](#requirements)
 - [Step 1: Installation](#installation)
 - [Step 2: Initialize](#initialize)
 - [Step 3: Implement](#implement)
 - [Configuration](#configuration)
 - [Image properties](#image_properties)
-- [Examples & workarounds](#examples_workarounds)
 - [Browser support](#browser_support)
 - [Filerobot UI Family](#ui_family)
 - [Contributing](#contributing)
@@ -94,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>React</summary>
+<a href="https://github.com/scaleflex/react-cloudimage-responsive">React Cloudimage Responsive (Low Quality Preview)</a><br/>
+<a href="https://github.com/scaleflex/react-cloudimage-responsive-blur-hash">React Cloudimage Responsive (Blur-hash)</a><br/>
+<a href="https://github.com/scaleflex/react-cloudimage-responsive-plain">React 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
@@ -136,7 +156,7 @@ import Img, { CloudimageProvider } from 'vue-cloudimage-responsive-blur-hash';
 
 const cloudimageConfig = {
   token: 'demo',
-  baseURL: 'https://jolipage.airstore.io/'
+  baseURL: 'https://cdn.scaleflex.it/'
 };
 
 <template>
@@ -171,7 +191,7 @@ NOTE: "ratio" is recommended to prevent page layout jumping. The parameter is us
 the image position while image is loading.
 - you can also reference it with kabab-case : img
 
-<a href="https://codesandbox.io/s/vue-cloudimage-responsive-blur-hash-example-b3u5n"><img src="https://codesandbox.io/static/img/play-codesandbox.svg" alt="edeit in codesandbox"/></a>
+<a href="https://codesandbox.io/s/vue-cloudimage-responsive-blur-hash-example-u66i2s"><img src="https://codesandbox.io/static/img/play-codesandbox.svg" alt="edeit in codesandbox"/></a>
 
 ### BackgroundImg component:
 
@@ -182,7 +202,7 @@ the image position while image is loading.
 ```
 NOTE: you can also reference it with kabab-case : background-img
 
-<a href="https://codesandbox.io/s/vue-cloudimage-responsive-background-blur-hash-hiohl"><img src="https://codesandbox.io/static/img/play-codesandbox.svg" alt="edeit in codesandbox"/></a>
+<a href="https://codesandbox.io/s/vue-cloudimage-responsive-blur-hash-example-ndv0yl"><img src="https://codesandbox.io/static/img/play-codesandbox.svg" alt="edeit in codesandbox"/></a>
 
 ## <a name="configuration"></a> Config
 
@@ -218,15 +238,15 @@ Allow to use a specific version of API.
 ```javascript
 const cloudimageConfig = {
   token: 'demo',
-  baseURL: 'https://jolipage.airstore.io/',
+  baseURL: 'https://cdn.scaleflex.it/',
   apiVersion: 'v7'                            // optional
 };
 ```
 - disable API version
 ```javascript
 const cloudimageConfig = {
   token: 'demo',
-  baseURL: 'https://jolipage.airstore.io/',
+  baseURL: 'https://cdn.scaleflex.it/',
   apiVersion: null                            // optional
 };
 ```
@@ -285,7 +305,7 @@ Placeholder colored 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://cdn.scaleflex.it/filerobot/red-loader.gif') 50% 50% no-repeat"`
 
 ### lowQualityPreview
 
@@ -311,7 +331,7 @@ Default:
 ```javascript
 const cloudimageConfig = {
   token: 'demo',
-  baseUrl: 'https://jolipage.airstore.io/',
+  baseUrl: 'https://cdn.scaleflex.it/',
   ...
   presets: {
       xs: '(max-width: 575px)', // up to 575    PHONE
@@ -486,12 +506,6 @@ The lazyLoad configuration to [LazyLoad](https://github.com/hilongjw/vue-lazyloa
 
 To see the full cloudimage documentation [click here](https://docs.cloudimage.io/go/cloudimage-documentation)
 
-## <a name="examples_workarounds"></a>Examples & workarounds
-
-- [See all](https://github.com/scaleflex/vue-cloudimage-responsive/blob/master/examples/EXAMPLES.md)
-- [Cropping](https://github.com/scaleflex/vue-cloudimage-responsive/blob/master/examples/EXAMPLES.md#cropping)
-- [Integration with Gatsby](https://github.com/scaleflex/vue-cloudimage-responsive/blob/master/examples/EXAMPLES.md#integration-with-gatsby)
-
 ## <a name="browser_support"></a>Browser support
 
 Tested in all modern browsers and IE 11.

examples/src/App.vue

@@ -362,7 +362,7 @@
                 {{ " " }}
                 <a
                   :href="
-                    'https://cloudimage.public.airstore.io/demo/' + image.src
+                    'https://cdn.scaleflex.it/demo/' + image.src
                   "
                   target="_blank"
                   >link</a
@@ -395,7 +395,7 @@
                 {{ " " }}
                 <a
                   :href="
-                    'https://cloudimage.public.airstore.io/demo/' +
+                    'https://cdn.scaleflex.it/demo/' +
                     images[17].src
                   "
                   target="_blank"
@@ -766,7 +766,7 @@ import Prism from "vue-prism-component";
 //cloud configuration
 const cloudImageConfig = {
   token: "demo",
-  baseURL: "https://cloudimage.public.airstore.io/demo/",
+  baseURL: "https://cdn.scaleflex.it/demo/",
   params: "ci_info=1&org_if_sml=1",
   placeholderBackground: "#e1e1e1",
   limitFactor: 10,
@@ -849,14 +849,14 @@ import Img, { CloudimageProvider } from 'vue-cloudimage-responsive-blur-hash';
 
 const cloudimageConfig = {
   token: 'demo',
-  baseURL: 'https://jolipage.airstore.io/'
+  baseURL: 'https://cdn.scaleflex.it/'
 };
 
 
 const cloudimageConfigWithCustomCNAMEDomain = {
   token: 'demo',
-  baseURL: 'https://jolipage.airstore.io/',
-  customDomain: 'images.airstore.io'
+  baseURL: 'https://cdn.scaleflex.it/',
+  customDomain: 'cloudimage.io'
 };
 
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-cloudimage-responsive-blur-hash",
-  "version": "1.3.3",
+  "version": "1.3.4",
   "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.4.5",
+    "cloudimage-responsive-utils": "^2.4.8",
     "core-js": "^3.6.5",
     "throttle-debounce": "^2.3.0"
   },