Programmable Media
Menu

Community-developed libraries

Last updated: Dec-09-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:

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:

Laravel package

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:

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:

Drupal package

The Drupal Cloudinary Community Library seamlessly integrates Cloudinary's media file management services into Drupal websites. It allows you to:

  • Insert images and videos into pages using blocks.
  • Apply image transformations within Drupal.
  • Display your videos with the Cloudinary Video Player.
  • Upload media files to Cloudinary and access them.
  • Leverage Cloudinary's file management, including various storage options.
  • Integrate seamlessly with Cloudinary's SDK for enhanced functionality.
  • Access the Cloudinary Media Library Widget from directly within Drupal.
  • Define Cloudinary as your media source.

Overall, it streamlines image and video management, storage, and SDK integration, optimizing media workflows within Drupal.

Get started:

✔️ Feedback sent!

Rate this page: