Programmable Media

Community-developed libraries

Last updated: Oct-30-2024

Developers from the Cloudinary community have developed a variety of integration libraries in coordination with Cloudinary. We invite you to use and contribute to these libraries.

On this page:

Next.js components
Astro components
Laravel package
Nuxt.JS components
Svelte components
Gatsby plugins
Netlify plugin
Drupal package

Important

Community-developed libraries are developed, tested and maintained by the community. Bug fixes and feature requests should be submitted in the relevant repository.
Throughout this documentation site, unless otherwise specified, the term "SDKs" refers to official Cloudinary SDK libraries. That information may or may not be relevant or accurate for these community-developed framework integration libraries. For information on setup, configuration and usage of these libraries, refer to the relevant community documentation.

Next.js components

Provides components and helper methods that enable you to upload and apply popular Cloudinary transformation and optimization features to your media when building Next.js applications.

Components:

CldImage: Optimize Cloudinary images with ready-to-use transformations
CldOgImage: Generate Open Graph images and social media cards
CldUploadButton: Create a drop-in button that opens the Cloudinary Upload Widget
CldUploadWidget: Create a Cloudinary Upload Widget with a customizable UI
CldVideoPlayer: Deliver Cloudinary video assets with a customizable player

Helper methods:

getCldImageUrl: Construct a Cloudinary image URL using the same API as CldImage
getCldOgImageUrl: Create a Cloudinary image URL specifically for OG Images or Social Media Cards

Get started:

Astro components

Provides components and helper methods that enable you to upload and apply popular Cloudinary transformation and optimization features to your media when building applications in Astro.

Components:

CldImage: Optimize Cloudinary images with ready-to-use transformations
CldUploadWidget: Create a Cloudinary Upload Widget with a customizable UI
CldVideoPlayer: Deliver Cloudinary video assets with a customizable player

Helper methods:

getCldImageUrl: Construct a Cloudinary image URL using the same API as CldImage
getCldOgImageUrl: Create a Cloudinary image URL specifically for OG Images or Social Media Cards
getCldVideoUrl: Create a Cloudinary video URL using a similar API as CldImage

Loaders:

cldAssetsLoader: Load Cloudinary images and videos into Astro's Content Layer

Get started:

Enables you to upload, optimize, transform and deliver media files using Cloudinary. It also provides a fluent and expressive API for attaching your media files to Eloquent models. With this package, you can:

Upload using the Cloudinary Facade, the cloudinary() helper function, or the upload widget
Attach files to Laravel Eloquent models
Use the AttachMedia method to add transformations to uploads
Apply common media management functions via command line

Get started:

Library

Nuxt.JS components

Provides components and composables enabling you to optimize and transform images and videos in a Nuxt application using the @nuxtjs/cloudinary module.

Components:

CldImage.vue: Generate Cloudinary images with ready-to-use optimizations and transformations
CldMediaLibrary.vue: Create a media gallery element using an instance of the Cloudinary Media Library Widget
CldOgImage.vue: Generate Open Graph images and social media cards
CldProductGallery.vue: Create a product gallery element that uses an instance of the Cloudinary Product Gallery Widget
CldUploadButton.vue: Create a Drop-in button that opens the Cloudinary Upload Widget
CldUploadWidget.vue: Create an upload widget element that uses an instance of the Cloudinary Upload Widget
CldVideoPlayer.vue: Deliver Cloudinary video assets with a customizable player

Composables:

useCldImageUrl: Generate a Cloudinary URL with selected optimizations

Get started:

Svelte components

Enables you to leverage the power of Cloudinary’s Programmable Media to enable high-performance image delivery and uploads in Svelte/SvelteKit applications at scale.

Components:

CldImage: Optimize Cloudinary images with ready-to-use transformations
CldOgImage: Generate Open Graph images and social media cards
CldUploadButton: Create a drop-in button that opens the Cloudinary Upload Widget
CldUploadWidget: Create a Cloudinary Upload Widget with a customizable UI
CldVideoPlayer: Deliver Cloudinary video assets with a customizable player

Helper methods:

getCldImageUrl: Generate a Cloudinary image URL without the component wrapper using the same API as CldImage
getCldOgImageUrl: Generate Cloudinary URLs for Open Graph images or social cards without the component wrapper using the same API as CldOGImage

Get started:

Gatsby plugins

Offers two Gatsby plugins that enable you to fetch media assets from Cloudinary.

Plugins:

gatsby-source-cloudinary: Fetches media assets from Cloudinary and converts them into Cloudinary file nodes, which can be queried with GraphQL in a Gatsby project.
gatsby-transformer-cloudinary: A transformer plugin used to change image formats, styles and dimensions. It also optimizes images for minimal file size alongside high visual quality for an improved user experience and minimal bandwidth.

Get started:

Netlify plugin

Hooks in to your Netlify build process and sets up images for optimization and delivery by automatically replacing your static images with Cloudinary URLs and then serving your assets directly from Cloudinary.

Get started: