ℹ️ This is a distribution repository for
npm. The sources for this repository are maintained at the cloudinary_js repository. Please submit issues and pull requests to that repository.
Cloudinary is a cloud service that offers a solution to a web application's entire image management pipeline.
Easily upload images to the cloud. Automatically perform smart image resizing, cropping and conversion without installing any complex software. Integrate Facebook or Twitter profile image extraction in a snap, in any dimension and style to match your website’s graphics requirements. Images are seamlessly delivered through a fast CDN, and much much more.
Cloudinary offers comprehensive APIs and administration capabilities and is easy to integrate with any web application, existing or new.
Cloudinary provides URL and HTTP based APIs that can be easily integrated with any Web development framework.
Getting started guide
Take a look at our Getting started guide for jQuery.
Install the files using the following command. Use the optional
--saveparameter if you wish to save the dependency in your bower.json file.bower install cloudinary-jquery
Install the files using:npm install cloudinary-jquery
For the server side NPM library, please refer to https://github.com/cloudinary/cloudinary_npm.
In order to properly use this library you have to provide it with a few configuration parameters:
cloud_name- The cloudinary cloud name associated with your Cloudinary account.
cdn_subdomain- Please refer to Cloudinary Documentation for information on these parameters.
To set these configuration parameters use the
Cloudinary::config function (see below).
The following blog post details the process of setting up a jQuery based file upload. http://cloudinary.com/blog/direct_image_uploads_from_the_browser_to_the_cloud_with_jquery
The Cloudinary Documentation can be found at: http://cloudinary.com/documentation
Start by instantiating a new Cloudinary class:
As jQuery plugin
An instance of the Cloudinary jQuery main class,
CloudinaryJQuery, is instantiated as
var cl = cloudinaryCloudinaryJQuery;
Using the config function
// Using the config functionvar cl = cloudinaryCloudinaryJQuery;cl;
From meta tags in the current HTML document
When using the library in a browser environment, you can use meta tags to define the configuration options.
init() function is a convenience function that invokes both
For example, add the following to the header tag:
var cl = cloudinaryCloudinary;cl;// orcl;
From environment variables
When using the library in a backend environment such as NodeJS, you can use an environment variable to define the configuration options.
Set the environment variable, for example:
var cl = cloudinaryCloudinary;cl;// orcl;
cl// ""cl// ""
HTML tag generation
You can generate HTML tags in several ways:
Cloudinary::image() generates a DOM tag, and prepares it for responsive functionality. This is the same functionality as
$.cloudinary.image(). (When using the jQuery plugin, the
src-cache data attribute is stored using jQuery's
data() method and so is not visible.)
You can generate an image Tag using the
var tag = cl;tag;
You can also use
var tag = cloudinaryImageTag;tag;
In addition to using a plain object to define transformations or using the builder methods (both described above), you can define transformations by using the Transformation class:
var tr = cloudinaryTransformation;trwidth100;tr// "c_fit,w_100"
You can also chain transformations together:
var tr = cloudinaryTransformation;trwidth10// "c_fit,w_10/a_15"
This Cloudinary jQuery plugin is backward compatible with the previous cloudinary_js version - except that it does not contain the jquery-file-upload dependency and functionality. For a fully compatible version, including the Blueimp jquery file upload functionality, refer to cloudinary-jquery-file-upload
The following list includes a sample of the API provided by this library:
$.cloudinary.config(parameter_name, parameter_value)- Sets parameter_name's value to parameter_value.
$.cloudinary.url(public_id, options)- Returns a cloudinary URL based on your configuration and the given options.
$.cloudinary.image(public_id, options)- Returns an HTML image tag for the photo specified by public_id
$.cloudinary.fetch_image- Same as
imagebut returns a specific type of image.
$(jquery_selector).cloudinary(options)- Goes over the elements specified by the jQuery selector and changes all the images to be fetched using Cloudinary's CDN. Using options, you can also specify transformations to the images. The
optionsparameters are similar across all cloudinary frameworks. Please refer to jQuery image manipulation for a more complete reference regarding the options.
See our documentation for more information about displaying and transforming images using jQuery.
jQuery File upload
The Cloudinary jQuery File Upload library extends the Cloudinary jQuery plugin with support for the Blueimp jQuery File Upload library. The library can be found at https://github.com/cloudinary/pkg-cloudinary-jquery-file-upload.
Additional resources are available at:
- Knowledge Base
- Documentation for jQuery integration
- jQuery image upload documentation
- jQuery image manipulation documentation
- Image transformations documentation
You can open an issue through GitHub.
Contact us at http://cloudinary.com/contact.
Released under the MIT license.