Getting Started with CldOgImage
The CldOgImage Component give you the ability to use the same CldImage API to easily generate Open Graph images (or social cards) inside of SvelteKit
Basic Usage
The basic required prop is src:
<script>
import { CldOgImage } from 'svelte-cloudinary';
</script>
<CldOgImage src="<Public ID>" />Place the CldOgImage component anywhere in your svelte component (like in a +page.svelte for SvelteKit users).
The resulting HTML will be applied to the Head of the document:
<meta
property="og:image"
content="https://res.cloudinary.com/svelte-cloudinary/image/upload/c_fill,w_2400,h_1254,g_center/c_scale,w_1200/f_jpg/q_auto/v1/images/galaxy"
/>
<meta
property="og:image:secure_url"
content="https://res.cloudinary.com/svelte-cloudinary/image/upload/c_fill,w_2400,h_1254,g_center/c_scale,w_1200/f_jpg/q_auto/v1/images/galaxy"
/>
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="627" />
<meta property="twitter:title" content=" " />
<meta property="twitter:card" content="summary_large_image" />
<meta
property="twitter:image"
content="https://res.cloudinary.com/svelte-cloudinary/image/upload/c_fill,w_2400,h_1254,g_center/c_scale,w_1200/f_webp/q_auto/v1/images/galaxy"
/>
CldOgImage does not render an `<img>` tag, meaning it can't be visually embedded on a page. This example makes use of the `<CldImage>` tag to showcase what's possible.
Transformations
You can further take advantage of Cloudinary features like background removal and overlays by adding additional props.
The CldOgImage component uses the same API as CldImage, meaning you can use the same transformations and effects.
<script>
import { CldOgImage } from 'svelte-cloudinary';
</script>
<CldOgImage
src="<Public ID>"
tint="100:0762a0"
removeBackground
opacity="40"
overlays={[
{
text: {
color: 'white',
fontFamily: 'Source Sans Pro',
fontSize: 200,
fontWeight: 'bold',
text: '<Text>'
}
}
]}
underlay="<Public ID>"
alt="<Description>"
twitterTitle="<Title>"
/>
CldOgImage does not render an `<img>` tag, meaning it can't be visually embedded on a page. This example makes use of the `<CldImage>` tag to showcase what's possible.