Cloudinary

The image processing capabilities of the Cloudinary image CDN are supported by a helper function provided to you by this library.

Setup

Make sure you have the @responsive-image/cdn package installed:

npm

npm install @responsive-image/cdn

yarn

yarn add @responsive-image/cdn

pnpm

pnpm add @responsive-image/cdn

You need to specify the cloudName in your configuration, which you can set up in your application (e.g. app.js):

import { setConfig } from '@responsive-image/core';

setConfig('cdn', {
  cloudinary: {
    cloudName: 'my-org',
  },
});

Usage

IMPORTANT

Please make sure you have read the section on remote images first.

Use the cloudinary provider function passing the reference to the image on the CDN and optional transformations, and pass the return value to the image component:

Ember .gjs

import { ResponsiveImage } from '@responsive-image/ember';
import { cloudinary } from '@responsive-image/cdn';

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

Ember .hbs

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

Lit

import { LitElement, html } from 'lit';
import { customElement } from 'lit/decorators.js';
import { cloudinary } from '@responsive-image/cdn';
import '@responsive-image/wc';

@customElement('my-app')
export class MyApp extends LitElement {
  render() {
    return html`<responsive-image
      .src=${cloudinary('path/to/uploaded/image.jpg')}
    ></responsive-image>`;
  }
}

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:

Ember .gjs

import { ResponsiveImage } from '@responsive-image/ember';
import { cloudinary } from '@responsive-image/cdn';

<template>
  <ResponsiveImage
    @src={{cloudinary
      'path/to/uploaded/image.jpg'
      transformations=(hash co='rgb:20a020' e='colorize:50')
    }}
  />
</template>

Ember .hbs

<ResponsiveImage
  @src={{responsive-image-cloudinary
    'path/to/uploaded/image.jpg'
    transformations=(hash co='rgb:20a020' e='colorize:50')
  }}
/>

Lit

import { LitElement, html } from 'lit';
import { customElement } from 'lit/decorators.js';
import { cloudinary } from '@responsive-image/cdn';
import '@responsive-image/wc';

@customElement('my-app')
export class MyApp extends LitElement {
  render() {
    return html`<responsive-image
      .src=${cloudinary('path/to/uploaded/image.jpg', {
        co: 'rgb:20a020',
        e: 'colorize:50',
      })}
    ></responsive-image>`;
  }
}

:::

It accepts an object of transformations, or an array of objects for chained transformations.

Quality

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

Ember .gjs

import { ResponsiveImage } from '@responsive-image/ember';
import { cloudinary } from '@responsive-image/cdn';

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

Ember .hbs

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

Lit

import { LitElement, html } from 'lit';
import { customElement } from 'lit/decorators.js';
import { cloudinary } from '@responsive-image/cdn';
import '@responsive-image/wc';

@customElement('my-app')
export class MyApp extends LitElement {
  render() {
    return html`<responsive-image
      .src=${cloudinary('path/to/uploaded/image.jpg', {
        quality: 50,
      })}
    ></responsive-image>`;
  }
}

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:

Ember .gjs

import { ResponsiveImage } from '@responsive-image/ember';
import { cloudinary } from '@responsive-image/cdn';

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

Ember .hbs

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

Lit

import { LitElement, html } from 'lit';
import { customElement } from 'lit/decorators.js';
import { cloudinary } from '@responsive-image/cdn';
import '@responsive-image/wc';

@customElement('my-app')
export class MyApp extends LitElement {
  render() {
    return html`<responsive-image
      .src=${cloudinary('path/to/uploaded/image.jpg', {
        formats: ['webp', 'avif'],
      })}
    ></responsive-image>`;
  }
}

Remote source

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:

Ember .gjs

import { ResponsiveImage } from '@responsive-image/ember';
import { cloudinary } from '@responsive-image/cdn';

<template>
  <ResponsiveImage
    @src={{cloudinary
      'https://upload.wikimedia.org/wikipedia/commons/1/13/Benedict_Cumberbatch_2011.png'
    }}
  />
</template>

Ember .hbs

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

Lit

import { LitElement, html } from 'lit';
import { customElement } from 'lit/decorators.js';
import { cloudinary } from '@responsive-image/cdn';
import '@responsive-image/wc';

@customElement('my-app')
export class MyApp extends LitElement {
  render() {
    return html`<responsive-image
      .src=${cloudinary(
        'https://upload.wikimedia.org/wikipedia/commons/1/13/Benedict_Cumberbatch_2011.png',
      )}
    ></responsive-image>`;
  }
}