Cloudinary

Large media libraries hit the 4 MB file upload ceiling fast, and high-resolution product shots, portfolios, and video typically need manual resizing or format conversion before they ever reach your site. Connecting Cloudinary skips that prep work entirely.

Images and video live on Cloudinary's CDN, where URL parameters control format, quality, dimensions, and cropping on the fly. Webflow CMS fields store URL references instead of files, so the 4 MB limit no longer applies to source assets — and visitors get WebP, AVIF, or JPEG matched to their browser and screen size automatically. It's a strong fit for ecommerce catalogs, agency client sites, editorial teams, and photography portfolios.

How to integrate Cloudinary with Webflow

What is Cloudinary? Cloudinary is an image and video API platform for uploading, transforming, compressing, and delivering media assets. It provides URL-based transformations, embeddable widgets for uploads and galleries, and a global CDN that serves format- and device-matched assets. SDKs are available for Node.js, Python, PHP, JavaScript, React, and 14+ other environments.

Reach for Cloudinary when a site's media volume, file sizes, or performance requirements exceed what native asset handling supports. Large product catalogs and photography portfolios with high-resolution originals are common cases. Video-heavy marketing pages also benefit from Cloudinary's on-the-fly processing and CDN delivery.

There are three broad connection methods, which most teams break into four practical implementation patterns:

• Cloudinary URL transformations let you paste transformed image and video URLs directly into CMS fields or native elements without writing code.
• Cloudinary widgets via Code Embed elements add drag-and-drop upload forms, product galleries, and script-based video players to your pages.
• Automation workflows with Zapier create CMS items automatically when new assets are uploaded or tagged in Cloudinary.
• The Data API and Cloudinary API give you full control over media pipelines, webhook-driven publishing, and batch CMS updates, but require server-side development.

Most implementations combine two or more of these methods depending on the complexity of the setup.

Embed Cloudinary assets with URL transformations

Cloudinary delivers every asset through a URL that accepts inline transformation parameters. You can paste these URLs directly into image elements, video elements, or CMS text and image fields without any JavaScript or custom code. This method works on every plan, including free Starter workspaces.

Use this Cloudinary delivery URL structure:

https://res.cloudinary.com/[cloud-name]/image/upload/[transformations]/[public-id].[format]

Append parameters between /upload/ and the public ID to control output. You'll reach for these most often:

• f_auto selects the best format per browser (WebP, AVIF, JPEG)
• q_auto adjusts quality automatically to reduce file size
• w_800,h_600,c_fill resizes and crops to exact dimensions
• dpr_auto serves higher-resolution assets to Retina screens

These parameters cover common image sizing needs across screen sizes and can be combined in a single delivery URL.

To set up URL-based delivery:

1. Upload your image to the Cloudinary Console under Media Library > Upload.
2. Construct a delivery URL with your desired transformation parameters. For example: https://res.cloudinary.com/mycompany/image/upload/f_auto,q_auto,w_800,c_fill/my-hero-image.jpg
3. Paste the URL into a browser tab to confirm the transformed image loads correctly.
4. Open the CMS Collection and paste the URL into a Text or Image field on the relevant item.
5. On the Collection page template, bind that field to an Image element's source.
6. Publish the site and verify the image renders from Cloudinary's CDN.

This approach requires manual URL construction per asset. For workflows that populate CMS fields without manual pasting, the Zapier and API methods below cover those cases.

Add Cloudinary widgets with Code Embed elements

Cloudinary provides client-side JavaScript widgets that add upload, gallery, and video playback features to your pages. Most script-based widget setups load a script in custom code in head and body tags and initialize the widget in a Code Embed element on the page. For simpler video use cases, Cloudinary also offers an iframe embed option that you can paste into a Code Embed element without separate script loading.

Custom code availability depends on your workspace or site-plan entitlements. If your workspace is on the free Starter tier and you don't have an active site plan, you can't add Code Embed elements or inject scripts. Upgrade to Core or higher, or use an active site plan, to use custom code features.

Add the Upload Widget

Visitors or content editors can use the Upload Widget to upload files directly to Cloudinary through a drag-and-drop interface. It supports uploads from local devices, cameras, Google Drive, Dropbox, Instagram, Unsplash, and iStock. You don't need any server-side code because uploads go through an unsigned upload preset.

To add the Upload Widget:

