{"id":32317,"date":"2024-01-02T07:00:00","date_gmt":"2024-01-02T15:00:00","guid":{"rendered":"https:\/\/cloudinary.com\/blog\/?p=32317"},"modified":"2024-08-15T16:51:03","modified_gmt":"2024-08-15T23:51:03","slug":"create-dynamic-social-cards-svelte-app","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/create-dynamic-social-cards-svelte-app","title":{"rendered":"Create Dynamic Social Cards for Your Svelte App With Cloudinary"},"content":{"rendered":"\n

An important part of creating content is having an inviting social image that shows when people share the link. Not only can this image give people more of an idea what your article is about, it can also make people more likely to notice and click on the link.<\/p>\n\n\n\n

For example, here\u2019s what a previous article about Svelte and Cloudinary<\/a> looks like when I share it with someone in Slack.\u00a0<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

However, creating these images by hand can be time-consuming. If you have a SvelteKit site, the svelte-cloudinary package<\/a> is a great choice for creating optimized social images. Let\u2019s see how we can generate dynamic, visually engaging social card images on-the-fly with the CldOgImage component.<\/p>\n\n\n\n

Generating Dynamic Social Cards Using Cloudinary in Svelte<\/h2>\n\n\n\n

If you want to follow along on a local project, run `npm create svelte@latest` in your terminal to create a new SvelteKit project. Then run npm i svelte-cloudinary<\/code> and follow the setup instructions<\/a>.<\/p>\n\n\n\n

For this demo, I\u2019ll be using this Unsplash image of stars<\/a> to create social card images from. You can upload that image to your Cloudinary library or choose another image you\u2019d like to use.<\/p>\n\n\n\n

First, let\u2019s add the CldOgImage component to our root +page.svelte<\/code>.<\/p>\n\n\n

```svelte\n<script<\/span> lang<\/span>=\"ts\"<\/span>><\/span>\n    import<\/span> { CldOgImage } from<\/span> 'svelte-cloudinary'<\/span>;\n<\/span><\/script<\/span>><\/span>\n\n<CldOgImage<\/span> src<\/span>=\"galaxy\"<\/span> text<\/span>=\"About Cloudinary\"<\/span>  \/><\/span>\n```<\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\n
In this case, the src<\/code> should be the ID of the Cloudinary image you want to use.<\/p>\n\n\n\n
The CldOgImage component will also add the appropriate open graph tags to the `<head>` of your site. If you open the devtools inspector, you\u2019ll see multiple <meta><\/code> elements with property=\u201dog:image\u201d<\/code> or similar.\u00a0 Social media websites and other apps that embed links will use these tags to show a preview of your link.\u00a0<\/p>\n\n\n\n
However, CldOgImage only renders meta tags in the <head><\/code> of your webpage using Svelte\u2019s special svelte:head element<\/a> \u2014 there won\u2019t be anything visible on the page. If you want to easily preview the result as you make changes, you can use svelte-cloudinary\u2019s getCldOgImageUrl<\/code> helper function to get the URL for the generated image and render another <img><\/code> for easy debugging.<\/p>\n\n\n
```svelte\n<script<\/span>><\/span>\n    import<\/span> { CldOgImage, getCldOgImageUrl } from<\/span> 'svelte-cloudinary'<\/span>;\n\n    let<\/span> props = {\n   \t src<\/span>: 'galaxy'<\/span>,\n   \t text<\/span>: 'About Cloudinary'<\/span>\n    };\n\n    let<\/span> ogSrc = getCldOgImageUrl(props);\n<\/span><\/script<\/span>><\/span>\n\n<CldOgImage<\/span> {...props<\/span>} \/><\/span>\n\n<h2<\/span>><\/span>OG Preview<\/h2<\/span>><\/span>\n<img<\/span> src<\/span>={ogSrc}<\/span> \/><\/span>\n```<\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\n
\"\"<\/figure>\n\n\n\n
You can also perform many different transformations to your image, just like with the CldImage component<\/a>. For example, to change the text color and font and move the text to the bottom of the image, you can use the overlays<\/code> prop:<\/p>\n\n\n
```svelte\n<CldOgImage\n    src=\"galaxy\"<\/span>\n    overlays={[\n   \t {\n   \t\t text: {\n   \t\t\t color: 'white'<\/span>,\n   \t\t\t fontFamily: 'Source Sans Pro'<\/span>,\n   \t\t\t fontSize: 160<\/span>,\n   \t\t\t text: 'Getting Started With Cloudinary'<\/span>\n   \t\t },\n   \t\t position: {\n   \t\t\t y: 100<\/span>,\n   \t\t\t gravity: 'south'<\/span>\n   \t\t }\n   \t }\n    ]}\n\/>\n```<\/code><\/span>Code language:<\/span> PHP<\/span> (<\/span>php<\/span>)<\/span><\/small><\/pre>\n\n\n
\"\"<\/figure>\n\n\n\n
One useful feature is Cloudinary\u2019s dynamic word-wrap depending on the title\u2019s length. With the following properties, Cloudinary will fit the text to the given size (in this case, 2100) and move subsequent text to the next lines.<\/p>\n\n\n
```svelte\n<CldOgImage\n    src=\"galaxy\"<\/span>\n    overlays={[\n   \t {\n   \t\t text: {\n   \t\t\t color: 'white'<\/span>,\n   \t\t\t fontFamily: 'Source Sans Pro'<\/span>,\n   \t\t\t fontSize: 160<\/span>,\n   \t\t\t text: 'Getting Started With Cloudinary & CldImage & CldOgImage & More'<\/span>\n   \t\t },\n   \t\t position: {\n   \t\t\t x: 50<\/span>,\n   \t\t\t y: 100<\/span>,\n   \t\t\t gravity: 'south_west'<\/span>\n   \t\t },\n   \t\t effects: [\n   \t\t\t {\n   \t\t\t\t crop: 'fit'<\/span>,\n   \t\t\t\t width: 2100<\/span>\n   \t\t\t }\n   \t\t ]\n   \t }\n    ]}\n\/>\n```<\/code><\/span>Code language:<\/span> PHP<\/span> (<\/span>php<\/span>)<\/span><\/small><\/pre>\n\n\n
\"\"<\/figure>\n\n\n\n
For more, see the CldOgImage docs<\/a>. The CldImage docs<\/a> also have a more extensive list of different transformation examples \u2014 anything you can apply to a CldImage, you can also apply to a CldOgImage.<\/p>\n\n\n\n
Automating the Social Card Creation Process<\/h2>\n\n\n\n
The CldOgImage component is particularly useful when you want to automate your social card creation process. If you\u2019re publishing articles frequently, you don\u2019t want to create social images by hand every time. Instead, use this component and Cloudinary\u2019s APIs to dynamically generate social images based on your article metadata.<\/p>\n\n\n\n
For example, let\u2019s say you have a +page.svelte file for your blog posts.<\/p>\n\n\n
```svelte\n<script<\/span>><\/span>\n\texport<\/span> let<\/span> data;\n<\/span><\/script<\/span>><\/span>\n\n<h1<\/span>><\/span>{data.title}<\/h1<\/span>><\/span>\n<p<\/span>><\/span>{data.author}<\/p<\/span>><\/span>\n\n{@html data.content}\n```<\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\n
First, you can create an ArticleOgImage component that takes an article title and renders an OG image. We\u2019ll use the configuration from the previous example and pass a dynamic title.<\/p>\n\n\n
```svelte\n<script<\/span>><\/span>\n    import<\/span> { CldOgImage } from<\/span> 'svelte-cloudinary'<\/span>;\n    export<\/span> let<\/span> title;\n<\/span><\/script<\/span>><\/span>\n\n<CldOgImage<\/span>\n    src<\/span>=\"galaxy\"<\/span>\n    overlays<\/span>={[<\/span>\n   \t {\n   \t\t text:<\/span> {\n   \t\t\t color:<\/span> 'white<\/span>',\n   \t\t\t fontFamily:<\/span> 'Source<\/span> Sans<\/span> Pro<\/span>',\n   \t\t\t fontSize:<\/span> 160<\/span>,\n   \t\t\t text:<\/span> title<\/span>\n   \t\t }\n        \t\t \/\/ the<\/span> rest<\/span> as<\/span> before<\/span>\n   \t }\n    ]}\n\/><\/span>\n```<\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\n
Then our article page can use that component so that each article has a dynamically generated social image.<\/p>\n\n\n
``<\/span>`svelte\n<ArticleOgImage title={data.title} \/>\n`<\/span>``<\/span><\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
For example, if data.title<\/code> was \u201cHow to use the CldOgImage component\u201d, the social image would look like this:<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
By using Cloudinary\u2019s cropping, the text will automatically wrap to the next line for long titles.<\/p>\n\n\n\n
Wrapping Up<\/h2>\n\n\n\n
In this post, we showed how easy it is to create dynamic social images using Cloudinary\u2019s CldOgImage component in a SvelteKit app. These social images make your links stand out more when you share them, and with svelte-cloudinary you can generate them automatically instead of creating one manually for every article or link you post.<\/p>\n\n\n\n
While we focused on CldOgImage today, the svelte-cloudinary package comes with other built-in components to help you optimize and customize your images:<\/p>\n\n\n\n
Behind the scenes, the CldOgImage component will use Cloudinary\u2019s APIs to generate a social card image based on the parameters you provide. Cloudinary will optimize your images so that you don\u2019t serve an image that is too large or in a suboptimal format. You can apply any of Cloudinary\u2019s available image transformations<\/a> to really make your link stand out! <\/p>\n\n\n\n