Skip to content

<CldOgImage /> Examples

Text Overlays

<script>
import { CldOgImage } from 'svelte-cloudinary';
</script>
<CldOgImage
src="<Your Public ID>"
overlays={[
{
text: {
color: 'white',
fontFamily: 'Source Sans Pro',
fontSize: 120,
fontWeight: 'bold',
text: 'Svelte Cloudinary',
},
},
]}
/>

Background Removal

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

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

You can find more examples on the <CldImage /> page.