getCldImageUrl Examples

Basic Transformations

Cloudinary supports a wide variety of powerful transformations that allow you to not only deliver, but easily edit and build new images on the fly.

Background Removal

Remove Background

removeBackground: Removes the background of the image using AI

import { getCldImageUrl } from 'astro-cloudinary/helpers';

const url = getCldImageUrl({
  src: '<Public ID>',
  removeBackground: true
});

Tip

The Cloudinary AI Background Removal add-on is required to use this feature.

Color Background

background: Specifies a color to use as a background.

import { getCldImageUrl } from 'astro-cloudinary/helpers';

const url = getCldImageUrl({
  src: '<Public ID>',
  removeBackground: true,
  background: 'blueviolet'
});

Image Background

underlay: Specifies a public ID to use as an underlaying image.

Tip

The Generative AI Background Replace feature can use AI to replace the background with an image based on a prompt, potentially resulting in better results!

import { getCldImageUrl } from 'astro-cloudinary/helpers';

const url = getCldImageUrl({
  src: '<Public ID>',
  removeBackground: true,
  underlay: 'samples/landscapes/nature-mountains'
});

Cropping & Resizing

Cropping

crop: Specifies the mode to use when cropping an image based on the given dimensions.

Note

By default, CldImage uses a gravity of auto, meaning the crop will automatically position the subject in the center of the resulting image.

import { getCldImageUrl } from 'astro-cloudinary/helpers';

const url = getCldImageUrl({
  src: '<Public ID>',
  crop: 'fill'
});

Cloudinary additionally supports dynamic crop modes like thumb that may provide a different result based on the given width and height. To help provide more options for controlling cropping images, you can specify and object or array of objects.

For instance, to crop the original source image, which will then later resize it to the initial width and height, you can use:

import { getCldImageUrl } from 'astro-cloudinary/helpers';

const url = getCldImageUrl({
  src: '<Public ID>',
  crop: {
    width: 600,
    height: 600,
    type: 'thumb',
    source: true
  }
});

• Expand Snippet
• Collapse Snippet

Which will provide a consistent crop for all rendered sizes.

Learn more about cropping and responsive images.

Generative Fill

fillBackground: Fills the background of an image using Generative AI

import { getCldImageUrl } from 'astro-cloudinary/helpers';

const url = getCldImageUrl({
  src: '<Public ID>',
  fillBackground: true,
  crop: 'pad' // Returns the given size with padding
});

• Expand Snippet
• Collapse Snippet

Tip

The generative fill transformation is currently in Beta. Learn more.

Generative Recolor

recolor: Recolors an object in an image using Generative AI

import { getCldImageUrl } from 'astro-cloudinary/helpers';

const url = getCldImageUrl({
  src: '<Public ID>',
  recolor: ['<Object>', '<Color>'],
});

Tip

The generative recolor transformation is currently in Beta. Learn more.

Generative Remove

remove: Removes an object in an image using Generative AI

import { getCldImageUrl } from 'astro-cloudinary/helpers';

const url = getCldImageUrl({
  src: '<Public ID>',
  remove: {
    prompt: '<Object>',
    removeShadow: true
  }
});

• Expand Snippet
• Collapse Snippet

Tip

The generative remove transformation is currently in Beta. Learn more.

Generative Replace

replace: Replaces an object in an image using Generative AI

import { getCldImageUrl } from 'astro-cloudinary/helpers';

const url = getCldImageUrl({
  src: '<Public ID>',
  replace: ['<Object>', '<Object>']
});

Tip

The generative replace transformation is currently in Beta. Learn more.

Generative Replace Background

replaceBackground: Replaces the background of an image with an AI-generated background.

import { getCldImageUrl } from 'astro-cloudinary/helpers';

const url = getCldImageUrl({
  src: '<Public ID>',
  replaceBackground: '<Prompt>'
});

Tip

The generative replace background transformation is currently in Beta. Learn more.

Filters & Effects

Included in the Cloudinary transformations library are different filters and effects that allow you to recolor, improve, fix, and artistically transform your images.

Blur

blur: Applies a blurring filter to an asset.

import { getCldImageUrl } from 'astro-cloudinary/helpers';

const url = getCldImageUrl({
  src: '<Public ID>',
  blur: 1200
});

Grayscale

grayscale: Converts an image to grayscale (multiple shades of gray).

import { getCldImageUrl } from 'astro-cloudinary/helpers';

const url = getCldImageUrl({
  src: '<Public ID>',
  grayscale: true
});

Opacity

opacity: Controls the opacity level of an image.

import { getCldImageUrl } from 'astro-cloudinary/helpers';

const url = getCldImageUrl({
  src: '<Public ID>',
  opacity: 50
});

Pixelate

pixelate: Applies a pixelation effect.

import { getCldImageUrl } from 'astro-cloudinary/helpers';

