Documentation and Tutorials
Features overview...

Windows Azure integration

Overview

Cloudinary is a cloud service that offers a solution to a web application's entire image management pipeline. Cloudinary can be used as an add-on to the powerful platform of Windows Azure. This page gives a general overview for Windows Azure users of how to use Cloudinary and how to integrate with the various engines provided by Windows Azure.

With Cloudinary you can 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. Check out of our Features page for more details.

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.

For .NET, PHP, Node.js and Python & Django, Cloudinary provides libraries for simplifying the integration even further.

Sample transformations

Cloudinary provides a variety of transformations to uploaded images - all available simply by modifying the image URL at runtime. For instance, this sample image is automatically available via a CDN at the following URL:

Generating a 150x100 version of the sample image and downloading it through a CDN:

Converting to a 150x100 PNG with rounded corners of 20 pixels:

For plenty more transformation options, see our Image transformations documentation

Generating a 120x90 thumbnail based on automatic face detection of the Facebook profile picture of Bill Clinton:

For more details, see our documentation for embedding Facebook and Twitter profile pictures.

For a more advanced example, take a look at the following Cloudinary URL that generates the image below:

What happened here? Simply accessing the above URL told Cloudinary to remotely fetch Arriana Huffington’s Facebook profile picture, created a 150x150px thumbnail using face detection based cropping, rounded the image’s corners, added a sepia effect, converted it to a transparent PNG format, added a watermark layer on the bottom-left corner, rotated the image by 10 degrees clock-wise and ultimately delivered the resulting image through a fast CDN using smart caching techniques. Isn’t that great?

Note: Replace demo in all examples above with your Cloudinary's cloud name you get after installing the add-on.

Install the add-on

To install the Cloudinary add-on, login to the Window Azure Portal of your account. Click on the +New link at the bottom left corner and select STORE from the menu.

The following page will be displayed. Follow the instructions for quickly installing the add-on.



After the add-on is installed, select it and click on the CONNECTION INFO from the bottom menu:



Copy into your clipboard the value of CLOUDINARY_URL from the Connection Info dialog:



Now, browse to the list of web sites and select a site for which you would like to use the add-on:



From the site's page, select the Configure option:



Scroll to the App Settings section. Enter CLOUDINARY_URL as the key and the connection info's value you previously copied as the value:



All credentials of your Cloudinary account are now automatically defined using the CLOUDINARY_URL environment variable for your selected Window Azure's site. This environment variable is automatically processed by all Cloudinary's client libraries.

Using with PHP

Take a look at our Getting started guide for PHP.

Installation

Download Cloudinary's PHP library from GitHub and add it to your PHP project.
https://github.com/cloudinary/cloudinary_php

The PHP library is also available as a Composer package distributed through Packagist: https://packagist.org/packages/cloudinary/cloudinary_php

Fully working sample projects, including useful image uploading and transforming code samples, are also available:
https://github.com/cloudinary/cloudinary_php/tree/master/samples

Cloudinary's credentials and settings are automatically defined in Windows Azure's platform using the CLOUDINARY_URL environment variable as explained here. Cloudinary's PHP library automatically reads the settings defined in the environment variable. See our usage notes for your local environment.

Upload

Assuming you have your Cloudinary configuration parameters defined (cloud_name, api_key, api_secret defined via CLOUDINARY_URL configuration variable), uploading to Cloudinary is very simple.

The following example uploads a local JPG to the cloud:

\Cloudinary\Uploader::upload("my_picture.jpg")

The uploaded image is assigned a randomly generated public ID. The image is immediately available for download through a CDN:

cloudinary_url("abcfrmo8zul1mafopawefg.jpg")

# http://res.cloudinary.com/demo/image/upload/abcfrmo8zul1mafopawefg.jpg

You can also specify your own public ID:

\Cloudinary\Uploader::upload("http://www.example.com/image.jpg", 
                             array("public_id" => 'sample_remote'))

