Social Media Cards

Note

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

<CldImage />

<script>
  import { CldImage } from 'svelte-cloudinary';
</script>

<CldOgImage
  src="images/white"
  twitterTitle="Svelte Cloudinary"
  alt="Svelte Cloudinary with picture of a mountain"
  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: 'Svelte 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 Svelte project with Svelte Cloudinary!',
      },
      position: {
        x: 100,
        y: 100,
        gravity: 'west',
      },
    },
  ]} />

getCldImageUrl()

import { getCldOgImageUrl } from 'svelte-cloudinary';

// You're responsible for adding the correct meta tags
const url = getCldOgImageUrl({
  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: 'Svelte 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 Svelte project with Svelte Cloudinary!',
      },
      position: {
        x: 100,
        y: 100,
        gravity: 'west',
      },
    },
  ],
});