Ruby On Rails integration

Overview

Cloudinary is a cloud-based service that provides an end-to-end image and video management solution including uploads, storage, manipulations, optimizations and delivery.

With Cloudinary you can easily upload your media assets to the cloud and automatically perform smart image and video manipulations without installing any complex software. All your media resources are then seamlessly delivered through a fast CDN, optimized and using industry best practices. Cloudinary offers comprehensive APIs and administration capabilities and is easy to integrate with new and existing web and mobile applications.

Quick example

Take a look at the following Cloudinary URL that generates the image below:

https://res.cloudinary.com/demo/image/upload/w_150,h_150,c_thumb,g_face,r_20,e_sepia/l_cloudinary_icon,g_south_east,x_5,y_5,w_50,o_60,e_brightness:200/a_10/front_face.png

150x150 PNG

Simply accessing the above URL told Cloudinary to transform an uploaded image, create a 150x150px thumbnail using face detection based cropping, round the image's corners, add a sepia effect, convert it to a transparent PNG format, add a watermark layer, rotate the image by 10 degrees and ultimately delivered the resulting image through a fast CDN using smart caching techniques.

Ruby GEM Features

Cloudinary provides a Ruby GEM (open source) for further simplifying the integration:

Build URLs for image and video transformation & manipulation.
Rails view helper tags for embedding and transforming images.
API wrappers: upload, administration, sprite generation and more.
Direct uploading from the browser using a jQuery plugin.
Active Record integration.
CarrierWave plugin.
Static image syncing for CDN delivery.
Migration tool.
General Ruby integration for non-Rails frameworks such as Sinatra.

The GEM was tested with Ruby 1.8.7, 1.9.2, 1.9.3 and Rails 2.3.x, 3.0.x, 3.1.x, 3.2.x, 4.0.x.

Rails - Getting started guide

1Installation

Cloudinary's Ruby integration library is available as an open-source Ruby GEM.

To install the Cloudinary Ruby GEM, run:

gem install cloudinary

If you use Rails 3.x or higher, edit your Gemfile, add the following line and run bundle.

gem 'cloudinary'

Or in Rails 2.x, edit your environment.rb and add:

config.gem 'cloudinary'

2Configuration

Your cloud_name account parameter is required to build URLs for your media assets. api_key and api_secret are further needed to perform secure API calls to Cloudinary (e.g., image and video uploads). See Account and API setup for more details.

Setting the configuration parameters can be done either programmatically in each call to a Cloudinary method or globally using a cloudinary.yml configuration file, located under the config directory of your Rails project.

You can download your customized cloudinary.yml configuration file through our Management Console.

Here's an example of a cloudinary.yml file:

production:
  cloud_name: "sample"
  api_key: "874837483274837"
  api_secret: "a676b67565c6767a6767d6767f676fe1"

See Configuration Options for more details and additional configuration methods.

3Upload media assets

You can upload images, videos or any other files from your Ruby code or Ruby on Rails server. Uploading is done over HTTPS using a secure protocol based on the api_key and api_secret parameters you provide.

The following command uploads a local file to Cloudinary:

Cloudinary::Uploader.upload('/home/my_image.jpg')

Alternatively, you can a specify a local path, a public HTTP URL, an S3 URL, an IO stream or an actual media file's data. For example:

Cloudinary::Uploader.upload('http://www.example.com/image.jpg')

Each media asset uploaded to Cloudinary is assigned a unique Public ID and is available for immediate delivery and transformation. The upload method returns a Hash with content similar to that shown in the following example:

{
 "url" => 'https://res.cloudinary.com/demo/image/upload/v1371281596/sample.jpg',
 "secure_url" => 
          'https://res.cloudinary.com/demo/image/upload/v1371281596/sample.jpg',
 "public_id" => 'sample',
 "version" => '1312461204',
 "format" => 'jpg',
 "width" => 864,
 "height" => 564,
 "bytes" => 120253       
}

As you can see in the following example, with a single call you can define your own Public ID, apply an incoming transformation before storing the resource file in the cloud, generate derived versions of the resource eagerly and assign tags to uploaded resources:

Cloudinary::Uploader.upload(params[:image],
                            :public_id => "sample_id",
                            :crop => :limit, :width => 2000, :height => 2000,
                            :eager => [
                              { :width => 200, :height => 200, 
                                :crop => :thumb, :gravity => :face,
                                :radius => 20, :effect => :sepia },
                              { :width => 100, :height => 150, 
                                :crop => :fit, :format => 'png' }
                            ],                                     
                            :tags => ['special', 'for_homepage'])

Many more upload options as well as direct uploading from the browser are detailed here: Rails image upload and Rails video upload.

You can also use Cloudinary's CarrierWave plugin to manage your attachments uploading, transformation and embedding within your views.

4Display and manipulate images and video

Adding images and video to your Rails view is quite straightforward. Just use the cl_image_tag or cl_video_tag helper method instead of the standard image_tag or video_tag method. This method generates the full source URL based on the given transformation parameters and internally uses image_tag or video_tag to add the resource to your HTML code:

For example, displaying the uploaded image with the sample public ID, while providing an alternate text:

cl_image_tag("sample.jpg", :alt => "Sample Image")

864x576 JPG (Scaled down)

Now, let's say that you wish to display a small thumbnail of this uploaded image. Simply add the transformation instructions to your call. For example, displaying the 'sample' image transformed to fill a 100x150 rectangle:

cl_image_tag("sample.jpg", :width => 100, :height => 150, :crop => :fill)

100x150 JPG

This is equivalent to:

image_tag(
  "https://res.cloudinary.com/demo/image/upload/w_100,h_150,c_fill/sample.jpg", 
  :width => 100, :height => 150)

Using simple parameters you can perform powerful manipulations. The Ruby library builds Cloudinary URLs that you can embed in your web and mobile views for dynamically transforming your uploaded resources in the cloud and delivering the results through a fast CDN with advanced caching.

You can easily convert formats, resize, perform face detection-based cropping of images, apply effects and filters, append textual layers or watermarks and more.

The following command, for example, embeds a JPG thumbnail of a profile photo fetched from Facebook in real-time, crops it to a circle, applies a sepia effect and delivers it optimized through a CDN:

facebook_profile_image_tag("billclinton.jpg", :width => 90, :height => 98, 
                           :crop => :fill, :gravity => :face,
                           :radius => :max, :effect => :sepia)

90x98 JPG

For more information about supported transformations and their usage, refer to Image transformations and Video manipulation and delivery.

For more details about Cloudinary's transformation and manipulation in Ruby on Rails, see Rails image manipulation and Rails video manipulation.

5Sample projects

To find additional useful code samples and learn how to integrate Cloudinary with your Rails applications, take a look at our Sample Projects.

Basic Ruby sample: Uploading local and remote images to Cloudinary and generating various transformation URLs.

Basic Rails sample: Uploading local and remote images in a Rails project while embedding various transformed images in a Rails web view.

Rails Photo Album: A fully working web application. It uses CarrierWave to manage images of an album model (database). Performs image uploading both from the server side and directly from the browser using a jQuery plugin.

https://github.com/cloudinary/cloudinary_gem/tree/master/samples

6What's next

Sign up for a free account if you haven't done so already. Follow the steps above and try Cloudinary out. Finished all steps? That's just an example of what Cloudinary can offer. Here's some additional reading material to help you get the best out of Cloudinary:

Learn more about Rails image upload and Rails video upload .

Explore powerful Rails image manipulation and Rails video manipulation features and see our Image transformations and Video manipulation and delivery docs.

Make sure to read about Rails & CarrierWave integration and Attachinary.

Browse additional Ruby on Rails integration topics: configuration, migration, Admin API, etc.

Stay tuned for updates, tips and tutorials: Blog, Twitter, Facebook.

CarrierWave integration

Cloudinary's Ruby GEM includes a plugin for CarrierWave. You can use CarrierWave to manage your model attachments: all files and images are automatically uploaded to Cloudinary, image manipulations are performed dynamically in the cloud and all resulting images are delivered through a CDN.

See our detailed documentation about Cloudinary's plugin for CarrierWave for more details.