Cloudinary Blog

Automatic and custom image rotation

Several years ago, a good friend of mine showed me a cool graphic design concept for his new web-based startup company. It looked pretty great. What really caught my eye was the designer’s unique use of visitor profile photos. You see, when a visitor registered to the service and uploaded his photo, the designer envisioned a large, faded, B&W, slightly rotated version of the same profile photo being used as the background image for the visitor’s personal home page. I thought for a minute and told my friend to let this one go. 
 
While the effect looked great, installing a server-side image manipulation software just for the creation of a background photo seemed like an excessive effort for an early-stage, self-funded startup. I still have mixed feelings about this particular piece of advice. Today, I have a chance to make some right out of this wrong, with the addition of image rotation to Cloudinary’s cloud-based image manipulation capabilities. If we had Cloudinary back then, applying these effects to an image while rotating it would have been a no brainer. 
 
In order to rotate an image, simply use the new 'angle' parameter, or 'a' for URL based transformations. It accepts an integer of either positive or negative number of degrees to rotate the image by.
 
The following example rotates an uploaded image by 25 degrees clockwise in addition to resizing it to 30% of the original size:
 


    
 
Same example in Ruby on Rails:
<%= cl_image_tag("sheep.jpg", :width => 0.3, :crop => :scale, :angle => 25) %>
In PHP:
<?php echo cl_image_tag("sheep.jpg", array("width" => 0.3, "crop" => "scale",
                        "angle" => 25)); ?>
 
And with our jQuery plugin:
$.cloudinary.image("sheep.jpg", {width: 0.3, crop: "scale", angle: 25});
 
 
You can also chain multiple transformations to reach nicer effects. As always, this can be achieved using either a simple URL or a one-liner piece of code with your preferred Cloudinary client-side library. The following example scales down the uploaded image, rounds its corners, adds a watermark and rotates the image by 15 degrees counter-clockwise:
 


Automatic image rotation

Real-world photos usually have a clear orientation. Occasionally, you’ll run into image that can be depicted just fine in both landscape and portrait modes. One example might be an architectural floor plan or a design for an apartment. Let’s see how such images might fit a graphic design that leaves room for 300x200px photos.
 


  

As you can see the landscape plan fits almost perfectly into the 300x200 rectangle. However, the portrait one on the right doesn’t effectively use the given space and requires lots of padding on its right and left sides.
 
Such drawings are oblivious to orientation and hence we can rotate them without affecting their content. For such images, we can get a perfect fit by letting Cloudinary automatically rotate the image, when needed. Simply pass 'auto' (or 'auto_right') and 'auto_left' as the 'angle' parameter. This parameter tells Cloudinary that it can rotate the image left or right when the aspect ratio of the original image doesn’t match the requested target ratio.
 
Here’s the same example, this time with auto rotation:
 
 

  
 
As you can see, the result is a much better display of the drawing, with considerably less padding required. All that, without any effort or coding on your side.
 
Same example in Ruby on Rails:
<%= cl_image_tag("portrait_plan.jpg", :width => 300, :height => 200, 
                 :crop => :pad, :background => '#cddae4', :angle => :auto) %>
If you use CarrierWave in your a Rails project, you can add the following to your versions:
cloudinary_transformation :angle => :auto
View The SpaceIncidentally, we saw the need for auto-rotated images at the website of one of Cloudinary’s customers. The service, View The Space, a smart online tool that helps generate leasing activity for landlords and brokers, embeds such architectural designs and floor plans within its website.
 
Custom and automatic image rotation are now available for our free and paid plans. Note that although some samples above are in Ruby, the same can be done in other Cloudinary client libraries - PHP, Python & Django, Perl, .NET and jQuery.
 
If you enjoyed our new image rotation capabilities, make sure you check out Coudinary’s face detection based cropping, corners rounding and watermarks overlays.
 
 

Recent Blog Posts

Embed Images in Email Campaigns at Scale

By Sourav Kundu
Embed Images in Email Campaigns at Scale

We live in an era of information overload and attention is the real currency. Marketers are constantly looking for new ways to reach you, to advertise products and services that they think could improve your lives.

Read more
Build the Back-End For Your Own Instagram-style App with Cloudinary

Github Repo

Managing media files (processing, storage and manipulation) is one of the biggest challenges we encounter as practical developers. These challenges include:

A great service called Cloudinary can help us overcome many of these challenges. Together with Cloudinary, let's work on solutions to these challenges and hopefully have a simpler mental model towards media management.

Read more

Build A Miniflix in 10 Minutes

By Prosper Otemuyiwa
Build A Miniflix in 10 Minutes

Developers are constantly faced with challenges of building complex products every single day. And there are constraints on the time needed to build out the features of these products.

Engineering and Product managers want to beat deadlines for projects daily. CEOs want to roll out new products as fast as possible. Entrepreneurs need their MVPs like yesterday. With this in mind, what should developers do?

Read more

Your Web Image is Unnecessarily Bloated

By Christian Nwamba
Your Web Image is Unnecessarily Bloated

As a developer, it seems inefficient to serve a 2000kb JPEG image when we could compress images to optimize the performance without degrading the visual quality.

We are not new to this kind of responsibility. But our productivity will end up being questioned if we do not deliver fast. In order to do so, the community has devised several patterns to help improve productivity. Let's review few of these patterns based on their categories:

Read more

Google For Nigeria: We saw it all…

By Christian Nwamba
Google For Nigeria: We saw it all…

Note from Cloudinary: Christian Nwamba, a frequent Cloudinary contributor, recently attended, and was a main speaker, at the Google Developer Group (GDG) Conference in Lagos, Nigeria. Christian led a session teaching more than 500 developers how to “Build Offline Apps for the Next Billion Users.” The stack he used included JS (Vue), Firebase, Service Workers and Cloudinary. Below is his account of the conference and his talk.

Read more
Viral Images: Securing Images and Video uploads to your systems

When was the last time you got paid $40,000 for a few days of work? That is what happened last year to Russian independent security researcher Andrey Leonov, who discovered that if you upload a specially constructed image file to Facebook, you can make Facebook's internal servers, nested deep within their firewalls, run arbitrary commands to expose sensitive internal files in a way that could easily lead to a data breach.

Read more