1. Go to Site Settings > Custom Code > Head Code and paste the widget script:```html

2. In the Cloudinary Console, go to Settings > Upload > Upload presets > Add upload preset. Set the Signing Mode to Unsigned and save the preset name.
3. Add a Code Embed element to the page where you want the upload button. Paste this initialization code:```html
<button id="upload_widget" onclick="openWidget()">Upload Image</button>
<script type="text/javascript">
  function openWidget() {
    cloudinary.openUploadWidget({
      cloudName: 'YOUR_CLOUD_NAME',
      uploadPreset: 'YOUR_UNSIGNED_PRESET_NAME',
      sources: ['local', 'url', 'camera', 'google_drive', 'dropbox'],
      multiple: false
    }, function(error, result) {
      if (!error && result && result.event === "success") {
        console.log('Uploaded URL: ', result.info.secure_url);
      }
    });
  }
</script>

4. Publish the site and test the widget on the live URL. The widget won't execute inside the canvas preview.

Replace YOUR_CLOUD_NAME and YOUR_UNSIGNED_PRESET_NAME with values from your Cloudinary Console dashboard and upload preset settings. The secure_url returned in the callback contains the CDN delivery URL for the uploaded asset.

Add the Product Gallery Widget

The Product Gallery Widget displays images, videos, 360 spin sets, and 3D models in a configurable gallery viewer. It works well on ecommerce product pages or portfolio detail pages where visitors need to browse multiple media assets for a single item.

To add the Product Gallery:

1. Go to Site Settings > Custom Code > Head Code and add the gallery script:```html

2. Add a Div Block to the page and assign it the ID `my-gallery` in the element settings panel.
3. Below the Div Block, add a Code Embed element with the initialization code:```javascript
const myGallery = cloudinary.galleryWidget({
  container: "#my-gallery",
  cloudName: "your-cloud-name",
  mediaAssets: [{ tag: "your-tag" }]
});
myGallery.render();

4. Publish and test on the live site.

The mediaAssets array accepts tags, public IDs, or a mix of both. Set mediaType: "video" in an asset object to include video alongside images. Cloudinary also provides a Product Gallery configurator where you can configure options visually, click Copy to Clipboard, and paste the generated code directly into a Code Embed element.

Embed the Video Player

Cloudinary's Video Player handles bitrate-switched delivery, automatic quality selection, and configurable controls. You can use it in two ways.

Script-based player: Load the player CSS and JS in your site's head code, then add a <video> tag through a Code Embed element:

<video id="my-player" class="cld-video-player cld-fluid" data-cld-public-id="your-public-id"></video>

The cld-fluid class makes the player adjust to its container width.

iframe embed (zero scripts): Log into the Cloudinary Console, open Media Library, right-click your video asset, and select Embed. Choose the iframe format, copy the code, and paste it into a Code Embed element. This approach requires no separate script loading and works well when you want the simplest setup.

If you use both the Video Player and Upload Widget on the same page, load the Video Player scripts first in the head code to avoid initialization conflicts. You can add uploads, galleries, and video playback without building a custom backend.

Connect with Zapier

Zapier has two pre-built templates for this pairing:

• Create Webflow items from new tagged Cloudinary resources triggers when you apply a specific tag to a Cloudinary asset and creates a corresponding CMS item.
• Create new Webflow items from newly uploaded Cloudinary resources triggers on any new upload and maps asset data to CMS fields.

To set up one of these Zapier templates:

1. Create a Zapier account and connect your Cloudinary account via OAuth.
2. Connect your Webflow account via OAuth.
3. Select one of the two pre-built templates from the Cloudinary + Webflow integration page.
4. Map Cloudinary fields to your target CMS collection fields.
5. Activate the Zap and test with a sample upload.

Free Zapier plans check for new uploads every 15 minutes. For instant sync, you need a paid Zapier plan with webhook triggers.

Build with the Data API and Cloudinary API

API integration gives you full control over how media flows between Cloudinary and your site. This approach requires a backend server or serverless functions to handle authentication, webhook processing, and data transformation. It suits agency developers building client media pipelines and teams with custom publishing workflows.

Use these APIs:

• The Cloudinary Upload API handles asset uploads, eager transformations, and deletion
• The Cloudinary Admin API manages folders, tags, metadata fields, and asset listings
• The Data API handles CMS collections and asset management
• Webhooks trigger real-time events when CMS items are created, changed, or published

