Getting Started with CldOgImage

The CldOgImage component provides an easy way to deliver images from Cloudinary in an Astro app.

With it comes access to more advanced features like dynamic cropping, background removal, overlays, and other Cloudinary transformations.

As CldImage is a wrapper around the Unpic Image component, you also gain access to built-in Image component features that will work out-of-the-box like Responsive Sizing.

Basic Usage

The basic required props include twitterTitle, src, and alt:

CldOgImage does not render an <img> tag, meaning it can’t be visually embedded on a page. The following examples make use of the <CldImage> tag to showcase what’s possible.

---
import { CldOgImage } from 'astro-cloudinary';
---
<CldOgImage
  src="<Public ID>"
  twitterTitle="<Title>"
  alt="<Description>"
/>

The resulting HTML will be applied to the Head of the document including all applicable open graph tags:

<meta property="og:image" content="https://res.cloudinary.com/colbycloud-next-cloudinary/image/upload/c_fill,w_1200,h_627,g_center/c_limit,w_1200/f_jpg/q_auto/v1/images/galaxy" />
<meta property="og:image:secure_url" content="https://res.cloudinary.com/colbycloud-next-cloudinary/image/upload/c_fill,w_1200,h_627,g_center/c_limit,w_1200/f_jpg/q_auto/v1/images/galaxy" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="twitter:title" content=" " />
<meta property="twitter:card" content="summary_large_image" />
<meta property="twitter:image" content="https://res.cloudinary.com/colbycloud-next-cloudinary/image/upload/c_fill,w_1200,h_627,g_center/c_limit,w_1200/f_webp/q_auto/v1/images/galaxy" />

The src property takes in a Cloudinary Public ID which includes the folder path along with the ID of the image itself. The twitterTitle should represent the title of the page and the alt value should be a text-based description of the image.

Additional Features

You can further take advantage of Cloudinary features like replacing backgrounds with generative AI and text overlays by adding additional props:

---
import { CldOgImage } from 'astro-cloudinary';
---
<CldOgImage
  src="<Public ID>"
  twitterTitle="<Title>"
  alt="<Description>"
  crop={{
    type: 'fill',
    source: true
  }}
  replaceBackground="cartoon outer space"
  overlays={[
    {
      position: {
        y: 40,
        x: -10,
        gravity: 'south',
      },
      text: {
        color: 'magenta',
        fontFamily: 'Source Sans Pro',
        fontSize: 160,
        fontWeight: 'black',
        text: 'OUT OF THIS WORLD'
      }
    },
    {
      position: {
        y: 50,
        gravity: 'south',
      },
      text: {
        color: 'white',
        fontFamily: 'Source Sans Pro',
        fontSize: 160,
        fontWeight: 'black',
        text: 'OUT OF THIS WORLD'
      }
    },
  ]}
/>

• Expand Snippet
• Collapse Snippet

Check out more examples of what you can do with transformations in the CldImage docs because the CldOgImage supports all the params that the CldImage component does!

Learn More about CldOgImage with the CldImage docs

• Configuration
• Examples \