• Use Cases
  • Social Media Card

Generating Social Media Cards

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.

Example

<CldOgImage
  src="images/white"
  overlays={[
    {
      publicId: 'images/mountain',
      position: {
        x: 0,
        y: 0,
        gravity: 'north_east',
      },
      effects: [
        {
          crop: 'fill',
          gravity: 'auto',
          width: 800,
          height: 1200
        }
      ]
    },
    {
      width: 1400,
      crop: 'fit',
      text: {
        color: 'black',
        fontFamily: 'Source Sans Pro',
        fontSize: 160,
        fontWeight: 'bold',
        text: 'Next Cloudinary'
      },
      position: {
        x: 100,
        y: -100,
        gravity: 'west',
      },
    },
    {
      width: 1400,
      crop: 'fit',
      text: {
        color: 'black',
        fontFamily: 'Source Sans Pro',
        fontSize: 80,
        text: 'Get the power of Cloudinary in a Next.js project with Next Cloudinary!'
      },
      position: {
        x: 100,
        y: 100,
        gravity: 'west',
      },
    },
  ]}
  twitterTitle="Next Cloudinary"
  alt="Next Cloudinary with picture of a mountain"
/>

Learn More

Last updated on December 2, 2022