CldOgImage Examples

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.

Basic Image

src: Specifies a public ID to use as the image

import { CldImage } from 'next-cloudinary';
 
<CldOgImage
  src="<Public ID>"
/>

Background Removal

Image Background

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

import { CldImage } from 'next-cloudinary';
 
<CldOgImage
  src="<Public ID>"
  tint="100:0000FF:0p:FF1493:100p"
  blur="2000"
  removeBackground
  overlays={[{
    text: {
      color: 'white',
      fontFamily: 'Source Sans Pro',
      fontSize: 120,
      fontWeight: 'bold',
      text: 'Next Cloudinary'
    }
  }]}
  underlay="images/galaxy"
/>

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 { CldImage } from 'next-cloudinary';
 
<CldOgImage
  src="<Public ID>"
  overlays={[{
    text: {
      fontFamily: 'Source Sans Pro',
      fontSize: 120,
      fontWeight: 'bold',
      text: 'Next Cloudinary'
    }
  }]}
/>

Configuration Basic Usage