Image Overlays

With the CldImage component, you can easily place an image onto an existing image with overlays.

Example

CldImage

import { CldImage } from 'astro-cloudinary';

<CldImage
  src="<Public ID>"
  width="<Width>"
  height="<Height>"
  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'
    }]
  }]}
  alt=""
  sizes="100vw"
/>

• Expand Snippet
• Collapse Snippet

getCldImageUrl

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

getCldImageUrl({
  width: 1335,
  height: 891,
  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

Learn More

• CldImage
• getCldImageUrl