> ## Documentation Index
> Fetch the complete documentation index at: https://cloudinary.com/documentation/llms.txt
> Use this file to discover all available pages before exploring further.

# Community-developed libraries


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.

> **INFO**:
>
> * 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.

## 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

* [Docs](https://astro.cloudinary.dev/) 
* [Library](https://github.com/cloudinary-community/astro-cloudinary) 
* [Video tutorial: Image Gallery with Astro Collections and Cloudinary](https://www.youtube.com/watch?v=iS3bHR0bVOI)

### Sample projects

* [Photo album](https://github.com/cloudinary-devs/astro-pa)

## 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

* [Library](https://github.com/cloudinary-community/cloudinary-laravel/)
* [Video tutorial: Install and configure Cloudinary in Laravel](laravel_install_configure_tutorial)
* [Video tutorial: Upload images in Laravel](laravel_upload_tutorial)
* [Video tutorial: Optimize images in Laravel](cloudinary_laravel_image_optimization_tutorial)

## Nuxt 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](https://cloudinary.nuxtjs.org/)  
* [Library](https://github.com/nuxt-modules/cloudinary)
* [Video tutorial: Configure the Nuxt image component to use Cloudinary](nuxt_image_component_tutorial)
* [Video tutorial: Optimize images in Nuxt with Nuxt Cloudinary](nuxt_image_optimization_tutorial)

## Svelte components

Enables you to leverage the power of Cloudinary 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](https://svelte.cloudinary.dev/)
* [Library](https://github.com/cloudinary-community/svelte-cloudinary)
* [Video Tutorial: Install and configure Cloudinary in Svelte](svelte_configuration_tutorial)
* [Video Tutorial: Upload images & videos with Svelte Cloudinary](upload_assets_in_svelte_tutorial)

### Sample projects

* [Photo album](https://github.com/cloudinary-devs/svelte-pa)

## 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

* [Docs](https://www.gatsbyjs.com/docs/how-to/images-and-media/using-cloudinary-image-service/) 
* [gatsby-source-cloudinary Library]( https://github.com/cloudinary-community/gatsby-source-cloudinary)
* [gatsby-transformer-cloudinary Library](https://github.com/cloudinary-community/gatsby-transformer-cloudinary)

## 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

* [Docs](https://netlify.cloudinary.dev/)
* [Library](https://github.com/cloudinary-community/netlify-plugin-cloudinary)
* [Video Tutorial: Optimize Netlify images in 5 minutes](netlify_plugin_tutorial)

## 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

* [Docs](https://www.drupal.org/project/cloudinary)
* [Library](https://github.com/everright/cloudinary_drush_make)