const url = getCldImageUrl({
  src: '<Public ID>',
  pixelate: true
});

Tint

tint: Blends an image with one or more tint colors.

import { getCldImageUrl } from 'astro-cloudinary/helpers';

const url = getCldImageUrl({
  src: '<Public ID>',
  tint: 'equalize:80:blue:blueviolet'
});

Chaining Multiple Effects

effects: An array of objects the configure the effects to apply to an image.

import { getCldImageUrl } from 'astro-cloudinary/helpers';

const url = getCldImageUrl({
  src: '<Public ID>',
  effects: [
    {
      background: 'green'
    },
    {
      gradientFade: true
    },
    {
      gradientFade: 'symetric,x_0.5'
    }
  ]
});

• Expand Snippet
• Collapse Snippet

More Filters & Effects

Learn about what other filters and effects are supported on getCldImageUrl Configuration.

Image Overlays

Image overlays allow you to place one or multiple images on top of another image.

Overlay Image by Public ID

overlays: Any array of overlay objects

import { getCldImageUrl } from 'astro-cloudinary/helpers';

const url = getCldImageUrl({
  src: '<Public ID>',
  overlays: [{
    publicId: '<Public ID>',
    position: {
      x: 50,
      y: 50,
      gravity: 'north_east',
    },
    effects: [{
      crop: 'fill',
      width: 350,
      height: 350,
      gravity: 'auto',
      border: '5px_solid_yellow'
    }]
  }
});

• Expand Snippet
• Collapse Snippet

Overlay Image with Blend Mode

appliedEffects: When configured on an overlay object, allows you to set an effect that applies a blend mode, such as “multiply”

import { getCldImageUrl } from 'astro-cloudinary/helpers';

const url = getCldImageUrl({
  src: '<Public ID>',
  overlays: [{
    publicId: '<Public ID>',
    effects: [{
      crop: 'fill',
      gravity: 'auto',
      width: '1.0',
      height: '1.0',
    }],
    flags: ['relative'],
    appliedEffects: [{ multiply: true }]
  }]
});

• Expand Snippet
• Collapse Snippet

Image Underlays

Image underlays allow you to place one or multiple images behind a base image.

Replace Background with Image

underlay: Public ID of image to use under base image

import { getCldImageUrl } from 'astro-cloudinary/helpers';

const url = getCldImageUrl({
  src: '<Public ID>',
  removeBackground: true,
  underlay: '<Public ID>'
});

• Expand Snippet
• Collapse Snippet

Replace Background with Multiple Images

underlays: Array of underlay objects

import { getCldImageUrl } from 'astro-cloudinary/helpers';

const url = getCldImageUrl({
  src: '<Public ID>',
  removeBackground: true,
  underlays: [
    {
      publicId: '<Public ID>',
      width: '0.5',
      height: '1.0',
      crop: 'fill',
      position: {
        gravity: 'north_west'
      },
      flags: ['relative']
    },
    {
      publicId: '<Public ID>',
      width: '0.5',
      height: '1.0',
      crop: 'fill',
      position: {
        gravity: 'south_east'
      },
      flags: ['relative']
    },
  ]
});

• Expand Snippet
• Collapse Snippet

Text Overlays

Text overlays allow you to place text on top of an image.

Adding Custom Text

overlays: Uses overlay objects to add text on top of an image.

import { getCldImageUrl } from 'astro-cloudinary/helpers';

const url = getCldImageUrl({
  src: '<Public ID>',
  overlays: [{
    position: {
      x: 60,
      y: 60,
      angle: -20,
      gravity: 'south_east',
    },
    text: {
      color: 'blueviolet',
      fontFamily: 'Source Sans Pro',
      fontSize: 160,
      fontWeight: 'black',
      textDecoration: 'underline',
      letterSpacing: -15,
      text: 'With Style'
    }
  }]
});

• Expand Snippet
• Collapse Snippet

Adding Text with Effects

effects: Applies effects to the overlaid text.

import { getCldImageUrl } from 'astro-cloudinary/helpers';

const url = getCldImageUrl({
  src: '<Public ID>',
  overlays: [{
    text: {
      color: 'white',
      fontFamily: 'Source Sans Pro',
      fontSize: 400,
      fontWeight: 'black',
      text: 'Touching Grass'
    },
    effects: [
      {
        shear: '40:0',
        opacity: 50
      }
    ]
  }]
});

• Expand Snippet
• Collapse Snippet

Misc

Video Thumbnail

assetType: Specifies the type of asset to be delivered.

This is handy when wanting to create an image thumbnail from a video, where the asset type would be “video”, yet delivering an image.

Note

If using getCldImageUrl with CldImage, you currently must specify assetType on CldImage

import { getCldImageUrl } from 'astro-cloudinary/helpers';

const url = getCldImageUrl({
  assetType: 'video',
  src: '<Your Video Public ID>'
});

More Examples

Find more examples on Social Card Templates.