Cloudinary Cookbook recipes about Angle

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

URL Ruby PHP Python Node.js Java JS jQuery React Vue.js Angular .Net Android iOS All

URL:

https://res.cloudinary.com/demo/video/upload/a_90/dog.mp4

Ruby:

cl_video_tag("dog", :angle=>90)

PHP:

cl_video_tag("dog", array("angle"=>90))

Python:

CloudinaryVideo("dog").video(angle=90)

Node.js:

cloudinary.video("dog", {angle: 90})

Java:

cloudinary.url().transformation(new Transformation().angle(90)).videoTag("dog");

JS:

cloudinary.videoTag('dog', {angle: 90}).toHtml();

jQuery:

$.cloudinary.video("dog", {angle: 90})

React:

<Video publicId="dog" >
  <Transformation angle="90" />
</Video>

Vue.js:

<cld-video publicId="dog" >
  <cld-transformation angle="90" />
</cld-video>

Angular:

<cl-video public-id="dog" >
  <cl-transformation angle="90">
  </cl-transformation>
</cl-video>

.Net:

cloudinary.Api.UrlVideoUp.Transform(new Transformation().Angle(90)).BuildVideoTag("dog")

Android:

MediaManager.get().url().transformation(new Transformation().angle(90)).resourceType("video").generate("dog.mp4");

iOS:

cloudinary.createUrl().setResourceType("video").setTransformation(CLDTransformation().setAngle(90)).generate("dog.mp4")

by Maor Gariv Jul 02, 2020

Tags:

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).

URL Ruby PHP Python Node.js Java JS jQuery React Vue.js Angular .Net Android iOS All

URL:

https://res.cloudinary.com/demo/image/upload/w_400,h_300,c_fill/sample_image.jpg

Ruby:

cl_image_tag("sample_image.jpg", :width=>400, :height=>300, :crop=>"fill")

PHP:

cl_image_tag("sample_image.jpg", array("width"=>400, "height"=>300, "crop"=>"fill"))

Python:

CloudinaryImage("sample_image.jpg").image(width=400, height=300, crop="fill")

Node.js:

cloudinary.image("sample_image.jpg", {width: 400, height: 300, crop: "fill"})

Java:

cloudinary.url().transformation(new Transformation().width(400).height(300).crop("fill")).imageTag("sample_image.jpg");

JS:

cloudinary.imageTag('sample_image.jpg', {width: 400, height: 300, crop: "fill"}).toHtml();

jQuery:

$.cloudinary.image("sample_image.jpg", {width: 400, height: 300, crop: "fill"})

React:

<Image publicId="sample_image.jpg" >
  <Transformation width="400" height="300" crop="fill" />
</Image>

Vue.js:

<cld-image publicId="sample_image.jpg" >
  <cld-transformation width="400" height="300" crop="fill" />
</cld-image>

Angular:

<cl-image public-id="sample_image.jpg" >
  <cl-transformation width="400" height="300" crop="fill">
  </cl-transformation>
</cl-image>

.Net:

cloudinary.Api.UrlImgUp.Transform(new Transformation().Width(400).Height(300).Crop("fill")).BuildImageTag("sample_image.jpg")

Android:

MediaManager.get().url().transformation(new Transformation().width(400).height(300).crop("fill")).generate("sample_image.jpg");

iOS:

imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setWidth(400).setHeight(300).setCrop("fill")).generate("sample_image.jpg")!, cloudinary: cloudinary)

by Maor Gariv Jul 02, 2020

Tags:

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

Triangle Image

Top Bevel

by Eyal Katz Talmon May 03, 2020

Tags:

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

Rotated 90°

Rotated overlay

URL Ruby PHP Python Node.js Java JS jQuery React Vue.js Angular .Net Android iOS All

URL:

https://res.cloudinary.com/demo/image/upload/a_90/sea_shell.jpg

Ruby:

cl_image_tag("sea_shell.jpg", :angle=>90)

PHP:

cl_image_tag("sea_shell.jpg", array("angle"=>90))

Python:

CloudinaryImage("sea_shell.jpg").image(angle=90)

Node.js:

cloudinary.image("sea_shell.jpg", {angle: 90})

Java:

cloudinary.url().transformation(new Transformation().angle(90)).imageTag("sea_shell.jpg");

JS:

cloudinary.imageTag('sea_shell.jpg', {angle: 90}).toHtml();

jQuery:

$.cloudinary.image("sea_shell.jpg", {angle: 90})

React:

<Image publicId="sea_shell.jpg" >
  <Transformation angle="90" />
</Image>

Vue.js:

<cld-image publicId="sea_shell.jpg" >
  <cld-transformation angle="90" />
</cld-image>

Angular:

<cl-image public-id="sea_shell.jpg" >
  <cl-transformation angle="90">
  </cl-transformation>
</cl-image>

.Net:

cloudinary.Api.UrlImgUp.Transform(new Transformation().Angle(90)).BuildImageTag("sea_shell.jpg")

Android:

MediaManager.get().url().transformation(new Transformation().angle(90)).generate("sea_shell.jpg");

iOS:

imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setAngle(90)).generate("sea_shell.jpg")!, cloudinary: cloudinary)

by Itay Taragano Jul 19, 2015

Tags:

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

Rotated

Adding text

URL Ruby PHP Python Node.js Java JS jQuery React Vue.js Angular .Net Android iOS All

URL:

https://res.cloudinary.com/demo/image/upload/w_0.5/cloudinary_animation.gif

Ruby:

cl_image_tag("cloudinary_animation.gif", :width=>0.5, :crop=>"scale")

PHP:

cl_image_tag("cloudinary_animation.gif", array("width"=>0.5, "crop"=>"scale"))

Python:

CloudinaryImage("cloudinary_animation.gif").image(width=0.5, crop="scale")

Node.js:

cloudinary.image("cloudinary_animation.gif", {width: "0.5", crop: "scale"})

Java:

cloudinary.url().transformation(new Transformation().width(0.5).crop("scale")).imageTag("cloudinary_animation.gif");

JS:

cloudinary.imageTag('cloudinary_animation.gif', {width: "0.5", crop: "scale"}).toHtml();

jQuery:

$.cloudinary.image("cloudinary_animation.gif", {width: "0.5", crop: "scale"})

React:

<Image publicId="cloudinary_animation.gif" >
  <Transformation width="0.5" crop="scale" />
</Image>

Vue.js:

<cld-image publicId="cloudinary_animation.gif" >
  <cld-transformation width="0.5" crop="scale" />
</cld-image>

Angular:

<cl-image public-id="cloudinary_animation.gif" >
  <cl-transformation width="0.5" crop="scale">
  </cl-transformation>
</cl-image>

.Net:

cloudinary.Api.UrlImgUp.Transform(new Transformation().Width(0.5).Crop("scale")).BuildImageTag("cloudinary_animation.gif")

Android:

MediaManager.get().url().transformation(new Transformation().width(0.5).crop("scale")).generate("cloudinary_animation.gif");

iOS:

imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setWidth(0.5).setCrop("scale")).generate("cloudinary_animation.gif")!, cloudinary: cloudinary)

by Itay Taragano Aug 05, 2014

Tags: