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