Cloudinary Blog
Learn More

Archive for May 2012

Placeholder images and Gravatar integration with Cloudinary

May 30, 2012 by Nadav Soferman
Tags: Feature, Image-transformation
Most web sites enrich their graphics by embedding pictures and photos of their model entities - users, articles, movies, etc. The graphic design of such web sites assumes that all these entities have associated pictures, otherwise the result will not look as satisfactory as intended. The graphics designer will not like it and the developer having to handle the boundary case of missing images won’t enjoy this either.
 
To circumvent this issue, you can design default placeholder images for cases where an entity doesn’t have its own image. You are probably well aware of the “egg” placeholder image Twitter uses as its default avatar and the person’s silhouette that Facebook uses for individuals that haven’t uploaded a profile photo.
 
  
 
Cloudinary now supports delivering default images when a requested image does not exist. This is especially useful when you want to display a placeholder avatar for users without a Facebook or Twitter profile picture or for users that haven’t uploaded their photo to your application. 
 
As a developer, you no longer have to care whether a picture is available for a certain entity. Cloudinary will automatically detect when an image is missing and deliver the alternative placeholder image through a fast CDN instead. In addition, Cloudinary will occasionally retry to fetch the original image, and use it instead of the placeholder for cases where it is made available at a later time.
 
Specifying default images is done using Cloudinary transformations' 'default_image' parameter ('d' in URLs).
The following URL delivers a 100x100 thumbnail of a profile image with the ID ‘face_left’ while specifying that the image with the ‘avatar’ public ID should be used in case that ‘face_left’ does not exist.
 
 
 
 
When trying to access a non existing ID, the default avatar picture is displayed instead:
 
 
 
Notice that the requested transformation, in this case resizing to 100x100, is done on the default image too, allowing you to upload a placeholder image once and transform it to many desired dimension in your various web pages.
 
Here’s the same example when integrating with one of Cloudinary’s client libraries, in this case Ruby on Rails:
<%= cl_image_tag("non_existing_id.png", 
                 :width => 100, :height => 100, 
                 :crop => :thumb, :gravity => :face, :radius => 20, 
                 :default_image => "avatar.png") %>
You can of course upload multiple placeholder images and use each image as the default for each different kind of model entity.
 
You can also apply the same solution when using Cloudinary’s automatic Facebook profile image fetching functionality. This allows you to specify an alternative default image to be used if the user does not exist on Facebook:
 
 
 

Gravatar Support

You have probably heard of Gravatar., a terrific service that allows you to host a single avatar (profile picture) to be used globally, rather than upload your profile photo on every website that requires it. Any user can sign up to Gravatar with his email address and upload a profile picture. Any website can then access that picture based on an the email address of this user (encoded with MD5 hash for better privacy).

Cloudinary already supports automatically fetching, resizing and delivering Facebook and Twitter profile pictures. We’ve recently added support for Gravatar too. Starting today you can use Cloudinary to fetch your visitors’ Gravatar images, transform these to match your graphics design (non-square pictures, rounded corners, face detection, etc.), use your own default image placeholder for non-existing avatars and enjoy smart caching and fast CDN delivery while automatically refreshing these images when changed.

Embedding Gravatars is done by pointing to a URL like the one below. The 'e3264cf16f34ecd3c7c564f5668cbc1e' string in this example is the MD5 hash for info@cloudinary.com.

.../image/gravatar/e3264cf16f34ecd3c7c564f5668cbc1e.jpg

With Cloudinary you can of course transform the image to any desired dimension:

.../image/gravatar/w_120,h_80,c_fill/e3264cf16f34ecd3c7c564f5668cbc1e.jpg

If you use one of our client libraries, this is even simpler. For example, the following Ruby on Rails command embeds a 150x150 Gravatar for info@cloudinary.com:

<%= gravatar_profile_image_tag("info@cloudinary.com", :width => 150, :height => 150) %>

 

Gravatar supports default images. This allows you to always point to a URL of a Gravatar, based on the user’s email, even if no Gravatar is available for the user. Using Gravatar default images can be done with Cloudinary’s default images support as explained below. Simply specify one of the names of the Gravatar default images as the ‘default_image’ parameter (‘d’ in URLs).

The following example displays Gravatar’s ‘retro’ default image for a given identifier that has no avatar attached:

.../image/gravatar/d_retro/unknown_id.jpg

Gravatar has a cool feature of displaying a different ‘identicon’ for each user based on the given MD5 hash. The following URLs generate 36x36 thumbnails of two different users, while displaying the ‘identicon’ avatar if no Gravatar is available:

.../image/gravatar/d_identicon,h_36,w_36,c_fill/a9a1a6dafde8cf0c7e8ee9b177160939.jpg 

.../image/gravatar/d_identicon,g_center,h_36,w_36,c_fill/e544501b2dd065b385e06a8a8dc7504b.jpg

  

 With Cloudinary, you can also display custom default images you uploaded to Cloudinary. For example, the following URL delivers a Gravatar for the given email and defaults to the uploaded file named ‘avatar.jpg’:

.../image/gravatar/d_avatar.jpg,g_center,h_36,w_36,c_fill/e544501b2dd065b385e06a8a8dc7504b.jpg

Default images and Gravatar support are available now for all our free & paid plans. For easier integration with your existing web-dev framework, make sure to download our latest Ruby, Python & Django, PHP, jQuery or the community contributed Perl or .Net libraries. 

 

Adding watermarks, credits, badges and text overlays to images

May 22, 2012 by Nadav Soferman
Tags: Feature, Image-transformation
Adding watermarks to photos is a common practice used to make sure that photos aren't circulated without their owner's authorization and that no one takes undue credit for their creation. Watermarks are common practice at major news outlets and breaking-news blogs. It is also a must for stock photo sites that show you previews of premium images before purchase. Embedding the photographer’s name to photos or crediting a source is also a commonly used practice. 
 
This post describes how you too can easily add watermarks and textual credits to your own images by using Cloudinary's new Image overlay feature. This same method can be used to embed custom badges and medals to your users’ profile pictures, merge arbitrary text to your website’s selected images, and much more.
 

Watermarks

Want to add a watermark to your images in a snap? 
 
First, upload a semi-transparent PNG file to your Cloudinary account and give it an easy to remember Public ID. We’ll start with a previously uploaded semi-transparent Cloudinary logo that we’ve named ‘sample_watermark’:
 
 
 
To add this watermark to images, simply use Cloudinary's the new overlay transformation parameter. Or 'l' in dynamic URLs. For example, the following URL generates a watermarked version of the uploaded 'brown_sheep.jpg' image:
 
 
 
When retrieving the image, we can also lazily resize both the image and the watermark for a perfect fit. The following example shows our 'white_chicken' image resized to 300 pixels width while adding the Cloudinary watermark resized to 280 pixels width:
 
 
 
You can also make the watermark smaller and position it arbitrarily using the 'gravity', 'x' and 'y' transformation parameters. For example, the following URL adds an 80 pixels width watermark 5 pixels from the bottom right corner of an uploaded image that is resized to fill a 300x200 rectangle based on face detection:
 
 
 
Same examples in Ruby on Rails:
<%= cl_image_tag("face_center.jpg", 
                 :transformation => {
                   :width => 300, :height => 200, 
                   :gravity => :face, :crop => :fill
                 }, 
                 :overlay => "sample_watermark", 
                 :width => 80, :crop => :scale, 
                 :gravity => :south_east, :x => 5, :y => 5, 
                 :html_width => 300, :html_height => 200) %>
In the examples above, the watermark was added only to the transformed versions of the uploaded image, while the original image is still accessible without the watermark, using the original URL. To circumvent that, you can add the watermark to the original image at the time of its upload. Simply define an incoming transformation using the ‘transformation’ parameter of our upload API. Here’s a Ruby example:
CloudinaryUpload::upload("sample_upload.jpg", 
                         :transformation => {
                            :overlay => "sample_watermark"
                         })


Badges & Medals

Many social sites such as Foursquare and Friendize.me (a cool new service that offers social-based buying advices) give badges and medals to their users according to their ongoing in-app achievements. A common graphical concept is to pin the badges to the profile picture itself. The badge can be added as an overlay element in the HTML page using CSS techniques, but what if you want to show it in emails? even modern web-based email clients don’t support adding overlays using CSS.
 
