Rotate a video

Rotate a video by setting the angle parameter (a_ in URLs). Positive values for clockwise and negative for counterclockwise. Very useful if you want to change the view from “portrait” to “landscape” when shooting videos in mobile -

90 Degrees

45 Degrees counterclockwise

Ruby:
Copy to clipboard
cl_video_tag("dog", :angle=>90)
PHP:
Copy to clipboard
cl_video_tag("dog", array("angle"=>90))
Python:
Copy to clipboard
CloudinaryVideo("dog").video(angle=90)
Node.js:
Copy to clipboard
cloudinary.video("dog", {angle: 90})
Java:
Copy to clipboard
cloudinary.url().transformation(new Transformation().angle(90)).videoTag("dog");
JS:
Copy to clipboard
cloudinary.videoTag('dog', {angle: 90}).toHtml();
jQuery:
Copy to clipboard
$.cloudinary.video("dog", {angle: 90})
React:
Copy to clipboard
<Video publicId="dog" >
  <Transformation angle="90" />
</Video>
Vue.js:
Copy to clipboard
<cld-video publicId="dog" >
  <cld-transformation angle="90" />
</cld-video>
Angular:
Copy to clipboard
<cl-video public-id="dog" >
  <cl-transformation angle="90">
  </cl-transformation>
</cl-video>
.Net:
Copy to clipboard
cloudinary.Api.UrlVideoUp.Transform(new Transformation().Angle(90)).BuildVideoTag("dog")
Android:
Copy to clipboard
MediaManager.get().url().transformation(new Transformation().angle(90)).resourceType("video").generate("dog.mp4");
iOS:
Copy to clipboard
cloudinary.createUrl().setResourceType("video").setTransformation(CLDTransformation().setAngle(90)).generate("dog.mp4")
by Maor Gariv

Animated gif creation

Easily create and manipulate an animated gif from images. First, choose the images you wish to include in the GIF by tagging them. Then, use the multi API to turn them into animated GIF (the images will be ordered alphabetically within the GIF).

Ruby:
Copy to clipboard
cl_image_tag("sample_image.jpg", :width=>400, :height=>300, :crop=>"fill")
PHP:
Copy to clipboard
cl_image_tag("sample_image.jpg", array("width"=>400, "height"=>300, "crop"=>"fill"))
Python:
Copy to clipboard
CloudinaryImage("sample_image.jpg").image(width=400, height=300, crop="fill")
Node.js:
Copy to clipboard
cloudinary.image("sample_image.jpg", {width: 400, height: 300, crop: "fill"})
Java:
Copy to clipboard
cloudinary.url().transformation(new Transformation().width(400).height(300).crop("fill")).imageTag("sample_image.jpg");
JS:
Copy to clipboard
cloudinary.imageTag('sample_image.jpg', {width: 400, height: 300, crop: "fill"}).toHtml();
jQuery:
Copy to clipboard
$.cloudinary.image("sample_image.jpg", {width: 400, height: 300, crop: "fill"})
React:
Copy to clipboard
<Image publicId="sample_image.jpg" >
  <Transformation width="400" height="300" crop="fill" />
</Image>
Vue.js:
Copy to clipboard
<cld-image publicId="sample_image.jpg" >
  <cld-transformation width="400" height="300" crop="fill" />
</cld-image>
Angular:
Copy to clipboard
<cl-image public-id="sample_image.jpg" >
  <cl-transformation width="400" height="300" crop="fill">
  </cl-transformation>
</cl-image>
.Net:
Copy to clipboard
cloudinary.Api.UrlImgUp.Transform(new Transformation().Width(400).Height(300).Crop("fill")).BuildImageTag("sample_image.jpg")
Android:
Copy to clipboard
MediaManager.get().url().transformation(new Transformation().width(400).height(300).crop("fill")).generate("sample_image.jpg");
iOS:
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setWidth(400).setHeight(300).setCrop("fill")).generate("sample_image.jpg")!, cloudinary: cloudinary)
by Maor Gariv

Creating a Bevel effect

Add the Bevel effect to any image. We will create a generalized transformation URL, which could be used to apply the bevel effect to any image. In order to do this, we'll make use of variables, overlays, the colorize effect, the cut-out effect, and more. Here is the final result - The Bevel effect

The Bevel effect

The Bevel effect

Triangle Image

Triangle Image

Top Bevel

Top Bevel

Image rotation

Rotate an image by setting the angle parameter (a in URLs) to a given value representing the degree of rotation. A positive value rotates the image clockwise while a negative value rotates it counterclockwise.

Original

Original

Rotated 90°

Rotated 90°

Rotated overlay

Rotated overlay
Ruby:
Copy to clipboard
cl_image_tag("sea_shell.jpg", :angle=>90)
PHP:
Copy to clipboard
cl_image_tag("sea_shell.jpg", array("angle"=>90))
Python:
Copy to clipboard
CloudinaryImage("sea_shell.jpg").image(angle=90)
Node.js:
Copy to clipboard
cloudinary.image("sea_shell.jpg", {angle: 90})
Java:
Copy to clipboard
cloudinary.url().transformation(new Transformation().angle(90)).imageTag("sea_shell.jpg");
JS:
Copy to clipboard
cloudinary.imageTag('sea_shell.jpg', {angle: 90}).toHtml();
jQuery:
Copy to clipboard
$.cloudinary.image("sea_shell.jpg", {angle: 90})
React:
Copy to clipboard
<Image publicId="sea_shell.jpg" >
  <Transformation angle="90" />
</Image>
Vue.js:
Copy to clipboard
<cld-image publicId="sea_shell.jpg" >
  <cld-transformation angle="90" />
</cld-image>
Angular:
Copy to clipboard
<cl-image public-id="sea_shell.jpg" >
  <cl-transformation angle="90">
  </cl-transformation>
</cl-image>
.Net:
Copy to clipboard
cloudinary.Api.UrlImgUp.Transform(new Transformation().Angle(90)).BuildImageTag("sea_shell.jpg")
Android:
Copy to clipboard
MediaManager.get().url().transformation(new Transformation().angle(90)).generate("sea_shell.jpg");
iOS:
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setAngle(90)).generate("sea_shell.jpg")!, cloudinary: cloudinary)
by Itay Taragano

Animated GIF manipulation

Transform animated GIFs just like any other image. Use Cloudinary's powerful image transformation tools to manipulate your animated GIFs just like you do for other standard still images.

Original

Original

Rotated

Rotated

Adding text

Adding text
Ruby:
Copy to clipboard
cl_image_tag("cloudinary_animation.gif", :width=>0.5, :crop=>"scale")
PHP:
Copy to clipboard
cl_image_tag("cloudinary_animation.gif", array("width"=>0.5, "crop"=>"scale"))
Python:
Copy to clipboard
CloudinaryImage("cloudinary_animation.gif").image(width=0.5, crop="scale")
Node.js:
Copy to clipboard
cloudinary.image("cloudinary_animation.gif", {width: "0.5", crop: "scale"})
Java:
Copy to clipboard
cloudinary.url().transformation(new Transformation().width(0.5).crop("scale")).imageTag("cloudinary_animation.gif");
JS:
Copy to clipboard
cloudinary.imageTag('cloudinary_animation.gif', {width: "0.5", crop: "scale"}).toHtml();
jQuery:
Copy to clipboard
$.cloudinary.image("cloudinary_animation.gif", {width: "0.5", crop: "scale"})
React:
Copy to clipboard
<Image publicId="cloudinary_animation.gif" >
  <Transformation width="0.5" crop="scale" />
</Image>
Vue.js:
Copy to clipboard
<cld-image publicId="cloudinary_animation.gif" >
  <cld-transformation width="0.5" crop="scale" />
</cld-image>
Angular:
Copy to clipboard
<cl-image public-id="cloudinary_animation.gif" >
  <cl-transformation width="0.5" crop="scale">
  </cl-transformation>
</cl-image>
.Net:
Copy to clipboard
cloudinary.Api.UrlImgUp.Transform(new Transformation().Width(0.5).Crop("scale")).BuildImageTag("cloudinary_animation.gif")
Android:
Copy to clipboard
MediaManager.get().url().transformation(new Transformation().width(0.5).crop("scale")).generate("cloudinary_animation.gif");
iOS:
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setWidth(0.5).setCrop("scale")).generate("cloudinary_animation.gif")!, cloudinary: cloudinary)
by Itay Taragano