Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.
Awesome Lists | Featured Topics | Projects
https://github.com/scaleflex/vue-cloudimage-responsive-blur-hash

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. Any questions or issues, please report to https://github.com/scaleflex/vue-cloudimage-responsive-blur-hash/issues
https://github.com/scaleflex/vue-cloudimage-responsive-blur-hash
Last synced: 5 days ago
JSON representation
Host: GitHub
URL: https://github.com/scaleflex/vue-cloudimage-responsive-blur-hash
Owner: scaleflex
License: mit
Created: 2020-07-20T08:53:12.000Z (over 4 years ago)
Default Branch: master
Last Pushed: 2022-10-03T15:57:52.000Z (about 2 years ago)
Last Synced: 2024-04-15T04:26:43.814Z (7 months ago)
Language: Vue
Homepage:
Size: 152 KB
Stars: 2
Watchers: 5
Forks: 0
Open Issues: 1
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project

README

        [![Release](https://img.shields.io/github/v/release/scaleflex/vue-cloudimage-responsive-blur-hash)](https://github.com/scaleflex/vue-cloudimage-responsive-blur-hash/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)

[![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)

- **Blur Hash**

- [**Plain (CSS free)**](https://github.com/scaleflex/vue-cloudimage-responsive-plain)



	

		

	

		

		

	





   Vue Cloudimage Responsive | Cloudimage v7





(blur hash placeholder)





	

		Docs

		•

   Demo

		•

		Code Sandbox

		•

		Why?

	



This plugin detects the width of any image container as well as the device pixel ratio

density to load the optimal image size needed.

Images are resized on-the-fly via the Cloudimage service, thus offering a comprehensive

automated image optimization service.

When an image is first loaded on your website or mobile app,

Cloudimage's resizing servers will download the origin image from

the source, resize it for the client's screen size and deliver to your users through one or multiple

Content Delivery Networks (CDNs). The generated image formats are cached in the CDN and will be delivered rocket fast on any subsequent request.

**NOTE:** Your original (master) images should be stored on a server

or storage bucket (S3, Google Cloud, Azure Blob...) reachable over

HTTP or HTTPS by Cloudimage. If you want to upload your master images to

Cloudimage, contact us at

[[email protected]](mailto:[email protected]).



	



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)

- [Compatibility](#compatibility)

- [Requirements](#requirements)

- [Step 1: Installation](#installation)

- [Step 2: Initialize](#initialize)

- [Step 3: Implement](#implement)

- [Configuration](#configuration)

- [Image properties](#image_properties)

- [Browser support](#browser_support)

- [Filerobot UI Family](#ui_family)

- [Contributing](#contributing)

- [License](#license)

##  Demo

To see the Cloudimage Responsive plugin in action, please check out the

[Demo page](https://github.com/scaleflex/vue-cloudimage-responsive-blur-hash).

Play with your browser's window size and observe your

Inspector's Network tab to see how Cloudimage delivers the optimal

image size to your browser, hence accelerating the overall page

loading time.

##  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.

Javascript

Js Cloudimage Responsive (Low Quality Preview)


Js Cloudimage Responsive (Blur-hash)


Js Cloudimage Responsive (Plain)

React

React Cloudimage Responsive (Low Quality Preview)


React Cloudimage Responsive (Blur-hash)


React Cloudimage Responsive (Plain)

Next.js

Vue Cloudimage Responsive (Low Quality Preview)


Vue.js

Vue Cloudimage Responsive (Low Quality Preview)


Vue Cloudimage Responsive (Blur-hash)


Vue Cloudimage Responsive (Plain)

Angular

Angular Cloudimage Responsive (Low Quality Preview)


##  Compatibility

| Version | Vue Version |

|---------|--------------|

| >2.0.0   | >=3.x.x |

| <=2.0.0   | <=2.x.x |

##  Requirements

To use the Cloudimage Responsive plugin, you will need a

Cloudimage token to deliver your images over CDN. Don't worry, it only takes seconds to get one by

registering [here](https://www.cloudimage.io/en/register_page).

Once your token is created, you can configure it as described below.

This token allows you to use 25GB of image cache and 25GB of worldwide

CDN traffic per month for free.

## Step 1: Installation

using npm

```

 npm install vue-cloudimage-responsive-blur-hash vue-lazyload

```

or using yarn

```

 yarn add vue-cloudimage-responsive-blur-hash vue-lazyload

```

## Step 2: Initialize

After installing the vue-cloudimage-responsive-blur-hash lib, simply initialize it with your **token** and the **baseURL**

of your image storage with **CloudImageProvider**:

create vue instance a fle called main.js

```js

import { createApp } from 'vue'

import App from './App.vue'

import VueLazyload from 'vue-lazyload';

const app = createApp(App);

app.use(VueLazyload, {

  lazyComponent: true

});

app.mount('#app');

```

```jsx

import Img, { CloudImageProvider } from 'vue-cloudimage-responsive-blur-hash';

const cloudimageConfig = {

  token: 'demo',

  baseURL: 'https://cdn.scaleflex.it/'

};

 


 
Simple demo of vue-cloudimage-responsive-blur-hash





export default{

  name: "app",

  components: {

    CloudImageProvider,

    Img,

  },

  data() { 

    return { 

      cloudimageConfig

    };

  },

},

```

## Step 3: Implement it

### Img component:

```html



### BackgroundImg component:

```html

  {'Your conent...'}

```

NOTE: you can also reference it with kabab-case : background-img



##  Config

### token

###### Type: **String** | Default: **"demo"** | _required_

Your Cloudimage customer token.

[Subscribe](https://www.cloudimage.io/en/register_page) for a

Cloudimage account to get one. The subscription takes less than a

minute and is totally free.

### customDomain

###### Type: **String** | Default: **"cloudimage.io"** | _optional_

If you use a custom CNAME for your cloudimage integration, you can set it here.

Note: this will disregard your token above as this should be built into the CNAME entry.

### baseURL

###### Type: **String** | Default: **"/"** | _optional_

Your image folder on server, this alows to shorten your origin image URLs.

### apiVersion

###### Type: **String** |Default: **'v7'** | _optional_

Allow to use a specific version of API.

- set a specific version of API

```javascript

const cloudimageConfig = {

  token: 'demo',

  baseURL: 'https://cdn.scaleflex.it/',

  apiVersion: 'v7'                            // optional

};

```

- disable API version

```javascript

const cloudimageConfig = {

  token: 'demo',

  baseURL: 'https://cdn.scaleflex.it/',

  apiVersion: null                            // optional

};

```

### doNotReplaceURL

###### Type: **bool** | Default: **false**

If set to **true** the plugin will only add query params to the given source of image.

### lazyLoading

###### Type: **Bool** | Default: **true** | _optional_

Only images close to the client's viewport will be loaded, hence accelerating the page loading time. The plugin uses

[vue-lazyload](https://github.com/hilongjw/vue-lazyload) library to achieve it.

### lazyLoadOffset

###### Type: **Number/Array(Number)** | Default: **100**

Say if you want to preload a component even if it's 100px below the viewport (user have to scroll 100px more to see this component), you can set offset props to 100. On the other hand, if you want to delay loading a component even if it's top edge has already appeared at viewport, set offset to negative number.

Library supports horizontal lazy load out of the box. So when you provide this prop with number like 100 it will automatically set left edge offset to 100 and top edge to 100;

If you provide this prop with array like [100, 200], it will set left edge offset to 100 and top offset to 200.

### params

###### Type: **String** | Default: **'org_if_sml=1'** | _optional_

Applies default Cloudimage operations/ filters to your image, e.g. brightness, contrast, rotation...

Multiple params can be applied, separated by "`&`" e.g. wat_scale=35&wat_gravity=northeast&wat_pad=10&grey=1

```javascript

params: 'org_if_sml=1';

```

#### alternative syntax: type: **Object**

```javascript

params: {

    org_if_sml: 1,

    grey: 1,

    ...

}

```

[Full cloudimage v7 documentation here.](https://docs.cloudimage.io/go/cloudimage-documentation-v7/en/introduction)

### placeholderBackground

###### Type: **String** | Default: **'#f4f4f4'** | _optional_

Placeholder colored background while the image is loading or use it to set your custom placeholder image or gif

for example

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

### lowQualityPreview

###### Type: **Object**

- `lowQualityPreview.minImgWidth` number (default: 400) - minimal width of an image to load low quality preview image

Example:

```javascript

params: {

    org_if_sml: 1,

    grey: 1,

    ...

```

### presets

###### Type: **Object**

Default:

```javascript

const cloudimageConfig = {

  token: 'demo',

  baseUrl: 'https://cdn.scaleflex.it/',

  ...

  presets: {

      xs: '(max-width: 575px)', // up to 575    PHONE

      sm: '(min-width: 576px)', // 576 - 767    PHABLET

      md: '(min-width: 768px)', // 768 - 991    TABLET

      lg: '(min-width: 992px)', // 992 - 1199   SMALL_LAPTOP_SCREEN

      xl: '(min-width: 1200px)' // from 1200    USUALSCREEN

  }

};

```

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

### limitFactor

###### Type: **Number** | Default: **100** | _optional_

Rounds up size of an image to nearest limitFactor value.

For example

- for an image with width **358px** and limitFactor equals **100** the plugin will round up to 400px

- for an image with width **358px** and limitFactor equals **5** the plugin will round up to 360px

### devicePixelRatioList

###### Type: **[Number,...]** | Default: **[1, 1.5, 2]** | _optional_

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

### delay

###### Type: **Number** | _optional_

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.

### 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

##  Image properties

### src

###### Type: **String** | Default: **undefined** | _required_

Original image hosted on your web server. You can use absolute path or

relative to baseUrl in your config.

**NOTES:**

The plugin uses a special algorithm to detect the width of image container and set the image size accordingly.

This is the recommended way of using the Cloudimage Responsive plugin.

### onImgLoad

###### Type: **function** | Default: **undefined**

A function to be executed after the image is loaded

```jsx

{console.log(params);}}/>

```

### width

###### Type: **String** (e.g. 300px, 20vw) | Default: **undefined**

If it's set the plugin will use width as fixed value and change only according device pixel ratio.

### height

###### Type: **String** (e.g. 300px, 20vh) | Default: **undefined**

If it's set the plugin will use height as fixed value and change only according device pixel ratio.

### params

###### Type: **String** | Default: **undefined** | _optional_

You can apply any Cloudimage operations/ filters to your image, e.g. brightness, contrast, rotation...

Multiple params can be applied, separated by "`&`" e.g. **wat_scale=35&wat_gravity=northeast&wat_pad=10&grey=1**

```javascript

params = 'gray=1&bright=10';

```

### doNotReplaceURL

###### Type: **bool** | Default: **false**

If set to **true** the plugin will only add query params to the given source of image.

#### alternative syntax: type: **Object**

```javascript

params={{

    bright: 10,

    grey: 1,

    ...

}}

```

[Full cloudimage v7 documentation here.](https://docs.cloudimage.io/go/cloudimage-documentation-v7/en/introduction)

### sizes

###### Type: **Object** | Default: **undefined**

**{preset breakpoint (xs,sm, md,lg,xl) or media query + ' ' + image params}**:

imageProps: **{ w, h, r, src }** where 

* **w** - width, 

* **h** - height, 

* **r** - ratio, 

* **src** - original image hosted on your web server. You can use absolute path or relative to the baseURL in your config.

```jsx



```

You can drop some breakpoints, for example:

```jsx



```

##### new experimental syntax

md: { w: '40vw', h: 350 } or md: { w: 250, h: '20vh' }

adds possibility to use fixed height or width and change dynamically other dimension

**NOTE:** if size is not set, the plugin uses a special algorithm to

detect the width of image container and set the image size accordingly. This is the recommended way of using the Cloudimage Responsive plugin.

### ratio

###### Type: **Number** | _optional_

It is recommended to prevent page layout jumping. The parameter is used to calculate image height to hold

the image position while image is loading.

The lazyLoad configuration to [LazyLoad](https://github.com/hilongjw/vue-lazyload#props) component.

To see the full cloudimage documentation [click here](https://docs.cloudimage.io/go/cloudimage-documentation)

## Browser support

Tested in all modern browsers and IE 11.

## Filerobot UI Familiy

- [JS Cloudimage Responsive](https://github.com/scaleflex/js-cloudimage-responsive)

- [Angular Cloudimage Responsive](https://github.com/scaleflex/ng-cloudimage-responsive)

- [JS Cloudimage 360 view](https://github.com/scaleflex/js-cloudimage-360-view)

- [Image Editor](https://github.com/scaleflex/filerobot-image-editor)

- [Uploader](https://github.com/scaleflex/filerobot-uploader)

## Contributing!

All contributions are super welcome!

## License

Vue Cloudimage Responsive is provided under the [MIT License](https://opensource.org/licenses/MIT)