Community-developed libraries
Last updated: Sep-02-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.
- 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:
- Docs
- Library
- Video tutorial: Install and configure Cloudinary in Next.js
- Video tutorial: Embedding a video player in Next.js
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:
-
Docs
- Library
- Video tutorial: Configure the Nuxt image component to use Cloudinary
- Video tutorial: Optimize images in Nuxt with Nuxt Cloudinary
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:
- Docs
- Library
- Video Tutorial: Install and configure Cloudinary in Svelte
- Video Tutorial: Upload images & videos with Svelte Cloudinary
Gatsby plugins
Offers two Gatsby plugins that enable you to 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: