Cloudinary is a media management platform for image and video handling. Sanity, meanwhile, enables structured content architectures and real-time collaboration, while Svelte offers an innovative approach to building web-based user interfaces.<\/p>\n\n\n\n
Together, these technologies transform CMS-driven galleries into dynamic, responsive experiences. Merging Cloudinary’s media capabilities with Sanity’s content management in a Svelte application lets developers create truly immersive, CMS-driven galleries. Through this article, we explore this integration and a demo implementation.<\/p>\n\n\n\n
Jump right into the action with hands-on examples present in our GitHub Repo<\/a>, or explore these techniques live here<\/a>.<\/p>\n\n\n\n The Sanity Cloudinary Plugin<\/a> provides easy access to Cloudinary’s images and videos within Sanity Studio. It consolidates the functionality of sanity-plugin-cloudinary and sanity-plugin-asset-source-cloudinary, offering secure API credential storage, easy configuration, and handy video player preview. Notably, it allows the creation and preview of transformations and incorporates Cloudinary’s media library, optimizing your media management efficiency within Sanity Studio.<\/p>\n\n\n\n This blog post assumes you already have a sanity project setup. You can also set up a new Sanity project by running the following command in the terminal.<\/p>\n\n\n You can read more about installing and setting up a Sanity Studio project here<\/a>.<\/p>\n\n\n\n To get started with the Sanity plugin, run the following commands in your Sanity studio project to install The In this example, we will use Update the Next, create a schema named In the above schema, we defined a field named In the Sanity Studio, this field allows you to select a singular Cloudinary asset or multiple assets in one go.<\/p>\n\n\n\n It opens the Cloudinary media library for selecting assets. You can also apply transformations while selecting the asset.<\/p>\n\n\n\n Here\u2019s what an asset of the type In this section, we\u2019ll integrate Sanity with our Svelte app. We\u2019re using a skeleton Svelte app, which can be set up by running the following command in the terminal:<\/p>\n\n\n You can choose the following configuration and tooling when prompted.<\/p>\n\n\n You can read more about creating a Svelte project here<\/a>.<\/p>\n\n\n\n Next, run the following command to install Sanity Client<\/a> and Svelte Cloudinary<\/a>.<\/p>\n\n\n Add the following environment variables to your Create a file named The next step is to create a file named Update Exploring the Sanity Cloudinary Plugin<\/h2>\n\n\n\n
Bridging Sanity Studio and Cloudinary Plugin<\/h2>\n\n\n\n
``<\/span>`\nnpm create sanity@latest\n`<\/span>``<\/span><\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\nsanity-plugin-cloudinary<\/code>.<\/p>\n\n\n``<\/span>`\nnpm i sanity-plugin-cloudinary\n`<\/span>``<\/span><\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\nsanity-plugin-cloudinary<\/code> comes with two exports:<\/p>\n\n\n\n\n
cloudinarySchemaPlugin<\/code> to serve the images from Cloudinary CDN.<\/p>\n\n\n\nsanity.config.js<\/code> file to include the plugin.<\/p>\n\n\n```\nimport {defineConfig} from 'sanity'<\/span>\nimport {deskTool} from 'sanity\/desk'<\/span>\nimport {visionTool} from '@sanity\/vision'<\/span>\nimport {schemaTypes} from '.\/schemas'<\/span>\nimport {cloudinarySchemaPlugin} from 'sanity-plugin-cloudinary'<\/span>\n\nexport default<\/span> defineConfig({\n name: 'default'<\/span>,\n title: 'studio'<\/span>,\n\n projectId: YOUR-SANITY-PROJECT-ID,\n dataset: YOUR-SANITY-DATASET',\n\n plugins: [deskTool(), visionTool(), cloudinarySchemaPlugin()],\n\n schema: {\n\ttypes: schemaTypes,\n },\n})\n\n```<\/span><\/code><\/span>Code language:<\/span> PHP<\/span> (<\/span>php<\/span>)<\/span><\/small><\/pre>\n\n\ngallery<\/code> like this.<\/p>\n\n\n```js\nimport {defineField, defineType} from 'sanity'<\/span>\n\nexport default<\/span> defineType({\n name: 'gallery'<\/span>,\n title: 'Gallery'<\/span>,\n type: 'document'<\/span>,\n fields: [\n\tdefineField({\n \t name: 'title'<\/span>,\n \t title: 'Title'<\/span>,\n \t type: 'string'<\/span>,\n\t}),\n\n\tdefineField({\n \t name: 'images'<\/span>,\n \t title: 'Images'<\/span>,\n \t type: 'array'<\/span>,\n \t of: [{type: 'cloudinary.asset'<\/span>}],\n\t})\n ],\n preview: {\n\tselect: {\n \t title: 'title'<\/span>,\n\t},\n },\n})\n\n```<\/code><\/span>Code language:<\/span> PHP<\/span> (<\/span>php<\/span>)<\/span><\/small><\/pre>\n\n\nimages<\/code>, an array<\/code> of type cloudinary.asset<\/code>.<\/p>\n\n\n\n![\"\"](\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/w_1024,h_658,c_scale\/f_auto,q_auto\/v1705515547\/Web_Assets\/blog\/Dynamic-CMS-Driven-Galleries_1\/Dynamic-CMS-Driven-Galleries_1.png?_i=AA\")
<\/figure>\n\n\n\n![\"\"](\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/w_1024,h_611,c_scale\/f_auto,q_auto\/v1705515541\/Web_Assets\/blog\/Dynamic-CMS-Driven-Galleries_2\/Dynamic-CMS-Driven-Galleries_2.png?_i=AA\")
<\/figure>\n\n\n\ncloudinary.asset<\/code> looks like.<\/p>\n\n\n```\n{\n \"created_at\"<\/span>: \"2023-12-13T06:22:11Z\"<\/span>,\n \"format\"<\/span>: \"jpg\"<\/span>,\n \"resource_type\"<\/span>: \"image\"<\/span>,\n \"access_mode\"<\/span>: \"public\"<\/span>,\n \"width\"<\/span>: 2132<\/span>,\n \"secure_url\"<\/span>: \"https:\/\/res.cloudinary.com\/singhashutoshk\/image\/upload\/v1702448531\/eb8y43ervardt38bqsyz.jpg\"<\/span>,\n \"id\"<\/span>: \"85a8909674e300ab9e6709b47df7dd45\"<\/span>,\n \"metadata\"<\/span>: [],\n \"_key\"<\/span>: \"0834b0b79241\"<\/span>,\n \"bytes\"<\/span>: 443351<\/span>,\n \"_type\"<\/span>: \"cloudinary.asset\"<\/span>,\n \"type\"<\/span>: \"upload\"<\/span>,\n \"tags\"<\/span>: [],\n \"access_control\"<\/span>: [],\n \"height\"<\/span>: 2299<\/span>,\n \"public_id\"<\/span>: \"eb8y43ervardt38bqsyz\"<\/span>,\n}\n```<\/code><\/span>Code language:<\/span> PHP<\/span> (<\/span>php<\/span>)<\/span><\/small><\/pre>\n\n\nConnecting the Svelte App to Sanity<\/h2>\n\n\n\n
``<\/span>`\nnpm create svelte@latest cloudinary-sanity-example\n`<\/span>``<\/span><\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n``<\/span>`\n\u250c Welcome to SvelteKit!\n\u2502\n\u25c7 Which Svelte app template?\n\u2502 SvelteKit demo app\n\u2502\n\u25c7 Add type checking with TypeScript?\n\u2502 No\n\u2502\n\u25c7 Select additional options (use arrow keys\/space bar)\n\u2502 none\n\u2502\n\u2514 Your project is ready!\n\n`<\/span>``<\/span><\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n``<\/span>` \nnpm i @sanity\/client groq svelte-cloudinary\t\n`<\/span>``<\/span><\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n.env<\/code> file.<\/p>\n\n\n``<\/span>`\nPUBLIC_SANITY_PROJECT_ID=YOUR-SANITY-PROJECT-ID\nPUBLIC_SANITY_DATASET=YOUR-SANITY-DATASET\n\n\nVITE_PUBLIC_CLOUDINARY_CLOUD_NAME=YOUR_CLOUDINARY_CLOUD_NAME\n`<\/span>``<\/span><\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\nlib\/sanityClient.js<\/code> where we\u2019ll initialize the Sanity Client. A Sanity Client interacts with your Sanity project\u2019s Content Lake<\/a> to perform operations like fetching documents, creating\/replacing documents, uploading assets, etc. Our primary use case in this tutorial is fetching the data from the Content Lake.<\/p>\n\n\n```\nimport { createClient } from '@sanity\/client'<\/span>;\nimport groq from 'groq'<\/span>;\nimport { PUBLIC_SANITY_DATASET, PUBLIC_SANITY_PROJECT_ID } from '$env\/static\/public'<\/span>;\n\nexport const<\/span> client = createClient({\n projectId: PUBLIC_SANITY_PROJECT_ID,\n dataset: PUBLIC_SANITY_DATASET,\n useCdn: false<\/span>,\n apiVersion: '2023-03-20'<\/span>\n});\n\nexport async function<\/span> getGallery<\/span>()<\/span> <\/span>{\n return<\/span> await client.fetch(groq`*[_type == \"gallery\"<\/span>] | order(_createdAt desc)[0<\/span>]`);\n}\n\n```<\/code><\/span>Code language:<\/span> PHP<\/span> (<\/span>php<\/span>)<\/span><\/small><\/pre>\n\n\n+page.js<\/code> and define a load<\/code> function to return the data from Sanity to the page (+page.svelte<\/code>) via the data<\/code> prop. You can read more about loading data in Svelte here<\/a>.<\/p>\n\n\n```\nimport { getGallery } from '$lib\/sanityClient'<\/span>;\nimport { error } from '@sveltejs\/kit'<\/span>;\n\nexport const<\/span> load = async () => {\n const<\/span> galleryData = await getGallery();\n\n if<\/span> (galleryData) {\n \t return<\/span> galleryData;\n }\n\n throw<\/span> error(404<\/span>, 'Not found'<\/span>);\n};\n\n```<\/code><\/span>Code language:<\/span> PHP<\/span> (<\/span>php<\/span>)<\/span><\/small><\/pre>\n\n\n+page.svelte<\/code> like this to access the data from Sanity via data<\/code> prop and render the gallery images using CldImage<\/code> from svelte-cloudinary<\/code>.<\/p>\n\n\n```\n<script<\/span>><\/span>\n import<\/span> { CldImage } from<\/span> 'svelte-cloudinary'<\/span>;\n\n export<\/span> let<\/span> data;\n<\/span><\/script<\/span>><\/span>\n\n<