Cloudinary Cookbook recipes about Gravity

Find recipes by tags:

Rounded profile picture with initials

Automatically fetch social networks' profile pictures by setting the type parameter to the required network (e.g., facebook), apply any further transformations and add the user's initials as a text overlay.

Original

Face detection

With initials

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

URL:

https://res.cloudinary.com/demo/image/facebook/w_100,h_100,c_thumb,g_face,e_blur:200,r_max/l_text:Arial_50_bold:DB,co_white/Beckham.jpg

Ruby:

cl_image_tag("Beckham.jpg", :type=>"facebook", :transformation=>[
  {:width=>100, :height=>100, :gravity=>"face", :effect=>"blur:200", :radius=>"max", :crop=>"thumb"},
  {:overlay=>{:font_family=>"Arial", :font_size=>50, :font_weight=>"bold", :text=>"DB"}, :color=>"white"}
  ])

PHP:

cl_image_tag("Beckham.jpg", array("type"=>"facebook", "transformation"=>array(
  array("width"=>100, "height"=>100, "gravity"=>"face", "effect"=>"blur:200", "radius"=>"max", "crop"=>"thumb"),
  array("overlay"=>array("font_family"=>"Arial", "font_size"=>50, "font_weight"=>"bold", "text"=>"DB"), "color"=>"white")
  )))

Python:

CloudinaryImage("Beckham.jpg").image(type="facebook", transformation=[
  {'width': 100, 'height': 100, 'gravity': "face", 'effect': "blur:200", 'radius': "max", 'crop': "thumb"},
  {'overlay': {'font_family': "Arial", 'font_size': 50, 'font_weight': "bold", 'text': "DB"}, 'color': "white"}
  ])

Node.js:

cloudinary.image("Beckham.jpg", {type: "facebook", transformation: [
  {width: 100, height: 100, gravity: "face", effect: "blur:200", radius: "max", crop: "thumb"},
  {overlay: {font_family: "Arial", font_size: 50, font_weight: "bold", text: "DB"}, color: "white"}
  ]})

Java:

cloudinary.url().transformation(new Transformation()
  .width(100).height(100).gravity("face").effect("blur:200").radius("max").crop("thumb").chain()
  .overlay(new TextLayer().fontFamily("Arial").fontSize(50).fontWeight("bold").text("DB")).color("white")).type("facebook").imageTag("Beckham.jpg");

JS:

cloudinary.imageTag('Beckham.jpg', {type: "facebook", transformation: [
  {width: 100, height: 100, gravity: "face", effect: "blur:200", radius: "max", crop: "thumb"},
  {overlay: new cloudinary.TextLayer().fontFamily("Arial").fontSize(50).fontWeight("bold").text("DB"), color: "white"}
  ]}).toHtml();

jQuery:

$.cloudinary.image("Beckham.jpg", {type: "facebook", transformation: [
  {width: 100, height: 100, gravity: "face", effect: "blur:200", radius: "max", crop: "thumb"},
  {overlay: new cloudinary.TextLayer().fontFamily("Arial").fontSize(50).fontWeight("bold").text("DB"), color: "white"}
  ]})

React:

<Image publicId="Beckham.jpg" type="facebook">
  <Transformation width="100" height="100" gravity="face" effect="blur:200" radius="max" crop="thumb" />
  <Transformation overlay={{fontFamily: "Arial", fontSize: 50, fontWeight: "bold", text: "DB"}} color="white" />
</Image>

Vue.js:

<cld-image publicId="Beckham.jpg" type="facebook">
  <cld-transformation width="100" height="100" gravity="face" effect="blur:200" radius="max" crop="thumb" />
  <cld-transformation overlay={{fontFamily: "Arial", fontSize: 50, fontWeight: "bold", text: "DB"}} color="white" />
</cld-image>

Angular:

<cl-image public-id="Beckham.jpg" type="facebook">
  <cl-transformation width="100" height="100" gravity="face" effect="blur:200" radius="max" crop="thumb">
  </cl-transformation>
  <cl-transformation overlay="text:Arial_50_bold:DB" color="white">
  </cl-transformation>
</cl-image>

.Net:

cloudinary.Api.UrlImgUp.Transform(new Transformation()
  .Width(100).Height(100).Gravity("face").Effect("blur:200").Radius("max").Crop("thumb").Chain()
  .Overlay(new TextLayer().FontFamily("Arial").FontSize(50).FontWeight("bold").Text("DB")).Color("white")).Type("facebook").BuildImageTag("Beckham.jpg")

Android:

