Skip to content
Astro Cloudinary

getCldOgImageUrl Examples

The below examples use the CldImage component to render the images. This is not required, you can use the URL returned by getCldOgImageUrl in any way you like.

Basic Image

src: The public ID of the image to use as a Social Card

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


const url = getCldOgImageUrl({ src: '<Your Public ID>' });

Change Background

replaceBackground: Uses generative AI to replace a background

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


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

Text Overlay

text: Adds basic text to the image

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


const url = getCldOgImageUrl({
  src: '<Your Public ID>',
  overlays: [{
    text: {
      fontFamily: 'Source Sans Pro',
      fontSize: 120,
      fontWeight: 'bold',
      text: 'Astro Cloudinary'
    }
  }]
});