The solution? Dynamically create the users' profile images while embedding the badges within the images themselves. This can be easily accomplished with Cloudinary using the overlay transformation parameter.
 
For example, the following dynamic URL generates an image based on the Facebook profile picture of Mark Shteiman, Friendize.me's founder, with his 'Founding team member' badge:
 
 
 
This single URL request motioned Cloudinary to access Facebook’s API, download the latest profile picture matching the requested dimensions, use face detection to create a perfect face thumbnail crop, round the corners for a nicer look, add a badge icon to the picture and deliver the final image through a fast CDN with smart caching. Isn't that just amazing? 
 

Text overlays

You can now use Cloudinary to generate an image of a given textual string, dynamically. You can use this textual image as an overlay for other images.
 
To generate an image for a given text, simply use our API. The following Ruby example generates an image containing the “Sample Name” string. Various font, color and style parameters can be specified to customize the look & feel of the text. See our documentation for a full list of options.
Cloudinary::Uploader.text("Sample Name",
                          :public_id => "dark_name",
                          :font_family => "Arial", :font_size => 12,
                          :font_color => 'black', :opacity => 90)
The generated image is available through a CDN URL:
 
 
 
By the way, not specifying a public ID would generate a unique identifier that is persistently mapped to the given text and style settings. This way, you can keep using Cloudinary’s API for generating texts. Cloudinary will make sure not to generate multiple images for the same text and style.
 
Adding the text overlay is done using the 'overlay' parameters ('l' for URLs). The following example takes the ‘dark_name’ text layer we’ve generated above and embeds it 5 pixels from the bottom right corner of the image:
 
 
 
 
Same example in Rails:
cl_image_tag("face_center.jpg", :overlay => "text:dark_name", 
             :gravity => :south_east, :x => 5, :y => 5)
The sharp-eyed readers might have noticed that Cloudinary supports chained transformations. You can apply multiple transformation and add multiple overlays using the same URL. For example:
 
 
 
As before, if you want to make sure that the text overlay is added to the originally uploaded image, you can add it as part of the image’s incoming transformation. See the watermarks section above for an example.
 
The ability to add image and text overlays so easily and mix them with image resizing and CDN delivery opens the door to exciting new web development capabilities. In this post we showed some basic usage examples. We are sure you have plenty more ideas on how to use these new image overlay capabilities in your web applications. Why don’t you share them with us?

How to deliver your static images through a CDN in Ruby on Rails

May 15, 2012 by Nadav Soferman
Tags: Feature, Ruby-on-Rails, Performance-optimization
If you heard of Cloudinary before, you probably already know how useful Cloudinary is with managing all your dynamically uploaded images, transforming these to their required dimensions and delivering them through a fast CDN.
 
But what about all the static images you have in your web application? background images, buttons, icons - they too should be delivered through a CDN, offloading their delivery from your servers and improving your website's performance.
 
You can always do it yourself - setup your cloud environment, upload all these static images to your cloud storage, access them through a CDN and make sure to update these images when they change. 
 
Or - you can let Cloudinary do it. Automatically.
 
In this post we wanted to introduce a new Cloudinary feature. This feature simplifies and streamlines the process of uploading your static images to the cloud and delivering them through a CDN.
 
If you haven't done so already - upgrade to our latest Ruby GEM and you will enjoy this new feature with zero code change.
 
How is this done? First, upload all your Ruby-on-Rails applications' static images to Cloudinary, using a single Rake command:
rake cloudinary:sync_static
 
images/logo.png - logo-5740ed843b23d0b86e48081f43a45b9c - Uploading
images/icon_rails.png - icon_rails-74dca949999d8f5960aedfed429711ab - Uploading
images/spinner.gif - spinner-3a0ae382485ddcfc5b57e638baa6005f - Uploading
images/background.png - background-339f8567f25075150cca85d711e94b0c - Uploading
 
Completed syncing static resources to Cloudinary
4 Uploaded
This Rake task finds all the images in all common public folders and in Rails Asset Pipeline’s image asset folders. Afterwards, it uploads all new and modified images to Cloudinary. Uploaded images and their versions are maintained using a local .cloudinary.static file. Make sure you commit this file to your source control.
 
Now that you’ve uploaded all your static images to Cloudinary, all you’ve left to do in order to deliver these through a CDN is to edit your cloudinary.yml file and set the following configuration parameters to ‘true’: 
 enhance_image_tag: true
 static_image_support: true
That's it. No other code changes required. From now on, every image_tag call in your views would automatically check if the image was uploaded to the cloud (using .cloudinary.static) and if so, would generate a remote Cloudinary CDN URL.
 
For example:
<%= image_tag(“logo.png”, :width => 100, :height => “100”) %>
May generate the following HTML code:
<img src=”http://res.cloudinary.com/demo/image/static/
      logo-5740ed843b23d0b86e48081f43a45b9c” width=”100” height=”100”/> 
Keep in mind that you can activate CDN static image support in your production environment while keeping to local files in your development environment.
 
When you add new static images or change existing ones, all you need to do is re-run ‘rake cloudinary:sync_static’.
rake cloudinary:sync_static
 
images/logo.png - logo-5740ed843b23d0b86e48081f43a45b9c - Not changed
images/icon_rails.png - icon-74dca949999d8f5960aedfed429711ab - Not changed
images/spinner.gif - spinner-3a0ae382485ddcfc5b57e638baa6005f - Not changed
images/background.png - background-339f8567f25075150cca85d711e94b0c - Not changed
images/new_icon.gif - new_icon-50f7c240f43256e3f2bfaa3519dab1e8 - Uploading
 
Completed syncing static resources to Cloudinary
4 Not changed, 1 Uploaded
If your website has many static images, you can optimize your site’s load time further by using multiple CDN subdomains. See this blog post for more details on how to activate this feature.
 

CSS & Sass

The method described above is a powerful way for uploading all static images embedded in your Rails view to the cloud and delivering them through a CDN with no change to your code.
But what about images defined in your CSS or Sass files?
 
If you use the new Asset Pipeline (Rails 3.1+), this would work out-of-the-box. All image-path and image-url in your Sass files would automatically change to remote Cloudinary CDN URLs. For example:
Sass:
  .logo
    background-image: image-url(“logo.png”)

Generated CSS:
  .logo { background-image: url(http://res.cloudinary.com/demo/image/static/logo-5740ed843b23d0b86e48081f43a45b9c) }
 
So if you already use Asset Pipeline and Sass files, your images will automatically be delivered through a CDN.
 

Transforming static images

One of Cloudinary's major strengths is in its powerful image transformations. In most cases, you'll want your static images displayed as-is. But occasionally, applying transformations on your static images can be very useful. For example, displaying a set of icons in multiple dimensions. Another example is when you want to support Responsive Layout and Images. In this case, adjusting the size of all static images according to your visitors' device resolution might greatly improve your visitors' experience (e.g., resize all images to 50% their original size). 
 
With Cloudinary you can apply many transformations on your static images, with ease.
 
In the following example, we take a 100x100 static logo.png image and resize it on-the-fly to a 50x50 image with rounded corners of 10 pixels radius. The following image_tag:
<%= image_tag("icon_rails.png", :width => 50, :height => 50,
              :crop => :scale, :radius => 10) %>
 
Will generate the following URL:
<img width=”50” height=”50 
  src=”http://res.cloudinary.com/cloudinary/image/asset/
  c_scale,h_50,r_10,w_50/icon_rails-74dca949999d8f5960aedfed429711ab.png”/>
Changing the look & feel and dimensions of images in your site based on the user’s device can be done using CSS instead of changing your code. This can be be made even simpler if you are using Sass in your Rails project. Simply use the 'cloudinary-url' template method. It will convert image references to remote Cloudinary CDN URLs and can also receive all supported transformation parameters.
 
For example, the following Sass line would generate the same 50x50 scaled logo with rounded corners, via Sass:
background-image: cloudinary-url("rails.png", $width: 50, $height: 50,
                                 $crop: "scale", $radius: 10);
To summarize - if you are using Cloudinary for managing and transforming your uploaded images, you should definitely follow the simple instructions above to immediately experience the performance boost gained by delivering all your static assets through Cloudinary. Don’t have a Cloudinary account yet? Click here to setup a free account in seconds.

Reduce site load time with multiple CDN sub-domains

May 08, 2012 by Nadav Soferman
Tags: Feature, Performance-optimization, Customer
Multi sub-domainsOpinionStage is a wonderful service. It allows everybody a better, more engaging way to express and debate their views. OpinionStage is also one of Cloudinary's early adopters. Over time, our friends at OpinionStage helped us improve Cloudinary with many constructive suggestions.
 
If you take a look at the home page of OpinionStage you would notice that it has many small profile pictures of users that recently participated in debates and expressed their opinions. There are about 60 different user thumbnails in the home page of OpinionStage alone. There are also plenty of additional dynamic and static images in this page.
 
OpinionStage
 
Using Cloudinary, all of these images are smartly fetched from Facebook, resized and delivered through a CDN. However, there is still a potential performance issue here. Even after utilizing the fastest CDN, downloading 60 images is still a lengthy process. The browser will take a significant time to fetch them all, and result in a poor user experience. This might also compromise your search engine rank and hurt SEO effectiveness due to slower browsing speed ranking by services such as Google PageSpeed.
 
The reason for this slowness is that most modern browsers limit the number of simultaneous requests from a single remote host name while loading a web page. The limit in browsers like Chrome, Firefox and IE is 6 concurrent downloads from the same domain. The purpose of this limit is to avoid overloading the remote server with concurrent requests, but this same policy might harm user experience.
 
For example, downloading 60 images from a single host assuming 100ms for a single image download, will require 10 sequential batches of six image downloads in each and will take an overall of one whole second.
 
The following chart illustrates the performance delay of downloading many small images. Notice how slanted the asset loading chart is:
 
Chart
 
A delay of one second is definitely a lot for your users and search engines crawlers to wait for, and if the images are larger, the delay might be much longer. For a website, this may result in a reduced conversion rate and follow with a reduced income.
 
Fortunately, there are several ways to solve this performance issue. In this post we wanted to describe one of the solutions and how Cloudinary seamlessly supports it.
 

Multiple CDN sub-domains

We know that our system and the CDN we use (AWS CloudFront) can handle many concurrent connections. Therefore we can use multiple sub-domains for the images displayed in each web page. In a way, this tells the browser that this website will not be overloaded by concurrent requests, and will allow assets to be retrieved faster. 
 
For example, if your standard Cloudinary URL for embedding an uploaded image is the following:
You can simply add to the 'a1.' prefix to the host name part of the URL. For the browser, this image is retrieved from a different host, and can be retrieved in parallel to others.
Cloudinary supports five different hostnames, 'a1' through 'a5' as a prefix to the host name. This number was selected because 30 is the global max concurrent connections of most modern browsers, and this equals 5 hostnames times 6 connections per host.
 
Back to our previous example, downloading the same 60 images can now be performed from five different hostnames simultaneously. Your visitor browsers can now retrieve 30 images simultaneously instead of just 6. This will result in a five times (80%) speed improvement over the single host method. Not bad at all.
 

Consistent sub-domain usage

You should not randomly add 'a1'-'a5' prefixes to images in your web site. Doing so might do more harm than good to your performance - a certain image is probably displayed multiple times in your web page and site. Referencing a certain image once from 'a1' and then again from 'a2' will bypass browser caching and will force downloading the image twice. Therefore, you should ensure that an image always use the same 'aX' host name. Cloudinary uses a simple CRC32 code for mapping the ID of an image to 'a1'-'a5' consistently.
 
If you are using our Ruby GEM for Ruby on Rails integration, simply set :cdn_subdomain to true either in your cloudinary.yml or in your cl_image_tag calls. Any call to cl_image_tag will calculate and attach the correct subdomain.
 
For example, the following view helper call would automatically generate a URL with a CDN subdomain if 'cdn_domain' is set to 'true':
<%= cl_image_tag("sample.jpg", :width => 100, :height => 100,
                 :crop => :fill) %>
 
http://a2.res.cloudinary.com/demo/image/upload/sample.jpg
Same goes for when using our jQuery plugin. Simply enable CDN subdomain and all URLs would automatically have the correctly calculated prefix:
$.cloudinary.config("cdn_subdomain", true);
Note: CDN sub-domains for secure HTTPS URLs are currently not supported due to limitations of AWS CloudFront.
 
Why don’t you try it out? If you already have a Cloudinary account, make sure you use our latest Ruby GEM, edit your cloudinary.yml and see it in action. Click here to create a new account if you haven’t already done it.
 
For other methods to improve your website’s performance, make sure you subscribe to our feed and like our Facebook page.

Cloudinary's jQuery plugin for embedding and transforming images

May 03, 2012 by Itai Lahan
Tags: Feature, Javascript, jQuery
jQueryAs web developers, we closely monitor the shifts in today's modern web applications architecture stack. We find the client vs. server-side HTML rendering debate particularly interesting.
 
In the past several years, we’ve witnessed the enormous rise in popularity of client-side JS/CoffeeScript MVC & MVVM solutions. From popular libraries such as Backbone.js that strive to add basic structure to client-side apps, all the way to feature-rich libraries that manage your entire client-side stack, with data-binding, client-server model sync, dependency tracking, templates and more. The involvement of high-profile companies and individuals in this market is also fascinating, between KnockoutJS contributions from Microsoft, the Google-backed Angular and Yehuda Katz's Ember, the heat is definitely on. 
 
Client-side rendering adoption will most likely continue to grow as major companies adopt the concept and treat the browser as just another device to access their server-based APIs. Twitter is one of these companies. Twitter's engineers has moved to client-side rendering a year and a half ago as part of their last major redesign work. They even went a step further and open sourced their entire Javscript toolbelt as part of the Bootstrap project.
 
Since we at Cloudinary have been longtime fans of server-side rendering, the first web application development framework we've integrated Cloudinary with was Ruby-on-Rails. 
Due to popular demand, we really wanted to help simplify image management for Javascript developers - client-side rendering and node.js developers alike. Fortunately, Cloudinary’s techniques are already based on simple URL and HTTP interfaces that can be easily integrated with any web-dev framework.
 
Without further ado, we want to introduce Cloudinary’s jQuery plugin. It is open-source and available at GitHub.
 
We have big plans for this jQuery plugin. We’ll tell you more about it in the follow-up posts. In the meantime, we wanted to show you how to easily integrate Cloudinary for embedding images and transforming images using Javascript.
 
For example, a JPG file was uploaded to Cloudinary and was assigned the 'sample' public ID.
 
First, configure your cloud name:
$.cloudinary.config("cloud_name", "your_cloud_name_goes_here");
 
The following Javascript command returns the URL of a 150x100 transformed version of the uploaded image:
$.cloudinary.url("sample.jpg", 
                 { width: 150, height: 100,
                   crop: 'fill', gravity: 'south'});
 
It returns the following Cloudinary URL that goes through AWS CloudFront CDN. Note that 'demo' should be replaced with your Cloudinary's cloud name.
 

 
Cloudinary's jQuery plugin includes the 'image' function. It returns an IMG HTML element that you can add to your page.
 
The following example generates a 150x100 PNG version of the uploaded image, this time with rounded corners. It also generated an IMG tag and adds it to the HTML DOM elements with the 'image_holder' class:
$('.image_holder').append(
     $.cloudinary.image("sample.png",
                        { width: 150, height: 100,
                          crop: 'fill', gravity: 'south', radius: 20}
                        ).addClass('my_class_name'));

This would generate the following HTML elements:
<div class="image_holder">
   ...
  <img width="150" height="100" class="my_class_name"   
           src="http://res.cloudinary.com/demo/image/upload/
                       w_150,h_100,c_fill,g_south,r_20/sample.jpg"/>
</div>
 

You can use the same method to create an image tag with a Facebook profile picture. Simply specify the user's Facebook name, fan page name or numeric ID and the required format.
For example, the following Javascript commands returns Cristiano Ronaldo's Facebook profile picture. Using Cloudinary's image transformations, the picture is cropped to a face detection based thumbnail of 80x100 pixels.
$.cloudinary.facebook_profile_image("Cristiano.jpg",
                    { width: 80, height: 100,
                      crop: 'thumb', gravity: 'face'})

 
See our documentation of Facebook & Twitter profile picture for more details.
 
Note: '$' in all examples can be replaced with ‘jQuery’.
 
Another useful thing you can do with the jQuery plugin is lazy loading of images and resizing on demand and on the fly. 
 
For example, add the following image tag to your HTML:
<img src="blank.png" class="dynamic_image”"
     data-src="couple.jpg" 
     data-width="115" data-height="135
     data-crop="thumb" data-gravity="faces" data-radius="20"/>
 
It points to a placeholder 'blank.png' image, but the actual image is 'couple.jpg'. 'couple' is a public ID of an image previously uploaded to Cloudinary. All attributes starting with 'data-' are parameters to Cloudinary's image transformation engine.
 
Simply running 'cloudinary' on a given jQuery selector would process all images matching the given selector. The following example processes all elements with the dynamic_image class when the document is ready:
$(document).ready(function() {
     $(".dynamic_image").cloudinary();
});
 
This would automatically generate transformed versions on the fly. In this example, a 115x135 rounded-cornered thumbnail based on face detection. The transformed image is delivered through a fast CDN. The IMG tag would be converted to the following and the requested image would be displayed:
<img src="http://res.cloudinary.com/demo/image/upload/
                    w_115,h_135,c_thumb,g_faces,r_20/couple.jpg"
     width="115" height="135" class="dynamic_image"/>

 
What do you think? We would love to hear your feedback on our jQuery plugin and your ideas for enhancements. We are already working on some cool additions, we would update you soon...
 

Using Cloudinary to manage all your website’s assets in the Cloud

May 01, 2012 by Nadav Soferman
Tags: Feature, Ruby-on-Rails, Raw-files

When we conceived Cloudinary, our vision was to help websites manage all their assets (images, Javascripts, CSS, etc.) in the cloud, easily and effectively. Our initial focus was on image management in the cloud since we've felt that this particular area was significantly underdeveloped. We figured that every web developer would be happy with a solid solution for image uploads, applying image transformations in the Cloud and getting their website's images delivered through a fast CDN.

We've recently taken the plunge and added support for raw file uploads and CDN delivery. In addition to images, you can now use Cloudinary's same simple APIs and dynamic URLs to manage every file in the cloud - CSS, Javascript, PDF, and more. The advantages:

  • Simple API for uploading files to a safe cloud storage.
  • Strong integration with your development environment and model objects.
  • Simple access to managed files through dynamic URLs.
  • Fast, optimized CDN delivery (correct cache settings, etc.)
Uploaded files are stored in the cloud and immediately made accessible. As opposed to uploaded images, raw files are kept as-is and not transformed in any way (though we have cool ideas for time-saving transformations we can offer for these files). 
 
Here's a quick example. Suppose you want to link to an Excel spreadsheet file from your website.
 
The following Ruby snippet will upload the XLS file to your Cloudinary account.
 
Cloudinary::Uploader.upload("sample_spreadsheet.xls", 
                                                   :public_id => "sample_spreadsheet",
                                                   :resource_type => :raw)
 
Behind the scenes, the uploading is done through our RESTful API. See our documentation for more details.
 
Downloading the uploaded file is done using a simple dynamic URL:


Cloudinary also supports a single API endpoint for all kinds of files, using the ‘auto’ resource type. This is useful if you allow your visitors to upload files of arbitrary format, image or otherwise, to your web app.
The result of the API upload request includes the final URL the uploaded file is available at. For image files, you can add any image transformation parameters as in standard image uploading.
 
The URL for uploading files with automatic type detection (replace ‘demo’ with your cloud name):
 
https://api.cloudinary.com/v1_1/demo/auto/upload

And in Ruby on Rails use the following:

Cloudinary::Uploader.upload(“sample_document.pdf”, :resource_type => :auto)

Like most of our features, raw file uploading is available now for all free & paid plans.