MediaManager.get().url().transformation(new Transformation()
  .width(100).height(100).gravity("face").effect("blur:200").radius("max").crop("thumb").chain()
  .overlay(new TextLayer().fontFamily("Arial").fontSize(50).fontWeight("bold").text("DB")).color("white")).type("facebook").generate("Beckham.jpg");

iOS:

imageView.cldSetImage(cloudinary.createUrl().setType( "facebook").setTransformation(CLDTransformation()
  .setWidth(100).setHeight(100).setGravity("face").setEffect("blur:200").setRadius("max").setCrop("thumb").chain()
  .setOverlay("text:Arial_50_bold:DB").setColor("white")).generate("Beckham.jpg")!, cloudinary: cloudinary)

by Itay Taragano Jul 05, 2020

Tags:

Video overlays

Place a video on top of another by using the overlay parameter while adding the ‘video:’ type to it (l_video in URLs).

Moving video overlay

Video overlay

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/w_150,e_accelerate:100,l_video:abbey_road/g_west,so_0,eo_2,fl_layer_apply/l_video:abbey_road/w_150,e_accelerate:100,g_center,so_2,eo_5,fl_layer_apply/l_video:abbey_road/w_150,e_accelerate:100,g_east,so_5,fl_layer_apply/dog.mp4

Ruby:

cl_video_tag("dog", :transformation=>[
  {:width=>150, :effect=>"accelerate:100", :overlay=>"video:abbey_road"},
  {:gravity=>"west", :start_offset=>"0", :end_offset=>"2", :flags=>"layer_apply"},
  {:overlay=>"video:abbey_road"},
  {:width=>150, :effect=>"accelerate:100", :gravity=>"center", :start_offset=>"2", :end_offset=>"5", :flags=>"layer_apply", :crop=>"scale"},
  {:overlay=>"video:abbey_road"},
  {:width=>150, :effect=>"accelerate:100", :gravity=>"east", :start_offset=>"5", :flags=>"layer_apply", :crop=>"scale"}
  ])

PHP:

cl_video_tag("dog", array("transformation"=>array(
  array("width"=>150, "effect"=>"accelerate:100", "overlay"=>"video:abbey_road"),
  array("gravity"=>"west", "start_offset"=>"0", "end_offset"=>"2", "flags"=>"layer_apply"),
  array("overlay"=>"video:abbey_road"),
  array("width"=>150, "effect"=>"accelerate:100", "gravity"=>"center", "start_offset"=>"2", "end_offset"=>"5", "flags"=>"layer_apply", "crop"=>"scale"),
  array("overlay"=>"video:abbey_road"),
  array("width"=>150, "effect"=>"accelerate:100", "gravity"=>"east", "start_offset"=>"5", "flags"=>"layer_apply", "crop"=>"scale")
  )))

Python:

CloudinaryVideo("dog").video(transformation=[
  {'width': 150, 'effect': "accelerate:100", 'overlay': "video:abbey_road"},
  {'gravity': "west", 'start_offset': "0", 'end_offset': "2", 'flags': "layer_apply"},
  {'overlay': "video:abbey_road"},
  {'width': 150, 'effect': "accelerate:100", 'gravity': "center", 'start_offset': "2", 'end_offset': "5", 'flags': "layer_apply", 'crop': "scale"},
  {'overlay': "video:abbey_road"},
  {'width': 150, 'effect': "accelerate:100", 'gravity': "east", 'start_offset': "5", 'flags': "layer_apply", 'crop': "scale"}
  ])

Node.js:

cloudinary.video("dog", {transformation: [
  {width: 150, effect: "accelerate:100", overlay: "video:abbey_road"},
  {gravity: "west", start_offset: "0", end_offset: "2", flags: "layer_apply"},
  {overlay: "video:abbey_road"},
  {width: 150, effect: "accelerate:100", gravity: "center", start_offset: "2", end_offset: "5", flags: "layer_apply", crop: "scale"},
  {overlay: "video:abbey_road"},
  {width: 150, effect: "accelerate:100", gravity: "east", start_offset: "5", flags: "layer_apply", crop: "scale"}
  ]})

Java:

cloudinary.url().transformation(new Transformation()
  .width(150).effect("accelerate:100").overlay(new Layer().publicId("video:abbey_road")).chain()
  .gravity("west").startOffset("0").endOffset("2").flags("layer_apply").chain()
  .overlay(new Layer().publicId("video:abbey_road")).chain()
  .width(150).effect("accelerate:100").gravity("center").startOffset("2").endOffset("5").flags("layer_apply").crop("scale").chain()
  .overlay(new Layer().publicId("video:abbey_road")).chain()
  .width(150).effect("accelerate:100").gravity("east").startOffset("5").flags("layer_apply").crop("scale")).videoTag("dog");

JS:

cloudinary.videoTag('dog', {transformation: [
  {width: 150, effect: "accelerate:100", overlay: new cloudinary.Layer().publicId("video:abbey_road")},
  {gravity: "west", startOffset: "0", endOffset: "2", flags: "layer_apply"},
  {overlay: new cloudinary.Layer().publicId("video:abbey_road")},
  {width: 150, effect: "accelerate:100", gravity: "center", startOffset: "2", endOffset: "5", flags: "layer_apply", crop: "scale"},
  {overlay: new cloudinary.Layer().publicId("video:abbey_road")},
  {width: 150, effect: "accelerate:100", gravity: "east", startOffset: "5", flags: "layer_apply", crop: "scale"}
  ]}).toHtml();

jQuery:

$.cloudinary.video("dog", {transformation: [
  {width: 150, effect: "accelerate:100", overlay: new cloudinary.Layer().publicId("video:abbey_road")},
  {gravity: "west", start_offset: "0", end_offset: "2", flags: "layer_apply"},
  {overlay: new cloudinary.Layer().publicId("video:abbey_road")},
  {width: 150, effect: "accelerate:100", gravity: "center", start_offset: "2", end_offset: "5", flags: "layer_apply", crop: "scale"},
  {overlay: new cloudinary.Layer().publicId("video:abbey_road")},
  {width: 150, effect: "accelerate:100", gravity: "east", start_offset: "5", flags: "layer_apply", crop: "scale"}
  ]})

React:

<Video publicId="dog" >
  <Transformation width="150" effect="accelerate:100" overlay="video:abbey_road" />
  <Transformation gravity="west" startOffset="0" endOffset="2" flags="layer_apply" />
  <Transformation overlay="video:abbey_road" />
  <Transformation width="150" effect="accelerate:100" gravity="center" startOffset="2" endOffset="5" flags="layer_apply" crop="scale" />
  <Transformation overlay="video:abbey_road" />
  <Transformation width="150" effect="accelerate:100" gravity="east" startOffset="5" flags="layer_apply" crop="scale" />
</Video>

Vue.js:

<cld-video publicId="dog" >
  <cld-transformation width="150" effect="accelerate:100" overlay="video:abbey_road" />
  <cld-transformation gravity="west" startOffset="0" endOffset="2" flags="layer_apply" />
  <cld-transformation overlay="video:abbey_road" />
  <cld-transformation width="150" effect="accelerate:100" gravity="center" startOffset="2" endOffset="5" flags="layer_apply" crop="scale" />
  <cld-transformation overlay="video:abbey_road" />
  <cld-transformation width="150" effect="accelerate:100" gravity="east" startOffset="5" flags="layer_apply" crop="scale" />
</cld-video>

Angular:

<cl-video public-id="dog" >
  <cl-transformation width="150" effect="accelerate:100" overlay="video:abbey_road">
  </cl-transformation>
  <cl-transformation gravity="west" start-offset="0" end-offset="2" flags="layer_apply">
  </cl-transformation>
  <cl-transformation overlay="video:abbey_road">
  </cl-transformation>
  <cl-transformation width="150" effect="accelerate:100" gravity="center" start-offset="2" end-offset="5" flags="layer_apply" crop="scale">
  </cl-transformation>
  <cl-transformation overlay="video:abbey_road">
  </cl-transformation>
  <cl-transformation width="150" effect="accelerate:100" gravity="east" start-offset="5" flags="layer_apply" crop="scale">
  </cl-transformation>
</cl-video>

.Net:

cloudinary.Api.UrlVideoUp.Transform(new Transformation()
  .Width(150).Effect("accelerate:100").Overlay(new Layer().PublicId("video:abbey_road")).Chain()
  .Gravity("west").StartOffset("0").EndOffset("2").Flags("layer_apply").Chain()
  .Overlay(new Layer().PublicId("video:abbey_road")).Chain()
  .Width(150).Effect("accelerate:100").Gravity("center").StartOffset("2").EndOffset("5").Flags("layer_apply").Crop("scale").Chain()
  .Overlay(new Layer().PublicId("video:abbey_road")).Chain()
  .Width(150).Effect("accelerate:100").Gravity("east").StartOffset("5").Flags("layer_apply").Crop("scale")).BuildVideoTag("dog")

Android:

