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