@ember-responsive-image/cloudinary v0.0.0

@ember-responsive-image/cloudinary

Adds a provider helper for ember-responsive-image for the Cloudinary image CDN.

Compatibility

• Ember.js v4.8 or above
• Embroider or ember-auto-import v2

Installation

ember install @ember-responsive-image/cloudinary

Usage

Please make sure you have read the main documentation first, especially the section on image providers.

This addon provides a {{responsive-image-cloudinary-provider}} helper for use with the <ResponsiveImage/> component:

<ResponsiveImage
  @src={{responsive-image-cloudinary-provider 'path/to/uploaded/image.jpg'}}
/>

Transformations

Besides the transformations that the addon itself implicitly adds (related to resizing images) you can add your own Cloudinary transformations by using the transformations parameter:

<ResponsiveImage
  @src={{responsive-image-cloudinary-provider
    'path/to/uploaded/image.jpg'
    transformations='e_sharpen:400,e_grayscale'
  }}
/>

Quality

Use the quality parameter to pass a custom quality setting instead of the default auto:

<ResponsiveImage
  @src={{responsive-image-cloudinary-provider
    'path/to/uploaded/image.jpg'
    quality=50
  }}
/>

Image formats

By default, all supported image formats (PNG, JPEG, WEBP, AVIF) are referenced in the generated <source> tags. You can tweak that using the formats argument:

<ResponsiveImage
  @src={{responsive-image-cloudinary-provider
    'path/to/uploaded/image.jpg'
    formats=(array 'webp' 'avif')
  }}
/>

Remote files

The provider supports Cloudinary's fetch mode to automatically fetch images from a remote source and deliver them (with optional custom transformations) through Cloudinary's CDN. Simply pass a fully qualified http(s) URL:

<ResponsiveImage
  @src={{responsive-image-cloudinary-provider
    'https://upload.wikimedia.org/wikipedia/commons/1/13/Benedict_Cumberbatch_2011.png'
    transformations='e_grayscale'
  }}
/>

Configuration

You need to specify the cloudName in your app's config/addons.js file:

// config/addons.js
'use strict';

module.exports = {
  '@ember-responsive-image/cloudinary': {
    cloudName: 'my-org',
  },
};

License

This project is licensed under the MIT License.