MediaManager.get().url().transformation(new Transformation()
  .width(150).effect("accelerate:100").overlay(new Layer().publicId("video:abbey_road")).chain()
  .gravity("west").startOffset("0").endOffset("2").flags("layer_apply").chain()
  .overlay(new Layer().publicId("video:abbey_road")).chain()
  .width(150).effect("accelerate:100").gravity("center").startOffset("2").endOffset("5").flags("layer_apply").crop("scale").chain()
  .overlay(new Layer().publicId("video:abbey_road")).chain()
  .width(150).effect("accelerate:100").gravity("east").startOffset("5").flags("layer_apply").crop("scale")).resourceType("video").generate("dog.mp4");

iOS:

cloudinary.createUrl().setResourceType("video").setTransformation(CLDTransformation()
  .setWidth(150).setEffect("accelerate:100").setOverlay("video:abbey_road").chain()
  .setGravity("west").setStartOffset("0").setEndOffset("2").setFlags("layer_apply").chain()
  .setOverlay("video:abbey_road").chain()
  .setWidth(150).setEffect("accelerate:100").setGravity("center").setStartOffset("2").setEndOffset("5").setFlags("layer_apply").setCrop("scale").chain()
  .setOverlay("video:abbey_road").chain()
  .setWidth(150).setEffect("accelerate:100").setGravity("east").setStartOffset("5").setFlags("layer_apply").setCrop("scale")).generate("dog.mp4")

by Maor Gariv Jul 02, 2020

Tags:

Adding a watermark to a video

A common practice among many of our customers - watermark images or videos to give credit for the owners and/or to protect their high-res original resources.

Original Video

Full video watermark

Mid-video watermark

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/abbey_road.mp4

Ruby:

cl_video_tag("abbey_road")

PHP:

cl_video_tag("abbey_road")

Python:

CloudinaryVideo("abbey_road").video()

Node.js:

cloudinary.video("abbey_road")

Java:

cloudinary.url().videoTag("abbey_road");

JS:

cloudinary.videoTag('abbey_road').toHtml();

jQuery:

$.cloudinary.video("abbey_road")

React:

<Video publicId="abbey_road" >

</Video>

Vue.js:

<cld-video publicId="abbey_road" >

</cld-video>

Angular:

<cl-video public-id="abbey_road" >

</cl-video>

.Net:

cloudinary.Api.UrlVideoUp.BuildVideoTag("abbey_road")

Android:

MediaManager.get().url().resourceType("video").generate("abbey_road.mp4");

iOS:

cloudinary.createUrl().setResourceType("video").generate("abbey_road.mp4")

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:

Support Short Videos as Profile Video in Your Application

Video profile are an awesome way to allow your users to inject some personality into their profile in dynamic and creative ways.

by Yakir Perlin Jan 26, 2020

Tags:

Text overlays flowing together irrespective of text size

You can add text dynamically to the image by using overlays with syntax l_ in the URL. Here's an example of a URL with on-the-fly generated text transformation: Dynamic style

Dynamic style

sky

sky

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/l_text:Arial_100:Weather/photo-1430609098125-581618d0482f_xvayby

Ruby:

cl_image_tag("photo-1430609098125-581618d0482f_xvayby", :overlay=>{:font_family=>"Arial", :font_size=>100, :text=>"Weather"})

PHP:

cl_image_tag("photo-1430609098125-581618d0482f_xvayby", array("overlay"=>array("font_family"=>"Arial", "font_size"=>100, "text"=>"Weather")))

Python:

CloudinaryImage("photo-1430609098125-581618d0482f_xvayby").image(overlay={'font_family': "Arial", 'font_size': 100, 'text': "Weather"})

Node.js:

cloudinary.image("photo-1430609098125-581618d0482f_xvayby", {overlay: {font_family: "Arial", font_size: 100, text: "Weather"}})

Java:

cloudinary.url().transformation(new Transformation().overlay(new TextLayer().fontFamily("Arial").fontSize(100).text("Weather"))).imageTag("photo-1430609098125-581618d0482f_xvayby");

JS:

cloudinary.imageTag('photo-1430609098125-581618d0482f_xvayby', {overlay: new cloudinary.TextLayer().fontFamily("Arial").fontSize(100).text("Weather")}).toHtml();

jQuery:

$.cloudinary.image("photo-1430609098125-581618d0482f_xvayby", {overlay: new cloudinary.TextLayer().fontFamily("Arial").fontSize(100).text("Weather")})

React:

<Image publicId="photo-1430609098125-581618d0482f_xvayby" >
  <Transformation overlay={{fontFamily: "Arial", fontSize: 100, text: "Weather"}} />
</Image>

Vue.js:

<cld-image publicId="photo-1430609098125-581618d0482f_xvayby" >
  <cld-transformation overlay={{fontFamily: "Arial", fontSize: 100, text: "Weather"}} />
</cld-image>

Angular:

<cl-image public-id="photo-1430609098125-581618d0482f_xvayby" >
  <cl-transformation overlay="text:Arial_100:Weather">
  </cl-transformation>
</cl-image>

.Net:

cloudinary.Api.UrlImgUp.Transform(new Transformation().Overlay(new TextLayer().FontFamily("Arial").FontSize(100).Text("Weather"))).BuildImageTag("photo-1430609098125-581618d0482f_xvayby")

Android:

MediaManager.get().url().transformation(new Transformation().overlay(new TextLayer().fontFamily("Arial").fontSize(100).text("Weather"))).generate("photo-1430609098125-581618d0482f_xvayby");

iOS:

imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setOverlay("text:Arial_100:Weather")).generate("photo-1430609098125-581618d0482f_xvayby")!, cloudinary: cloudinary)

by Aditi Aug 03, 2018

Tags:

Text overlay positioning

Customize text overlay's position by setting the gravity (g in URLs) and the optional offset of the x and y. While the default text positioning ('gravity') is center, you can place your text in any other area of the image (tip: even outside the image's boundaries).

Default - center

South gravity

Custom position

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/l_text:Arial_45_bold:Hello World,g_north_west,x_20,y_20/face_center.jpg

Ruby:

cl_image_tag("face_center.jpg", :overlay=>{:font_family=>"Arial", :font_size=>45, :font_weight=>"bold", :text=>"Hello%20World"}, :gravity=>"north_west", :x=>20, :y=>20)

PHP:

cl_image_tag("face_center.jpg", array("overlay"=>array("font_family"=>"Arial", "font_size"=>45, "font_weight"=>"bold", "text"=>"Hello%20World"), "gravity"=>"north_west", "x"=>20, "y"=>20))

Python:

CloudinaryImage("face_center.jpg").image(overlay={'font_family': "Arial", 'font_size': 45, 'font_weight': "bold", 'text': "Hello%20World"}, gravity="north_west", x=20, y=20)

Node.js:

cloudinary.image("face_center.jpg", {overlay: {font_family: "Arial", font_size: 45, font_weight: "bold", text: "Hello%20World"}, gravity: "north_west", x: 20, y: 20})

Java:

cloudinary.url().transformation(new Transformation().overlay(new TextLayer().fontFamily("Arial").fontSize(45).fontWeight("bold").text("Hello%20World")).gravity("north_west").x(20).y(20)).imageTag("face_center.jpg");

JS:

cloudinary.imageTag('face_center.jpg', {overlay: new cloudinary.TextLayer().fontFamily("Arial").fontSize(45).fontWeight("bold").text("Hello%20World"), gravity: "north_west", x: 20, y: 20}).toHtml();

jQuery:

$.cloudinary.image("face_center.jpg", {overlay: new cloudinary.TextLayer().fontFamily("Arial").fontSize(45).fontWeight("bold").text("Hello%20World"), gravity: "north_west", x: 20, y: 20})

React:

<Image publicId="face_center.jpg" >
  <Transformation overlay={{fontFamily: "Arial", fontSize: 45, fontWeight: "bold", text: "Hello%20World"}} gravity="north_west" x="20" y="20" />
</Image>

Vue.js:

<cld-image publicId="face_center.jpg" >
  <cld-transformation overlay={{fontFamily: "Arial", fontSize: 45, fontWeight: "bold", text: "Hello%20World"}} gravity="north_west" x="20" y="20" />
</cld-image>

Angular:

<cl-image public-id="face_center.jpg" >
  <cl-transformation overlay="text:Arial_45_bold:Hello%20World" gravity="north_west" x="20" y="20">
  </cl-transformation>
</cl-image>

.Net:

cloudinary.Api.UrlImgUp.Transform(new Transformation().Overlay(new TextLayer().FontFamily("Arial").FontSize(45).FontWeight("bold").Text("Hello%20World")).Gravity("north_west").X(20).Y(20)).BuildImageTag("face_center.jpg")

Android:

MediaManager.get().url().transformation(new Transformation().overlay(new TextLayer().fontFamily("Arial").fontSize(45).fontWeight("bold").text("Hello%20World")).gravity("north_west").x(20).y(20)).generate("face_center.jpg");

iOS:

imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setOverlay("text:Arial_45_bold:Hello%20World").setGravity("north_west").setX(20).setY(20)).generate("face_center.jpg")!, cloudinary: cloudinary)

by Itay Taragano Jun 11, 2014

Tags: