Generating Social Media Cards

Example

• CldOgImage

  <script>
    import { CldImage } from 'svelte-cloudinary'
  </script>
  
  
  <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: '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',
        },
      },
    ]}
    twitterTitle="Svelte Cloudinary"
    alt="Svelte Cloudinary with picture of a mountain"
  />

• getCldOgImageUrl

Learn More

• CldOgImage Configuration