Together, these APIs cover uploads, metadata management, CMS updates, and event-driven publishing flows.

Cloudinary server-side authenticated API calls commonly use HTTP Basic Authentication with your API key and secret. Browser-safe upload workflows can use unsigned upload presets, and signed upload flows use signed parameters generated on your backend. Data API calls use Bearer token authentication with OAuth scopes. Never expose the Cloudinary API secret or your Data API Bearer token in client-side code.

Store processed images in Webflow CMS

In the most common API workflow, you upload assets to Cloudinary, construct transformation URLs, and write those URLs into CMS item fields.

To implement this:

1. Upload an image to Cloudinary via the Upload API:```bash curl -X POST https://api.cloudinary.com/v11/{cloudname}/image/upload
   -F "file=@photo.jpg"
   -F "uploadpreset=webflowcms"

The response includespublicidandsecureurl. 2. Construct a transformation URL by inserting parameters between/upload/and the public ID:https://res.cloudinary.com/{cloudname}/image/upload/qauto,fauto,w1200/leatherbaggray.jpg

3. Write the URL to a CMS item using the Data API:```bash
curl -X PATCH \
  https://api.webflow.com/v2/collections/{collection_id}/items/{item_id} \
  -H "Authorization: Bearer YOUR_TOKEN" \
  -H "Content-Type: application/json" \
  -d '{"fieldData": {"hero-image-url": "https://res.cloudinary.com/demo/image/upload/q_auto,f_auto,w_1200/leather_bag_gray.jpg"}}'

This pattern keeps high-resolution originals in Cloudinary and stores only lightweight URL strings in the CMS.

Automate publishing after image processing

For sites that need processed media to go live without manual intervention, combine Cloudinary's eager transformations with webhook notifications and the publish endpoint.

To implement this:

1. Upload to Cloudinary with an eager transformation and a notification URL:```bash
   curl -X POST https://api.cloudinary.com/v11/{cloudname}/image/upload
   -F "file=@/path/to/image.jpg"
   -F "uploadpreset=webflowcms"
   -F "eager=w800,h600,cfill,qauto,fauto"-F "notificationurl=https://your-backend.com/cloudinary-webhook"
2. Your backend receives a webhook POST from Cloudinary when the eager transformation completes. The payload includes the secure_url for the processed asset.
3. Your backend writes the URL to a CMS item via PATCH /v2/collections/{collection_id}/items/{item_id}.
4. Your backend publishes the item via POST /v2/collections/{collection_id}/items/publish with the item ID in the request body. This endpoint returns 202 Accepted and processes asynchronously.

You can also register a webhook for collection_item_changed events to trigger Cloudinary processing in the other direction. When an editor updates a CMS item, your backend receives the event and calls Cloudinary's Explicit API to generate new derivatives like Open Graph images. Use this approach when your publishing flow depends on backend logic and webhook coordination.

What can you build with the Cloudinary Webflow integration?

Integrating Cloudinary lets you deliver device-aware, format-selected media across your site without manual image exports or format conversions.

Auto-processed product catalogs: Store a single high-resolution image per SKU in Cloudinary and use URL parameters like f_auto,q_auto,w_800,c_fill to generate thumbnails, detail views, and mobile crops on demand. CMS items hold only the URL strings. Each product page template then renders format- and device-matched images from Cloudinary's CDN.

• Photography portfolio galleries: Upload full-resolution images to Cloudinary without hitting the 4 MB file limit. Use URL transformations to deliver compressed, device-specific versions from a single source asset. A Collection List bound to CMS items containing Cloudinary URLs populates the gallery data automatically.
• User-submitted media portals: Add the Upload Widget to a page so visitors or contributors upload files directly to Cloudinary. A Zapier template or backend webhook creates a draft CMS item with the uploaded asset URL. Content moderators review and publish approved submissions from the CMS editor.
• Video-rich marketing pages: Upload video assets to Cloudinary with bitrate-switched transcoding, then embed the Cloudinary Video Player on your landing pages. Cloudinary handles HLS delivery, quality switching, and thumbnail generation. CMS fields store the video public ID and thumbnail URL for each page.

If you need more control over webhook-driven publishing pipelines or batch CMS updates across large media libraries, use the API integration path.