cloudinary_url("sample_remote.jpg")

# http://res.cloudinary.com/demo/image/upload/sample_remote.jpg

cl_image_tag

Returns an HTML image tag pointing to Cloudinary.

Usage:

<?php echo cl_image_tag("sample", array("format"=>"png", "width"=>100, 
                                        "height"=>100, "crop"=>"fill") ?>

# <img src='http://.../cloud_name/image/upload/c_fill,h_100,w_100/sample.png' 
#      height='100' width='100'/>

cl_form_tag

The following function returns an HTML form that can be used to upload the file directly to Cloudinary. The result is a redirect to the supplied callback_url.

cl_form_tag(callback, array(...))

Optional parameters:

  • public_id - The name of the uploaded file in Cloudinary
  • form - html attributes to be added to the form tag
  • Any other parameter that can be passed to \Cloudinary\Uploader::upload

Go over our Getting started guide for PHP.

For more details, see our documentation of PHP image upload and PHP image manipulation.

Using with Django

Take a look at our Getting started guide for Django.

Installation

Install Cloudinary's Python library by running:

$ pip install cloudinary

Downloading/unpacking cloudinary
  Downloading cloudinary-1.0.0.tar.gz
  Running setup.py egg_info for package cloudinary

Installing collected packages: cloudinary
  Running setup.py install for cloudinary

Successfully installed cloudinary
Cleaning up...

Create a pip requirements file which declares the required Python modules:

$ pip freeze > requirements.txt

The requirements.txt file should include all required packages including Cloudinary's:

$ cat requirements.txt

Django==1.4
cloudinary==1.0.0
distribute==0.6.27
dj-database-url==0.2.1
poster==0.8.1
psycopg2==2.4.5
wsgiref==0.1.2

Cloudinary's credentials and settings are automatically defined in Windows Azure's platform using the CLOUDINARY_URL environment variable as explained here. Cloudinary's Python library automatically reads the settings defined in the environment variable. See our usage notes for your local environment.

Upload

Assuming you have your Cloudinary configuration parameters defined (cloud_name, api_key, api_secret defined via CLOUDINARY_URL configuration variable), uploading to Cloudinary is very simple.

The following example uploads a local JPG to the cloud:

cloudinary.uploader.upload("my_picture.jpg")

Below is an example of an upload's result:

{u'secure_url': u'https://.../demo/image/upload/v1340625837/4srvcynxrf5j87niqcx6w.jpg', 
 u'public_id': u'4srvcynxrf5j87niqcx6w', 
 u'format': u'jpg', 
 u'url': u'http://.../demo/image/upload/v1336304441/sample_remote.jpg', 
 u'height': 200, 
 u'width': 200, 
 u'version': 1340625837, 
 u'signature': u'01234567890abcdef01234567890abcdef012345', 
 u'resource_type': u'image'}

The uploaded image is assigned a randomly generated public ID. The image is immediately available for download through a CDN:

cloudinary.utils.cloudinary_url("4srvcynxrf5j87niqcx6w.jpg")
  
http://res.cloudinary.com/demo/image/upload/4srvcynxrf5j87niqcx6w.jpg

You can also specify your own public ID:

cloudinary.uploader.upload("http://www.example.com/image.jpg", public_id = 'sample_remote')
  
{u'secure_url': u'https://.../demo/image/upload/v1336304441/sample_remote.jpg', 
 u'public_id': u'sample_remote', 
 u'format': u'jpg', 
 u'url': u'http://.../demo/image/upload/v1336304441/sample_remote.jpg', 
 u'height': 100, 
 u'width': 100, 
 u'version': 1336304441, 
 u'signature': u'abcde20044f8c8ba71fb31ebe81e9d72ec8763dd', 
 u'resource_type': u'image'}

The uploaded image is assigned with the given sample_remote public ID. The image is immediately available for download through a CDN:

cloudinary.utils.cloudinary_url("sample_remote.jpg")

# http://res.cloudinary.com/demo/image/upload/sample_remote.jpg

See our documentation for plenty more options of direct uploading to the cloud.

Embedding and transforming images

Any image uploaded to Cloudinary can be transformed and embedded using powerful view helper methods:

The following example generates the URL for accessing an uploaded sample image while transforming it to fill a 100x150 rectangle:

cloudinary.utils.cloudinary_url("sample.jpg", width = 100, 
    height = 150, crop = "fill")

Another example, embedding a smaller version of an uploaded image while generating a 90x90 face detection based thumbnail:

cloudinary.utils.cloudinary_url("woman.jpg", width = 90, height = 90, 
     crop = "thumb", gravity = "face")

Embedding a Facebook profile to match your graphic design is very simple. You can provide either a Facebook name or a numeric ID of a Facebook profile or a fan page.

cloudinary.utils.cloudinary_url("billclinton.jpg", 
    width = 90, height = 130, type = "facebook",
    crop => "fill", gravity => "north_west")

Same goes for Twitter:

cloudinary.utils.cloudinary_url("billclinton.jpg", type = "twitter_name")

For more transformation examples, see our documentation or check our blog.

For integrating with your Django application, you can use the following classes and template tags:

cloudinary.CloudinaryImage

Represents an image stored in Cloudinary.

Usage: img = cloudinary.CloudinaryImage("sample", format="png")

img.build_url(width=100, height=100, crop="fill")       
# http://res.cloudinary.com/cloud_name/image/upload/c_fill,h_100,w_100/sample.png 
  
img.image(width=100, height=100, crop="fill")       
# <img src="http://.../cloud_name/image/upload/c_fill,h_100,w_100/sample.png" 
#      width="100" height="100"/>

cloudinary.models.CloudinaryField

Allows you to store references to Cloudinary stored images in your model. Returns an CloudinaryImage object.

class Poll(models.Model):
  # ...
  image = cloudinary.models.CloudinaryField('image')

cloudinary.forms.CloudinaryField

Form field that allows you to validate and convert to CloudinaryImage a signed Cloudinary image reference.

Template tags

Initialization:

{% load cloudinary %}

Image tags can be generated from public_id or from CloudinaryImage object using:

{% cloudinary image width=100, height=100, crop="fill" %}   

# <img src="http://.../cloud_name/image/upload/c_fill,h_100,w_100/sample.png"
#      width="100" height="100" crop="scale"/>

The following tag generates an html form that can be used to upload the file directly to Cloudinary. The result is a redirect to the supplied callback_url.

{% cloudinary_direct_upload callback_url %}

Optional parameters:

  • public_id - The name of the uploaded file in Cloudinary

Go over our Getting started guide for Django.

For more details, see our documentation of Django image upload and Django image manipulation.

Using with Node.js

Take a look at our Getting started guide for Node.js.

Installation

Install Cloudinary's Node.js library by running:

$ npm install cloudinary

Alternatively you can edit your package.json, add cloudinary to the dependencies section. For example:

{
  "name": "node-example",
  "version": "0.0.1",
  "dependencies": {
    "express": "2.5.x",
    "cloudinary": ""
  },
  "engines": {
    "node": "0.6.x"
  }
}

Run 'npm install' to install the Cloudinary npm in your local environment:

$ npm install

npm http GET https://registry.npmjs.org/cloudinary
npm http 200 https://registry.npmjs.org/cloudinary
npm http GET https://registry.npmjs.org/coffee-script
npm http GET https://registry.npmjs.org/underscore
npm http GET https://registry.npmjs.org/temp
npm http 200 https://registry.npmjs.org/coffee-script
npm http 200 https://registry.npmjs.org/underscore
npm http 200 https://registry.npmjs.org/temp
cloudinary@0.2.6 ./node_modules/cloudinary
├── temp@0.4.0
├── underscore@1.4.2
└── coffee-script@1.4.0

Cloudinary npm will be automatically installed and available for your application when you push a new version.

Cloudinary's credentials and settings are automatically defined in Windows Azure's platform using the CLOUDINARY_URL environment variable as explained here. Cloudinary's Node.js library automatically reads the settings defined in the environment variable. See our usage notes for your local environment.

Upload

Assuming you have your Cloudinary configuration parameters defined (cloud_name, api_key, api_secret defined via CLOUDINARY_URL configuration variable), uploading to Cloudinary is very simple.

The following example uploads a local JPG to the cloud:

var cloudinary = require('cloudinary')
cloudinary.uploader.upload("my_picture.jpg", 
  function(result) { console.log(result) })

Below is an example of an upload's result:

{ public_id: '4srvcynxrf5j87niqcx6w',
  version: 1340625837,
  signature: '01234567890abcdef01234567890abcdef012345',
  width: 200,
  height: 200,
  format: 'jpg',
  resource_type: 'image',
  url: 'http://.../demo/image/upload/v1340625837/4srvcynxrf5j87niqcx6w.jpg',
  secure_url: 'https://.../demo/image/upload/v1340625837/4srvcynxrf5j87niqcx6w.jpg' }

The uploaded image is assigned a randomly generated public ID. The image is immediately available for download through a CDN:

cloudinary.url("4srvcynxrf5j87niqcx6w.jpg")
    
// "http://res.cloudinary.com/demo/image/upload/4srvcynxrf5j87niqcx6w.jpg"

You can also specify your own public ID:

cloudinary.uploader.upload("http://www.example.com/image.jpg", 
  function(result) { 
    console.log(result) 
    }, {public_id: 'sample_remote'})

{ public_id: 'sample_remote',
  version: 1336304441,
  signature: 'abcde20044f8c8ba71fb31ebe81e9d72ec8763dd',
  width: 100,
  height: 100,
  format: 'jpg',
  resource_type: 'image',
  url: 'http://.../image/upload/v1336304441/sample_remote.jpg',
  secure_url: 'https://.../demo/image/upload/v1336304441/sample_remote.jpg' }

The uploaded image is assigned with the given sample_remote public ID. The image is immediately available for download through a CDN:

cloudinary.url("sample_remote.jpg")

// "http://res.cloudinary.com/demo/image/upload/sample_remote.jpg"

See our documentation for plenty more options of direct uploading to the cloud.

You can also use cloudinary.upload_stream to write to the uploader as a stream:

var fs = require('fs');
var stream = cloudinary.uploader.upload_stream(function(result) { console.log(result); });
var file_reader = fs.createReadStream('my_picture.jpg', 
  {encoding: 'binary'}).on('data', stream.write).on('end', stream.end);

Here's a sample code that uses the Express framework for displaying an upload form, uploading an image to Cloudinary using streams and displaying a transformed version of the uploaded image:

var express = require('express');
var fs = require('fs');

var cloudinary = require('cloudinary');
        
var app = express.createServer(express.logger());        
app.use(express.bodyParser())

app.get('/', function(req, res) {
  res.send('<form method="post" enctype="multipart/form-data">'
    + '<p>Public ID: <input type="text" name="title"/></p>'
    + '<p>Image: <input type="file" name="image"/></p>'
    + '<p><input type="submit" value="Upload"/></p>'
    + '</form>');
});

app.post('/', function(req, res, next) {
  stream = cloudinary.uploader.upload_stream(function(result) {
    console.log(result);
    res.send('Done:<br/> <img src="' + result.url + '"/><br/>' + 
             cloudinary.image(result.public_id, 
             { format: "png", width: 100, height: 130, crop: "fill" }));
  }, { public_id: req.body.title } );
  fs.createReadStream(req.files.image.path, 
    {encoding: 'binary'}).on('data', stream.write).on('end', stream.end);
});

if (!module.parent) {
  var port = process.env.PORT || 5000;
  app.listen(port, function() {
    console.log("Listening on " + port);
  });
}

Embedding and transforming images

Any image uploaded to Cloudinary can be transformed and embedded using powerful view helper methods:

The following example generates the URL for accessing an uploaded sample image while transforming it to fill a 100x150 rectangle:

cloudinary.url("sample.jpg", 
       { width: 100, height: 150, crop: "fill" })

Another example, embedding a smaller version of an uploaded image while generating a 90x90 face detection based thumbnail:

cloudinary.url("woman.jpg", 
       { width: 90, height: 90, 
         crop: "thumb", gravity: "face" })

Embedding a Facebook profile to match your graphic design is very simple. You can provide either a Facebook name or a numeric ID of a Facebook profile or a fan page.

cloudinary.url("billclinton.jpg", 
       { width: 90, height: 130, 
         type: "facebook", crop: "fill", 
         gravity: "north_west"})

Same goes for Twitter:

cloudinary.url("billclinton.jpg",
       { type: "twitter_name" })

You can also generate image tags for your HTML page by using the cloudinary.image method. The syntax is very similar to the cloudinary.url method:

cloudinary.image("sample", 
                 { format: "png", 
                   width: 100, height: 100, 
                   crop: "fill"})
                   
// <img src='http://res.cloudinary.com/demo/image/upload/c_fill,h_100,w_100/sample.png' height='100' width='100'/>

For more transformation examples, see our documentation or check our blog.


Go over our Getting started guide for Node.js.

For more details, see our documentation of Node.js image upload and Node.js image manipulation.

Using with .NET

Installation

Download Cloudinary's .NET library from GitHub and add it to your .NET project.
https://github.com/cloudinary/CloudinaryDotNet

The .NET library is also available as a NuGet package at: https://nuget.org/packages/CloudinaryDotNet

Please see NuGet Documentation at http://docs.nuget.org/ for instructions of how to work with NuGet packages.

Using Visual Studio

  • Download NuGet Package Manager at http://visualstudiogallery.msdn.microsoft.com/27077b70-9dad-4c64-adcf-c7cf6bc9970c
  • Use Visual Studio to create a new project and choose .NET 3.5 as the target framework.
  • Right click on the project in Solution Explorer and click on Manage NuGet packages...
  • Type CloudinaryDotNet in the search box at the upper right corner.
  • When CloudinaryDotNet package appears, click on the Install button.
  • After the package is installed click on the Close button.
  • Setup is done and you can now use CloudinaryDotNet.

Manual setup

  • Go to https://nuget.org/packages/CloudinaryDotNet and download NuGet package.
  • NuGet package is a ZIP archive that could be extracted using any unzip tool.
  • NuGet package contains CloudinaryDotNet.dll, xml documentation and the readme file.

Cloudinary's credentials and settings are automatically defined in Windows Azure's platform using the CLOUDINARY_URL environment variable as explained here. Cloudinary's .NET library automatically reads the settings defined in the environment variable. See our usage notes for your local environment.

Configuration

Setting the cloud_name, api_key and api_secret parameters can be done either directly in each call to a Cloudinary method, by when initializing the Cloudinary object, or by using the CLOUDINARY_URL environment variable / system property.

The main entry point of the library is the Cloudinary object.

CloudinaryDotNet.Cloudinary cloudinary = new CloudinaryDotNet.Cloudinary();

NOTE: This call assumes that CLOUDINARY_URL environment variable is set. If not, please use parameterized constructor:

CloudinaryDotNet.Account account =
    new CloudinaryDotNet.Account("my_cloud_name", "my_api_key", "my_api_secret");

CloudinaryDotNet.Cloudinary cloudinary = new CloudinaryDotNet.Cloudinary(account);

Upload

Assuming you have your Cloudinary configuration parameters defined (cloud_name, api_key, api_secret), uploading to Cloudinary is very simple.

The following example uploads a local JPG to the cloud:

CloudinaryDotNet.Actions.ImageUploadParams uploadParams = new CloudinaryDotNet.Actions.ImageUploadParams()
{
    File = new CloudinaryDotNet.Actions.FileDescription(@"c:\mypicture.jpg")
};

CloudinaryDotNet.Actions.ImageUploadResult uploadResult = cloudinary.Upload(uploadParams);

The uploaded image is assigned a randomly generated public ID. The image is immediately available for download through a CDN:

string url = cloudinary.Api.UrlImgUp.BuildUrl(String.Format("{0}.{1}", uploadResult.PublicId, uploadResult.Format));        
// http://res.cloudinary.com/cloud_name/image/upload/biricaezlhduexarhzsb.jpg

You can also specify your own public ID:

CloudinaryDotNet.Actions.ImageUploadParams uploadParams = new CloudinaryDotNet.Actions.ImageUploadParams()
{
    File = new CloudinaryDotNet.Actions.FileDescription(@"c:\mypicture.jpg"),
    PublicId = "sample_remote_file"
};

CloudinaryDotNet.Actions.ImageUploadResult uploadResult = cloudinary.Upload(uploadParams);

string url = cloudinary.Api.UrlImgUp.BuildUrl("sample_remote_file.jpg");      
// http://res.cloudinary.com/cloud_name/image/upload/sample_remote_file.jpg

Embedding and transforming images

Any image uploaded to Cloudinary can be transformed and embedded using powerful view helper methods:

The following example generates the url for accessing an uploaded sample image while transforming it to fill a 100x150 rectangle:

string url = cloudinary.Api.UrlImgUp.Transform(new CloudinaryDotNet.Transformation().Width(100).Height(150).Crop("fill")).BuildUrl("sample.jpg");

Another example, emedding a smaller version of an uploaded image while generating a 90x90 face detection based thumbnail:

string url = cloudinary.Api.UrlImgUp.Transform(new CloudinaryDotNet.Transformation().Width(90).Height(90).Crop("thumb").Gravity("face")).BuildUrl("woman.jpg");

Embedding a Facebook profile to match your graphic design is very simple. You can provide either a Facebook name or a numeric ID of a Facebook profile or a fan page.

string url = cloudinary.Api.UrlImgUp.Action("facebook").Transform(new CloudinaryDotNet.Transformation().Width(130).Height(130).Crop("fill").Gravity("north_west")).BuildUrl("billclinton.jpg");

Same goes for Twitter:

string url = cloudinary.Api.UrlImgUp.Action("twitter_name").BuildUrl("billclinton.jpg");

imageTag returns an HTML image tag pointing to a Cloudinary URL. For example:

string tag = cloudinary.Api.UrlImgUp.Format("png").Transform(new CloudinaryDotNet.Transformation().Width(100).Height(100).Crop("fill")).BuildImageTag("sample");

// <img src='https://res.cloudinary.com/cloud_name/image/upload/c_fill,h_100,w_100/sample.png' width='100' height='100'/>

Local environment setup

After provisioning the add-on it’s necessary to locally replicate the configuration variables so your development environment can operate against the service.

Open the Connection Info dialog as explained in the Installation section above and copy the value of CLOUDINARY_URL to your clipboard.

You can then set local environment variables using CLOUDINARY_URL=value. Your local application would be configured to use your Cloudinary account.

Management console

The Management Console allows you to browse through uploaded images and generated transformations. You can also view your usage reports and cloud settings. Comprehensive documentation is also available.

The dashboard can be accessed by visiting the Window Azure Portal and selecting Cloudinary from the Add-ons list. Then click on 'Visit the Cloudinary web site for next steps' under 'Manage your add-on'.

Support

All support and runtime issues should be logged with Windows Azure Support at http://www.windowsazure.com/en-us/support/contact/

You can also search Cloudinary's support forums & knowledge base or open a support ticket: http://support.cloudinary.com/home

Any non-support related issues or product feedback is welcome at http://cloudinary.com/contact

Additional resources

Additional resources are available at:

Our open-source client libraries can be found at: