Cloudinary Blog

Ruby on Rails and Cloudinary - image management for an amazing web-dev framework

End to end image management solution for Ruby on Rails

Rails is a great web development framework that was recently considered the coolest framework around. While other frameworks have gained popularity over time, Rails remains one of the most popular web development frameworks to date..

Cloudinary's Rails community includes active Ruby on Rails developers who use Cloudinary’s APIs to streamline and manage their image lifecycle on their sites and web applications. In fact, approximately 33% of Cloudinary’s paying customers use Ruby on Rails. Therefore, we are pleased to be a part of this year's RailsConf in Atlanta, presenting how simple it is to handle image uploads, manipulation and delivery in Rails applications with Cloudinary.

Image management with Ruby on Rails

The concept of Ruby on Rails stemmed from the preference of convention over configuration in terms of common development tasks. This way, you can write code specifically for your core business logic rather than spending time writing common code found in every web application.

The missing link in this revolutionary approach to code writing was image management. Various GEMs attempted to solve this image management challenge in various ways, such as managing attachment and upload flows, or creating packages that wrapped image processing and applications.

Quite a lot of code is needed to make the image management flow truly work while maintaining your online site. This includes code to manage user uploaded media files of all sizes, safely storing them online, dynamically manipulating them to match your website, web application or mobile app's graphic design, browser type and device resolution, then delivering them optimized, as fast as possible, to enhance user experience.  

Ruby on Rails has been our personal favorite framework since version 1.0. Therefore, it is no surprise that Cloudinary has provided a Ruby GEM from day one of our service to simplify the lives of web developers who use Ruby on Rails. By simply adding one-liners to your code, you can integrate Cloudinary's cloud-based solution with your Rails code. This essentially eliminates the R&D work involved in image management, ultimately reducing related maintenance and IT costs. This Ruby GEM has been used by thousands of customers across the globe, letting them enjoy the most feature-rich image manipulation capabilities.

End to end image management for RoR developers

Upload to the cloud

Upload can be done from your server-side code or by letting your users upload directly from their browsers using a jQuery plugin. You can upload images and any other files from your Ruby code or Ruby on Rails server. To simplify the upload process and support rich client-side applications, your images can be uploaded directly from a browser to the cloud with no predefined authentication using our direct unsigned upload.

Uploading is done over HTTPS using a secure protocol based on the credentials of your Cloudinary account.

The following simple Ruby command uploads a local file to Cloudinary from your server-side Rails code:

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

Each image uploaded to Cloudinary is assigned a unique Public ID and is available for immediate delivery and transformation. Learn more.

Below is an example of Rails' view method that adds a file input field to your HTML page that performs upload to the cloud directly from your user’s browser:

<%= cl_image_upload_tag(:image_id, :crop => :limit, :width => 1000, :height => 1000) %>

View helper methods to manipulate and embed images

These are used to embed images that were previously uploaded to the cloud, manipulate them on-the-fly to match your graphic design, apply effects and any type of crop you wish, then quickly deliver them optimized via CDN to your users. View helper methods create HTML image tags so that an image's URL includes dynamic manipulation parameters, which are part of Cloudinary's rich set of image manipulation capabilities.

Images are implicitly and automatically optimized to a smaller file size while maintaining high visual quality. Cloudinary also supports dynamic browser detection to deliver modern file formats, resolution, pixel density for retina display and responsive layout design to further optimize and simplify development.  

For example, an image was uploaded to Cloudinary with the public ID of bike. The following method generates an HTML image tag of the uploaded image (scaled down):

cl_image_tag("bike.jpg")

Original uploaded image

The code example below is of a cloud-based manipulation result of the same image. The image is cropped using automatic face detection to a circular thumbnail of 200 pixels.

cl_image_tag("bike.jpg", :radius=>"max", :width=>200, :height=>200, :crop=>:thumb, :gravity=>:face)

Face detection based circular cropped image

The cl_image_tag view helper method generates an HTML image tag with a dynamic image URL as the source attribute. The image is delivered optimized via a fast CDN using an on-the-fly manipulation URL:

Ruby:
cl_image_tag("bike.jpg", :width=>200, :height=>200, :gravity=>"face", :radius=>"max", :crop=>"thumb")

The following example shows a more advanced manipulation of the same uploaded image. This time generating an image of 400x400 pixels using face detection based cropping. Color saturation is increased by 100%, a watermark is added, as well as a dynamic text overlay. A vignette effect is applied and the image is deliver to support Retina displays with DPR (Device Pixel Ratio) of 2.0.

cl_image_tag("bike.jpg", :transformation=>[
  {:width=>400, :height=>400, :crop=>:fill, :gravity=>:face, :effect=>"saturation:100"},
  {:opacity=>50, :overlay=>"cloudinary_icon", :width=>0.5, :flags=>:relative, :effect=>"brightness:200"},
  {:opacity=>90, :color=>"white", :overlay=>"text:Montserrat_38_bold:RailsConf%202015", :y=>180, :gravity=>:south},
  {:effect=>"vignette:100"},
  {:dpr=>2.0}
  ])

Advanced cloud-based image manipulation integrated with a Rails view

Learn more about Cloudinary’s Rails image manipulation.

CarrierWave plugin

CarrierWave is a popular Ruby GEM that is used to manage the file attachment and upload process, in general. It integrates all Model View Controller (MVC) aspects of upload and attachment management. Cloudinary provides a plugin for CarrierWave that makes the switch from existing storage (e.g., S3) and from local image processing (e.g., using RMagick or MiniMagick), to Cloudinary's cloud-based image manipulation service. Delivery is seamless via CDN, and simply requires you to change a single line of code in your model using CarrierWave.

Below is a sample code of a CarrierWave uploader class definition with Cloudinary’s plugin:

class PictureUploader < CarrierWave::Uploader::Base

  include Cloudinary::CarrierWave

  process :convert => 'png'
  process :tags => ['post_picture']
  
  version :standard do
    process :resize_to_fill => [100, 150, :north]
  end
  
  version :thumbnail do
    resize_to_fit(50, 50)
  end

end

By the way, Attachinary is another great attachment management plugin that uses Cloudinary internally.

See our documentation of Ruby On Rails integration for more details.

And much more...

At Cloudinary, we provide image management features that are available via our Ruby GEM. For example, we utilize a Rake task to sync your static website images to the cloud to perform both fast delivery via CDN and manipulation. We also provide a tool to manage the process of migrating existing images to the cloud and we provide an administrative API that allows you to perform housekeeping tasks, keeping your images organized (e.g., browsing, tagging, deleting).

There are plenty more features that we provide, all of which include add-ons for image processing, moderation, manipulation, optimization, and are wrapped by our Ruby GEM, so they are packaged in the simplest way for developers to use.

Ruby on Rails will soon be coming out with its fifth major version, showing that the popular web development platform is continuing to evolve and face new challenges with components such as the new Action Cable, Rails for API-only apps and more. Nevertheless, since Cloudinary takes care of your entire image management pipeline, as Rails developers, there's no reason you should take on this task on your own. In addition, Cloudinary provides integration with client-side frameworks, such as jQuery and AngularJS, that you can use to further simplify integration with your web application’s UI layer. With Cloudinary's Ruby GEM, image management can be done in the cloud without the need to install local software or deal with complex upload flows. Check out our Ruby documentation and feel free to try it out for yourself.

Rails fan? If you don't have a Cloudinary account yet, sign up for a free account here.

Recent Blog Posts

How to Make Boomerang Video Effect With Cloudinary

When you see the term boomerang, what is the first thing that comes to mind?

A thrown tool made of wood that returns to its thrower? Another definition is reversal, logically portraying the aim of the tool itself. Based on this definition, the term boomerang videos” came into play to depict videos that loop back and forth.

Read more
Shortening the Development Cycle of Media-Related apps with Cloudinary

Currently, the Android platform boasts the highest demand for mobile solutions, as evidenced by Google’s announcement in 2017 that there were two billion monthly active Android devices, a number that is likely to increase in the years ahead. For app developers like you, now is the right time to build and release solutions for Android. you might have also noticed that a higher percentage of apps being developed nowadays are filled with visual media: images and videos.

Read more
Build Your Own Image Storyboard Android App

Globally, approximately two billion people now own smartphones, which also feature cameras capable of capturing photos and videos of a tonal richness and quality unimaginable even five years ago. Until recently, those cameras behaved mostly as optical sensors, catching light that determines the resulting image's pixels. The next generation of cameras, however, can blend hardware and computer-vision algorithms that apply to an image's semantic content, spawning creative mobile photo and video apps.

Read more
Cloudinary Delivers Simplified Image Management Workflow for Fairfax Media's Digital Transformation

Fairfax Media Limited [ASX:FXJ] is one of the largest media companies in Australia and New Zealand that engages audiences and communities via print and digital media. It includes recognizable mastheads including The Australian Financial Review, The Sydney Morning Herald and The Age. Fairfax Media operates numerous news and information websites, as well as tablet and smartphone apps, for online news sites.

Read more
Bleacher Report Scores with Real-Time Video Highlights Delivered by Cloudinary

Bleacher Report is a global digital destination for sports fans, creating and collaborating on content at the intersection of sports and culture. Owned by Turner, a division of Time Warner, Bleacher Report's website and social channels focus on sports culture for the next generation of fans. Bleacher Report also has a five-star mobile app and popular email newsletters, which are part of the company’s strategy for instantly delivering in-depth articles, results and video highlights personalized for users’ favorite teams, players and leagues.

Read more