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.

Webinar
How to Optimize for Page Load Speed

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:

Copy to clipboard
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:

Copy to clipboard
<%= 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):

Copy to clipboard
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.

Copy to clipboard
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:
Copy to clipboard
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.

Copy to clipboard
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:

Copy to clipboard
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

Create Lightweight Sites With Low-Code and No-Code Technology

Consumers expect modern websites to be mainly visual. But, the more compelling and complex the related media is, the more data is involved, compounding the site’s weight. In today’s content-craving world, delivering unoptimized media can cost you because it leads to sluggish page loads, resulting in visitors abandoning your site in search of a faster alternative. In fact, a page load that takes more than three seconds can cause as many as 40% of your visitors to bounce. Given this competitive, digital-first environment, you can’t afford to lose page views, for time is of the essence.

Read more
A Blueprint for AWS-Secured Webhook Listeners for Cloudinary

tl;dr: An AWS-secured and optimized Cloudinary webhook listener for extending the Cloudinary service

Code: Github

A webhook is a communication medium for sending notifications from one platform to another about events that occurred. In place are user-defined HTTP callbacks that are triggered by specific events. When a triggered event takes place on the source site, the webhook listens to the event, collects the data, and sends it to the URL you specified in the form of an HTTP request.

Read more
New Accessibility Features for Cloudinary’s Product Gallery Widget

Cloudinary’s Product Gallery widget, which launched in 2019, has enabled many brands to effectively and efficiently showcase their products in a sleek and captivating manner, saving countless hours of development time and accelerating release cycles. By adding Cloudinary’s Product Gallery widget with its customizable UI to their product page, retailers reap numerous benefits, often turning visitors into customers in short order.

Read more
Why Successful Businesses Engage With and Convert Audiences With Visual Media

Most business buyers prefer to research purchase options online, as do many shoppers. No wonder online retail sales in the U.S. rose by 32.4% in 2020—an impressive gain of $105 billion.

For B2B and B2C businesses, text-heavy websites are no longer adequate in attracting shoppers. Instead, engaging visual media—spin images, videos, 3D models, augmented reality—are becoming a must for conveying eye-catching details and differentiators about products or services.

Read more
Making User-Generated Content (UGC) Shoppable With Cloudinary

User-generated content (UGC) is a powerful marketing tool. Not only does video complement marketing efforts for e-commerce by enabling customers to explore products in greater detail, but UGC also adds an element of trust. As a bonus, user-generated video is an exceptional opportunity for e-businesses to attract website traffic without their marketing team having to create promotional videos from scratch. User-generated content drives conversions and brand loyalty as a direct result of authentic interaction.

Read more