Placing layers on images

Cloudinary allows you to dynamically add layers to specific locations within your images, where the new layers are added over the base image as overlays, and can also be easily transformed to suit your needs. There are multiple options for adding a new layer to a base image, either an image uploaded to your account, a remote image, or a text string.

Image layers can also be added as underlays instead, and there are special layer applications for using layers in combination with other Cloudinary transformations.

Here are examples of some popular use cases that you can accomplish using layers (combined with other transformations). Click each image to see the URL parameters applied in each case:

Brand or watermark your images Brand or watermark
your images
Hide all detected faces Hide all
detected faces
Add personalized text Add personalized
text
Displace images on products Displace images
on products

Note
This page describes Cloudinary transformations that apply layers to a specified base image. This differs from delivering images where the original source file has layers that you might reference in a transformation.

Layer transformation syntax

In its most simple form, adding a layer over the base image takes following URL syntax:

Copy to clipboard
l_<public id of overlay>/fl_layer_apply

The layer parameter is in its own URL component and starts the overlay definition (similar to an open bracket). The layer_apply flag is in a separate component that closes the definition (similar to a closing bracket) and instructs Cloudinary to place it.

You can enhance your layer both by controlling where and how it is placed on the base image using gravity, offset and other placement qualifiers, and by applying transformations to the layered asset, using the following general URL syntax.

Copy to clipboard
l_<public_id of layer>/<optional layer transformations>/fl_layer_apply,<optional placement qualifiers>

Image overlays

The default overlay type is an image. For example, adding an overlay of the image called cloudinary_icon_blue to a base image (l_cloudinary_icon_blue/fl_layer_apply):

Ruby (cloudinary 1.x):
Copy to clipboard
cl_image_tag("sample.jpg", :transformation=>[
  {:overlay=>"cloudinary_icon_blue"},
  {:flags=>"layer_apply"}
  ])
PHP (cloudinary_php 2.x):
Copy to clipboard
(new ImageTag('sample.jpg'))
  ->overlay(Overlay::source(
  Source::image("cloudinary_icon_blue")));
PHP (cloudinary_php 1.x (legacy)):
Copy to clipboard
cl_image_tag("sample.jpg", array("transformation"=>array(
  array("overlay"=>"cloudinary_icon_blue"),
  array("flags"=>"layer_apply")
  )))
Python (cloudinary 1.x):
Copy to clipboard
CloudinaryImage("sample.jpg").image(transformation=[
  {'overlay': "cloudinary_icon_blue"},
  {'flags': "layer_apply"}
  ])
Node.js (cloudinary 1.x):
Copy to clipboard
cloudinary.image("sample.jpg", {transformation: [
  {overlay: "cloudinary_icon_blue"},
  {flags: "layer_apply"}
  ]})
Java (cloudinary 1.x):
Copy to clipboard
cloudinary.url().transformation(new Transformation()
  .overlay(new Layer().publicId("cloudinary_icon_blue")).chain()
  .flags("layer_apply")).imageTag("sample.jpg");
JS (@cloudinary/url-gen 1.x):
Copy to clipboard
new CloudinaryImage("sample.jpg").overlay(
  source(image("cloudinary_icon_blue"))
);
JS (cloudinary-core 2.x (legacy)):
Copy to clipboard
cloudinary.imageTag('sample.jpg', {transformation: [
  {overlay: new cloudinary.Layer().publicId("cloudinary_icon_blue")},
  {flags: "layer_apply"}
  ]}).toHtml();
jQuery (cloudinary-jquery 2.x):
Copy to clipboard
$.cloudinary.image("sample.jpg", {transformation: [
  {overlay: new cloudinary.Layer().publicId("cloudinary_icon_blue")},
  {flags: "layer_apply"}
  ]})
React (@cloudinary/react 1.x):
Copy to clipboard
//React SDK transformations are created using @cloudinary/url-gen.
new CloudinaryImage("sample.jpg").overlay(
  source(image("cloudinary_icon_blue"))
);
React (cloudinary-react 1.x):
Copy to clipboard
<Image publicId="sample.jpg" >
  <Transformation overlay="cloudinary_icon_blue" />
  <Transformation flags="layer_apply" />
</Image>
Vue.js (cloudinary-vue 1.x):
Copy to clipboard
<cld-image public-id="sample.jpg" >
  <cld-transformation :overlay="cloudinary_icon_blue" />
  <cld-transformation flags="layer_apply" />
</cld-image>
Angular (@cloudinary/ng 1.x):
Copy to clipboard
//Angular SDK transformations are created using @cloudinary/url-gen.
new CloudinaryImage("sample.jpg").overlay(
  source(image("cloudinary_icon_blue"))
);
Angular (@cloudinary/angular-5.x 1.x (legacy)):
Copy to clipboard
<cl-image public-id="sample.jpg" >
  <cl-transformation overlay="cloudinary_icon_blue">
  </cl-transformation>
  <cl-transformation flags="layer_apply">
  </cl-transformation>
</cl-image>
.NET (CloudinaryDotNet 1.x):
Copy to clipboard
cloudinary.Api.UrlImgUp.Transform(new Transformation()
  .Overlay(new Layer().PublicId("cloudinary_icon_blue")).Chain()
  .Flags("layer_apply")).BuildImageTag("sample.jpg")
iOS (cloudinary 3.x):
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation()
  .setOverlay("cloudinary_icon_blue").chain()
  .setFlags("layer_apply")).generate("sample.jpg")!, cloudinary: cloudinary)
Android (cloudinary-android 1.x):
Copy to clipboard
MediaManager.get().url().transformation(new Transformation()
  .overlay(new Layer().publicId("cloudinary_icon_blue")).chain()
  .flags("layer_apply")).generate("sample.jpg");
Kotlin (kotlin-url-gen 1.x):
Copy to clipboard
cloudinary.image {
  publicId("sample.jpg")
   overlay(Overlay.source(
  Source.image("cloudinary_icon_blue"))) 
}.generate()
Image with overlay

Important

  • If the public ID of an image includes slashes (e.g., the public ID of an image is animals/dog), replace the slashes with colons when using the image as an overlay (e.g., the public ID of the overlay image becomes animals:dog when used as an overlay).
  • When delivering public images, you can only add images overlays that are also set as public assets. Assets set to authenticated or private using the access_mode parameter can also only use public images as overlays. See the Media access control documentation for more details on delivering private and authenticated assets.

Remote image overlays

Use a remote image (an image not stored in your Cloudinary account) as an overlay by adding the fetch (or url for some SDKs) property of the layer parameter ( l_fetch: in URLs) and the base64 encoded URL of the remote image. The general URL syntax for adding a remote image as an overlay takes the following form:

Copy to clipboard
l_fetch:<URL of overlay>/<optional transformations>/fl_layer_apply,<optional placement qualifiers>

For example, adding an overlay of the remote image https://res.cloudinary.com/demo/image/upload/logos/cloudinary_full_logo_white_small.png to the base image.

Ruby (cloudinary 1.x):
Copy to clipboard
cl_image_tag("sample.jpg", :transformation=>[
  {:overlay=>{:url=>"https://res.cloudinary.com/demo/image/upload/logos/cloudinary_full_logo_white_small.png"}},
  {:flags=>"layer_apply"}
  ])
PHP (cloudinary_php 2.x):
Copy to clipboard
(new ImageTag('sample.jpg'))
  ->overlay(Overlay::source(
  Source::fetch("https://res.cloudinary.com/demo/image/upload/logos/cloudinary_full_logo_white_small.png")));
PHP (cloudinary_php 1.x (legacy)):
Copy to clipboard
cl_image_tag("sample.jpg", array("transformation"=>array(
  array("overlay"=>array("url"=>"https://res.cloudinary.com/demo/image/upload/logos/cloudinary_full_logo_white_small.png")),
  array("flags"=>"layer_apply")
  )))
Python (cloudinary 1.x):
Copy to clipboard
CloudinaryImage("sample.jpg").image(transformation=[
  {'overlay': {'url': "https://res.cloudinary.com/demo/image/upload/logos/cloudinary_full_logo_white_small.png"}},
  {'flags': "layer_apply"}
  ])
Node.js (cloudinary 1.x):
Copy to clipboard
cloudinary.image("sample.jpg", {transformation: [
  {overlay: {url: "https://res.cloudinary.com/demo/image/upload/logos/cloudinary_full_logo_white_small.png"}},
  {flags: "layer_apply"}
  ]})
Java (cloudinary 1.x):
Copy to clipboard
cloudinary.url().transformation(new Transformation()
  .overlay(new FetchLayer().url("https://res.cloudinary.com/demo/image/upload/logos/cloudinary_full_logo_white_small.png")).chain()
  .flags("layer_apply")).imageTag("sample.jpg");
JS (@cloudinary/url-gen 1.x):
Copy to clipboard
new CloudinaryImage("sample.jpg").overlay(
  source(
    fetch(
      "https://res.cloudinary.com/demo/image/upload/logos/cloudinary_full_logo_white_small.png"
    )
  )
);
JS (cloudinary-core 2.x (legacy)):
Copy to clipboard
cloudinary.imageTag('sample.jpg', {transformation: [
  {overlay: new cloudinary.FetchLayer().url("https://res.cloudinary.com/demo/image/upload/logos/cloudinary_full_logo_white_small.png")},
  {flags: "layer_apply"}
  ]}).toHtml();
jQuery (cloudinary-jquery 2.x):
Copy to clipboard
$.cloudinary.image("sample.jpg", {transformation: [
  {overlay: new cloudinary.FetchLayer().url("https://res.cloudinary.com/demo/image/upload/logos/cloudinary_full_logo_white_small.png")},
  {flags: "layer_apply"}
  ]})
React (@cloudinary/react 1.x):
Copy to clipboard
//React SDK transformations are created using @cloudinary/url-gen.
new CloudinaryImage("sample.jpg").overlay(
  source(
    fetch(
      "https://res.cloudinary.com/demo/image/upload/logos/cloudinary_full_logo_white_small.png"
    )
  )
);
React (cloudinary-react 1.x):
Copy to clipboard
<Image publicId="sample.jpg" >
  <Transformation overlay={{url: "https://res.cloudinary.com/demo/image/upload/logos/cloudinary_full_logo_white_small.png"}} />
  <Transformation flags="layer_apply" />
</Image>
Vue.js (cloudinary-vue 1.x):
Copy to clipboard
<cld-image public-id="sample.jpg" >
  <cld-transformation :overlay="{url: 'https://res.cloudinary.com/demo/image/upload/logos/cloudinary_full_logo_white_small.png'}" />
  <cld-transformation flags="layer_apply" />
</cld-image>
Angular (@cloudinary/ng 1.x):
Copy to clipboard
//Angular SDK transformations are created using @cloudinary/url-gen.
new CloudinaryImage("sample.jpg").overlay(
  source(
    fetch(
      "https://res.cloudinary.com/demo/image/upload/logos/cloudinary_full_logo_white_small.png"
    )
  )
);
Angular (@cloudinary/angular-5.x 1.x (legacy)):
Copy to clipboard
<cl-image public-id="sample.jpg" >
  <cl-transformation overlay="fetch:aHR0cHM6Ly9yZXMuY2xvdWRpbmFyeS5jb20vZGVtby9pbWFnZS91cGxvYWQvbG9nb3MvY2xvdWRpbmFyeV9mdWxsX2xvZ29fd2hpdGVfc21hbGwucG5n">
  </cl-transformation>
  <cl-transformation flags="layer_apply">
  </cl-transformation>
</cl-image>
.NET (CloudinaryDotNet 1.x):
Copy to clipboard
cloudinary.Api.UrlImgUp.Transform(new Transformation()
  .Overlay(new FetchLayer("https://res.cloudinary.com/demo/image/upload/logos/cloudinary_full_logo_white_small.png")).Chain()
  .Flags("layer_apply")).BuildImageTag("sample.jpg")
iOS (cloudinary 3.x):
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation()
  .setOverlay("fetch:aHR0cHM6Ly9yZXMuY2xvdWRpbmFyeS5jb20vZGVtby9pbWFnZS91cGxvYWQvbG9nb3MvY2xvdWRpbmFyeV9mdWxsX2xvZ29fd2hpdGVfc21hbGwucG5n").chain()
  .setFlags("layer_apply")).generate("sample.jpg")!, cloudinary: cloudinary)
Android (cloudinary-android 1.x):
Copy to clipboard
MediaManager.get().url().transformation(new Transformation()
  .overlay(new FetchLayer().url("https://res.cloudinary.com/demo/image/upload/logos/cloudinary_full_logo_white_small.png")).chain()
  .flags("layer_apply")).generate("sample.jpg");
Kotlin (kotlin-url-gen 1.x):
Copy to clipboard
// This code example is not currently available.
Image with remote overlay

Note
The Cloudinary SDKs automatically generate a base64 encoded URL for a given HTTP/S URL, but if you generate the delivery URL in your own code, then you'll need to supply the fetch URL in base64 encoding with padding.

Text overlays

Add a text overlay over the base image with the text property of the layer parameter ( l_text: in URLs). The parameter also requires specifying font family and size (separated with an underscore and followed by a colon), and the text string to display. The general URL syntax for adding a text layer takes the following form:

Copy to clipboard
l_text:<text styling options>/<optional transformations>/fl_layer_apply,<optional placement qualifiers>

In addition to the required font and size styling values, you can optionally specify a variety of other CSS-like styling parameters and to further customize your text layers by specifying text color, adding line breaks, emojis and other special characters, and other text layer options.

Cloudinary first generates an image from the text definition and then overlays it like any other image overlay, and thus supports all the same transformations that any image overlay supports.

For example, to overlay the text string "Flowers" in the Arial font with a size of 80 pixels (l_text:Arial_80:Flowers/fl_layer_apply):

Ruby (cloudinary 1.x):
Copy to clipboard
cl_image_tag("sample.jpg", :transformation=>[
  {:overlay=>{:font_family=>"Arial", :font_size=>80, :text=>"Flowers"}},
  {:flags=>"layer_apply"}
  ])
PHP (cloudinary_php 2.x):
Copy to clipboard
(new ImageTag('sample.jpg'))
  ->overlay(Overlay::source(
  Source::text("Flowers",(new TextStyle("Arial",80)))));
PHP (cloudinary_php 1.x (legacy)):
Copy to clipboard
cl_image_tag("sample.jpg", array("transformation"=>array(
  array("overlay"=>array("font_family"=>"Arial", "font_size"=>80, "text"=>"Flowers")),
  array("flags"=>"layer_apply")
  )))
Python (cloudinary 1.x):
Copy to clipboard
CloudinaryImage("sample.jpg").image(transformation=[
  {'overlay': {'font_family': "Arial", 'font_size': 80, 'text': "Flowers"}},
  {'flags': "layer_apply"}
  ])
Node.js (cloudinary 1.x):
Copy to clipboard
cloudinary.image("sample.jpg", {transformation: [
  {overlay: {font_family: "Arial", font_size: 80, text: "Flowers"}},
  {flags: "layer_apply"}
  ]})
Java (cloudinary 1.x):
Copy to clipboard
cloudinary.url().transformation(new Transformation()
  .overlay(new TextLayer().fontFamily("Arial").fontSize(80).text("Flowers")).chain()
  .flags("layer_apply")).imageTag("sample.jpg");
JS (@cloudinary/url-gen 1.x):
Copy to clipboard
new CloudinaryImage("sample.jpg").overlay(
  source(text("Flowers", new TextStyle("Arial", 80)))
);
JS (cloudinary-core 2.x (legacy)):
Copy to clipboard
cloudinary.imageTag('sample.jpg', {transformation: [
  {overlay: new cloudinary.TextLayer().fontFamily("Arial").fontSize(80).text("Flowers")},
  {flags: "layer_apply"}
  ]}).toHtml();
jQuery (cloudinary-jquery 2.x):
Copy to clipboard
$.cloudinary.image("sample.jpg", {transformation: [
  {overlay: new cloudinary.TextLayer().fontFamily("Arial").fontSize(80).text("Flowers")},
  {flags: "layer_apply"}
  ]})
React (@cloudinary/react 1.x):
Copy to clipboard
//React SDK transformations are created using @cloudinary/url-gen.
new CloudinaryImage("sample.jpg").overlay(
  source(text("Flowers", new TextStyle("Arial", 80)))
);
React (cloudinary-react 1.x):
Copy to clipboard
<Image publicId="sample.jpg" >
  <Transformation overlay={{fontFamily: "Arial", fontSize: 80, text: "Flowers"}} />
  <Transformation flags="layer_apply" />
</Image>
Vue.js (cloudinary-vue 1.x):
Copy to clipboard
<cld-image public-id="sample.jpg" >
  <cld-transformation :overlay="{fontFamily: 'Arial', fontSize: 80, text: 'Flowers'}" />
  <cld-transformation flags="layer_apply" />
</cld-image>
Angular (@cloudinary/ng 1.x):
Copy to clipboard
//Angular SDK transformations are created using @cloudinary/url-gen.
new CloudinaryImage("sample.jpg").overlay(
  source(text("Flowers", new TextStyle("Arial", 80)))
);
Angular (@cloudinary/angular-5.x 1.x (legacy)):
Copy to clipboard
<cl-image public-id="sample.jpg" >
  <cl-transformation overlay="text:Arial_80:Flowers">
  </cl-transformation>
  <cl-transformation flags="layer_apply">
  </cl-transformation>
</cl-image>
.NET (CloudinaryDotNet 1.x):
Copy to clipboard
cloudinary.Api.UrlImgUp.Transform(new Transformation()
  .Overlay(new TextLayer().FontFamily("Arial").FontSize(80).Text("Flowers")).Chain()
  .Flags("layer_apply")).BuildImageTag("sample.jpg")
iOS (cloudinary 3.x):
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation()
  .setOverlay("text:Arial_80:Flowers").chain()
  .setFlags("layer_apply")).generate("sample.jpg")!, cloudinary: cloudinary)
Android (cloudinary-android 1.x):
Copy to clipboard
MediaManager.get().url().transformation(new Transformation()
  .overlay(new TextLayer().fontFamily("Arial").fontSize(80).text("Flowers")).chain()
  .flags("layer_apply")).generate("sample.jpg");
Kotlin (kotlin-url-gen 1.x):
Copy to clipboard
// This code example is not currently available.
Adding dynamic text to image

Layer placement

The fl_layer_apply component not only acts as the closing bracket for the layer, but is also used to include any options that will control how the layer is placed on the base image, and any details regarding the relationship between the overlay element and the base image.

Note
Some Cloudinary SDKs use layer apply flags as described, and any placement qualifiers must also be the last component of the layer transformation. However some of the Cloudinary SDKs do not use a specific layer apply flag. Instead, when the SDK generates the transformation URL from your code, it automatically adds the fl_layer_apply flag together with placement qualifiers based on the transformation hierarchy in your SDK code.

Positioning layers with gravity

To determine the position of the new layer, you can add the gravity parameter to define the location to place the layer within the base image ('center' by default). The gravity parameter is added in the same component as the layer_apply flag.

For example, to add an overlay of the image called cloudinary_icon_white to the base image with gravity set to west (l_cloudinary_icon_white/fl_layer_apply,g_west):

Ruby (cloudinary 1.x):
Copy to clipboard
cl_image_tag("sample.jpg", :transformation=>[
  {:overlay=>"cloudinary_icon_white"},
  {:flags=>"layer_apply", :gravity=>"west"}
  ])
PHP (cloudinary_php 2.x):
Copy to clipboard
(new ImageTag('sample.jpg'))
  ->overlay(Overlay::source(
  Source::image("cloudinary_icon_white"))
  ->position((new Position())
  ->gravity(
  Gravity::compass(
  Compass::west()))
  )
  );
PHP (cloudinary_php 1.x (legacy)):
Copy to clipboard
cl_image_tag("sample.jpg", array("transformation"=>array(
  array("overlay"=>"cloudinary_icon_white"),
  array("flags"=>"layer_apply", "gravity"=>"west")
  )))
Python (cloudinary 1.x):
Copy to clipboard
CloudinaryImage("sample.jpg").image(transformation=[
  {'overlay': "cloudinary_icon_white"},
  {'flags': "layer_apply", 'gravity': "west"}
  ])
Node.js (cloudinary 1.x):
Copy to clipboard
cloudinary.image("sample.jpg", {transformation: [
  {overlay: "cloudinary_icon_white"},
  {flags: "layer_apply", gravity: "west"}
  ]})
Java (cloudinary 1.x):
Copy to clipboard
cloudinary.url().transformation(new Transformation()
  .overlay(new Layer().publicId("cloudinary_icon_white")).chain()
  .flags("layer_apply").gravity("west")).imageTag("sample.jpg");
JS (@cloudinary/url-gen 1.x):
Copy to clipboard
new CloudinaryImage("sample.jpg").overlay(
  source(image("cloudinary_icon_white")).position(
    new Position().gravity(compass("west"))
  )
);
JS (cloudinary-core 2.x (legacy)):
Copy to clipboard
cloudinary.imageTag('sample.jpg', {transformation: [
  {overlay: new cloudinary.Layer().publicId("cloudinary_icon_white")},
  {flags: "layer_apply", gravity: "west"}
  ]}).toHtml();
jQuery (cloudinary-jquery 2.x):
Copy to clipboard
$.cloudinary.image("sample.jpg", {transformation: [
  {overlay: new cloudinary.Layer().publicId("cloudinary_icon_white")},
  {flags: "layer_apply", gravity: "west"}
  ]})
React (@cloudinary/react 1.x):
Copy to clipboard
//React SDK transformations are created using @cloudinary/url-gen.
new CloudinaryImage("sample.jpg").overlay(
  source(image("cloudinary_icon_white")).position(
    new Position().gravity(compass("west"))
  )
);
React (cloudinary-react 1.x):
Copy to clipboard
<Image publicId="sample.jpg" >
  <Transformation overlay="cloudinary_icon_white" />
  <Transformation flags="layer_apply" gravity="west" />
</Image>
Vue.js (cloudinary-vue 1.x):
Copy to clipboard
<cld-image public-id="sample.jpg" >
  <cld-transformation :overlay="cloudinary_icon_white" />
  <cld-transformation flags="layer_apply" gravity="west" />
</cld-image>
Angular (@cloudinary/ng 1.x):
Copy to clipboard
//Angular SDK transformations are created using @cloudinary/url-gen.
new CloudinaryImage("sample.jpg").overlay(
  source(image("cloudinary_icon_white")).position(
    new Position().gravity(compass("west"))
  )
);
Angular (@cloudinary/angular-5.x 1.x (legacy)):
Copy to clipboard
<cl-image public-id="sample.jpg" >
  <cl-transformation overlay="cloudinary_icon_white">
  </cl-transformation>
  <cl-transformation flags="layer_apply" gravity="west">
  </cl-transformation>
</cl-image>
.NET (CloudinaryDotNet 1.x):
Copy to clipboard
cloudinary.Api.UrlImgUp.Transform(new Transformation()
  .Overlay(new Layer().PublicId("cloudinary_icon_white")).Chain()
  .Flags("layer_apply").Gravity("west")).BuildImageTag("sample.jpg")
iOS (cloudinary 3.x):
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation()
  .setOverlay("cloudinary_icon_white").chain()
  .setFlags("layer_apply").setGravity("west")).generate("sample.jpg")!, cloudinary: cloudinary)
Android (cloudinary-android 1.x):
Copy to clipboard
MediaManager.get().url().transformation(new Transformation()
  .overlay(new Layer().publicId("cloudinary_icon_white")).chain()
  .flags("layer_apply").gravity("west")).generate("sample.jpg");
Kotlin (kotlin-url-gen 1.x):
Copy to clipboard
cloudinary.image {
  publicId("sample.jpg")
   overlay(Overlay.source(
  Source.image("cloudinary_icon_white")) {
   position(Position() {
   gravity(
  Gravity.compass(
  Compass.west()))
   })
   }) 
}.generate()
Image with precisely placed overlay

To fine tune the exact location of the layer, you can offset the overlay from the focus of gravity by also adding the x and y coordinate offset parameters. These parameters accept either integer values representing the number of pixels to adjust the overlay position in the horizontal or vertical directions, or decimal values representing a percentage-based offset relative to the containing image (e.g., 0.2 for an offset of 20%).

For example, to place a text overlay at a vertical distance of 5% from the bottom of the image (l_text:Times_100:Welcome/fl_layer_apply,g_south,y_0.05):

Ruby (cloudinary 1.x):
Copy to clipboard
cl_image_tag("sample.jpg", :transformation=>[
  {:overlay=>{:font_family=>"Times", :font_size=>100, :text=>"Welcome"}},
  {:flags=>"layer_apply", :gravity=>"south", :y=>0.05}
  ])
PHP (cloudinary_php 2.x):
Copy to clipboard
(new ImageTag('sample.jpg'))
  ->overlay(Overlay::source(
  Source::text("Welcome",(new TextStyle("Times",100))))
  ->position((new Position())
  ->gravity(
  Gravity::compass(
  Compass::south()))
->offsetY(0.05))
  );
PHP (cloudinary_php 1.x (legacy)):
Copy to clipboard
cl_image_tag("sample.jpg", array("transformation"=>array(
  array("overlay"=>array("font_family"=>"Times", "font_size"=>100, "text"=>"Welcome")),
  array("flags"=>"layer_apply", "gravity"=>"south", "y"=>"0.05")
  )))
Python (cloudinary 1.x):
Copy to clipboard
CloudinaryImage("sample.jpg").image(transformation=[
  {'overlay': {'font_family': "Times", 'font_size': 100, 'text': "Welcome"}},
  {'flags': "layer_apply", 'gravity': "south", 'y': "0.05"}
  ])
Node.js (cloudinary 1.x):
Copy to clipboard
cloudinary.image("sample.jpg", {transformation: [
  {overlay: {font_family: "Times", font_size: 100, text: "Welcome"}},
  {flags: "layer_apply", gravity: "south", y: "0.05"}
  ]})
Java (cloudinary 1.x):
Copy to clipboard
cloudinary.url().transformation(new Transformation()
  .overlay(new TextLayer().fontFamily("Times").fontSize(100).text("Welcome")).chain()
  .flags("layer_apply").gravity("south").y(0.05)).imageTag("sample.jpg");
JS (@cloudinary/url-gen 1.x):
Copy to clipboard
new CloudinaryImage("sample.jpg").overlay(
  source(text("Welcome", new TextStyle("Times", 100))).position(
    new Position()
      .gravity(compass("south"))
      .offsetY(0.05)
  )
);
JS (cloudinary-core 2.x (legacy)):
Copy to clipboard
cloudinary.imageTag('sample.jpg', {transformation: [
  {overlay: new cloudinary.TextLayer().fontFamily("Times").fontSize(100).text("Welcome")},
  {flags: "layer_apply", gravity: "south", y: "0.05"}
  ]}).toHtml();
jQuery (cloudinary-jquery 2.x):
Copy to clipboard
$.cloudinary.image("sample.jpg", {transformation: [
  {overlay: new cloudinary.TextLayer().fontFamily("Times").fontSize(100).text("Welcome")},
  {flags: "layer_apply", gravity: "south", y: "0.05"}
  ]})
React (@cloudinary/react 1.x):
Copy to clipboard
//React SDK transformations are created using @cloudinary/url-gen.
new CloudinaryImage("sample.jpg").overlay(
  source(text("Welcome", new TextStyle("Times", 100))).position(
    new Position()
      .gravity(compass("south"))
      .offsetY(0.05)
  )
);
React (cloudinary-react 1.x):
Copy to clipboard
<Image publicId="sample.jpg" >
  <Transformation overlay={{fontFamily: "Times", fontSize: 100, text: "Welcome"}} />
  <Transformation flags="layer_apply" gravity="south" y="0.05" />
</Image>
Vue.js (cloudinary-vue 1.x):
Copy to clipboard
<cld-image public-id="sample.jpg" >
  <cld-transformation :overlay="{fontFamily: 'Times', fontSize: 100, text: 'Welcome'}" />
  <cld-transformation flags="layer_apply" gravity="south" y="0.05" />
</cld-image>
Angular (@cloudinary/ng 1.x):
Copy to clipboard
//Angular SDK transformations are created using @cloudinary/url-gen.
new CloudinaryImage("sample.jpg").overlay(
  source(text("Welcome", new TextStyle("Times", 100))).position(
    new Position()
      .gravity(compass("south"))
      .offsetY(0.05)
  )
);
Angular (@cloudinary/angular-5.x 1.x (legacy)):
Copy to clipboard
<cl-image public-id="sample.jpg" >
  <cl-transformation overlay="text:Times_100:Welcome">
  </cl-transformation>
  <cl-transformation flags="layer_apply" gravity="south" y="0.05">
  </cl-transformation>
</cl-image>
.NET (CloudinaryDotNet 1.x):
Copy to clipboard
cloudinary.Api.UrlImgUp.Transform(new Transformation()
  .Overlay(new TextLayer().FontFamily("Times").FontSize(100).Text("Welcome")).Chain()
  .Flags("layer_apply").Gravity("south").Y(0.05)).BuildImageTag("sample.jpg")
iOS (cloudinary 3.x):
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation()
  .setOverlay("text:Times_100:Welcome").chain()
  .setFlags("layer_apply").setGravity("south").setY(0.05)).generate("sample.jpg")!, cloudinary: cloudinary)
Android (cloudinary-android 1.x):
Copy to clipboard
MediaManager.get().url().transformation(new Transformation()
  .overlay(new TextLayer().fontFamily("Times").fontSize(100).text("Welcome")).chain()
  .flags("layer_apply").gravity("south").y(0.05)).generate("sample.jpg");
Kotlin (kotlin-url-gen 1.x):
Copy to clipboard
// This code example is not currently available.
Text added to image using % offset

Tip
See the Positioning with Gravity interactive demo to experiment with gravity and coordinate parameters.

Overlays on special positions

The gravity parameter can also be set to a custom region within an image, which becomes the focus when placing the overlay. These 'special positions' are locations within the image that are either automatically detected by Cloudinary (e.g., a face), custom coordinates that were previously specified (e.g., as part of the image upload method), or detected by one of the Cloudinary add-ons (e.g., eyes or text within the image).

For a full list of all the special positions available to use for placing overlays with the gravity parameter, see the <special position> section in the transformation reference guide.

For example:

  1. Add an overlay of the golden_star image over all faces detected in the couple image:

    Ruby (cloudinary 1.x):
    Copy to clipboard
    cl_image_tag("couple.jpg", :transformation=>[
      {:overlay=>"golden_star"},
      {:width=>50, :crop=>"scale"},
      {:flags=>"layer_apply", :gravity=>"faces"}
      ])
    PHP (cloudinary_php 2.x):
    Copy to clipboard
    (new ImageTag('couple.jpg'))
      ->overlay(Overlay::source(
      Source::image("golden_star")
      ->transformation((new Transformation())
      ->resize(Resize::scale()->width(50)))
      )
      ->position((new Position())
      ->gravity(
      Gravity::focusOn(
      FocusOn::faces()))
      )
      );
    PHP (cloudinary_php 1.x (legacy)):
    Copy to clipboard
    cl_image_tag("couple.jpg", array("transformation"=>array(
      array("overlay"=>"golden_star"),
      array("width"=>50, "crop"=>"scale"),
      array("flags"=>"layer_apply", "gravity"=>"faces")
      )))
    Python (cloudinary 1.x):
    Copy to clipboard
    CloudinaryImage("couple.jpg").image(transformation=[
      {'overlay': "golden_star"},
      {'width': 50, 'crop': "scale"},
      {'flags': "layer_apply", 'gravity': "faces"}
      ])
    Node.js (cloudinary 1.x):
    Copy to clipboard
    cloudinary.image("couple.jpg", {transformation: [
      {overlay: "golden_star"},
      {width: 50, crop: "scale"},
      {flags: "layer_apply", gravity: "faces"}
      ]})
    Java (cloudinary 1.x):
    Copy to clipboard
    cloudinary.url().transformation(new Transformation()
      .overlay(new Layer().publicId("golden_star")).chain()
      .width(50).crop("scale").chain()
      .flags("layer_apply").gravity("faces")).imageTag("couple.jpg");
    JS (@cloudinary/url-gen 1.x):
    Copy to clipboard
    new CloudinaryImage("couple.jpg").overlay(
      source(
        image("golden_star").transformation(
          new Transformation().resize(scale().width(50))
        )
      ).position(new Position().gravity(focusOn(faces())))
    );
    JS (cloudinary-core 2.x (legacy)):
    Copy to clipboard
    cloudinary.imageTag('couple.jpg', {transformation: [
      {overlay: new cloudinary.Layer().publicId("golden_star")},
      {width: 50, crop: "scale"},
      {flags: "layer_apply", gravity: "faces"}
      ]}).toHtml();
    jQuery (cloudinary-jquery 2.x):
    Copy to clipboard
    $.cloudinary.image("couple.jpg", {transformation: [
      {overlay: new cloudinary.Layer().publicId("golden_star")},
      {width: 50, crop: "scale"},
      {flags: "layer_apply", gravity: "faces"}
      ]})
    React (@cloudinary/react 1.x):
    Copy to clipboard
    //React SDK transformations are created using @cloudinary/url-gen.
    new CloudinaryImage("couple.jpg").overlay(
      source(
        image("golden_star").transformation(
          new Transformation().resize(scale().width(50))
        )
      ).position(new Position().gravity(focusOn(faces())))
    );
    React (cloudinary-react 1.x):
    Copy to clipboard
    <Image publicId="couple.jpg" >
      <Transformation overlay="golden_star" />
      <Transformation width="50" crop="scale" />
      <Transformation flags="layer_apply" gravity="faces" />
    </Image>
    Vue.js (cloudinary-vue 1.x):
    Copy to clipboard
    <cld-image public-id="couple.jpg" >
      <cld-transformation :overlay="golden_star" />
      <cld-transformation width="50" crop="scale" />
      <cld-transformation flags="layer_apply" gravity="faces" />
    </cld-image>
    Angular (@cloudinary/ng 1.x):
    Copy to clipboard
    //Angular SDK transformations are created using @cloudinary/url-gen.
    new CloudinaryImage("couple.jpg").overlay(
      source(
        image("golden_star").transformation(
          new Transformation().resize(scale().width(50))
        )
      ).position(new Position().gravity(focusOn(faces())))
    );
    Angular (@cloudinary/angular-5.x 1.x (legacy)):
    Copy to clipboard
    <cl-image public-id="couple.jpg" >
      <cl-transformation overlay="golden_star">
      </cl-transformation>
      <cl-transformation width="50" crop="scale">
      </cl-transformation>
      <cl-transformation flags="layer_apply" gravity="faces">
      </cl-transformation>
    </cl-image>
    .NET (CloudinaryDotNet 1.x):
    Copy to clipboard
    cloudinary.Api.UrlImgUp.Transform(new Transformation()
      .Overlay(new Layer().PublicId("golden_star")).Chain()
      .Width(50).Crop("scale").Chain()
      .Flags("layer_apply").Gravity("faces")).BuildImageTag("couple.jpg")
    iOS (cloudinary 3.x):
    Copy to clipboard
    imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation()
      .setOverlay("golden_star").chain()
      .setWidth(50).setCrop("scale").chain()
      .setFlags("layer_apply").setGravity("faces")).generate("couple.jpg")!, cloudinary: cloudinary)
    Android (cloudinary-android 1.x):
    Copy to clipboard
    MediaManager.get().url().transformation(new Transformation()
      .overlay(new Layer().publicId("golden_star")).chain()
      .width(50).crop("scale").chain()
      .flags("layer_apply").gravity("faces")).generate("couple.jpg");
    Kotlin (kotlin-url-gen 1.x):
    Copy to clipboard
    cloudinary.image {
      publicId("couple.jpg")
       overlay(Overlay.source(
      Source.image("golden_star") {
       transformation(Transformation {
       resize(Resize.scale() { width(50) }) })
       }) {
       position(Position() {
       gravity(
      Gravity.focusOn(
      FocusOn.faces()))
       })
       }) 
    }.generate()
    Image with overlay placed over faces

  2. Use the OCR Text Detection and Extraction add-on to add an overlay with your site's contact information that covers any detected text in an uploaded image:

    Ruby (cloudinary 1.x):
    Copy to clipboard
    cl_image_tag("sale_sign.jpg", :transformation=>[
      {:overlay=>"call_text"},
      {:flags=>"region_relative", :width=>1.1, :crop=>"scale"},
      {:flags=>"layer_apply", :gravity=>"ocr_text"}
      ])
    PHP (cloudinary_php 2.x):
    Copy to clipboard
    (new ImageTag('sale_sign.jpg'))
      ->overlay(Overlay::source(
      Source::image("call_text")
      ->transformation((new Transformation())
      ->resize(Resize::scale()->width(1.1)
      ->regionRelative()
      ))
      )
      ->position((new Position())
      ->gravity(
      Gravity::focusOn(
      FocusOn::ocr()))
      )
      );
    PHP (cloudinary_php 1.x (legacy)):
    Copy to clipboard
    cl_image_tag("sale_sign.jpg", array("transformation"=>array(
      array("overlay"=>"call_text"),
      array("flags"=>"region_relative", "width"=>"1.1", "crop"=>"scale"),
      array("flags"=>"layer_apply", "gravity"=>"ocr_text")
      )))
    Python (cloudinary 1.x):
    Copy to clipboard
    CloudinaryImage("sale_sign.jpg").image(transformation=[
      {'overlay': "call_text"},
      {'flags': "region_relative", 'width': "1.1", 'crop': "scale"},
      {'flags': "layer_apply", 'gravity': "ocr_text"}
      ])
    Node.js (cloudinary 1.x):
    Copy to clipboard
    cloudinary.image("sale_sign.jpg", {transformation: [
      {overlay: "call_text"},
      {flags: "region_relative", width: "1.1", crop: "scale"},
      {flags: "layer_apply", gravity: "ocr_text"}
      ]})
    Java (cloudinary 1.x):
    Copy to clipboard
    cloudinary.url().transformation(new Transformation()
      .overlay(new Layer().publicId("call_text")).chain()
      .flags("region_relative").width(1.1).crop("scale").chain()
      .flags("layer_apply").gravity("ocr_text")).imageTag("sale_sign.jpg");
    JS (@cloudinary/url-gen 1.x):
    Copy to clipboard
    new CloudinaryImage("sale_sign.jpg").overlay(
      source(
        image("call_text").transformation(
          new Transformation().resize(scale().width(1.1).regionRelative())
        )
      ).position(new Position().gravity(focusOn(ocr())))
    );
    JS (cloudinary-core 2.x (legacy)):
    Copy to clipboard
    cloudinary.imageTag('sale_sign.jpg', {transformation: [
      {overlay: new cloudinary.Layer().publicId("call_text")},
      {flags: "region_relative", width: "1.1", crop: "scale"},
      {flags: "layer_apply", gravity: "ocr_text"}
      ]}).toHtml();
    jQuery (cloudinary-jquery 2.x):
    Copy to clipboard
    $.cloudinary.image("sale_sign.jpg", {transformation: [
      {overlay: new cloudinary.Layer().publicId("call_text")},
      {flags: "region_relative", width: "1.1", crop: "scale"},
      {flags: "layer_apply", gravity: "ocr_text"}
      ]})
    React (@cloudinary/react 1.x):
    Copy to clipboard
    //React SDK transformations are created using @cloudinary/url-gen.
    new CloudinaryImage("sale_sign.jpg").overlay(
      source(
        image("call_text").transformation(
          new Transformation().resize(scale().width(1.1).regionRelative())
        )
      ).position(new Position().gravity(focusOn(ocr())))
    );
    React (cloudinary-react 1.x):
    Copy to clipboard
    <Image publicId="sale_sign.jpg" >
      <Transformation overlay="call_text" />
      <Transformation flags="region_relative" width="1.1" crop="scale" />
      <Transformation flags="layer_apply" gravity="ocr_text" />
    </Image>
    Vue.js (cloudinary-vue 1.x):
    Copy to clipboard
    <cld-image public-id="sale_sign.jpg" >
      <cld-transformation :overlay="call_text" />
      <cld-transformation flags="region_relative" width="1.1" crop="scale" />
      <cld-transformation flags="layer_apply" gravity="ocr_text" />
    </cld-image>
    Angular (@cloudinary/ng 1.x):
    Copy to clipboard
    //Angular SDK transformations are created using @cloudinary/url-gen.
    new CloudinaryImage("sale_sign.jpg").overlay(
      source(
        image("call_text").transformation(
          new Transformation().resize(scale().width(1.1).regionRelative())
        )
      ).position(new Position().gravity(focusOn(ocr())))
    );
    Angular (@cloudinary/angular-5.x 1.x (legacy)):
    Copy to clipboard
    <cl-image public-id="sale_sign.jpg" >
      <cl-transformation overlay="call_text">
      </cl-transformation>
      <cl-transformation flags="region_relative" width="1.1" crop="scale">
      </cl-transformation>
      <cl-transformation flags="layer_apply" gravity="ocr_text">
      </cl-transformation>
    </cl-image>
    .NET (CloudinaryDotNet 1.x):
    Copy to clipboard
    cloudinary.Api.UrlImgUp.Transform(new Transformation()
      .Overlay(new Layer().PublicId("call_text")).Chain()
      .Flags("region_relative").Width(1.1).Crop("scale").Chain()
      .Flags("layer_apply").Gravity("ocr_text")).BuildImageTag("sale_sign.jpg")
    iOS (cloudinary 3.x):
    Copy to clipboard
    imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation()
      .setOverlay("call_text").chain()
      .setFlags("region_relative").setWidth(1.1).setCrop("scale").chain()
      .setFlags("layer_apply").setGravity("ocr_text")).generate("sale_sign.jpg")!, cloudinary: cloudinary)
    Android (cloudinary-android 1.x):
    Copy to clipboard
    MediaManager.get().url().transformation(new Transformation()
      .overlay(new Layer().publicId("call_text")).chain()
      .flags("region_relative").width(1.1).crop("scale").chain()
      .flags("layer_apply").gravity("ocr_text")).generate("sale_sign.jpg");
    Kotlin (kotlin-url-gen 1.x):
    Copy to clipboard
    cloudinary.image {
      publicId("sale_sign.jpg")
       overlay(Overlay.source(
      Source.image("call_text") {
       transformation(Transformation {
       resize(Resize.scale() { width(1.1F)
       regionRelative()
       }) })
       }) {
       position(Position() {
       gravity(
      Gravity.focusOn(
      FocusOn.ocr()))
       })
       }) 
    }.generate()
    Image with overlay placed over faces

You may also want to position an overlay ensuring that it avoids a special position. See Position overlays avoiding detected faces for an example of how to achieve this.

Notes

  • When gravity is set to one of the special position values, and no special position is detected in the image, then no overlay is placed at all.
  • Instead of specifying an absolute width for overlays, you can use the fl_region_relative flag to place each overlay relative to the size of each detected region.

Tip
Instead of adding your layer image to a single, specific location, you can tile your layer image over the entire base image. This is often useful when using image layers for watermarking.

Layer overflow behavior

By default, if a layer (image or text) has a larger width or height than the base image, the delivered image canvas is resized to display the entire layer. If you want to ensure that the delivered size will never be larger than the base image, you can use the fl_no_overflow flag in the same component as the layer_apply flag.

For example, the no_overflow flag prevents the logo overlay from extending the canvas of the base image (c_scale,w_400/l_cloudinary_icon_blue/fl_layer_apply,fl_no_overflow):

Ruby (cloudinary 1.x):
Copy to clipboard
cl_image_tag("flower.jpg", :transformation=>[
  {:width=>400, :crop=>"scale"},
  {:overlay=>"cloudinary_icon_blue"},
  {:flags=>["layer_apply", "no_overflow"]}
  ])
PHP (cloudinary_php 2.x):
Copy to clipboard
(new ImageTag('flower.jpg'))
  ->resize(Resize::scale()->width(400))
  ->overlay(Overlay::source(
  Source::image("cloudinary_icon_blue"))
  ->position((new Position())->allowOverflow(false))
  );
PHP (cloudinary_php 1.x (legacy)):
Copy to clipboard
cl_image_tag("flower.jpg", array("transformation"=>array(
  array("width"=>400, "crop"=>"scale"),
  array("overlay"=>"cloudinary_icon_blue"),
  array("flags"=>array("layer_apply", "no_overflow"))
  )))
Python (cloudinary 1.x):
Copy to clipboard
CloudinaryImage("flower.jpg").image(transformation=[
  {'width': 400, 'crop': "scale"},
  {'overlay': "cloudinary_icon_blue"},
  {'flags': ["layer_apply", "no_overflow"]}
  ])
Node.js (cloudinary 1.x):
Copy to clipboard
cloudinary.image("flower.jpg", {transformation: [
  {width: 400, crop: "scale"},
  {overlay: "cloudinary_icon_blue"},
  {flags: ["layer_apply", "no_overflow"]}
  ]})
Java (cloudinary 1.x):
Copy to clipboard
cloudinary.url().transformation(new Transformation()
  .width(400).crop("scale").chain()
  .overlay(new Layer().publicId("cloudinary_icon_blue")).chain()
  .flags("layer_apply", "no_overflow")).imageTag("flower.jpg");
JS (@cloudinary/url-gen 1.x):
Copy to clipboard
new CloudinaryImage("flower.jpg")
  .resize(scale().width(400))
  .overlay(
    source(image("cloudinary_icon_blue")).position(
      new Position().allowOverflow(false)
    )
  );
JS (cloudinary-core 2.x (legacy)):
Copy to clipboard
cloudinary.imageTag('flower.jpg', {transformation: [
  {width: 400, crop: "scale"},
  {overlay: new cloudinary.Layer().publicId("cloudinary_icon_blue")},
  {flags: ["layer_apply", "no_overflow"]}
  ]}).toHtml();
jQuery (cloudinary-jquery 2.x):
Copy to clipboard
$.cloudinary.image("flower.jpg", {transformation: [
  {width: 400, crop: "scale"},
  {overlay: new cloudinary.Layer().publicId("cloudinary_icon_blue")},
  {flags: ["layer_apply", "no_overflow"]}
  ]})
React (@cloudinary/react 1.x):
Copy to clipboard
//React SDK transformations are created using @cloudinary/url-gen.
new CloudinaryImage("flower.jpg")
  .resize(scale().width(400))
  .overlay(
    source(image("cloudinary_icon_blue")).position(
      new Position().allowOverflow(false)
    )
  );
React (cloudinary-react 1.x):
Copy to clipboard
<Image publicId="flower.jpg" >
  <Transformation width="400" crop="scale" />
  <Transformation overlay="cloudinary_icon_blue" />
  <Transformation flags={["layer_apply", "no_overflow"]} />
</Image>
Vue.js (cloudinary-vue 1.x):
Copy to clipboard
<cld-image public-id="flower.jpg" >
  <cld-transformation width="400" crop="scale" />
  <cld-transformation :overlay="cloudinary_icon_blue" />
  <cld-transformation flags={["layer_apply", "no_overflow"]} />
</cld-image>
Angular (@cloudinary/ng 1.x):
Copy to clipboard
//Angular SDK transformations are created using @cloudinary/url-gen.
new CloudinaryImage("flower.jpg")
  .resize(scale().width(400))
  .overlay(
    source(image("cloudinary_icon_blue")).position(
      new Position().allowOverflow(false)
    )
  );
Angular (@cloudinary/angular-5.x 1.x (legacy)):
Copy to clipboard
<cl-image public-id="flower.jpg" >
  <cl-transformation width="400" crop="scale">
  </cl-transformation>
  <cl-transformation overlay="cloudinary_icon_blue">
  </cl-transformation>
  <cl-transformation flags={{["layer_apply", "no_overflow"]}}>
  </cl-transformation>
</cl-image>
.NET (CloudinaryDotNet 1.x):
Copy to clipboard
cloudinary.Api.UrlImgUp.Transform(new Transformation()
  .Width(400).Crop("scale").Chain()
  .Overlay(new Layer().PublicId("cloudinary_icon_blue")).Chain()
  .Flags("layer_apply", "no_overflow")).BuildImageTag("flower.jpg")
iOS (cloudinary 3.x):
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation()
  .setWidth(400).setCrop("scale").chain()
  .setOverlay("cloudinary_icon_blue").chain()
  .setFlags("layer_apply", "no_overflow")).generate("flower.jpg")!, cloudinary: cloudinary)
Android (cloudinary-android 1.x):
Copy to clipboard
MediaManager.get().url().transformation(new Transformation()
  .width(400).crop("scale").chain()
  .overlay(new Layer().publicId("cloudinary_icon_blue")).chain()
  .flags("layer_apply", "no_overflow")).generate("flower.jpg");
Kotlin (kotlin-url-gen 1.x):
Copy to clipboard
cloudinary.image {
  publicId("flower.jpg")
   resize(Resize.scale() { width(400) })
   overlay(Overlay.source(
  Source.image("cloudinary_icon_blue")) {
   position(Position() { allowOverflow(false) })
   }) 
}.generate()
Prevent an overlay from extending the canvas of the base image

Layer transformations

You can apply resizing and other transformation options on your overlays just like any other asset delivered from Cloudinary. You can apply multiple (chained) transformations to overlays by adding them in separate components before the layer_apply component. All chained transformations, until a transformation component that includes the layer_apply flag, are applied on the last added overlay or underlay instead of applying them on the base asset (the layer_apply flag closes the layer, similar to a closing bracket).

For example:

  1. Adding an overlay of the image called cloudinary_icon_blue, scaled down to 50% of its original width and made into a watermark by reducing the opacity to 70% and increasing the brightness to 50% using the brightness effect. The transformed image is then placed as a layer in the top-right corner of the base image (l_cloudinary_icon_blue/c_scale,w_0.5/o_70/e_brightness:50/fl_layer_apply,g_north_east):

    Ruby (cloudinary 1.x):
    Copy to clipboard
    cl_image_tag("sample.jpg", :transformation=>[
      {:overlay=>"cloudinary_icon_blue"},
      {:width=>0.5, :crop=>"scale"},
      {:opacity=>70},
      {:effect=>"brightness:50"},
      {:flags=>"layer_apply", :gravity=>"north_east"}
      ])
    PHP (cloudinary_php 2.x):
    Copy to clipboard
    (new ImageTag('sample.jpg'))
      ->overlay(Overlay::source(
      Source::image("cloudinary_icon_blue")
      ->transformation((new Transformation())
      ->resize(Resize::scale()->width(0.5))
      ->adjust(Adjust::opacity(70))
      ->adjust(Adjust::brightness()->level(50)))
      )
      ->position((new Position())
      ->gravity(
      Gravity::compass(
      Compass::northEast()))
      )
      );
    PHP (cloudinary_php 1.x (legacy)):
    Copy to clipboard
    cl_image_tag("sample.jpg", array("transformation"=>array(
      array("overlay"=>"cloudinary_icon_blue"),
      array("width"=>"0.5", "crop"=>"scale"),
      array("opacity"=>70),
      array("effect"=>"brightness:50"),
      array("flags"=>"layer_apply", "gravity"=>"north_east")
      )))
    Python (cloudinary 1.x):
    Copy to clipboard
    CloudinaryImage("sample.jpg").image(transformation=[
      {'overlay': "cloudinary_icon_blue"},
      {'width': "0.5", 'crop': "scale"},
      {'opacity': 70},
      {'effect': "brightness:50"},
      {'flags': "layer_apply", 'gravity': "north_east"}
      ])
    Node.js (cloudinary 1.x):
    Copy to clipboard
    cloudinary.image("sample.jpg", {transformation: [
      {overlay: "cloudinary_icon_blue"},
      {width: "0.5", crop: "scale"},
      {opacity: 70},
      {effect: "brightness:50"},
      {flags: "layer_apply", gravity: "north_east"}
      ]})
    Java (cloudinary 1.x):
    Copy to clipboard
    cloudinary.url().transformation(new Transformation()
      .overlay(new Layer().publicId("cloudinary_icon_blue")).chain()
      .width(0.5).crop("scale").chain()
      .opacity(70).chain()
      .effect("brightness:50").chain()
      .flags("layer_apply").gravity("north_east")).imageTag("sample.jpg");
    JS (@cloudinary/url-gen 1.x):
    Copy to clipboard
    new CloudinaryImage("sample.jpg").overlay(
      source(
        image("cloudinary_icon_blue").transformation(
          new Transformation()
            .resize(scale().width(0.5))
            .adjust(opacity(70))
            .adjust(brightness().level(50))
        )
      ).position(new Position().gravity(compass("north_east")))
    );
    JS (cloudinary-core 2.x (legacy)):
    Copy to clipboard
    cloudinary.imageTag('sample.jpg', {transformation: [
      {overlay: new cloudinary.Layer().publicId("cloudinary_icon_blue")},
      {width: "0.5", crop: "scale"},
      {opacity: 70},
      {effect: "brightness:50"},
      {flags: "layer_apply", gravity: "north_east"}
      ]}).toHtml();
    jQuery (cloudinary-jquery 2.x):
    Copy to clipboard
    $.cloudinary.image("sample.jpg", {transformation: [
      {overlay: new cloudinary.Layer().publicId("cloudinary_icon_blue")},
      {width: "0.5", crop: "scale"},
      {opacity: 70},
      {effect: "brightness:50"},
      {flags: "layer_apply", gravity: "north_east"}
      ]})
    React (@cloudinary/react 1.x):
    Copy to clipboard
    //React SDK transformations are created using @cloudinary/url-gen.
    new CloudinaryImage("sample.jpg").overlay(
      source(
        image("cloudinary_icon_blue").transformation(
          new Transformation()
            .resize(scale().width(0.5))
            .adjust(opacity(70))
            .adjust(brightness().level(50))
        )
      ).position(new Position().gravity(compass("north_east")))
    );
    React (cloudinary-react 1.x):
    Copy to clipboard
    <Image publicId="sample.jpg" >
      <Transformation overlay="cloudinary_icon_blue" />
      <Transformation width="0.5" crop="scale" />
      <Transformation opacity="70" />
      <Transformation effect="brightness:50" />
      <Transformation flags="layer_apply" gravity="north_east" />
    </Image>
    Vue.js (cloudinary-vue 1.x):
    Copy to clipboard
    <cld-image public-id="sample.jpg" >
      <cld-transformation :overlay="cloudinary_icon_blue" />
      <cld-transformation width="0.5" crop="scale" />
      <cld-transformation opacity="70" />
      <cld-transformation effect="brightness:50" />
      <cld-transformation flags="layer_apply" gravity="north_east" />
    </cld-image>
    Angular (@cloudinary/ng 1.x):
    Copy to clipboard
    //Angular SDK transformations are created using @cloudinary/url-gen.
    new CloudinaryImage("sample.jpg").overlay(
      source(
        image("cloudinary_icon_blue").transformation(
          new Transformation()
            .resize(scale().width(0.5))
            .adjust(opacity(70))
            .adjust(brightness().level(50))
        )
      ).position(new Position().gravity(compass("north_east")))
    );
    Angular (@cloudinary/angular-5.x 1.x (legacy)):
    Copy to clipboard
    <cl-image public-id="sample.jpg" >
      <cl-transformation overlay="cloudinary_icon_blue">
      </cl-transformation>
      <cl-transformation width="0.5" crop="scale">
      </cl-transformation>
      <cl-transformation opacity="70">
      </cl-transformation>
      <cl-transformation effect="brightness:50">
      </cl-transformation>
      <cl-transformation flags="layer_apply" gravity="north_east">
      </cl-transformation>
    </cl-image>
    .NET (CloudinaryDotNet 1.x):
    Copy to clipboard
    cloudinary.Api.UrlImgUp.Transform(new Transformation()
      .Overlay(new Layer().PublicId("cloudinary_icon_blue")).Chain()
      .Width(0.5).Crop("scale").Chain()
      .Opacity(70).Chain()
      .Effect("brightness:50").Chain()
      .Flags("layer_apply").Gravity("north_east")).BuildImageTag("sample.jpg")
    iOS (cloudinary 3.x):
    Copy to clipboard
    imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation()
      .setOverlay("cloudinary_icon_blue").chain()
      .setWidth(0.5).setCrop("scale").chain()
      .setOpacity(70).chain()
      .setEffect("brightness:50").chain()
      .setFlags("layer_apply").setGravity("north_east")).generate("sample.jpg")!, cloudinary: cloudinary)
    Android (cloudinary-android 1.x):
    Copy to clipboard
    MediaManager.get().url().transformation(new Transformation()
      .overlay(new Layer().publicId("cloudinary_icon_blue")).chain()
      .width(0.5).crop("scale").chain()
      .opacity(70).chain()
      .effect("brightness:50").chain()
      .flags("layer_apply").gravity("north_east")).generate("sample.jpg");
    Kotlin (kotlin-url-gen 1.x):
    Copy to clipboard
    cloudinary.image {
      publicId("sample.jpg")
       overlay(Overlay.source(
      Source.image("cloudinary_icon_blue") {
       transformation(Transformation {
       resize(Resize.scale() { width(0.5F) })
       adjust(Adjust.opacity(70))
       adjust(Adjust.brightness() { level(50) }) })
       }) {
       position(Position() {
       gravity(
      Gravity.compass(
      Compass.northEast()))
       })
       }) 
    }.generate()
    Image with transformed overlay

  2. The base image is scaled to a width of 500 pixels before adding the woman image as an overlay, where the overlay image is automatically cropped to include only the detected face and then scaled to a width of 150 pixels (c_scale,w_500/l_woman/c_crop,g_face/c_scale,w_150/fl_layer_apply):

    Ruby (cloudinary 1.x):
    Copy to clipboard
    cl_image_tag("sample.jpg", :transformation=>[
      {:width=>500, :crop=>"scale"},
      {:overlay=>"woman"},
      {:gravity=>"face", :crop=>"crop"},
      {:width=>150, :crop=>"scale"},
      {:flags=>"layer_apply"}
      ])
    PHP (cloudinary_php 2.x):
    Copy to clipboard
    (new ImageTag('sample.jpg'))
      ->resize(Resize::scale()->width(500))
      ->overlay(Overlay::source(
      Source::image("woman")
      ->transformation((new Transformation())
      ->resize(Resize::crop()
      ->gravity(
      Gravity::focusOn(
      FocusOn::face()))
      )
      ->resize(Resize::scale()->width(150)))
      ));
    PHP (cloudinary_php 1.x (legacy)):
    Copy to clipboard
    cl_image_tag("sample.jpg", array("transformation"=>array(
      array("width"=>500, "crop"=>"scale"),
      array("overlay"=>"woman"),
      array("gravity"=>"face", "crop"=>"crop"),
      array("width"=>150, "crop"=>"scale"),
      array("flags"=>"layer_apply")
      )))
    Python (cloudinary 1.x):
    Copy to clipboard
    CloudinaryImage("sample.jpg").image(transformation=[
      {'width': 500, 'crop': "scale"},
      {'overlay': "woman"},
      {'gravity': "face", 'crop': "crop"},
      {'width': 150, 'crop': "scale"},
      {'flags': "layer_apply"}
      ])
    Node.js (cloudinary 1.x):
    Copy to clipboard
    cloudinary.image("sample.jpg", {transformation: [
      {width: 500, crop: "scale"},
      {overlay: "woman"},
      {gravity: "face", crop: "crop"},
      {width: 150, crop: "scale"},
      {flags: "layer_apply"}
      ]})
    Java (cloudinary 1.x):
    Copy to clipboard
    cloudinary.url().transformation(new Transformation()
      .width(500).crop("scale").chain()
      .overlay(new Layer().publicId("woman")).chain()
      .gravity("face").crop("crop").chain()
      .width(150).crop("scale").chain()
      .flags("layer_apply")).imageTag("sample.jpg");
    JS (@cloudinary/url-gen 1.x):
    Copy to clipboard
    new CloudinaryImage("sample.jpg")
      .resize(scale().width(500))
      .overlay(
        source(
          image("woman").transformation(
            new Transformation()
              .resize(crop().gravity(focusOn(face())))
              .resize(scale().width(150))
          )
        )
      );
    JS (cloudinary-core 2.x (legacy)):
    Copy to clipboard
    cloudinary.imageTag('sample.jpg', {transformation: [
      {width: 500, crop: "scale"},
      {overlay: new cloudinary.Layer().publicId("woman")},
      {gravity: "face", crop: "crop"},
      {width: 150, crop: "scale"},
      {flags: "layer_apply"}
      ]}).toHtml();
    jQuery (cloudinary-jquery 2.x):
    Copy to clipboard
    $.cloudinary.image("sample.jpg", {transformation: [
      {width: 500, crop: "scale"},
      {overlay: new cloudinary.Layer().publicId("woman")},
      {gravity: "face", crop: "crop"},
      {width: 150, crop: "scale"},
      {flags: "layer_apply"}
      ]})
    React (@cloudinary/react 1.x):
    Copy to clipboard
    //React SDK transformations are created using @cloudinary/url-gen.
    new CloudinaryImage("sample.jpg")
      .resize(scale().width(500))
      .overlay(
        source(
          image("woman").transformation(
            new Transformation()
              .resize(crop().gravity(focusOn(face())))
              .resize(scale().width(150))
          )
        )
      );
    React (cloudinary-react 1.x):
    Copy to clipboard
    <Image publicId="sample.jpg" >
      <Transformation width="500" crop="scale" />
      <Transformation overlay="woman" />
      <Transformation gravity="face" crop="crop" />
      <Transformation width="150" crop="scale" />
      <Transformation flags="layer_apply" />
    </Image>
    Vue.js (cloudinary-vue 1.x):
    Copy to clipboard
    <cld-image public-id="sample.jpg" >
      <cld-transformation width="500" crop="scale" />
      <cld-transformation :overlay="woman" />
      <cld-transformation gravity="face" crop="crop" />
      <cld-transformation width="150" crop="scale" />
      <cld-transformation flags="layer_apply" />
    </cld-image>
    Angular (@cloudinary/ng 1.x):
    Copy to clipboard
    //Angular SDK transformations are created using @cloudinary/url-gen.
    new CloudinaryImage("sample.jpg")
      .resize(scale().width(500))
      .overlay(
        source(
          image("woman").transformation(
            new Transformation()
              .resize(crop().gravity(focusOn(face())))
              .resize(scale().width(150))
          )
        )
      );
    Angular (@cloudinary/angular-5.x 1.x (legacy)):
    Copy to clipboard
    <cl-image public-id="sample.jpg" >
      <cl-transformation width="500" crop="scale">
      </cl-transformation>
      <cl-transformation overlay="woman">
      </cl-transformation>
      <cl-transformation gravity="face" crop="crop">
      </cl-transformation>
      <cl-transformation width="150" crop="scale">
      </cl-transformation>
      <cl-transformation flags="layer_apply">
      </cl-transformation>
    </cl-image>
    .NET (CloudinaryDotNet 1.x):
    Copy to clipboard
    cloudinary.Api.UrlImgUp.Transform(new Transformation()
      .Width(500).Crop("scale").Chain()
      .Overlay(new Layer().PublicId("woman")).Chain()
      .Gravity("face").Crop("crop").Chain()
      .Width(150).Crop("scale").Chain()
      .Flags("layer_apply")).BuildImageTag("sample.jpg")
    iOS (cloudinary 3.x):
    Copy to clipboard
    imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation()
      .setWidth(500).setCrop("scale").chain()
      .setOverlay("woman").chain()
      .setGravity("face").setCrop("crop").chain()
      .setWidth(150).setCrop("scale").chain()
      .setFlags("layer_apply")).generate("sample.jpg")!, cloudinary: cloudinary)
    Android (cloudinary-android 1.x):
    Copy to clipboard
    MediaManager.get().url().transformation(new Transformation()
      .width(500).crop("scale").chain()
      .overlay(new Layer().publicId("woman")).chain()
      .gravity("face").crop("crop").chain()
      .width(150).crop("scale").chain()
      .flags("layer_apply")).generate("sample.jpg");
    Kotlin (kotlin-url-gen 1.x):
    Copy to clipboard
    cloudinary.image {
      publicId("sample.jpg")
       resize(Resize.scale() { width(500) })
       overlay(Overlay.source(
      Source.image("woman") {
       transformation(Transformation {
       resize(Resize.crop() {
       gravity(
      Gravity.focusOn(
      FocusOn.face()))
       })
       resize(Resize.scale() { width(150) }) })
       })) 
    }.generate()
    image with transformations applied to the overlay

Note
You cannot use object aware cropping in layers.

Multiple overlays

Multiple overlays can easily be added as chained transformations to an aset. The following example adds both image and text overlays to the base image as follows:

  1. An overlay of an image called couple, cropped to a 120x150 ellipse that includes only the detected faces (l_couple/c_crop,g_faces,h_150,w_120/r_max/fl_layer_apply).
  2. An overlay of an image called cloudinary_icon_white with a relative width of 80% of the base image and an opacity of 50% and a brightness of 100 (l_cloudinary_icon_white/c_scale,fl_relative,w_0.8/o_50/e_brightness:100/fl_layer_apply).
  3. The text string "Sample" in bold 'Impact' font with a size of 40 pixels, placed at a distance of 20 pixels from the bottom of the base image (l_text:impact_40_bold:Sample/fl_layer_apply,g_south,y_20).

Ruby (cloudinary 1.x):
Copy to clipboard
cl_image_tag("sample.jpg", :transformation=>[
  {:overlay=>"couple"},
  {:gravity=>"faces", :height=>150, :width=>120, :crop=>"crop"},
  {:radius=>"max"},
  {:flags=>"layer_apply", :gravity=>"north_east"},
  {:overlay=>"cloudinary_icon_white"},
  {:flags=>"relative", :width=>0.8, :crop=>"scale"},
  {:opacity=>50},
  {:effect=>"brightness:100"},
  {:flags=>"layer_apply"},
  {:overlay=>{:font_family=>"impact", :font_size=>40, :font_weight=>"bold", :text=>"Sample"}},
  {:flags=>"layer_apply", :gravity=>"south", :y=>20}
  ])
PHP (cloudinary_php 2.x):
Copy to clipboard
(new ImageTag('sample.jpg'))
  ->overlay(Overlay::source(
  Source::image("couple")
  ->transformation((new Transformation())
  ->resize(Resize::crop()->width(120)
->height(150)
  ->gravity(
  Gravity::focusOn(
  FocusOn::faces()))
  )
  ->roundCorners(RoundCorners::max()))
  )
  ->position((new Position())
  ->gravity(
  Gravity::compass(
  Compass::northEast()))
  )
  )
  ->overlay(Overlay::source(
  Source::image("cloudinary_icon_white")
  ->transformation((new Transformation())
  ->resize(Resize::scale()->width(0.8)
  ->relative()
  )
  ->adjust(Adjust::opacity(50))
  ->adjust(Adjust::brightness()->level(100)))
  ))
  ->overlay(Overlay::source(
  Source::text("Sample",(new TextStyle("impact",40))
  ->fontWeight(
  FontWeight::bold())
  ))
  ->position((new Position())
  ->gravity(
  Gravity::compass(
  Compass::south()))
->offsetY(20))
  );
PHP (cloudinary_php 1.x (legacy)):
Copy to clipboard
cl_image_tag("sample.jpg", array("transformation"=>array(
  array("overlay"=>"couple"),
  array("gravity"=>"faces", "height"=>150, "width"=>120, "crop"=>"crop"),
  array("radius"=>"max"),
  array("flags"=>"layer_apply", "gravity"=>"north_east"),
  array("overlay"=>"cloudinary_icon_white"),
  array("flags"=>"relative", "width"=>"0.8", "crop"=>"scale"),
  array("opacity"=>50),
  array("effect"=>"brightness:100"),
  array("flags"=>"layer_apply"),
  array("overlay"=>array("font_family"=>"impact", "font_size"=>40, "font_weight"=>"bold", "text"=>"Sample")),
  array("flags"=>"layer_apply", "gravity"=>"south", "y"=>20)
  )))
Python (cloudinary 1.x):
Copy to clipboard
CloudinaryImage("sample.jpg").image(transformation=[
  {'overlay': "couple"},
  {'gravity': "faces", 'height': 150, 'width': 120, 'crop': "crop"},
  {'radius': "max"},
  {'flags': "layer_apply", 'gravity': "north_east"},
  {'overlay': "cloudinary_icon_white"},
  {'flags': "relative", 'width': "0.8", 'crop': "scale"},
  {'opacity': 50},
  {'effect': "brightness:100"},
  {'flags': "layer_apply"},
  {'overlay': {'font_family': "impact", 'font_size': 40, 'font_weight': "bold", 'text': "Sample"}},
  {'flags': "layer_apply", 'gravity': "south", 'y': 20}
  ])
Node.js (cloudinary 1.x):
Copy to clipboard
cloudinary.image("sample.jpg", {transformation: [
  {overlay: "couple"},
  {gravity: "faces", height: 150, width: 120, crop: "crop"},
  {radius: "max"},
  {flags: "layer_apply", gravity: "north_east"},
  {overlay: "cloudinary_icon_white"},
  {flags: "relative", width: "0.8", crop: "scale"},
  {opacity: 50},
  {effect: "brightness:100"},
  {flags: "layer_apply"},
  {overlay: {font_family: "impact", font_size: 40, font_weight: "bold", text: "Sample"}},
  {flags: "layer_apply", gravity: "south", y: 20}
  ]})
Java (cloudinary 1.x):
Copy to clipboard
cloudinary.url().transformation(new Transformation()
  .overlay(new Layer().publicId("couple")).chain()
  .gravity("faces").height(150).width(120).crop("crop").chain()
  .radius("max").chain()
  .flags("layer_apply").gravity("north_east").chain()
  .overlay(new Layer().publicId("cloudinary_icon_white")).chain()
  .flags("relative").width(0.8).crop("scale").chain()
  .opacity(50).chain()
  .effect("brightness:100").chain()
  .flags("layer_apply").chain()
  .overlay(new TextLayer().fontFamily("impact").fontSize(40).fontWeight("bold").text("Sample")).chain()
  .flags("layer_apply").gravity("south").y(20)).imageTag("sample.jpg");
JS (@cloudinary/url-gen 1.x):
Copy to clipboard
// This code example is not currently available.
JS (cloudinary-core 2.x (legacy)):
Copy to clipboard
cloudinary.imageTag('sample.jpg', {transformation: [
  {overlay: new cloudinary.Layer().publicId("couple")},
  {gravity: "faces", height: 150, width: 120, crop: "crop"},
  {radius: "max"},
  {flags: "layer_apply", gravity: "north_east"},
  {overlay: new cloudinary.Layer().publicId("cloudinary_icon_white")},
  {flags: "relative", width: "0.8", crop: "scale"},
  {opacity: 50},
  {effect: "brightness:100"},
  {flags: "layer_apply"},
  {overlay: new cloudinary.TextLayer().fontFamily("impact").fontSize(40).fontWeight("bold").text("Sample")},
  {flags: "layer_apply", gravity: "south", y: 20}
  ]}).toHtml();
jQuery (cloudinary-jquery 2.x):
Copy to clipboard
$.cloudinary.image("sample.jpg", {transformation: [
  {overlay: new cloudinary.Layer().publicId("couple")},
  {gravity: "faces", height: 150, width: 120, crop: "crop"},
  {radius: "max"},
  {flags: "layer_apply", gravity: "north_east"},
  {overlay: new cloudinary.Layer().publicId("cloudinary_icon_white")},
  {flags: "relative", width: "0.8", crop: "scale"},
  {opacity: 50},
  {effect: "brightness:100"},
  {flags: "layer_apply"},
  {overlay: new cloudinary.TextLayer().fontFamily("impact").fontSize(40).fontWeight("bold").text("Sample")},
  {flags: "layer_apply", gravity: "south", y: 20}
  ]})
React (@cloudinary/react 1.x):
Copy to clipboard
// This code example is not currently available.
React (cloudinary-react 1.x):
Copy to clipboard
<Image publicId="sample.jpg" >
  <Transformation overlay="couple" />
  <Transformation gravity="faces" height="150" width="120" crop="crop" />
  <Transformation radius="max" />
  <Transformation flags="layer_apply" gravity="north_east" />
  <Transformation overlay="cloudinary_icon_white" />
  <Transformation flags="relative" width="0.8" crop="scale" />
  <Transformation opacity="50" />
  <Transformation effect="brightness:100" />
  <Transformation flags="layer_apply" />
  <Transformation overlay={{fontFamily: "impact", fontSize: 40, fontWeight: "bold", text: "Sample"}} />
  <Transformation flags="layer_apply" gravity="south" y="20" />
</Image>
Vue.js (cloudinary-vue 1.x):
Copy to clipboard
<cld-image public-id="sample.jpg" >
  <cld-transformation :overlay="couple" />
  <cld-transformation gravity="faces" height="150" width="120" crop="crop" />
  <cld-transformation radius="max" />
  <cld-transformation flags="layer_apply" gravity="north_east" />
  <cld-transformation :overlay="cloudinary_icon_white" />
  <cld-transformation flags="relative" width="0.8" crop="scale" />
  <cld-transformation opacity="50" />
  <cld-transformation effect="brightness:100" />
  <cld-transformation flags="layer_apply" />
  <cld-transformation :overlay="{fontFamily: 'impact', fontSize: 40, fontWeight: 'bold', text: 'Sample'}" />
  <cld-transformation flags="layer_apply" gravity="south" y="20" />
</cld-image>
Angular (@cloudinary/ng 1.x):
Copy to clipboard
// This code example is not currently available.
Angular (@cloudinary/angular-5.x 1.x (legacy)):
Copy to clipboard
<cl-image public-id="sample.jpg" >
  <cl-transformation overlay="couple">
  </cl-transformation>
  <cl-transformation gravity="faces" height="150" width="120" crop="crop">
  </cl-transformation>
  <cl-transformation radius="max">
  </cl-transformation>
  <cl-transformation flags="layer_apply" gravity="north_east">
  </cl-transformation>
  <cl-transformation overlay="cloudinary_icon_white">
  </cl-transformation>
  <cl-transformation flags="relative" width="0.8" crop="scale">
  </cl-transformation>
  <cl-transformation opacity="50">
  </cl-transformation>
  <cl-transformation effect="brightness:100">
  </cl-transformation>
  <cl-transformation flags="layer_apply">
  </cl-transformation>
  <cl-transformation overlay="text:impact_40_bold:Sample">
  </cl-transformation>
  <cl-transformation flags="layer_apply" gravity="south" y="20">
  </cl-transformation>
</cl-image>
.NET (CloudinaryDotNet 1.x):
Copy to clipboard
cloudinary.Api.UrlImgUp.Transform(new Transformation()
  .Overlay(new Layer().PublicId("couple")).Chain()
  .Gravity("faces").Height(150).Width(120).Crop("crop").Chain()
  .Radius("max").Chain()
  .Flags("layer_apply").Gravity("north_east").Chain()
  .Overlay(new Layer().PublicId("cloudinary_icon_white")).Chain()
  .Flags("relative").Width(0.8).Crop("scale").Chain()
  .Opacity(50).Chain()
  .Effect("brightness:100").Chain()
  .Flags("layer_apply").Chain()
  .Overlay(new TextLayer().FontFamily("impact").FontSize(40).FontWeight("bold").Text("Sample")).Chain()
  .Flags("layer_apply").Gravity("south").Y(20)).BuildImageTag("sample.jpg")
iOS (cloudinary 3.x):
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation()
  .setOverlay("couple").chain()
  .setGravity("faces").setHeight(150).setWidth(120).setCrop("crop").chain()
  .setRadius("max").chain()
  .setFlags("layer_apply").setGravity("north_east").chain()
  .setOverlay("cloudinary_icon_white").chain()
  .setFlags("relative").setWidth(0.8).setCrop("scale").chain()
  .setOpacity(50).chain()
  .setEffect("brightness:100").chain()
  .setFlags("layer_apply").chain()
  .setOverlay("text:impact_40_bold:Sample").chain()
  .setFlags("layer_apply").setGravity("south").setY(20)).generate("sample.jpg")!, cloudinary: cloudinary)
Android (cloudinary-android 1.x):
Copy to clipboard
MediaManager.get().url().transformation(new Transformation()
  .overlay(new Layer().publicId("couple")).chain()
  .gravity("faces").height(150).width(120).crop("crop").chain()
  .radius("max").chain()
  .flags("layer_apply").gravity("north_east").chain()
  .overlay(new Layer().publicId("cloudinary_icon_white")).chain()
  .flags("relative").width(0.8).crop("scale").chain()
  .opacity(50).chain()
  .effect("brightness:100").chain()
  .flags("layer_apply").chain()
  .overlay(new TextLayer().fontFamily("impact").fontSize(40).fontWeight("bold").text("Sample")).chain()
  .flags("layer_apply").gravity("south").y(20)).generate("sample.jpg");
Kotlin (kotlin-url-gen 1.x):
Copy to clipboard
// This code example is not currently available.
Image with 3 overlays

Nesting layers

Layers can be nested within layers. Each layer must have its own layer and layer_apply components, and the inner layer must be closed before the outer one, like with any nested programming statement.

For example, adding another cloudinary_icon_blue image as an overlay to the first (black and white) overlay:

Ruby (cloudinary 1.x):
Copy to clipboard
cl_image_tag("sample.jpg", :transformation=>[
  {:width=>500, :crop=>"scale"},
  {:overlay=>"cloudinary_icon_blue"},
  {:width=>150, :crop=>"scale"},
  {:effect=>"blackwhite"},
  {:overlay=>"cloudinary_icon_blue"},
  {:width=>50, :crop=>"scale"},
  {:flags=>"layer_apply"},
  {:flags=>"layer_apply", :gravity=>"north_east"}
  ])
PHP (cloudinary_php 2.x):
Copy to clipboard
(new ImageTag('sample.jpg'))
  ->resize(Resize::scale()->width(500))
  ->overlay(Overlay::source(
  Source::image("cloudinary_icon_blue")
  ->transformation((new Transformation())
  ->resize(Resize::scale()->width(150))
  ->effect(Effect::blackwhite())
  ->overlay(Overlay::source(
  Source::image("cloudinary_icon_blue")
  ->transformation((new Transformation())
  ->resize(Resize::scale()->width(50)))
  )))
  )
  ->position((new Position())
  ->gravity(
  Gravity::compass(
  Compass::northEast()))
  )
  );
PHP (cloudinary_php 1.x (legacy)):
Copy to clipboard
cl_image_tag("sample.jpg", array("transformation"=>array(
  array("width"=>500, "crop"=>"scale"),
  array("overlay"=>"cloudinary_icon_blue"),
  array("width"=>150, "crop"=>"scale"),
  array("effect"=>"blackwhite"),
  array("overlay"=>"cloudinary_icon_blue"),
  array("width"=>50, "crop"=>"scale"),
  array("flags"=>"layer_apply"),
  array("flags"=>"layer_apply", "gravity"=>"north_east")
  )))
Python (cloudinary 1.x):
Copy to clipboard
CloudinaryImage("sample.jpg").image(transformation=[
  {'width': 500, 'crop': "scale"},
  {'overlay': "cloudinary_icon_blue"},
  {'width': 150, 'crop': "scale"},
  {'effect': "blackwhite"},
  {'overlay': "cloudinary_icon_blue"},
  {'width': 50, 'crop': "scale"},
  {'flags': "layer_apply"},
  {'flags': "layer_apply", 'gravity': "north_east"}
  ])
Node.js (cloudinary 1.x):
Copy to clipboard
cloudinary.image("sample.jpg", {transformation: [
  {width: 500, crop: "scale"},
  {overlay: "cloudinary_icon_blue"},
  {width: 150, crop: "scale"},
  {effect: "blackwhite"},
  {overlay: "cloudinary_icon_blue"},
  {width: 50, crop: "scale"},
  {flags: "layer_apply"},
  {flags: "layer_apply", gravity: "north_east"}
  ]})
Java (cloudinary 1.x):
Copy to clipboard
cloudinary.url().transformation(new Transformation()
  .width(500).crop("scale").chain()
  .overlay(new Layer().publicId("cloudinary_icon_blue")).chain()
  .width(150).crop("scale").chain()
  .effect("blackwhite").chain()
  .overlay(new Layer().publicId("cloudinary_icon_blue")).chain()
  .width(50).crop("scale").chain()
  .flags("layer_apply").chain()
  .flags("layer_apply").gravity("north_east")).imageTag("sample.jpg");
JS (@cloudinary/url-gen 1.x):
Copy to clipboard
new CloudinaryImage("sample.jpg").resize(scale().width(500)).overlay(
  source(
    image("cloudinary_icon_blue").transformation(
      new Transformation()
        .resize(scale().width(150))
        .effect(blackwhite())
        .overlay(
          source(
            image("cloudinary_icon_blue").transformation(
              new Transformation().resize(scale().width(50))
            )
          )
        )
    )
  ).position(new Position().gravity(compass("north_east")))
);
JS (cloudinary-core 2.x (legacy)):
Copy to clipboard
cloudinary.imageTag('sample.jpg', {transformation: [
  {width: 500, crop: "scale"},
  {overlay: new cloudinary.Layer().publicId("cloudinary_icon_blue")},
  {width: 150, crop: "scale"},
  {effect: "blackwhite"},
  {overlay: new cloudinary.Layer().publicId("cloudinary_icon_blue")},
  {width: 50, crop: "scale"},
  {flags: "layer_apply"},
  {flags: "layer_apply", gravity: "north_east"}
  ]}).toHtml();
jQuery (cloudinary-jquery 2.x):
Copy to clipboard
$.cloudinary.image("sample.jpg", {transformation: [
  {width: 500, crop: "scale"},
  {overlay: new cloudinary.Layer().publicId("cloudinary_icon_blue")},
  {width: 150, crop: "scale"},
  {effect: "blackwhite"},
  {overlay: new cloudinary.Layer().publicId("cloudinary_icon_blue")},
  {width: 50, crop: "scale"},
  {flags: "layer_apply"},
  {flags: "layer_apply", gravity: "north_east"}
  ]})
React (@cloudinary/react 1.x):
Copy to clipboard
//React SDK transformations are created using @cloudinary/url-gen.
new CloudinaryImage("sample.jpg").resize(scale().width(500)).overlay(
  source(
    image("cloudinary_icon_blue").transformation(
      new Transformation()
        .resize(scale().width(150))
        .effect(blackwhite())
        .overlay(
          source(
            image("cloudinary_icon_blue").transformation(
              new Transformation().resize(scale().width(50))
            )
          )
        )
    )
  ).position(new Position().gravity(compass("north_east")))
);
React (cloudinary-react 1.x):
Copy to clipboard
<Image publicId="sample.jpg" >
  <Transformation width="500" crop="scale" />
  <Transformation overlay="cloudinary_icon_blue" />
  <Transformation width="150" crop="scale" />
  <Transformation effect="blackwhite" />
  <Transformation overlay="cloudinary_icon_blue" />
  <Transformation width="50" crop="scale" />
  <Transformation flags="layer_apply" />
  <Transformation flags="layer_apply" gravity="north_east" />
</Image>
Vue.js (cloudinary-vue 1.x):
Copy to clipboard
<cld-image public-id="sample.jpg" >
  <cld-transformation width="500" crop="scale" />
  <cld-transformation :overlay="cloudinary_icon_blue" />
  <cld-transformation width="150" crop="scale" />
  <cld-transformation effect="blackwhite" />
  <cld-transformation :overlay="cloudinary_icon_blue" />
  <cld-transformation width="50" crop="scale" />
  <cld-transformation flags="layer_apply" />
  <cld-transformation flags="layer_apply" gravity="north_east" />
</cld-image>
Angular (@cloudinary/ng 1.x):
Copy to clipboard
//Angular SDK transformations are created using @cloudinary/url-gen.
new CloudinaryImage("sample.jpg").resize(scale().width(500)).overlay(
  source(
    image("cloudinary_icon_blue").transformation(
      new Transformation()
        .resize(scale().width(150))
        .effect(blackwhite())
        .overlay(
          source(
            image("cloudinary_icon_blue").transformation(
              new Transformation().resize(scale().width(50))
            )
          )
        )
    )
  ).position(new Position().gravity(compass("north_east")))
);
Angular (@cloudinary/angular-5.x 1.x (legacy)):
Copy to clipboard
<cl-image public-id="sample.jpg" >
  <cl-transformation width="500" crop="scale">
  </cl-transformation>
  <cl-transformation overlay="cloudinary_icon_blue">
  </cl-transformation>
  <cl-transformation width="150" crop="scale">
  </cl-transformation>
  <cl-transformation effect="blackwhite">
  </cl-transformation>
  <cl-transformation overlay="cloudinary_icon_blue">
  </cl-transformation>
  <cl-transformation width="50" crop="scale">
  </cl-transformation>
  <cl-transformation flags="layer_apply">
  </cl-transformation>
  <cl-transformation flags="layer_apply" gravity="north_east">
  </cl-transformation>
</cl-image>
.NET (CloudinaryDotNet 1.x):
Copy to clipboard
cloudinary.Api.UrlImgUp.Transform(new Transformation()
  .Width(500).Crop("scale").Chain()
  .Overlay(new Layer().PublicId("cloudinary_icon_blue")).Chain()
  .Width(150).Crop("scale").Chain()
  .Effect("blackwhite").Chain()
  .Overlay(new Layer().PublicId("cloudinary_icon_blue")).Chain()
  .Width(50).Crop("scale").Chain()
  .Flags("layer_apply").Chain()
  .Flags("layer_apply").Gravity("north_east")).BuildImageTag("sample.jpg")
iOS (cloudinary 3.x):
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation()
  .setWidth(500).setCrop("scale").chain()
  .setOverlay("cloudinary_icon_blue").chain()
  .setWidth(150).setCrop("scale").chain()
  .setEffect("blackwhite").chain()
  .setOverlay("cloudinary_icon_blue").chain()
  .setWidth(50).setCrop("scale").chain()
  .setFlags("layer_apply").chain()
  .setFlags("layer_apply").setGravity("north_east")).generate("sample.jpg")!, cloudinary: cloudinary)
Android (cloudinary-android 1.x):
Copy to clipboard
MediaManager.get().url().transformation(new Transformation()
  .width(500).crop("scale").chain()
  .overlay(new Layer().publicId("cloudinary_icon_blue")).chain()
  .width(150).crop("scale").chain()
  .effect("blackwhite").chain()
  .overlay(new Layer().publicId("cloudinary_icon_blue")).chain()
  .width(50).crop("scale").chain()
  .flags("layer_apply").chain()
  .flags("layer_apply").gravity("north_east")).generate("sample.jpg");
Kotlin (kotlin-url-gen 1.x):
Copy to clipboard
cloudinary.image {
  publicId("sample.jpg")
   resize(Resize.scale() { width(500) })
   overlay(Overlay.source(
  Source.image("cloudinary_icon_blue") {
   transformation(Transformation {
   resize(Resize.scale() { width(150) })
   effect(Effect.blackwhite())
   overlay(Overlay.source(
  Source.image("cloudinary_icon_blue") {
   transformation(Transformation {
   resize(Resize.scale() { width(50) }) })
   })) })
   }) {
   position(Position() {
   gravity(
  Gravity.compass(
  Compass.northEast()))
   })
   }) 
}.generate()
image with nested layers

The first image layer has a transformation that changes its size and applies a black and white effect. The second layer is also resized, and then is closed and placed by the first (inner) fl_layer_apply. Since no gravity was specified for that later, it's placed in the center of the first overlay. Then the outer layer apply closes and places the entire layer (including its nested layer) and positions it in the northeast corner.

Relative layer sizing

By default, whenever you apply relative resize transformations to your overlay, the overlay image is resized relative to its own original size. However, you can use one of the following flags to resize relative to other elements.

Sizing relative to the base image

You can add the relative flag (fl_relative in URLs) to specify that percentage-based width & height parameters of overlays (e.g., w_0.5) are relative to the size of the base image instead of to the original size of the overlaying image itself.

For example, to add an overlay of the image called cloudinary_icon_blue, where the overlay is resized to 80% of the width of the base image (l_cloudinary_icon_blue/c_scale,fl_relative,w_0.8/fl_layer_apply):

Ruby (cloudinary 1.x):
Copy to clipboard
cl_image_tag("sample.jpg", :transformation=>[
  {:overlay=>"cloudinary_icon_blue"},
  {:flags=>"relative", :width=>0.8, :crop=>"scale"},
  {:flags=>"layer_apply"}
  ])
PHP (cloudinary_php 2.x):
Copy to clipboard
(new ImageTag('sample.jpg'))
  ->overlay(Overlay::source(
  Source::image("cloudinary_icon_blue")
  ->transformation((new Transformation())
  ->resize(Resize::scale()->width(0.8)
  ->relative()
  ))
  ));
PHP (cloudinary_php 1.x (legacy)):
Copy to clipboard
cl_image_tag("sample.jpg", array("transformation"=>array(
  array("overlay"=>"cloudinary_icon_blue"),
  array("flags"=>"relative", "width"=>"0.8", "crop"=>"scale"),
  array("flags"=>"layer_apply")
  )))
Python (cloudinary 1.x):
Copy to clipboard
CloudinaryImage("sample.jpg").image(transformation=[
  {'overlay': "cloudinary_icon_blue"},
  {'flags': "relative", 'width': "0.8", 'crop': "scale"},
  {'flags': "layer_apply"}
  ])
Node.js (cloudinary 1.x):
Copy to clipboard
cloudinary.image("sample.jpg", {transformation: [
  {overlay: "cloudinary_icon_blue"},
  {flags: "relative", width: "0.8", crop: "scale"},
  {flags: "layer_apply"}
  ]})
Java (cloudinary 1.x):
Copy to clipboard
cloudinary.url().transformation(new Transformation()
  .overlay(new Layer().publicId("cloudinary_icon_blue")).chain()
  .flags("relative").width(0.8).crop("scale").chain()
  .flags("layer_apply")).imageTag("sample.jpg");
JS (@cloudinary/url-gen 1.x):
Copy to clipboard
new CloudinaryImage("sample.jpg").overlay(
  source(
    image("cloudinary_icon_blue").transformation(
      new Transformation().resize(scale().width(0.8).relative())
    )
  )
);
JS (cloudinary-core 2.x (legacy)):
Copy to clipboard
cloudinary.imageTag('sample.jpg', {transformation: [
  {overlay: new cloudinary.Layer().publicId("cloudinary_icon_blue")},
  {flags: "relative", width: "0.8", crop: "scale"},
  {flags: "layer_apply"}
  ]}).toHtml();
jQuery (cloudinary-jquery 2.x):
Copy to clipboard
$.cloudinary.image("sample.jpg", {transformation: [
  {overlay: new cloudinary.Layer().publicId("cloudinary_icon_blue")},
  {flags: "relative", width: "0.8", crop: "scale"},
  {flags: "layer_apply"}
  ]})
React (@cloudinary/react 1.x):
Copy to clipboard
//React SDK transformations are created using @cloudinary/url-gen.
new CloudinaryImage("sample.jpg").overlay(
  source(
    image("cloudinary_icon_blue").transformation(
      new Transformation().resize(scale().width(0.8).relative())
    )
  )
);
React (cloudinary-react 1.x):
Copy to clipboard
<Image publicId="sample.jpg" >
  <Transformation overlay="cloudinary_icon_blue" />
  <Transformation flags="relative" width="0.8" crop="scale" />
  <Transformation flags="layer_apply" />
</Image>
Vue.js (cloudinary-vue 1.x):
Copy to clipboard
<cld-image public-id="sample.jpg" >
  <cld-transformation :overlay="cloudinary_icon_blue" />
  <cld-transformation flags="relative" width="0.8" crop="scale" />
  <cld-transformation flags="layer_apply" />
</cld-image>
Angular (@cloudinary/ng 1.x):
Copy to clipboard
//Angular SDK transformations are created using @cloudinary/url-gen.
new CloudinaryImage("sample.jpg").overlay(
  source(
    image("cloudinary_icon_blue").transformation(
      new Transformation().resize(scale().width(0.8).relative())
    )
  )
);
Angular (@cloudinary/angular-5.x 1.x (legacy)):
Copy to clipboard
<cl-image public-id="sample.jpg" >
  <cl-transformation overlay="cloudinary_icon_blue">
  </cl-transformation>
  <cl-transformation flags="relative" width="0.8" crop="scale">
  </cl-transformation>
  <cl-transformation flags="layer_apply">
  </cl-transformation>
</cl-image>
.NET (CloudinaryDotNet 1.x):
Copy to clipboard
cloudinary.Api.UrlImgUp.Transform(new Transformation()
  .Overlay(new Layer().PublicId("cloudinary_icon_blue")).Chain()
  .Flags("relative").Width(0.8).Crop("scale").Chain()
  .Flags("layer_apply")).BuildImageTag("sample.jpg")
iOS (cloudinary 3.x):
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation()
  .setOverlay("cloudinary_icon_blue").chain()
  .setFlags("relative").setWidth(0.8).setCrop("scale").chain()
  .setFlags("layer_apply")).generate("sample.jpg")!, cloudinary: cloudinary)
Android (cloudinary-android 1.x):
Copy to clipboard
MediaManager.get().url().transformation(new Transformation()
  .overlay(new Layer().publicId("cloudinary_icon_blue")).chain()
  .flags("relative").width(0.8).crop("scale").chain()
  .flags("layer_apply")).generate("sample.jpg");
Kotlin (kotlin-url-gen 1.x):
Copy to clipboard
cloudinary.image {
  publicId("sample.jpg")
   overlay(Overlay.source(
  Source.image("cloudinary_icon_blue") {
   transformation(Transformation {
   resize(Resize.scale() { width(0.8F)
   relative()
   }) })
   })) 
}.generate()
Image with overlay resized relative to base image

Sizing relative to the detected region

You can add the region_relative flag (fl_region_relative in URLs) to instruct Cloudinary to size your layers relative to the regions detected by the specified gravity type.

  • The region can be detected faces (g_face, g_faces ), detected OCR text regions (g_ocr_text) or pre-defined custom regions (g_custom).
  • This flag must be used in conjunction with a relative (decimal value) width or height qualifier.

For example, to hide all the faces in an image by covering them with an emoji overlay, where each overlay is sized at 1.3x (130%) of each detected face (l_happy_smiley/c_scale,fl_region_relative,w_1.3/fl_layer_apply,g_faces):

Ruby (cloudinary 1.x):
Copy to clipboard
cl_image_tag("rollercoaster.jpg", :transformation=>[
  {:overlay=>"happy_smiley"},
  {:flags=>"region_relative", :width=>1.3, :crop=>"scale"},
  {:flags=>"layer_apply", :gravity=>"faces"}
  ])
PHP (cloudinary_php 2.x):
Copy to clipboard
(new ImageTag('rollercoaster.jpg'))
  ->overlay(Overlay::source(
  Source::image("happy_smiley")
  ->transformation((new Transformation())
  ->resize(Resize::scale()->width(1.3)
  ->regionRelative()
  ))
  )
  ->position((new Position())
  ->gravity(
  Gravity::focusOn(
  FocusOn::faces()))
  )
  );
PHP (cloudinary_php 1.x (legacy)):
Copy to clipboard
cl_image_tag("rollercoaster.jpg", array("transformation"=>array(
  array("overlay"=>"happy_smiley"),
  array("flags"=>"region_relative", "width"=>"1.3", "crop"=>"scale"),
  array("flags"=>"layer_apply", "gravity"=>"faces")
  )))
Python (cloudinary 1.x):
Copy to clipboard
CloudinaryImage("rollercoaster.jpg").image(transformation=[
  {'overlay': "happy_smiley"},
  {'flags': "region_relative", 'width': "1.3", 'crop': "scale"},
  {'flags': "layer_apply", 'gravity': "faces"}
  ])
Node.js (cloudinary 1.x):
Copy to clipboard
cloudinary.image("rollercoaster.jpg", {transformation: [
  {overlay: "happy_smiley"},
  {flags: "region_relative", width: "1.3", crop: "scale"},
  {flags: "layer_apply", gravity: "faces"}
  ]})
Java (cloudinary 1.x):
Copy to clipboard
cloudinary.url().transformation(new Transformation()
  .overlay(new Layer().publicId("happy_smiley")).chain()
  .flags("region_relative").width(1.3).crop("scale").chain()
  .flags("layer_apply").gravity("faces")).imageTag("rollercoaster.jpg");
JS (@cloudinary/url-gen 1.x):
Copy to clipboard
new CloudinaryImage("rollercoaster.jpg").overlay(
  source(
    image("happy_smiley").transformation(
      new Transformation().resize(scale().width(1.3).regionRelative())
    )
  ).position(new Position().gravity(focusOn(faces())))
);
JS (cloudinary-core 2.x (legacy)):
Copy to clipboard
cloudinary.imageTag('rollercoaster.jpg', {transformation: [
  {overlay: new cloudinary.Layer().publicId("happy_smiley")},
  {flags: "region_relative", width: "1.3", crop: "scale"},
  {flags: "layer_apply", gravity: "faces"}
  ]}).toHtml();
jQuery (cloudinary-jquery 2.x):
Copy to clipboard
$.cloudinary.image("rollercoaster.jpg", {transformation: [
  {overlay: new cloudinary.Layer().publicId("happy_smiley")},
  {flags: "region_relative", width: "1.3", crop: "scale"},
  {flags: "layer_apply", gravity: "faces"}
  ]})
React (@cloudinary/react 1.x):
Copy to clipboard
//React SDK transformations are created using @cloudinary/url-gen.
new CloudinaryImage("rollercoaster.jpg").overlay(
  source(
    image("happy_smiley").transformation(
      new Transformation().resize(scale().width(1.3).regionRelative())
    )
  ).position(new Position().gravity(focusOn(faces())))
);
React (cloudinary-react 1.x):
Copy to clipboard
<Image publicId="rollercoaster.jpg" >
  <Transformation overlay="happy_smiley" />
  <Transformation flags="region_relative" width="1.3" crop="scale" />
  <Transformation flags="layer_apply" gravity="faces" />
</Image>
Vue.js (cloudinary-vue 1.x):
Copy to clipboard
<cld-image public-id="rollercoaster.jpg" >
  <cld-transformation :overlay="happy_smiley" />
  <cld-transformation flags="region_relative" width="1.3" crop="scale" />
  <cld-transformation flags="layer_apply" gravity="faces" />
</cld-image>
Angular (@cloudinary/ng 1.x):
Copy to clipboard
//Angular SDK transformations are created using @cloudinary/url-gen.
new CloudinaryImage("rollercoaster.jpg").overlay(
  source(
    image("happy_smiley").transformation(
      new Transformation().resize(scale().width(1.3).regionRelative())
    )
  ).position(new Position().gravity(focusOn(faces())))
);
Angular (@cloudinary/angular-5.x 1.x (legacy)):
Copy to clipboard
<cl-image public-id="rollercoaster.jpg" >
  <cl-transformation overlay="happy_smiley">
  </cl-transformation>
  <cl-transformation flags="region_relative" width="1.3" crop="scale">
  </cl-transformation>
  <cl-transformation flags="layer_apply" gravity="faces">
  </cl-transformation>
</cl-image>
.NET (CloudinaryDotNet 1.x):
Copy to clipboard
cloudinary.Api.UrlImgUp.Transform(new Transformation()
  .Overlay(new Layer().PublicId("happy_smiley")).Chain()
  .Flags("region_relative").Width(1.3).Crop("scale").Chain()
  .Flags("layer_apply").Gravity("faces")).BuildImageTag("rollercoaster.jpg")
iOS (cloudinary 3.x):
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation()
  .setOverlay("happy_smiley").chain()
  .setFlags("region_relative").setWidth(1.3).setCrop("scale").chain()
  .setFlags("layer_apply").setGravity("faces")).generate("rollercoaster.jpg")!, cloudinary: cloudinary)
Android (cloudinary-android 1.x):
Copy to clipboard
MediaManager.get().url().transformation(new Transformation()
  .overlay(new Layer().publicId("happy_smiley")).chain()
  .flags("region_relative").width(1.3).crop("scale").chain()
  .flags("layer_apply").gravity("faces")).generate("rollercoaster.jpg");
Kotlin (kotlin-url-gen 1.x):
Copy to clipboard
cloudinary.image {
  publicId("rollercoaster.jpg")
   overlay(Overlay.source(
  Source.image("happy_smiley") {
   transformation(Transformation {
   resize(Resize.scale() { width(1.3F)
   regionRelative()
   }) })
   }) {
   position(Position() {
   gravity(
  Gravity.focusOn(
  FocusOn.faces()))
   })
   }) 
}.generate()
Hide faces in an image with emojis

Text layer options

Text layers can be customized in a variety of ways, such as applying CSS-like styles, adding line breaks, applying special characters, custom fonts, and more.

Styling parameters

In addition to the required font family and font size values of the text layer, a variety of optional CSS-like styles are supported, such as decoration, alignment, letter spacing and more. For a full list, see the Styling parameters table in the reference guide.

The Cloudinary SDK helper methods support supplying the values as an array of mapped values or as a serialized string of values. For example, in Ruby (other frameworks use similar syntax):
overlay: { text: 'Hello World', font_family: 'Arial', font_size: 18, font_weight: 'bold', font_style: 'italic', letter_spacing: 4 }

For example, to overlay the text string "Flowers" in Verdana bold with a size of 75 pixels, underlined, and with 14 pixels spacing between the letters: l_text:verdana_75_bold_underline_letter_spacing_14:Flowers:

Ruby (cloudinary 1.x):
Copy to clipboard
cl_image_tag("flowers.jpg", :transformation=>[
  {:width=>500, :crop=>"scale"},
  {:overlay=>{:font_family=>"Verdana", :font_size=>75, :font_weight=>"bold", :text_decoration=>"underline", :letter_spacing=>14, :text=>"Flowers"}},
  {:flags=>"layer_apply"}
  ])
PHP (cloudinary_php 2.x):
Copy to clipboard
(new ImageTag('flowers.jpg'))
  ->resize(Resize::scale()->width(500))
  ->overlay(Overlay::source(
  Source::text("Flowers",(new TextStyle("Verdana",75))
  ->fontWeight(
  FontWeight::bold())
  ->textDecoration(
  TextDecoration::underline())
->letterSpacing(14))));
PHP (cloudinary_php 1.x (legacy)):
Copy to clipboard
cl_image_tag("flowers.jpg", array("transformation"=>array(
  array("width"=>500, "crop"=>"scale"),
  array("overlay"=>array("font_family"=>"Verdana", "font_size"=>75, "font_weight"=>"bold", "text_decoration"=>"underline", "letter_spacing"=>14, "text"=>"Flowers")),
  array("flags"=>"layer_apply")
  )))
Python (cloudinary 1.x):
Copy to clipboard
CloudinaryImage("flowers.jpg").image(transformation=[
  {'width': 500, 'crop': "scale"},
  {'overlay': {'font_family': "Verdana", 'font_size': 75, 'font_weight': "bold", 'text_decoration': "underline", 'letter_spacing': 14, 'text': "Flowers"}},
  {'flags': "layer_apply"}
  ])
Node.js (cloudinary 1.x):
Copy to clipboard
cloudinary.image("flowers.jpg", {transformation: [
  {width: 500, crop: "scale"},
  {overlay: {font_family: "Verdana", font_size: 75, font_weight: "bold", text_decoration: "underline", letter_spacing: 14, text: "Flowers"}},
  {flags: "layer_apply"}
  ]})
Java (cloudinary 1.x):
Copy to clipboard
cloudinary.url().transformation(new Transformation()
  .width(500).crop("scale").chain()
  .overlay(new TextLayer().fontFamily("Verdana").fontSize(75).fontWeight("bold").textDecoration("underline").letterSpacing(14).text("Flowers")).chain()
  .flags("layer_apply")).imageTag("flowers.jpg");
JS (@cloudinary/url-gen 1.x):
Copy to clipboard
new CloudinaryImage("flowers.jpg").resize(scale().width(500)).overlay(
  source(
    text(
      "Flowers",
      new TextStyle("Verdana", 75)
        .fontWeight("bold")
        .textDecoration("underline")
        .letterSpacing(14)
    )
  )
);
JS (cloudinary-core 2.x (legacy)):
Copy to clipboard
cloudinary.imageTag('flowers.jpg', {transformation: [
  {width: 500, crop: "scale"},
  {overlay: new cloudinary.TextLayer().fontFamily("Verdana").fontSize(75).fontWeight("bold").textDecoration("underline").letterSpacing(14).text("Flowers")},
  {flags: "layer_apply"}
  ]}).toHtml();
jQuery (cloudinary-jquery 2.x):
Copy to clipboard
$.cloudinary.image("flowers.jpg", {transformation: [
  {width: 500, crop: "scale"},
  {overlay: new cloudinary.TextLayer().fontFamily("Verdana").fontSize(75).fontWeight("bold").textDecoration("underline").letterSpacing(14).text("Flowers")},
  {flags: "layer_apply"}
  ]})
React (@cloudinary/react 1.x):
Copy to clipboard
//React SDK transformations are created using @cloudinary/url-gen.
new CloudinaryImage("flowers.jpg").resize(scale().width(500)).overlay(
  source(
    text(
      "Flowers",
      new TextStyle("Verdana", 75)
        .fontWeight("bold")
        .textDecoration("underline")
        .letterSpacing(14)
    )
  )
);
React (cloudinary-react 1.x):
Copy to clipboard
<Image publicId="flowers.jpg" >
  <Transformation width="500" crop="scale" />
  <Transformation overlay={{fontFamily: "Verdana", fontSize: 75, fontWeight: "bold", textDecoration: "underline", letterSpacing: 14, text: "Flowers"}} />
  <Transformation flags="layer_apply" />
</Image>
Vue.js (cloudinary-vue 1.x):
Copy to clipboard
<cld-image public-id="flowers.jpg" >
  <cld-transformation width="500" crop="scale" />
  <cld-transformation :overlay="{fontFamily: 'Verdana', fontSize: 75, fontWeight: 'bold', textDecoration: 'underline', letterSpacing: 14, text: 'Flowers'}" />
  <cld-transformation flags="layer_apply" />
</cld-image>
Angular (@cloudinary/ng 1.x):
Copy to clipboard
//Angular SDK transformations are created using @cloudinary/url-gen.
new CloudinaryImage("flowers.jpg").resize(scale().width(500)).overlay(
  source(
    text(
      "Flowers",
      new TextStyle("Verdana", 75)
        .fontWeight("bold")
        .textDecoration("underline")
        .letterSpacing(14)
    )
  )
);
Angular (@cloudinary/angular-5.x 1.x (legacy)):
Copy to clipboard
<cl-image public-id="flowers.jpg" >
  <cl-transformation width="500" crop="scale">
  </cl-transformation>
  <cl-transformation overlay="text:Verdana_75_bold_underline_letter_spacing_14:Flowers">
  </cl-transformation>
  <cl-transformation flags="layer_apply">
  </cl-transformation>
</cl-image>
.NET (CloudinaryDotNet 1.x):
Copy to clipboard
cloudinary.Api.UrlImgUp.Transform(new Transformation()
  .Width(500).Crop("scale").Chain()
  .Overlay(new TextLayer().FontFamily("Verdana").FontSize(75).FontWeight("bold").TextDecoration("underline").LetterSpacing(14).Text("Flowers")).Chain()
  .Flags("layer_apply")).BuildImageTag("flowers.jpg")
iOS (cloudinary 3.x):
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation()
  .setWidth(500).setCrop("scale").chain()
  .setOverlay("text:Verdana_75_bold_underline_letter_spacing_14:Flowers").chain()
  .setFlags("layer_apply")).generate("flowers.jpg")!, cloudinary: cloudinary)
Android (cloudinary-android 1.x):
Copy to clipboard
MediaManager.get().url().transformation(new Transformation()
  .width(500).crop("scale").chain()
  .overlay(new TextLayer().fontFamily("Verdana").fontSize(75).fontWeight("bold").textDecoration("underline").letterSpacing(14).text("Flowers")).chain()
  .flags("layer_apply")).generate("flowers.jpg");
Kotlin (kotlin-url-gen 1.x):
Copy to clipboard
// This code example is not currently available.
Adding text to image

Text color

You can control the color of the text overlay by adding the color property (co in URLs).

Opaque colors can be set as an RGB hex triplet (e.g., co_rgb:3e2222), a 3-digit RGB hex (e.g., co_rgb:777) or a named color (e.g., co_green). By default, if the color property is omitted, the text has a black color.

For example, adding the text string "Cool text" in Times bold with a size of 90 pixels at a distance of 20 pixels from the bottom of the base image, in yellow text (FFFF00):

Ruby (cloudinary 1.x):
Copy to clipboard
cl_image_tag("flowers.jpg", :transformation=>[
  {:width=>500, :crop=>"scale"},
  {:color=>"#FFFF00", :overlay=>{:font_family=>"Times", :font_size=>90, :font_weight=>"bold", :text=>"Cool%2520text"}},
  {:flags=>"layer_apply", :gravity=>"south", :y=>20}
  ])
PHP (cloudinary_php 2.x):
Copy to clipboard
(new ImageTag('flowers.jpg'))
  ->resize(Resize::scale()->width(500))
  ->overlay(Overlay::source(
  Source::text("Cool%20text",(new TextStyle("Times",90))
  ->fontWeight(
  FontWeight::bold())
  )
  ->textColor(Color::rgb("FFFF00"))
  )
  ->position((new Position())
  ->gravity(
  Gravity::compass(
  Compass::south()))
->offsetY(20))
  );
PHP (cloudinary_php 1.x (legacy)):
Copy to clipboard
cl_image_tag("flowers.jpg", array("transformation"=>array(
  array("width"=>500, "crop"=>"scale"),
  array("color"=>"#FFFF00", "overlay"=>array("font_family"=>"Times", "font_size"=>90, "font_weight"=>"bold", "text"=>"Cool%2520text")),
  array("flags"=>"layer_apply", "gravity"=>"south", "y"=>20)
  )))
Python (cloudinary 1.x):
Copy to clipboard
CloudinaryImage("flowers.jpg").image(transformation=[
  {'width': 500, 'crop': "scale"},
  {'color': "#FFFF00", 'overlay': {'font_family': "Times", 'font_size': 90, 'font_weight': "bold", 'text': "Cool%2520text"}},
  {'flags': "layer_apply", 'gravity': "south", 'y': 20}
  ])
Node.js (cloudinary 1.x):
Copy to clipboard
cloudinary.image("flowers.jpg", {transformation: [
  {width: 500, crop: "scale"},
  {color: "#FFFF00", overlay: {font_family: "Times", font_size: 90, font_weight: "bold", text: "Cool%2520text"}},
  {flags: "layer_apply", gravity: "south", y: 20}
  ]})
Java (cloudinary 1.x):
Copy to clipboard
cloudinary.url().transformation(new Transformation()
  .width(500).crop("scale").chain()
  .color("#FFFF00").overlay(new TextLayer().fontFamily("Times").fontSize(90).fontWeight("bold").text("Cool%2520text")).chain()
  .flags("layer_apply").gravity("south").y(20)).imageTag("flowers.jpg");
JS (@cloudinary/url-gen 1.x):
Copy to clipboard
new CloudinaryImage("flowers.jpg").resize(scale().width(500)).overlay(
  source(
    text(
      "Cool%20text",
      new TextStyle("Times", 90).fontWeight("bold")
    ).textColor("#FFFF00")
  ).position(
    new Position()
      .gravity(compass("south"))
      .offsetY(20)
  )
);
JS (cloudinary-core 2.x (legacy)):
Copy to clipboard
cloudinary.imageTag('flowers.jpg', {transformation: [
  {width: 500, crop: "scale"},
  {color: "#FFFF00", overlay: new cloudinary.TextLayer().fontFamily("Times").fontSize(90).fontWeight("bold").text("Cool%2520text")},
  {flags: "layer_apply", gravity: "south", y: 20}
  ]}).toHtml();
jQuery (cloudinary-jquery 2.x):
Copy to clipboard
$.cloudinary.image("flowers.jpg", {transformation: [
  {width: 500, crop: "scale"},
  {color: "#FFFF00", overlay: new cloudinary.TextLayer().fontFamily("Times").fontSize(90).fontWeight("bold").text("Cool%2520text")},
  {flags: "layer_apply", gravity: "south", y: 20}
  ]})
React (@cloudinary/react 1.x):
Copy to clipboard
//React SDK transformations are created using @cloudinary/url-gen.
new CloudinaryImage("flowers.jpg").resize(scale().width(500)).overlay(
  source(
    text(
      "Cool%20text",
      new TextStyle("Times", 90).fontWeight("bold")
    ).textColor("#FFFF00")
  ).position(
    new Position()
      .gravity(compass("south"))
      .offsetY(20)
  )
);
React (cloudinary-react 1.x):
Copy to clipboard
<Image publicId="flowers.jpg" >
  <Transformation width="500" crop="scale" />
  <Transformation color="#FFFF00" overlay={{fontFamily: "Times", fontSize: 90, fontWeight: "bold", text: "Cool%2520text"}} />
  <Transformation flags="layer_apply" gravity="south" y="20" />
</Image>
Vue.js (cloudinary-vue 1.x):
Copy to clipboard
<cld-image public-id="flowers.jpg" >
  <cld-transformation width="500" crop="scale" />
  <cld-transformation color="#FFFF00" :overlay="{fontFamily: 'Times', fontSize: 90, fontWeight: 'bold', text: 'Cool%2520text'}" />
  <cld-transformation flags="layer_apply" gravity="south" y="20" />
</cld-image>
Angular (@cloudinary/ng 1.x):
Copy to clipboard
//Angular SDK transformations are created using @cloudinary/url-gen.
new CloudinaryImage("flowers.jpg").resize(scale().width(500)).overlay(
  source(
    text(
      "Cool%20text",
      new TextStyle("Times", 90).fontWeight("bold")
    ).textColor("#FFFF00")
  ).position(
    new Position()
      .gravity(compass("south"))
      .offsetY(20)
  )
);
Angular (@cloudinary/angular-5.x 1.x (legacy)):
Copy to clipboard
<cl-image public-id="flowers.jpg" >
  <cl-transformation width="500" crop="scale">
  </cl-transformation>
  <cl-transformation color="#FFFF00" overlay="text:Times_90_bold:Cool%2520text">
  </cl-transformation>
  <cl-transformation flags="layer_apply" gravity="south" y="20">
  </cl-transformation>
</cl-image>
.NET (CloudinaryDotNet 1.x):
Copy to clipboard
cloudinary.Api.UrlImgUp.Transform(new Transformation()
  .Width(500).Crop("scale").Chain()
  .Color("#FFFF00").Overlay(new TextLayer().FontFamily("Times").FontSize(90).FontWeight("bold").Text("Cool%2520text")).Chain()
  .Flags("layer_apply").Gravity("south").Y(20)).BuildImageTag("flowers.jpg")
iOS (cloudinary 3.x):
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation()
  .setWidth(500).setCrop("scale").chain()
  .setColor("#FFFF00").setOverlay("text:Times_90_bold:Cool%2520text").chain()
  .setFlags("layer_apply").setGravity("south").setY(20)).generate("flowers.jpg")!, cloudinary: cloudinary)
Android (cloudinary-android 1.x):
Copy to clipboard
MediaManager.get().url().transformation(new Transformation()
  .width(500).crop("scale").chain()
  .color("#FFFF00").overlay(new TextLayer().fontFamily("Times").fontSize(90).fontWeight("bold").text("Cool%2520text")).chain()
  .flags("layer_apply").gravity("south").y(20)).generate("flowers.jpg");
Kotlin (kotlin-url-gen 1.x):
Copy to clipboard
// This code example is not currently available.
'Cool text' added to image

You can also use a 4-digit or 8-digit RGBA hex quadruplet for the color, where the 4th hex value represents the alpha (opacity) value (e.g., co_rgb:3e222240 results in 25% opacity).

The example below uses the same text string "Cool text" in Times bold with a size of 90 pixels at a distance of 20 pixels from the bottom of the base image, in yellow text, but this time with an opacity of 50% (FFFF0080):

Ruby (cloudinary 1.x):
Copy to clipboard
cl_image_tag("flowers.jpg", :transformation=>[
  {:width=>500, :crop=>"scale"},
  {:color=>"#FFFF0080", :overlay=>{:font_family=>"Times", :font_size=>90, :font_weight=>"bold", :text=>"Cool%2520text"}},
  {:flags=>"layer_apply", :gravity=>"south", :y=>20}
  ])
PHP (cloudinary_php 2.x):
Copy to clipboard
(new ImageTag('flowers.jpg'))
  ->resize(Resize::scale()->width(500))
  ->overlay(Overlay::source(
  Source::text("Cool%20text",(new TextStyle("Times",90))
  ->fontWeight(
  FontWeight::bold())
  )
  ->textColor(Color::rgb("FFFF0080"))
  )
  ->position((new Position())
  ->gravity(
  Gravity::compass(
  Compass::south()))
->offsetY(20))
  );
PHP (cloudinary_php 1.x (legacy)):
Copy to clipboard
cl_image_tag("flowers.jpg", array("transformation"=>array(
  array("width"=>500, "crop"=>"scale"),
  array("color"=>"#FFFF0080", "overlay"=>array("font_family"=>"Times", "font_size"=>90, "font_weight"=>"bold", "text"=>"Cool%2520text")),
  array("flags"=>"layer_apply", "gravity"=>"south", "y"=>20)
  )))
Python (cloudinary 1.x):
Copy to clipboard
CloudinaryImage("flowers.jpg").image(transformation=[
  {'width': 500, 'crop': "scale"},
  {'color': "#FFFF0080", 'overlay': {'font_family': "Times", 'font_size': 90, 'font_weight': "bold", 'text': "Cool%2520text"}},
  {'flags': "layer_apply", 'gravity': "south", 'y': 20}
  ])
Node.js (cloudinary 1.x):
Copy to clipboard
cloudinary.image("flowers.jpg", {transformation: [
  {width: 500, crop: "scale"},
  {color: "#FFFF0080", overlay: {font_family: "Times", font_size: 90, font_weight: "bold", text: "Cool%2520text"}},
  {flags: "layer_apply", gravity: "south", y: 20}
  ]})
Java (cloudinary 1.x):
Copy to clipboard
cloudinary.url().transformation(new Transformation()
  .width(500).crop("scale").chain()
  .color("#FFFF0080").overlay(new TextLayer().fontFamily("Times").fontSize(90).fontWeight("bold").text("Cool%2520text")).chain()
  .flags("layer_apply").gravity("south").y(20)).imageTag("flowers.jpg");
JS (@cloudinary/url-gen 1.x):
Copy to clipboard
new CloudinaryImage("flowers.jpg").resize(scale().width(500)).overlay(
  source(
    text(
      "Cool%20text",
      new TextStyle("Times", 90).fontWeight("bold")
    ).textColor("#FFFF0080")
  ).position(
    new Position()
      .gravity(compass("south"))
      .offsetY(20)
  )
);
JS (cloudinary-core 2.x (legacy)):
Copy to clipboard
cloudinary.imageTag('flowers.jpg', {transformation: [
  {width: 500, crop: "scale"},
  {color: "#FFFF0080", overlay: new cloudinary.TextLayer().fontFamily("Times").fontSize(90).fontWeight("bold").text("Cool%2520text")},
  {flags: "layer_apply", gravity: "south", y: 20}
  ]}).toHtml();
jQuery (cloudinary-jquery 2.x):
Copy to clipboard
$.cloudinary.image("flowers.jpg", {transformation: [
  {width: 500, crop: "scale"},
  {color: "#FFFF0080", overlay: new cloudinary.TextLayer().fontFamily("Times").fontSize(90).fontWeight("bold").text("Cool%2520text")},
  {flags: "layer_apply", gravity: "south", y: 20}
  ]})
React (@cloudinary/react 1.x):
Copy to clipboard
//React SDK transformations are created using @cloudinary/url-gen.
new CloudinaryImage("flowers.jpg").resize(scale().width(500)).overlay(
  source(
    text(
      "Cool%20text",
      new TextStyle("Times", 90).fontWeight("bold")
    ).textColor("#FFFF0080")
  ).position(
    new Position()
      .gravity(compass("south"))
      .offsetY(20)
  )
);
React (cloudinary-react 1.x):
Copy to clipboard
<Image publicId="flowers.jpg" >
  <Transformation width="500" crop="scale" />
  <Transformation color="#FFFF0080" overlay={{fontFamily: "Times", fontSize: 90, fontWeight: "bold", text: "Cool%2520text"}} />
  <Transformation flags="layer_apply" gravity="south" y="20" />
</Image>
Vue.js (cloudinary-vue 1.x):
Copy to clipboard
<cld-image public-id="flowers.jpg" >
  <cld-transformation width="500" crop="scale" />
  <cld-transformation color="#FFFF0080" :overlay="{fontFamily: 'Times', fontSize: 90, fontWeight: 'bold', text: 'Cool%2520text'}" />
  <cld-transformation flags="layer_apply" gravity="south" y="20" />
</cld-image>
Angular (@cloudinary/ng 1.x):
Copy to clipboard
//Angular SDK transformations are created using @cloudinary/url-gen.
new CloudinaryImage("flowers.jpg").resize(scale().width(500)).overlay(
  source(
    text(
      "Cool%20text",
      new TextStyle("Times", 90).fontWeight("bold")
    ).textColor("#FFFF0080")
  ).position(
    new Position()
      .gravity(compass("south"))
      .offsetY(20)
  )
);
Angular (@cloudinary/angular-5.x 1.x (legacy)):
Copy to clipboard
<cl-image public-id="flowers.jpg" >
  <cl-transformation width="500" crop="scale">
  </cl-transformation>
  <cl-transformation color="#FFFF0080" overlay="text:Times_90_bold:Cool%2520text">
  </cl-transformation>
  <cl-transformation flags="layer_apply" gravity="south" y="20">
  </cl-transformation>
</cl-image>
.NET (CloudinaryDotNet 1.x):
Copy to clipboard
cloudinary.Api.UrlImgUp.Transform(new Transformation()
  .Width(500).Crop("scale").Chain()
  .Color("#FFFF0080").Overlay(new TextLayer().FontFamily("Times").FontSize(90).FontWeight("bold").Text("Cool%2520text")).Chain()
  .Flags("layer_apply").Gravity("south").Y(20)).BuildImageTag("flowers.jpg")
iOS (cloudinary 3.x):
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation()
  .setWidth(500).setCrop("scale").chain()
  .setColor("#FFFF0080").setOverlay("text:Times_90_bold:Cool%2520text").chain()
  .setFlags("layer_apply").setGravity("south").setY(20)).generate("flowers.jpg")!, cloudinary: cloudinary)
Android (cloudinary-android 1.x):
Copy to clipboard
MediaManager.get().url().transformation(new Transformation()
  .width(500).crop("scale").chain()
  .color("#FFFF0080").overlay(new TextLayer().fontFamily("Times").fontSize(90).fontWeight("bold").text("Cool%2520text")).chain()
  .flags("layer_apply").gravity("south").y(20)).generate("flowers.jpg");
Kotlin (kotlin-url-gen 1.x):
Copy to clipboard
// This code example is not currently available.
Semi-transparent 'Cool text' added to image

Multi-line text

You can manually break lines of text by separating each line of text with the newline character (%0A). For example, adding the text string "Cool text" in Verdana bold with a size of 50 pixels at a distance of 10 pixels from the left border of the base image, where each word appears on a new line:

Ruby (cloudinary 1.x):
Copy to clipboard
cl_image_tag("flowers.jpg", :transformation=>[
  {:width=>500, :crop=>"scale"},
  {:overlay=>{:font_family=>"Verdana", :font_size=>50, :font_weight=>"bold", :text=>"Cool%250Atext"}},
  {:flags=>"layer_apply", :gravity=>"west", :x=>10}
  ])
PHP (cloudinary_php 2.x):
Copy to clipboard
(new ImageTag('flowers.jpg'))
  ->resize(Resize::scale()->width(500))
  ->overlay(Overlay::source(
  Source::text("Cool%0Atext",(new TextStyle("Verdana",50))
  ->fontWeight(
  FontWeight::bold())
  ))
  ->position((new Position())
  ->gravity(
  Gravity::compass(
  Compass::west()))
->offsetX(10))
  );
PHP (cloudinary_php 1.x (legacy)):
Copy to clipboard
cl_image_tag("flowers.jpg", array("transformation"=>array(
  array("width"=>500, "crop"=>"scale"),
  array("overlay"=>array("font_family"=>"Verdana", "font_size"=>50, "font_weight"=>"bold", "text"=>"Cool%250Atext")),
  array("flags"=>"layer_apply", "gravity"=>"west", "x"=>10)
  )))
Python (cloudinary 1.x):
Copy to clipboard
CloudinaryImage("flowers.jpg").image(transformation=[
  {'width': 500, 'crop': "scale"},
  {'overlay': {'font_family': "Verdana", 'font_size': 50, 'font_weight': "bold", 'text': "Cool%250Atext"}},
  {'flags': "layer_apply", 'gravity': "west", 'x': 10}
  ])
Node.js (cloudinary 1.x):
Copy to clipboard
cloudinary.image("flowers.jpg", {transformation: [
  {width: 500, crop: "scale"},
  {overlay: {font_family: "Verdana", font_size: 50, font_weight: "bold", text: "Cool%250Atext"}},
  {flags: "layer_apply", gravity: "west", x: 10}
  ]})
Java (cloudinary 1.x):
Copy to clipboard
cloudinary.url().transformation(new Transformation()
  .width(500).crop("scale").chain()
  .overlay(new TextLayer().fontFamily("Verdana").fontSize(50).fontWeight("bold").text("Cool%250Atext")).chain()
  .flags("layer_apply").gravity("west").x(10)).imageTag("flowers.jpg");
JS (@cloudinary/url-gen 1.x):
Copy to clipboard
new CloudinaryImage("flowers.jpg").resize(scale().width(500)).overlay(
  source(
    text("Cool%0Atext", new TextStyle("Verdana", 50).fontWeight("bold"))
  ).position(
    new Position()
      .gravity(compass("west"))
      .offsetX(10)
  )
);
JS (cloudinary-core 2.x (legacy)):
Copy to clipboard
cloudinary.imageTag('flowers.jpg', {transformation: [
  {width: 500, crop: "scale"},
  {overlay: new cloudinary.TextLayer().fontFamily("Verdana").fontSize(50).fontWeight("bold").text("Cool%250Atext")},
  {flags: "layer_apply", gravity: "west", x: 10}
  ]}).toHtml();
jQuery (cloudinary-jquery 2.x):
Copy to clipboard
$.cloudinary.image("flowers.jpg", {transformation: [
  {width: 500, crop: "scale"},
  {overlay: new cloudinary.TextLayer().fontFamily("Verdana").fontSize(50).fontWeight("bold").text("Cool%250Atext")},
  {flags: "layer_apply", gravity: "west", x: 10}
  ]})
React (@cloudinary/react 1.x):
Copy to clipboard
//React SDK transformations are created using @cloudinary/url-gen.
new CloudinaryImage("flowers.jpg").resize(scale().width(500)).overlay(
  source(
    text("Cool%0Atext", new TextStyle("Verdana", 50).fontWeight("bold"))
  ).position(
    new Position()
      .gravity(compass("west"))
      .offsetX(10)
  )
);
React (cloudinary-react 1.x):
Copy to clipboard
<Image publicId="flowers.jpg" >
  <Transformation width="500" crop="scale" />
  <Transformation overlay={{fontFamily: "Verdana", fontSize: 50, fontWeight: "bold", text: "Cool%250Atext"}} />
  <Transformation flags="layer_apply" gravity="west" x="10" />
</Image>
Vue.js (cloudinary-vue 1.x):
Copy to clipboard
<cld-image public-id="flowers.jpg" >
  <cld-transformation width="500" crop="scale" />
  <cld-transformation :overlay="{fontFamily: 'Verdana', fontSize: 50, fontWeight: 'bold', text: 'Cool%250Atext'}" />
  <cld-transformation flags="layer_apply" gravity="west" x="10" />
</cld-image>
Angular (@cloudinary/ng 1.x):
Copy to clipboard
//Angular SDK transformations are created using @cloudinary/url-gen.
new CloudinaryImage("flowers.jpg").resize(scale().width(500)).overlay(
  source(
    text("Cool%0Atext", new TextStyle("Verdana", 50).fontWeight("bold"))
  ).position(
    new Position()
      .gravity(compass("west"))
      .offsetX(10)
  )
);
Angular (@cloudinary/angular-5.x 1.x (legacy)):
Copy to clipboard
<cl-image public-id="flowers.jpg" >
  <cl-transformation width="500" crop="scale">
  </cl-transformation>
  <cl-transformation overlay="text:Verdana_50_bold:Cool%250Atext">
  </cl-transformation>
  <cl-transformation flags="layer_apply" gravity="west" x="10">
  </cl-transformation>
</cl-image>
.NET (CloudinaryDotNet 1.x):
Copy to clipboard
cloudinary.Api.UrlImgUp.Transform(new Transformation()
  .Width(500).Crop("scale").Chain()
  .Overlay(new TextLayer().FontFamily("Verdana").FontSize(50).FontWeight("bold").Text("Cool%250Atext")).Chain()
  .Flags("layer_apply").Gravity("west").X(10)).BuildImageTag("flowers.jpg")
iOS (cloudinary 3.x):
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation()
  .setWidth(500).setCrop("scale").chain()
  .setOverlay("text:Verdana_50_bold:Cool%250Atext").chain()
  .setFlags("layer_apply").setGravity("west").setX(10)).generate("flowers.jpg")!, cloudinary: cloudinary)
Android (cloudinary-android 1.x):
Copy to clipboard
MediaManager.get().url().transformation(new Transformation()
  .width(500).crop("scale").chain()
  .overlay(new TextLayer().fontFamily("Verdana").fontSize(50).fontWeight("bold").text("Cool%250Atext")).chain()
  .flags("layer_apply").gravity("west").x(10)).generate("flowers.jpg");
Kotlin (kotlin-url-gen 1.x):
Copy to clipboard
// This code example is not currently available.
'Cool text' added to image with line-break

Auto-line breaks

Cloudinary can also automatically wrap your text into multiple lines based on a specified maximum width for the text string. To do this, apply the fit crop mode to the text layer and specify the width to use for word wrapping. This setting tells Cloudinary to automatically wrap the actual text content onto a new line once the width is reached.

Note
c_fit (Called textFit in the latest major version of some SDKs) is the only 'resize' option that can be used as a qualifier of text overlays.

For example, to add a long text string in bold Neucha font with a size of 26 pixels to the base image that wraps at a width of 400 pixels:

Ruby (cloudinary 1.x):
Copy to clipboard
cl_image_tag("flowers.jpg", :transformation=>[
  {:width=>500, :crop=>"scale"},
  {:overlay=>{:font_family=>"Neucha", :font_size=>26, :font_weight=>"bold", :text=>"Lorem%2520ipsum%2520dolor%2520sit%2520amet%2520consectetur%2520adipisicing%2520elit%2520sed%2520do%2520eiusmod%2520tempor%2520incididunt%2520ut%2520labore%2520et%2520dolore%2520magna%2520aliqua.%2520Ut%2520enim%2520ad%2520minim%2520veniam%2520quis%2520nostrud%2520exercitation%2520ullamco%2520laboris%2520nisi%2520ut%2520aliquip%2520ex%2520ea%2520commodo%2520consequat."}, :width=>400, :crop=>"fit"},
  {:flags=>"layer_apply"}
  ])
PHP (cloudinary_php 2.x):
Copy to clipboard
(new ImageTag('flowers.jpg'))
  ->resize(Resize::scale()->width(500))
  ->overlay(Overlay::source(
  Source::text("Lorem%20ipsum%20dolor%20sit%20amet%20consectetur%20adipisicing%20elit%20sed%20do%20eiusmod%20tempor%20incididunt%20ut%20labore%20et%20dolore%20magna%20aliqua.%20Ut%20enim%20ad%20minim%20veniam%20quis%20nostrud%20exercitation%20ullamco%20laboris%20nisi%20ut%20aliquip%20ex%20ea%20commodo%20consequat.",(new TextStyle("Neucha",26))
  ->fontWeight(
  FontWeight::bold())
  )
  ->transformation((new Transformation())
  ->resize(Resize::fit()->width(400)))
  ));
PHP (cloudinary_php 1.x (legacy)):
Copy to clipboard
cl_image_tag("flowers.jpg", array("transformation"=>array(
  array("width"=>500, "crop"=>"scale"),
  array("overlay"=>array("font_family"=>"Neucha", "font_size"=>26, "font_weight"=>"bold", "text"=>"Lorem%2520ipsum%2520dolor%2520sit%2520amet%2520consectetur%2520adipisicing%2520elit%2520sed%2520do%2520eiusmod%2520tempor%2520incididunt%2520ut%2520labore%2520et%2520dolore%2520magna%2520aliqua.%2520Ut%2520enim%2520ad%2520minim%2520veniam%2520quis%2520nostrud%2520exercitation%2520ullamco%2520laboris%2520nisi%2520ut%2520aliquip%2520ex%2520ea%2520commodo%2520consequat."), "width"=>400, "crop"=>"fit"),
  array("flags"=>"layer_apply")
  )))
Python (cloudinary 1.x):
Copy to clipboard
CloudinaryImage("flowers.jpg").image(transformation=[
  {'width': 500, 'crop': "scale"},
  {'overlay': {'font_family': "Neucha", 'font_size': 26, 'font_weight': "bold", 'text': "Lorem%2520ipsum%2520dolor%2520sit%2520amet%2520consectetur%2520adipisicing%2520elit%2520sed%2520do%2520eiusmod%2520tempor%2520incididunt%2520ut%2520labore%2520et%2520dolore%2520magna%2520aliqua.%2520Ut%2520enim%2520ad%2520minim%2520veniam%2520quis%2520nostrud%2520exercitation%2520ullamco%2520laboris%2520nisi%2520ut%2520aliquip%2520ex%2520ea%2520commodo%2520consequat."}, 'width': 400, 'crop': "fit"},
  {'flags': "layer_apply"}
  ])
Node.js (cloudinary 1.x):
Copy to clipboard
cloudinary.image("flowers.jpg", {transformation: [
  {width: 500, crop: "scale"},
  {overlay: {font_family: "Neucha", font_size: 26, font_weight: "bold", text: "Lorem%2520ipsum%2520dolor%2520sit%2520amet%2520consectetur%2520adipisicing%2520elit%2520sed%2520do%2520eiusmod%2520tempor%2520incididunt%2520ut%2520labore%2520et%2520dolore%2520magna%2520aliqua.%2520Ut%2520enim%2520ad%2520minim%2520veniam%2520quis%2520nostrud%2520exercitation%2520ullamco%2520laboris%2520nisi%2520ut%2520aliquip%2520ex%2520ea%2520commodo%2520consequat."}, width: 400, crop: "fit"},
  {flags: "layer_apply"}
  ]})
Java (cloudinary 1.x):
Copy to clipboard
cloudinary.url().transformation(new Transformation()
  .width(500).crop("scale").chain()
  .overlay(new TextLayer().fontFamily("Neucha").fontSize(26).fontWeight("bold").text("Lorem%2520ipsum%2520dolor%2520sit%2520amet%2520consectetur%2520adipisicing%2520elit%2520sed%2520do%2520eiusmod%2520tempor%2520incididunt%2520ut%2520labore%2520et%2520dolore%2520magna%2520aliqua.%2520Ut%2520enim%2520ad%2520minim%2520veniam%2520quis%2520nostrud%2520exercitation%2520ullamco%2520laboris%2520nisi%2520ut%2520aliquip%2520ex%2520ea%2520commodo%2520consequat.")).width(400).crop("fit").chain()
  .flags("layer_apply")).imageTag("flowers.jpg");
JS (@cloudinary/url-gen 1.x):
Copy to clipboard
new CloudinaryImage("flowers.jpg")
  .resize(scale().width(500))
  .overlay(
    source(
      text(
        "Lorem%20ipsum%20dolor%20sit%20amet%20consectetur%20adipisicing%20elit%20sed%20do%20eiusmod%20tempor%20incididunt%20ut%20labore%20et%20dolore%20magna%20aliqua.%20Ut%20enim%20ad%20minim%20veniam%20quis%20nostrud%20exercitation%20ullamco%20laboris%20nisi%20ut%20aliquip%20ex%20ea%20commodo%20consequat.",
        new TextStyle("Neucha", 26).fontWeight("bold")
      ).transformation(new Transformation().resize(fit().width(400)))
    )
  );
JS (cloudinary-core 2.x (legacy)):
Copy to clipboard
cloudinary.imageTag('flowers.jpg', {transformation: [
  {width: 500, crop: "scale"},
  {overlay: new cloudinary.TextLayer().fontFamily("Neucha").fontSize(26).fontWeight("bold").text("Lorem%2520ipsum%2520dolor%2520sit%2520amet%2520consectetur%2520adipisicing%2520elit%2520sed%2520do%2520eiusmod%2520tempor%2520incididunt%2520ut%2520labore%2520et%2520dolore%2520magna%2520aliqua.%2520Ut%2520enim%2520ad%2520minim%2520veniam%2520quis%2520nostrud%2520exercitation%2520ullamco%2520laboris%2520nisi%2520ut%2520aliquip%2520ex%2520ea%2520commodo%2520consequat."), width: 400, crop: "fit"},
  {flags: "layer_apply"}
  ]}).toHtml();
jQuery (cloudinary-jquery 2.x):
Copy to clipboard
$.cloudinary.image("flowers.jpg", {transformation: [
  {width: 500, crop: "scale"},
  {overlay: new cloudinary.TextLayer().fontFamily("Neucha").fontSize(26).fontWeight("bold").text("Lorem%2520ipsum%2520dolor%2520sit%2520amet%2520consectetur%2520adipisicing%2520elit%2520sed%2520do%2520eiusmod%2520tempor%2520incididunt%2520ut%2520labore%2520et%2520dolore%2520magna%2520aliqua.%2520Ut%2520enim%2520ad%2520minim%2520veniam%2520quis%2520nostrud%2520exercitation%2520ullamco%2520laboris%2520nisi%2520ut%2520aliquip%2520ex%2520ea%2520commodo%2520consequat."), width: 400, crop: "fit"},
  {flags: "layer_apply"}
  ]})
React (@cloudinary/react 1.x):
Copy to clipboard
//React SDK transformations are created using @cloudinary/url-gen.
new CloudinaryImage("flowers.jpg")
  .resize(scale().width(500))
  .overlay(
    source(
      text(
        "Lorem%20ipsum%20dolor%20sit%20amet%20consectetur%20adipisicing%20elit%20sed%20do%20eiusmod%20tempor%20incididunt%20ut%20labore%20et%20dolore%20magna%20aliqua.%20Ut%20enim%20ad%20minim%20veniam%20quis%20nostrud%20exercitation%20ullamco%20laboris%20nisi%20ut%20aliquip%20ex%20ea%20commodo%20consequat.",
        new TextStyle("Neucha", 26).fontWeight("bold")
      ).transformation(new Transformation().resize(fit().width(400)))
    )
  );
React (cloudinary-react 1.x):
Copy to clipboard
<Image publicId="flowers.jpg" >
  <Transformation width="500" crop="scale" />
  <Transformation overlay={{fontFamily: "Neucha", fontSize: 26, fontWeight: "bold", text: "Lorem%2520ipsum%2520dolor%2520sit%2520amet%2520consectetur%2520adipisicing%2520elit%2520sed%2520do%2520eiusmod%2520tempor%2520incididunt%2520ut%2520labore%2520et%2520dolore%2520magna%2520aliqua.%2520Ut%2520enim%2520ad%2520minim%2520veniam%2520quis%2520nostrud%2520exercitation%2520ullamco%2520laboris%2520nisi%2520ut%2520aliquip%2520ex%2520ea%2520commodo%2520consequat."}} width="400" crop="fit" />
  <Transformation flags="layer_apply" />
</Image>
Vue.js (cloudinary-vue 1.x):
Copy to clipboard
<cld-image public-id="flowers.jpg" >
  <cld-transformation width="500" crop="scale" />
  <cld-transformation :overlay="{fontFamily: 'Neucha', fontSize: 26, fontWeight: 'bold', text: 'Lorem%2520ipsum%2520dolor%2520sit%2520amet%2520consectetur%2520adipisicing%2520elit%2520sed%2520do%2520eiusmod%2520tempor%2520incididunt%2520ut%2520labore%2520et%2520dolore%2520magna%2520aliqua.%2520Ut%2520enim%2520ad%2520minim%2520veniam%2520quis%2520nostrud%2520exercitation%2520ullamco%2520laboris%2520nisi%2520ut%2520aliquip%2520ex%2520ea%2520commodo%2520consequat.'}" width="400" crop="fit" />
  <cld-transformation flags="layer_apply" />
</cld-image>
Angular (@cloudinary/ng 1.x):
Copy to clipboard
//Angular SDK transformations are created using @cloudinary/url-gen.
new CloudinaryImage("flowers.jpg")
  .resize(scale().width(500))
  .overlay(
    source(
      text(
        "Lorem%20ipsum%20dolor%20sit%20amet%20consectetur%20adipisicing%20elit%20sed%20do%20eiusmod%20tempor%20incididunt%20ut%20labore%20et%20dolore%20magna%20aliqua.%20Ut%20enim%20ad%20minim%20veniam%20quis%20nostrud%20exercitation%20ullamco%20laboris%20nisi%20ut%20aliquip%20ex%20ea%20commodo%20consequat.",
        new TextStyle("Neucha", 26).fontWeight("bold")
      ).transformation(new Transformation().resize(fit().width(400)))
    )
  );
Angular (@cloudinary/angular-5.x 1.x (legacy)):
Copy to clipboard
<cl-image public-id="flowers.jpg" >
  <cl-transformation width="500" crop="scale">
  </cl-transformation>
  <cl-transformation overlay="text:Neucha_26_bold:Lorem%2520ipsum%2520dolor%2520sit%2520amet%2520consectetur%2520adipisicing%2520elit%2520sed%2520do%2520eiusmod%2520tempor%2520incididunt%2520ut%2520labore%2520et%2520dolore%2520magna%2520aliqua.%2520Ut%2520enim%2520ad%2520minim%2520veniam%2520quis%2520nostrud%2520exercitation%2520ullamco%2520laboris%2520nisi%2520ut%2520aliquip%2520ex%2520ea%2520commodo%2520consequat." width="400" crop="fit">
  </cl-transformation>
  <cl-transformation flags="layer_apply">
  </cl-transformation>
</cl-image>
.NET (CloudinaryDotNet 1.x):
Copy to clipboard
cloudinary.Api.UrlImgUp.Transform(new Transformation()
  .Width(500).Crop("scale").Chain()
  .Overlay(new TextLayer().FontFamily("Neucha").FontSize(26).FontWeight("bold").Text("Lorem%2520ipsum%2520dolor%2520sit%2520amet%2520consectetur%2520adipisicing%2520elit%2520sed%2520do%2520eiusmod%2520tempor%2520incididunt%2520ut%2520labore%2520et%2520dolore%2520magna%2520aliqua.%2520Ut%2520enim%2520ad%2520minim%2520veniam%2520quis%2520nostrud%2520exercitation%2520ullamco%2520laboris%2520nisi%2520ut%2520aliquip%2520ex%2520ea%2520commodo%2520consequat.")).Width(400).Crop("fit").Chain()
  .Flags("layer_apply")).BuildImageTag("flowers.jpg")
iOS (cloudinary 3.x):
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation()
  .setWidth(500).setCrop("scale").chain()
  .setOverlay("text:Neucha_26_bold:Lorem%2520ipsum%2520dolor%2520sit%2520amet%2520consectetur%2520adipisicing%2520elit%2520sed%2520do%2520eiusmod%2520tempor%2520incididunt%2520ut%2520labore%2520et%2520dolore%2520magna%2520aliqua.%2520Ut%2520enim%2520ad%2520minim%2520veniam%2520quis%2520nostrud%2520exercitation%2520ullamco%2520laboris%2520nisi%2520ut%2520aliquip%2520ex%2520ea%2520commodo%2520consequat.").setWidth(400).setCrop("fit").chain()
  .setFlags("layer_apply")).generate("flowers.jpg")!, cloudinary: cloudinary)
Android (cloudinary-android 1.x):
Copy to clipboard
MediaManager.get().url().transformation(new Transformation()
  .width(500).crop("scale").chain()
  .overlay(new TextLayer().fontFamily("Neucha").fontSize(26).fontWeight("bold").text("Lorem%2520ipsum%2520dolor%2520sit%2520amet%2520consectetur%2520adipisicing%2520elit%2520sed%2520do%2520eiusmod%2520tempor%2520incididunt%2520ut%2520labore%2520et%2520dolore%2520magna%2520aliqua.%2520Ut%2520enim%2520ad%2520minim%2520veniam%2520quis%2520nostrud%2520exercitation%2520ullamco%2520laboris%2520nisi%2520ut%2520aliquip%2520ex%2520ea%2520commodo%2520consequat.")).width(400).crop("fit").chain()
  .flags("layer_apply")).generate("flowers.jpg");
Kotlin (kotlin-url-gen 1.x):
Copy to clipboard
// This code example is not currently available.
Multi-line text string

When using the fit (textFit in some SDKs) crop mode, you must specify a width for your text overlay, but height is optional. Line breaks are applied as needed to achieve the requested width and/or height rectangle.

The specified font size of your overlay stays as is, even if the resulting text overlay height exceeds the height of its hosting image. So, if you don't limit the overlay height, the height of the image expands to accommodate large texts:

Ruby (cloudinary 1.x):
Copy to clipboard
cl_image_tag("flowers.jpg", :transformation=>[
  {:width=>500, :crop=>"scale"},
  {:overlay=>{:font_family=>"Neucha", :font_size=>26, :font_weight=>"bold", :text=>"Lorem%2520ipsum%2520dolor%2520sit%2520amet%2520consectetur%2520adipisicing%2520elit%2520sed%2520do%2520eiusmod%2520tempor%2520incididunt%2520ut%2520labore%2520et%2520dolore%2520magna%2520aliqua.%2520Ut%2520enim%2520ad%2520minim%2520veniam%2520quis%2520nostrud%2520exercitation%2520ullamco%2520laboris%2520nisi%2520ut%2520aliquip%2520ex%2520ea%2520commodo%2520consequat.%0D%0A%0D%0ALorem%2520ipsum%2520dolor%2520sit%2520amet%2520consectetur%2520adipisicing%2520elit%2520sed%2520do%2520eiusmod%2520tempor%2520incididunt%2520ut%2520labore%2520et%2520dolore%2520magna%2520aliqua.%2520Ut%2520enim%2520ad%2520minim%2520veniam%2520quis%2520nostrud%2520exercitation%2520ullamco%2520laboris%2520nisi%2520ut%2520aliquip%2520ex%2520ea%2520commodo%2520consequat."}, :width=>400, :crop=>"fit"},
  {:flags=>"layer_apply"}
  ])
PHP (cloudinary_php 2.x):
Copy to clipboard
(new ImageTag('flowers.jpg'))
  ->resize(Resize::scale()->width(500))
  ->overlay(Overlay::source(
  Source::text("Lorem%20ipsum%20dolor%20sit%20amet%20consectetur%20adipisicing%20elit%20sed%20do%20eiusmod%20tempor%20incididunt%20ut%20labore%20et%20dolore%20magna%20aliqua.%20Ut%20enim%20ad%20minim%20veniam%20quis%20nostrud%20exercitation%20ullamco%20laboris%20nisi%20ut%20aliquip%20ex%20ea%20commodo%20consequat.
Lorem%20ipsum%20dolor%20sit%20amet%20consectetur%20adipisicing%20elit%20sed%20do%20eiusmod%20tempor%20incididunt%20ut%20labore%20et%20dolore%20magna%20aliqua.%20Ut%20enim%20ad%20minim%20veniam%20quis%20nostrud%20exercitation%20ullamco%20laboris%20nisi%20ut%20aliquip%20ex%20ea%20commodo%20consequat.",(new TextStyle("Neucha",26))
  ->fontWeight(
  FontWeight::bold())
  )
  ->transformation((new Transformation())
  ->resize(Resize::fit()->width(400)))
  ));
PHP (cloudinary_php 1.x (legacy)):
Copy to clipboard
cl_image_tag("flowers.jpg", array("transformation"=>array(
  array("width"=>500, "crop"=>"scale"),
  array("overlay"=>array("font_family"=>"Neucha", "font_size"=>26, "font_weight"=>"bold", "text"=>"Lorem%2520ipsum%2520dolor%2520sit%2520amet%2520consectetur%2520adipisicing%2520elit%2520sed%2520do%2520eiusmod%2520tempor%2520incididunt%2520ut%2520labore%2520et%2520dolore%2520magna%2520aliqua.%2520Ut%2520enim%2520ad%2520minim%2520veniam%2520quis%2520nostrud%2520exercitation%2520ullamco%2520laboris%2520nisi%2520ut%2520aliquip%2520ex%2520ea%2520commodo%2520consequat.%0D%0A%0D%0ALorem%2520ipsum%2520dolor%2520sit%2520amet%2520consectetur%2520adipisicing%2520elit%2520sed%2520do%2520eiusmod%2520tempor%2520incididunt%2520ut%2520labore%2520et%2520dolore%2520magna%2520aliqua.%2520Ut%2520enim%2520ad%2520minim%2520veniam%2520quis%2520nostrud%2520exercitation%2520ullamco%2520laboris%2520nisi%2520ut%2520aliquip%2520ex%2520ea%2520commodo%2520consequat."), "width"=>400, "crop"=>"fit"),
  array("flags"=>"layer_apply")
  )))
Python (cloudinary 1.x):
Copy to clipboard
CloudinaryImage("flowers.jpg").image(transformation=[
  {'width': 500, 'crop': "scale"},
  {'overlay': {'font_family': "Neucha", 'font_size': 26, 'font_weight': "bold", 'text': "Lorem%2520ipsum%2520dolor%2520sit%2520amet%2520consectetur%2520adipisicing%2520elit%2520sed%2520do%2520eiusmod%2520tempor%2520incididunt%2520ut%2520labore%2520et%2520dolore%2520magna%2520aliqua.%2520Ut%2520enim%2520ad%2520minim%2520veniam%2520quis%2520nostrud%2520exercitation%2520ullamco%2520laboris%2520nisi%2520ut%2520aliquip%2520ex%2520ea%2520commodo%2520consequat.%0D%0A%0D%0ALorem%2520ipsum%2520dolor%2520sit%2520amet%2520consectetur%2520adipisicing%2520elit%2520sed%2520do%2520eiusmod%2520tempor%2520incididunt%2520ut%2520labore%2520et%2520dolore%2520magna%2520aliqua.%2520Ut%2520enim%2520ad%2520minim%2520veniam%2520quis%2520nostrud%2520exercitation%2520ullamco%2520laboris%2520nisi%2520ut%2520aliquip%2520ex%2520ea%2520commodo%2520consequat."}, 'width': 400, 'crop': "fit"},
  {'flags': "layer_apply"}
  ])
Node.js (cloudinary 1.x):
Copy to clipboard
cloudinary.image("flowers.jpg", {transformation: [
  {width: 500, crop: "scale"},
  {overlay: {font_family: "Neucha", font_size: 26, font_weight: "bold", text: "Lorem%2520ipsum%2520dolor%2520sit%2520amet%2520consectetur%2520adipisicing%2520elit%2520sed%2520do%2520eiusmod%2520tempor%2520incididunt%2520ut%2520labore%2520et%2520dolore%2520magna%2520aliqua.%2520Ut%2520enim%2520ad%2520minim%2520veniam%2520quis%2520nostrud%2520exercitation%2520ullamco%2520laboris%2520nisi%2520ut%2520aliquip%2520ex%2520ea%2520commodo%2520consequat.%0D%0A%0D%0ALorem%2520ipsum%2520dolor%2520sit%2520amet%2520consectetur%2520adipisicing%2520elit%2520sed%2520do%2520eiusmod%2520tempor%2520incididunt%2520ut%2520labore%2520et%2520dolore%2520magna%2520aliqua.%2520Ut%2520enim%2520ad%2520minim%2520veniam%2520quis%2520nostrud%2520exercitation%2520ullamco%2520laboris%2520nisi%2520ut%2520aliquip%2520ex%2520ea%2520commodo%2520consequat."}, width: 400, crop: "fit"},
  {flags: "layer_apply"}
  ]})
Java (cloudinary 1.x):
Copy to clipboard
cloudinary.url().transformation(new Transformation()
  .width(500).crop("scale").chain()
  .overlay(new TextLayer().fontFamily("Neucha").fontSize(26).fontWeight("bold").text("Lorem%2520ipsum%2520dolor%2520sit%2520amet%2520consectetur%2520adipisicing%2520elit%2520sed%2520do%2520eiusmod%2520tempor%2520incididunt%2520ut%2520labore%2520et%2520dolore%2520magna%2520aliqua.%2520Ut%2520enim%2520ad%2520minim%2520veniam%2520quis%2520nostrud%2520exercitation%2520ullamco%2520laboris%2520nisi%2520ut%2520aliquip%2520ex%2520ea%2520commodo%2520consequat.%0D%0A%0D%0ALorem%2520ipsum%2520dolor%2520sit%2520amet%2520consectetur%2520adipisicing%2520elit%2520sed%2520do%2520eiusmod%2520tempor%2520incididunt%2520ut%2520labore%2520et%2520dolore%2520magna%2520aliqua.%2520Ut%2520enim%2520ad%2520minim%2520veniam%2520quis%2520nostrud%2520exercitation%2520ullamco%2520laboris%2520nisi%2520ut%2520aliquip%2520ex%2520ea%2520commodo%2520consequat.")).width(400).crop("fit").chain()
  .flags("layer_apply")).imageTag("flowers.jpg");
JS (@cloudinary/url-gen 1.x):
Copy to clipboard
new CloudinaryImage('flowers.jpg')
  .resize(scale().width(500))
  .overlay(source(
  text("Lorem%20ipsum%20dolor%20sit%20amet%20consectetur%20adipisicing%20elit%20sed%20do%20eiusmod%20tempor%20incididunt%20ut%20labore%20et%20dolore%20magna%20aliqua.%20Ut%20enim%20ad%20minim%20veniam%20quis%20nostrud%20exercitation%20ullamco%20laboris%20nisi%20ut%20aliquip%20ex%20ea%20commodo%20consequat.
Lorem%20ipsum%20dolor%20sit%20amet%20consectetur%20adipisicing%20elit%20sed%20do%20eiusmod%20tempor%20incididunt%20ut%20labore%20et%20dolore%20magna%20aliqua.%20Ut%20enim%20ad%20minim%20veniam%20quis%20nostrud%20exercitation%20ullamco%20laboris%20nisi%20ut%20aliquip%20ex%20ea%20commodo%20consequat.",new TextStyle("Neucha",26)
  .fontWeight('bold')
  )
  .transformation(new Transformation()
  .resize(fit().width(400)))
  ));
JS (cloudinary-core 2.x (legacy)):
Copy to clipboard
cloudinary.imageTag('flowers.jpg', {transformation: [
  {width: 500, crop: "scale"},
  {overlay: new cloudinary.TextLayer().fontFamily("Neucha").fontSize(26).fontWeight("bold").text("Lorem%2520ipsum%2520dolor%2520sit%2520amet%2520consectetur%2520adipisicing%2520elit%2520sed%2520do%2520eiusmod%2520tempor%2520incididunt%2520ut%2520labore%2520et%2520dolore%2520magna%2520aliqua.%2520Ut%2520enim%2520ad%2520minim%2520veniam%2520quis%2520nostrud%2520exercitation%2520ullamco%2520laboris%2520nisi%2520ut%2520aliquip%2520ex%2520ea%2520commodo%2520consequat.%0D%0A%0D%0ALorem%2520ipsum%2520dolor%2520sit%2520amet%2520consectetur%2520adipisicing%2520elit%2520sed%2520do%2520eiusmod%2520tempor%2520incididunt%2520ut%2520labore%2520et%2520dolore%2520magna%2520aliqua.%2520Ut%2520enim%2520ad%2520minim%2520veniam%2520quis%2520nostrud%2520exercitation%2520ullamco%2520laboris%2520nisi%2520ut%2520aliquip%2520ex%2520ea%2520commodo%2520consequat."), width: 400, crop: "fit"},
  {flags: "layer_apply"}
  ]}).toHtml();
jQuery (cloudinary-jquery 2.x):
Copy to clipboard
$.cloudinary.image("flowers.jpg", {transformation: [
  {width: 500, crop: "scale"},
  {overlay: new cloudinary.TextLayer().fontFamily("Neucha").fontSize(26).fontWeight("bold").text("Lorem%2520ipsum%2520dolor%2520sit%2520amet%2520consectetur%2520adipisicing%2520elit%2520sed%2520do%2520eiusmod%2520tempor%2520incididunt%2520ut%2520labore%2520et%2520dolore%2520magna%2520aliqua.%2520Ut%2520enim%2520ad%2520minim%2520veniam%2520quis%2520nostrud%2520exercitation%2520ullamco%2520laboris%2520nisi%2520ut%2520aliquip%2520ex%2520ea%2520commodo%2520consequat.%0D%0A%0D%0ALorem%2520ipsum%2520dolor%2520sit%2520amet%2520consectetur%2520adipisicing%2520elit%2520sed%2520do%2520eiusmod%2520tempor%2520incididunt%2520ut%2520labore%2520et%2520dolore%2520magna%2520aliqua.%2520Ut%2520enim%2520ad%2520minim%2520veniam%2520quis%2520nostrud%2520exercitation%2520ullamco%2520laboris%2520nisi%2520ut%2520aliquip%2520ex%2520ea%2520commodo%2520consequat."), width: 400, crop: "fit"},
  {flags: "layer_apply"}
  ]})
React (@cloudinary/react 1.x):
Copy to clipboard
//React SDK transformations are created using @cloudinary/url-gen.
new CloudinaryImage('flowers.jpg')
  .resize(scale().width(500))
  .overlay(source(
  text("Lorem%20ipsum%20dolor%20sit%20amet%20consectetur%20adipisicing%20elit%20sed%20do%20eiusmod%20tempor%20incididunt%20ut%20labore%20et%20dolore%20magna%20aliqua.%20Ut%20enim%20ad%20minim%20veniam%20quis%20nostrud%20exercitation%20ullamco%20laboris%20nisi%20ut%20aliquip%20ex%20ea%20commodo%20consequat.
Lorem%20ipsum%20dolor%20sit%20amet%20consectetur%20adipisicing%20elit%20sed%20do%20eiusmod%20tempor%20incididunt%20ut%20labore%20et%20dolore%20magna%20aliqua.%20Ut%20enim%20ad%20minim%20veniam%20quis%20nostrud%20exercitation%20ullamco%20laboris%20nisi%20ut%20aliquip%20ex%20ea%20commodo%20consequat.",new TextStyle("Neucha",26)
  .fontWeight('bold')
  )
  .transformation(new Transformation()
  .resize(fit().width(400)))
  ));
React (cloudinary-react 1.x):
Copy to clipboard
<Image publicId="flowers.jpg" >
  <Transformation width="500" crop="scale" />
  <Transformation overlay={{fontFamily: "Neucha", fontSize: 26, fontWeight: "bold", text: "Lorem%2520ipsum%2520dolor%2520sit%2520amet%2520consectetur%2520adipisicing%2520elit%2520sed%2520do%2520eiusmod%2520tempor%2520incididunt%2520ut%2520labore%2520et%2520dolore%2520magna%2520aliqua.%2520Ut%2520enim%2520ad%2520minim%2520veniam%2520quis%2520nostrud%2520exercitation%2520ullamco%2520laboris%2520nisi%2520ut%2520aliquip%2520ex%2520ea%2520commodo%2520consequat.%0D%0A%0D%0ALorem%2520ipsum%2520dolor%2520sit%2520amet%2520consectetur%2520adipisicing%2520elit%2520sed%2520do%2520eiusmod%2520tempor%2520incididunt%2520ut%2520labore%2520et%2520dolore%2520magna%2520aliqua.%2520Ut%2520enim%2520ad%2520minim%2520veniam%2520quis%2520nostrud%2520exercitation%2520ullamco%2520laboris%2520nisi%2520ut%2520aliquip%2520ex%2520ea%2520commodo%2520consequat."}} width="400" crop="fit" />
  <Transformation flags="layer_apply" />
</Image>
Vue.js (cloudinary-vue 1.x):
Copy to clipboard
<cld-image public-id="flowers.jpg" >
  <cld-transformation width="500" crop="scale" />
  <cld-transformation :overlay="{fontFamily: 'Neucha', fontSize: 26, fontWeight: 'bold', text: 'Lorem%2520ipsum%2520dolor%2520sit%2520amet%2520consectetur%2520adipisicing%2520elit%2520sed%2520do%2520eiusmod%2520tempor%2520incididunt%2520ut%2520labore%2520et%2520dolore%2520magna%2520aliqua.%2520Ut%2520enim%2520ad%2520minim%2520veniam%2520quis%2520nostrud%2520exercitation%2520ullamco%2520laboris%2520nisi%2520ut%2520aliquip%2520ex%2520ea%2520commodo%2520consequat.%0D%0A%0D%0ALorem%2520ipsum%2520dolor%2520sit%2520amet%2520consectetur%2520adipisicing%2520elit%2520sed%2520do%2520eiusmod%2520tempor%2520incididunt%2520ut%2520labore%2520et%2520dolore%2520magna%2520aliqua.%2520Ut%2520enim%2520ad%2520minim%2520veniam%2520quis%2520nostrud%2520exercitation%2520ullamco%2520laboris%2520nisi%2520ut%2520aliquip%2520ex%2520ea%2520commodo%2520consequat.'}" width="400" crop="fit" />
  <cld-transformation flags="layer_apply" />
</cld-image>
Angular (@cloudinary/ng 1.x):
Copy to clipboard
//Angular SDK transformations are created using @cloudinary/url-gen.
new CloudinaryImage('flowers.jpg')
  .resize(scale().width(500))
  .overlay(source(
  text("Lorem%20ipsum%20dolor%20sit%20amet%20consectetur%20adipisicing%20elit%20sed%20do%20eiusmod%20tempor%20incididunt%20ut%20labore%20et%20dolore%20magna%20aliqua.%20Ut%20enim%20ad%20minim%20veniam%20quis%20nostrud%20exercitation%20ullamco%20laboris%20nisi%20ut%20aliquip%20ex%20ea%20commodo%20consequat.
Lorem%20ipsum%20dolor%20sit%20amet%20consectetur%20adipisicing%20elit%20sed%20do%20eiusmod%20tempor%20incididunt%20ut%20labore%20et%20dolore%20magna%20aliqua.%20Ut%20enim%20ad%20minim%20veniam%20quis%20nostrud%20exercitation%20ullamco%20laboris%20nisi%20ut%20aliquip%20ex%20ea%20commodo%20consequat.",new TextStyle("Neucha",26)
  .fontWeight('bold')
  )
  .transformation(new Transformation()
  .resize(fit().width(400)))
  ));
Angular (@cloudinary/angular-5.x 1.x (legacy)):
Copy to clipboard
<cl-image public-id="flowers.jpg" >
  <cl-transformation width="500" crop="scale">
  </cl-transformation>
  <cl-transformation overlay="text:Neucha_26_bold:Lorem%2520ipsum%2520dolor%2520sit%2520amet%2520consectetur%2520adipisicing%2520elit%2520sed%2520do%2520eiusmod%2520tempor%2520incididunt%2520ut%2520labore%2520et%2520dolore%2520magna%2520aliqua.%2520Ut%2520enim%2520ad%2520minim%2520veniam%2520quis%2520nostrud%2520exercitation%2520ullamco%2520laboris%2520nisi%2520ut%2520aliquip%2520ex%2520ea%2520commodo%2520consequat.%0D%0A%0D%0ALorem%2520ipsum%2520dolor%2520sit%2520amet%2520consectetur%2520adipisicing%2520elit%2520sed%2520do%2520eiusmod%2520tempor%2520incididunt%2520ut%2520labore%2520et%2520dolore%2520magna%2520aliqua.%2520Ut%2520enim%2520ad%2520minim%2520veniam%2520quis%2520nostrud%2520exercitation%2520ullamco%2520laboris%2520nisi%2520ut%2520aliquip%2520ex%2520ea%2520commodo%2520consequat." width="400" crop="fit">
  </cl-transformation>
  <cl-transformation flags="layer_apply">
  </cl-transformation>
</cl-image>
.NET (CloudinaryDotNet 1.x):
Copy to clipboard
cloudinary.Api.UrlImgUp.Transform(new Transformation()
  .Width(500).Crop("scale").Chain()
  .Overlay(new TextLayer().FontFamily("Neucha").FontSize(26).FontWeight("bold").Text("Lorem%2520ipsum%2520dolor%2520sit%2520amet%2520consectetur%2520adipisicing%2520elit%2520sed%2520do%2520eiusmod%2520tempor%2520incididunt%2520ut%2520labore%2520et%2520dolore%2520magna%2520aliqua.%2520Ut%2520enim%2520ad%2520minim%2520veniam%2520quis%2520nostrud%2520exercitation%2520ullamco%2520laboris%2520nisi%2520ut%2520aliquip%2520ex%2520ea%2520commodo%2520consequat.%0D%0A%0D%0ALorem%2520ipsum%2520dolor%2520sit%2520amet%2520consectetur%2520adipisicing%2520elit%2520sed%2520do%2520eiusmod%2520tempor%2520incididunt%2520ut%2520labore%2520et%2520dolore%2520magna%2520aliqua.%2520Ut%2520enim%2520ad%2520minim%2520veniam%2520quis%2520nostrud%2520exercitation%2520ullamco%2520laboris%2520nisi%2520ut%2520aliquip%2520ex%2520ea%2520commodo%2520consequat.")).Width(400).Crop("fit").Chain()
  .Flags("layer_apply")).BuildImageTag("flowers.jpg")
iOS (cloudinary 3.x):
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation()
  .setWidth(500).setCrop("scale").chain()
  .setOverlay("text:Neucha_26_bold:Lorem%2520ipsum%2520dolor%2520sit%2520amet%2520consectetur%2520adipisicing%2520elit%2520sed%2520do%2520eiusmod%2520tempor%2520incididunt%2520ut%2520labore%2520et%2520dolore%2520magna%2520aliqua.%2520Ut%2520enim%2520ad%2520minim%2520veniam%2520quis%2520nostrud%2520exercitation%2520ullamco%2520laboris%2520nisi%2520ut%2520aliquip%2520ex%2520ea%2520commodo%2520consequat.%0D%0A%0D%0ALorem%2520ipsum%2520dolor%2520sit%2520amet%2520consectetur%2520adipisicing%2520elit%2520sed%2520do%2520eiusmod%2520tempor%2520incididunt%2520ut%2520labore%2520et%2520dolore%2520magna%2520aliqua.%2520Ut%2520enim%2520ad%2520minim%2520veniam%2520quis%2520nostrud%2520exercitation%2520ullamco%2520laboris%2520nisi%2520ut%2520aliquip%2520ex%2520ea%2520commodo%2520consequat.").setWidth(400).setCrop("fit").chain()
  .setFlags("layer_apply")).generate("flowers.jpg")!, cloudinary: cloudinary)
Android (cloudinary-android 1.x):
Copy to clipboard
MediaManager.get().url().transformation(new Transformation()
  .width(500).crop("scale").chain()
  .overlay(new TextLayer().fontFamily("Neucha").fontSize(26).fontWeight("bold").text("Lorem%2520ipsum%2520dolor%2520sit%2520amet%2520consectetur%2520adipisicing%2520elit%2520sed%2520do%2520eiusmod%2520tempor%2520incididunt%2520ut%2520labore%2520et%2520dolore%2520magna%2520aliqua.%2520Ut%2520enim%2520ad%2520minim%2520veniam%2520quis%2520nostrud%2520exercitation%2520ullamco%2520laboris%2520nisi%2520ut%2520aliquip%2520ex%2520ea%2520commodo%2520consequat.%0D%0A%0D%0ALorem%2520ipsum%2520dolor%2520sit%2520amet%2520consectetur%2520adipisicing%2520elit%2520sed%2520do%2520eiusmod%2520tempor%2520incididunt%2520ut%2520labore%2520et%2520dolore%2520magna%2520aliqua.%2520Ut%2520enim%2520ad%2520minim%2520veniam%2520quis%2520nostrud%2520exercitation%2520ullamco%2520laboris%2520nisi%2520ut%2520aliquip%2520ex%2520ea%2520commodo%2520consequat.")).width(400).crop("fit").chain()
  .flags("layer_apply")).generate("flowers.jpg");
Kotlin (kotlin-url-gen 1.x):
Copy to clipboard
// This code example is not currently available.
Multi-line text no height limit

If you do limit the height of your overlay, any text that does not fit within the space defined is cut and an ellipsis (...) is added to the end of the text string to indicate that the text was truncated.

To define a maximum height for the multi-line text add the height parameter in addition to width in the 'resize' transformation of your text layer:

Ruby (cloudinary 1.x):
Copy to clipboard
cl_image_tag("flowers.jpg", :transformation=>[
  {:width=>500, :crop=>"scale"},
  {:overlay=>{:font_family=>"Neucha", :font_size=>26, :font_weight=>"bold", :text=>"Lorem%2520ipsum%2520dolor%2520sit%2520amet%2520consectetur%2520adipisicing%2520elit%2520sed%2520do%2520eiusmod%2520tempor%2520incididunt%2520ut%2520labore%2520et%2520dolore%2520magna%2520aliqua.%2520Ut%2520enim%2520ad%2520minim%2520veniam%2520quis%2520nostrud%2520exercitation%2520ullamco%2520laboris%2520nisi%2520ut%2520aliquip%2520ex%2520ea%2520commodo%2520consequat.%0D%0A%0D%0ALorem%2520ipsum%2520dolor%2520sit%2520amet%2520consectetur%2520adipisicing%2520elit%2520sed%2520do%2520eiusmod%2520tempor%2520incididunt%2520ut%2520labore%2520et%2520dolore%2520magna%2520aliqua.%2520Ut%2520enim%2520ad%2520minim%2520veniam%2520quis%2520nostrud%2520exercitation%2520ullamco%2520laboris%2520nisi%2520ut%2520aliquip%2520ex%2520ea%2520commodo%2520consequat."}, :width=>400, :height=>250, :crop=>"fit"},
  {:flags=>"layer_apply"}
  ])
PHP (cloudinary_php 2.x):
Copy to clipboard
(new ImageTag('flowers.jpg'))
  ->resize(Resize::scale()->width(500))
  ->overlay(Overlay::source(
  Source::text("Lorem%20ipsum%20dolor%20sit%20amet%20consectetur%20adipisicing%20elit%20sed%20do%20eiusmod%20tempor%20incididunt%20ut%20labore%20et%20dolore%20magna%20aliqua.%20Ut%20enim%20ad%20minim%20veniam%20quis%20nostrud%20exercitation%20ullamco%20laboris%20nisi%20ut%20aliquip%20ex%20ea%20commodo%20consequat.
Lorem%20ipsum%20dolor%20sit%20amet%20consectetur%20adipisicing%20elit%20sed%20do%20eiusmod%20tempor%20incididunt%20ut%20labore%20et%20dolore%20magna%20aliqua.%20Ut%20enim%20ad%20minim%20veniam%20quis%20nostrud%20exercitation%20ullamco%20laboris%20nisi%20ut%20aliquip%20ex%20ea%20commodo%20consequat.",(new TextStyle("Neucha",26))
  ->fontWeight(
  FontWeight::bold())
  )
  ->transformation((new Transformation())
  ->resize(Resize::fit()->width(400)
->height(250)))
  ));
PHP (cloudinary_php 1.x (legacy)):
Copy to clipboard
cl_image_tag("flowers.jpg", array("transformation"=>array(
  array("width"=>500, "crop"=>"scale"),
  array("overlay"=>array("font_family"=>"Neucha", "font_size"=>26, "font_weight"=>"bold", "text"=>"Lorem%2520ipsum%2520dolor%2520sit%2520amet%2520consectetur%2520adipisicing%2520elit%2520sed%2520do%2520eiusmod%2520tempor%2520incididunt%2520ut%2520labore%2520et%2520dolore%2520magna%2520aliqua.%2520Ut%2520enim%2520ad%2520minim%2520veniam%2520quis%2520nostrud%2520exercitation%2520ullamco%2520laboris%2520nisi%2520ut%2520aliquip%2520ex%2520ea%2520commodo%2520consequat.%0D%0A%0D%0ALorem%2520ipsum%2520dolor%2520sit%2520amet%2520consectetur%2520adipisicing%2520elit%2520sed%2520do%2520eiusmod%2520tempor%2520incididunt%2520ut%2520labore%2520et%2520dolore%2520magna%2520aliqua.%2520Ut%2520enim%2520ad%2520minim%2520veniam%2520quis%2520nostrud%2520exercitation%2520ullamco%2520laboris%2520nisi%2520ut%2520aliquip%2520ex%2520ea%2520commodo%2520consequat."), "width"=>400, "height"=>250, "crop"=>"fit"),
  array("flags"=>"layer_apply")
  )))
Python (cloudinary 1.x):
Copy to clipboard
CloudinaryImage("flowers.jpg").image(transformation=[
  {'width': 500, 'crop': "scale"},
  {'overlay': {'font_family': "Neucha", 'font_size': 26, 'font_weight': "bold", 'text': "Lorem%2520ipsum%2520dolor%2520sit%2520amet%2520consectetur%2520adipisicing%2520elit%2520sed%2520do%2520eiusmod%2520tempor%2520incididunt%2520ut%2520labore%2520et%2520dolore%2520magna%2520aliqua.%2520Ut%2520enim%2520ad%2520minim%2520veniam%2520quis%2520nostrud%2520exercitation%2520ullamco%2520laboris%2520nisi%2520ut%2520aliquip%2520ex%2520ea%2520commodo%2520consequat.%0D%0A%0D%0ALorem%2520ipsum%2520dolor%2520sit%2520amet%2520consectetur%2520adipisicing%2520elit%2520sed%2520do%2520eiusmod%2520tempor%2520incididunt%2520ut%2520labore%2520et%2520dolore%2520magna%2520aliqua.%2520Ut%2520enim%2520ad%2520minim%2520veniam%2520quis%2520nostrud%2520exercitation%2520ullamco%2520laboris%2520nisi%2520ut%2520aliquip%2520ex%2520ea%2520commodo%2520consequat."}, 'width': 400, 'height': 250, 'crop': "fit"},
  {'flags': "layer_apply"}
  ])
Node.js (cloudinary 1.x):
Copy to clipboard
cloudinary.image("flowers.jpg", {transformation: [
  {width: 500, crop: "scale"},
  {overlay: {font_family: "Neucha", font_size: 26, font_weight: "bold", text: "Lorem%2520ipsum%2520dolor%2520sit%2520amet%2520consectetur%2520adipisicing%2520elit%2520sed%2520do%2520eiusmod%2520tempor%2520incididunt%2520ut%2520labore%2520et%2520dolore%2520magna%2520aliqua.%2520Ut%2520enim%2520ad%2520minim%2520veniam%2520quis%2520nostrud%2520exercitation%2520ullamco%2520laboris%2520nisi%2520ut%2520aliquip%2520ex%2520ea%2520commodo%2520consequat.%0D%0A%0D%0ALorem%2520ipsum%2520dolor%2520sit%2520amet%2520consectetur%2520adipisicing%2520elit%2520sed%2520do%2520eiusmod%2520tempor%2520incididunt%2520ut%2520labore%2520et%2520dolore%2520magna%2520aliqua.%2520Ut%2520enim%2520ad%2520minim%2520veniam%2520quis%2520nostrud%2520exercitation%2520ullamco%2520laboris%2520nisi%2520ut%2520aliquip%2520ex%2520ea%2520commodo%2520consequat."}, width: 400, height: 250, crop: "fit"},
  {flags: "layer_apply"}
  ]})
Java (cloudinary 1.x):
Copy to clipboard
cloudinary.url().transformation(new Transformation()
  .width(500).crop("scale").chain()
  .overlay(new TextLayer().fontFamily("Neucha").fontSize(26).fontWeight("bold").text("Lorem%2520ipsum%2520dolor%2520sit%2520amet%2520consectetur%2520adipisicing%2520elit%2520sed%2520do%2520eiusmod%2520tempor%2520incididunt%2520ut%2520labore%2520et%2520dolore%2520magna%2520aliqua.%2520Ut%2520enim%2520ad%2520minim%2520veniam%2520quis%2520nostrud%2520exercitation%2520ullamco%2520laboris%2520nisi%2520ut%2520aliquip%2520ex%2520ea%2520commodo%2520consequat.%0D%0A%0D%0ALorem%2520ipsum%2520dolor%2520sit%2520amet%2520consectetur%2520adipisicing%2520elit%2520sed%2520do%2520eiusmod%2520tempor%2520incididunt%2520ut%2520labore%2520et%2520dolore%2520magna%2520aliqua.%2520Ut%2520enim%2520ad%2520minim%2520veniam%2520quis%2520nostrud%2520exercitation%2520ullamco%2520laboris%2520nisi%2520ut%2520aliquip%2520ex%2520ea%2520commodo%2520consequat.")).width(400).height(250).crop("fit").chain()
  .flags("layer_apply")).imageTag("flowers.jpg");
JS (@cloudinary/url-gen 1.x):
Copy to clipboard
new CloudinaryImage('flowers.jpg')
  .resize(scale().width(500))
  .overlay(source(
  text("Lorem%20ipsum%20dolor%20sit%20amet%20consectetur%20adipisicing%20elit%20sed%20do%20eiusmod%20tempor%20incididunt%20ut%20labore%20et%20dolore%20magna%20aliqua.%20Ut%20enim%20ad%20minim%20veniam%20quis%20nostrud%20exercitation%20ullamco%20laboris%20nisi%20ut%20aliquip%20ex%20ea%20commodo%20consequat.
Lorem%20ipsum%20dolor%20sit%20amet%20consectetur%20adipisicing%20elit%20sed%20do%20eiusmod%20tempor%20incididunt%20ut%20labore%20et%20dolore%20magna%20aliqua.%20Ut%20enim%20ad%20minim%20veniam%20quis%20nostrud%20exercitation%20ullamco%20laboris%20nisi%20ut%20aliquip%20ex%20ea%20commodo%20consequat.",new TextStyle("Neucha",26)
  .fontWeight('bold')
  )
  .transformation(new Transformation()
  .resize(fit().width(400)
.height(250)))
  ));
JS (cloudinary-core 2.x (legacy)):
Copy to clipboard
cloudinary.imageTag('flowers.jpg', {transformation: [
  {width: 500, crop: "scale"},
  {overlay: new cloudinary.TextLayer().fontFamily("Neucha").fontSize(26).fontWeight("bold").text("Lorem%2520ipsum%2520dolor%2520sit%2520amet%2520consectetur%2520adipisicing%2520elit%2520sed%2520do%2520eiusmod%2520tempor%2520incididunt%2520ut%2520labore%2520et%2520dolore%2520magna%2520aliqua.%2520Ut%2520enim%2520ad%2520minim%2520veniam%2520quis%2520nostrud%2520exercitation%2520ullamco%2520laboris%2520nisi%2520ut%2520aliquip%2520ex%2520ea%2520commodo%2520consequat.%0D%0A%0D%0ALorem%2520ipsum%2520dolor%2520sit%2520amet%2520consectetur%2520adipisicing%2520elit%2520sed%2520do%2520eiusmod%2520tempor%2520incididunt%2520ut%2520labore%2520et%2520dolore%2520magna%2520aliqua.%2520Ut%2520enim%2520ad%2520minim%2520veniam%2520quis%2520nostrud%2520exercitation%2520ullamco%2520laboris%2520nisi%2520ut%2520aliquip%2520ex%2520ea%2520commodo%2520consequat."), width: 400, height: 250, crop: "fit"},
  {flags: "layer_apply"}
  ]}).toHtml();
jQuery (cloudinary-jquery 2.x):
Copy to clipboard
$.cloudinary.image("flowers.jpg", {transformation: [
  {width: 500, crop: "scale"},
  {overlay: new cloudinary.TextLayer().fontFamily("Neucha").fontSize(26).fontWeight("bold").text("Lorem%2520ipsum%2520dolor%2520sit%2520amet%2520consectetur%2520adipisicing%2520elit%2520sed%2520do%2520eiusmod%2520tempor%2520incididunt%2520ut%2520labore%2520et%2520dolore%2520magna%2520aliqua.%2520Ut%2520enim%2520ad%2520minim%2520veniam%2520quis%2520nostrud%2520exercitation%2520ullamco%2520laboris%2520nisi%2520ut%2520aliquip%2520ex%2520ea%2520commodo%2520consequat.%0D%0A%0D%0ALorem%2520ipsum%2520dolor%2520sit%2520amet%2520consectetur%2520adipisicing%2520elit%2520sed%2520do%2520eiusmod%2520tempor%2520incididunt%2520ut%2520labore%2520et%2520dolore%2520magna%2520aliqua.%2520Ut%2520enim%2520ad%2520minim%2520veniam%2520quis%2520nostrud%2520exercitation%2520ullamco%2520laboris%2520nisi%2520ut%2520aliquip%2520ex%2520ea%2520commodo%2520consequat."), width: 400, height: 250, crop: "fit"},
  {flags: "layer_apply"}
  ]})
React (@cloudinary/react 1.x):
Copy to clipboard
//React SDK transformations are created using @cloudinary/url-gen.
new CloudinaryImage('flowers.jpg')
  .resize(scale().width(500))
  .overlay(source(
  text("Lorem%20ipsum%20dolor%20sit%20amet%20consectetur%20adipisicing%20elit%20sed%20do%20eiusmod%20tempor%20incididunt%20ut%20labore%20et%20dolore%20magna%20aliqua.%20Ut%20enim%20ad%20minim%20veniam%20quis%20nostrud%20exercitation%20ullamco%20laboris%20nisi%20ut%20aliquip%20ex%20ea%20commodo%20consequat.
Lorem%20ipsum%20dolor%20sit%20amet%20consectetur%20adipisicing%20elit%20sed%20do%20eiusmod%20tempor%20incididunt%20ut%20labore%20et%20dolore%20magna%20aliqua.%20Ut%20enim%20ad%20minim%20veniam%20quis%20nostrud%20exercitation%20ullamco%20laboris%20nisi%20ut%20aliquip%20ex%20ea%20commodo%20consequat.",new TextStyle("Neucha",26)
  .fontWeight('bold')
  )
  .transformation(new Transformation()
  .resize(fit().width(400)
.height(250)))
  ));
React (cloudinary-react 1.x):
Copy to clipboard
<Image publicId="flowers.jpg" >
  <Transformation width="500" crop="scale" />
  <Transformation overlay={{fontFamily: "Neucha", fontSize: 26, fontWeight: "bold", text: "Lorem%2520ipsum%2520dolor%2520sit%2520amet%2520consectetur%2520adipisicing%2520elit%2520sed%2520do%2520eiusmod%2520tempor%2520incididunt%2520ut%2520labore%2520et%2520dolore%2520magna%2520aliqua.%2520Ut%2520enim%2520ad%2520minim%2520veniam%2520quis%2520nostrud%2520exercitation%2520ullamco%2520laboris%2520nisi%2520ut%2520aliquip%2520ex%2520ea%2520commodo%2520consequat.%0D%0A%0D%0ALorem%2520ipsum%2520dolor%2520sit%2520amet%2520consectetur%2520adipisicing%2520elit%2520sed%2520do%2520eiusmod%2520tempor%2520incididunt%2520ut%2520labore%2520et%2520dolore%2520magna%2520aliqua.%2520Ut%2520enim%2520ad%2520minim%2520veniam%2520quis%2520nostrud%2520exercitation%2520ullamco%2520laboris%2520nisi%2520ut%2520aliquip%2520ex%2520ea%2520commodo%2520consequat."}} width="400" height="250" crop="fit" />
  <Transformation flags="layer_apply" />
</Image>
Vue.js (cloudinary-vue 1.x):
Copy to clipboard
<cld-image public-id="flowers.jpg" >
  <cld-transformation width="500" crop="scale" />
  <cld-transformation :overlay="{fontFamily: 'Neucha', fontSize: 26, fontWeight: 'bold', text: 'Lorem%2520ipsum%2520dolor%2520sit%2520amet%2520consectetur%2520adipisicing%2520elit%2520sed%2520do%2520eiusmod%2520tempor%2520incididunt%2520ut%2520labore%2520et%2520dolore%2520magna%2520aliqua.%2520Ut%2520enim%2520ad%2520minim%2520veniam%2520quis%2520nostrud%2520exercitation%2520ullamco%2520laboris%2520nisi%2520ut%2520aliquip%2520ex%2520ea%2520commodo%2520consequat.%0D%0A%0D%0ALorem%2520ipsum%2520dolor%2520sit%2520amet%2520consectetur%2520adipisicing%2520elit%2520sed%2520do%2520eiusmod%2520tempor%2520incididunt%2520ut%2520labore%2520et%2520dolore%2520magna%2520aliqua.%2520Ut%2520enim%2520ad%2520minim%2520veniam%2520quis%2520nostrud%2520exercitation%2520ullamco%2520laboris%2520nisi%2520ut%2520aliquip%2520ex%2520ea%2520commodo%2520consequat.'}" width="400" height="250" crop="fit" />
  <cld-transformation flags="layer_apply" />
</cld-image>
Angular (@cloudinary/ng 1.x):
Copy to clipboard
//Angular SDK transformations are created using @cloudinary/url-gen.
new CloudinaryImage('flowers.jpg')
  .resize(scale().width(500))
  .overlay(source(
  text("Lorem%20ipsum%20dolor%20sit%20amet%20consectetur%20adipisicing%20elit%20sed%20do%20eiusmod%20tempor%20incididunt%20ut%20labore%20et%20dolore%20magna%20aliqua.%20Ut%20enim%20ad%20minim%20veniam%20quis%20nostrud%20exercitation%20ullamco%20laboris%20nisi%20ut%20aliquip%20ex%20ea%20commodo%20consequat.
Lorem%20ipsum%20dolor%20sit%20amet%20consectetur%20adipisicing%20elit%20sed%20do%20eiusmod%20tempor%20incididunt%20ut%20labore%20et%20dolore%20magna%20aliqua.%20Ut%20enim%20ad%20minim%20veniam%20quis%20nostrud%20exercitation%20ullamco%20laboris%20nisi%20ut%20aliquip%20ex%20ea%20commodo%20consequat.",new TextStyle("Neucha",26)
  .fontWeight('bold')
  )
  .transformation(new Transformation()
  .resize(fit().width(400)
.height(250)))
  ));
Angular (@cloudinary/angular-5.x 1.x (legacy)):
Copy to clipboard
<cl-image public-id="flowers.jpg" >
  <cl-transformation width="500" crop="scale">
  </cl-transformation>
  <cl-transformation overlay="text:Neucha_26_bold:Lorem%2520ipsum%2520dolor%2520sit%2520amet%2520consectetur%2520adipisicing%2520elit%2520sed%2520do%2520eiusmod%2520tempor%2520incididunt%2520ut%2520labore%2520et%2520dolore%2520magna%2520aliqua.%2520Ut%2520enim%2520ad%2520minim%2520veniam%2520quis%2520nostrud%2520exercitation%2520ullamco%2520laboris%2520nisi%2520ut%2520aliquip%2520ex%2520ea%2520commodo%2520consequat.%0D%0A%0D%0ALorem%2520ipsum%2520dolor%2520sit%2520amet%2520consectetur%2520adipisicing%2520elit%2520sed%2520do%2520eiusmod%2520tempor%2520incididunt%2520ut%2520labore%2520et%2520dolore%2520magna%2520aliqua.%2520Ut%2520enim%2520ad%2520minim%2520veniam%2520quis%2520nostrud%2520exercitation%2520ullamco%2520laboris%2520nisi%2520ut%2520aliquip%2520ex%2520ea%2520commodo%2520consequat." width="400" height="250" crop="fit">
  </cl-transformation>
  <cl-transformation flags="layer_apply">
  </cl-transformation>
</cl-image>
.NET (CloudinaryDotNet 1.x):
Copy to clipboard
cloudinary.Api.UrlImgUp.Transform(new Transformation()
  .Width(500).Crop("scale").Chain()
  .Overlay(new TextLayer().FontFamily("Neucha").FontSize(26).FontWeight("bold").Text("Lorem%2520ipsum%2520dolor%2520sit%2520amet%2520consectetur%2520adipisicing%2520elit%2520sed%2520do%2520eiusmod%2520tempor%2520incididunt%2520ut%2520labore%2520et%2520dolore%2520magna%2520aliqua.%2520Ut%2520enim%2520ad%2520minim%2520veniam%2520quis%2520nostrud%2520exercitation%2520ullamco%2520laboris%2520nisi%2520ut%2520aliquip%2520ex%2520ea%2520commodo%2520consequat.%0D%0A%0D%0ALorem%2520ipsum%2520dolor%2520sit%2520amet%2520consectetur%2520adipisicing%2520elit%2520sed%2520do%2520eiusmod%2520tempor%2520incididunt%2520ut%2520labore%2520et%2520dolore%2520magna%2520aliqua.%2520Ut%2520enim%2520ad%2520minim%2520veniam%2520quis%2520nostrud%2520exercitation%2520ullamco%2520laboris%2520nisi%2520ut%2520aliquip%2520ex%2520ea%2520commodo%2520consequat.")).Width(400).Height(250).Crop("fit").Chain()
  .Flags("layer_apply")).BuildImageTag("flowers.jpg")
iOS (cloudinary 3.x):
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation()
  .setWidth(500).setCrop("scale").chain()
  .setOverlay("text:Neucha_26_bold:Lorem%2520ipsum%2520dolor%2520sit%2520amet%2520consectetur%2520adipisicing%2520elit%2520sed%2520do%2520eiusmod%2520tempor%2520incididunt%2520ut%2520labore%2520et%2520dolore%2520magna%2520aliqua.%2520Ut%2520enim%2520ad%2520minim%2520veniam%2520quis%2520nostrud%2520exercitation%2520ullamco%2520laboris%2520nisi%2520ut%2520aliquip%2520ex%2520ea%2520commodo%2520consequat.%0D%0A%0D%0ALorem%2520ipsum%2520dolor%2520sit%2520amet%2520consectetur%2520adipisicing%2520elit%2520sed%2520do%2520eiusmod%2520tempor%2520incididunt%2520ut%2520labore%2520et%2520dolore%2520magna%2520aliqua.%2520Ut%2520enim%2520ad%2520minim%2520veniam%2520quis%2520nostrud%2520exercitation%2520ullamco%2520laboris%2520nisi%2520ut%2520aliquip%2520ex%2520ea%2520commodo%2520consequat.").setWidth(400).setHeight(250).setCrop("fit").chain()
  .setFlags("layer_apply")).generate("flowers.jpg")!, cloudinary: cloudinary)
Android (cloudinary-android 1.x):
Copy to clipboard
MediaManager.get().url().transformation(new Transformation()
  .width(500).crop("scale").chain()
  .overlay(new TextLayer().fontFamily("Neucha").fontSize(26).fontWeight("bold").text("Lorem%2520ipsum%2520dolor%2520sit%2520amet%2520consectetur%2520adipisicing%2520elit%2520sed%2520do%2520eiusmod%2520tempor%2520incididunt%2520ut%2520labore%2520et%2520dolore%2520magna%2520aliqua.%2520Ut%2520enim%2520ad%2520minim%2520veniam%2520quis%2520nostrud%2520exercitation%2520ullamco%2520laboris%2520nisi%2520ut%2520aliquip%2520ex%2520ea%2520commodo%2520consequat.%0D%0A%0D%0ALorem%2520ipsum%2520dolor%2520sit%2520amet%2520consectetur%2520adipisicing%2520elit%2520sed%2520do%2520eiusmod%2520tempor%2520incididunt%2520ut%2520labore%2520et%2520dolore%2520magna%2520aliqua.%2520Ut%2520enim%2520ad%2520minim%2520veniam%2520quis%2520nostrud%2520exercitation%2520ullamco%2520laboris%2520nisi%2520ut%2520aliquip%2520ex%2520ea%2520commodo%2520consequat.")).width(400).height(250).crop("fit").chain()
  .flags("layer_apply")).generate("flowers.jpg");
Kotlin (kotlin-url-gen 1.x):
Copy to clipboard
// This code example is not currently available.
Multi-line text limited height

You can also set text alignment and line spacing values to further control the text's appearance. Other resize parameters can be applied as an action over the entire overlay (before the fl_layer_apply) to resize the resulting the text-image overlay as a whole after it's created.

For example, to add a long text string in center aligned bold Times font with a size of 14 pixels to the base image, that wraps at a width of 200 pixels and is limited to a height of 150 pixels; and then rotate the text by 9 degrees and set 30 pixels from the north border to better align with the underlying image:

Ruby (cloudinary 1.x):
Copy to clipboard
cl_image_tag("envelope.jpg", :transformation=>[
  {:width=>300, :crop=>"scale"},
  {:height=>150, :overlay=>{:font_family=>"Times", :font_size=>18, :font_weight=>"bold", :text_align=>"center", :text=>"Lorem%2520ipsum%2520dolor%2520sit%2520amet%2520consectetur%2520adipisicing%2520elit%2520sed%2520do%2520eiusmod%2520tempor%2520incididunt%2520ut%2520labore%2520et%2520dolore%2520magna%2520aliqua.%2520Ut%2520enim%2520ad%2520minim%2520veniam%2520quis%2520nostrud%2520exercitation%2520ullamco%2520laboris%2520nisi%2520ut%2520aliquip%2520ex%2520ea%2520commodo%2520consequat."}, :width=>200, :crop=>"fit"},
  {:angle=>9},
  {:flags=>"layer_apply", :gravity=>"north", :y=>30}
  ])
PHP (cloudinary_php 2.x):
Copy to clipboard
(new ImageTag('envelope.jpg'))
  ->resize(Resize::scale()->width(300))
  ->overlay(Overlay::source(
  Source::text("Lorem%20ipsum%20dolor%20sit%20amet%20consectetur%20adipisicing%20elit%20sed%20do%20eiusmod%20tempor%20incididunt%20ut%20labore%20et%20dolore%20magna%20aliqua.%20Ut%20enim%20ad%20minim%20veniam%20quis%20nostrud%20exercitation%20ullamco%20laboris%20nisi%20ut%20aliquip%20ex%20ea%20commodo%20consequat.",(new TextStyle("Times",18))
  ->fontWeight(
  FontWeight::bold())
  ->textAlignment(
  TextAlignment::center())
  )
  ->transformation((new Transformation())
  ->resize(Resize::fit()->width(200)
->height(150))
  ->rotate(Rotate::byAngle(9)))
  )
  ->position((new Position())
  ->gravity(
  Gravity::compass(
  Compass::north()))
->offsetY(30))
  );
PHP (cloudinary_php 1.x (legacy)):
Copy to clipboard
cl_image_tag("envelope.jpg", array("transformation"=>array(
  array("width"=>300, "crop"=>"scale"),
  array("height"=>150, "overlay"=>array("font_family"=>"Times", "font_size"=>18, "font_weight"=>"bold", "text_align"=>"center", "text"=>"Lorem%2520ipsum%2520dolor%2520sit%2520amet%2520consectetur%2520adipisicing%2520elit%2520sed%2520do%2520eiusmod%2520tempor%2520incididunt%2520ut%2520labore%2520et%2520dolore%2520magna%2520aliqua.%2520Ut%2520enim%2520ad%2520minim%2520veniam%2520quis%2520nostrud%2520exercitation%2520ullamco%2520laboris%2520nisi%2520ut%2520aliquip%2520ex%2520ea%2520commodo%2520consequat."), "width"=>200, "crop"=>"fit"),
  array("angle"=>9),
  array("flags"=>"layer_apply", "gravity"=>"north", "y"=>30)
  )))
Python (cloudinary 1.x):
Copy to clipboard
CloudinaryImage("envelope.jpg").image(transformation=[
  {'width': 300, 'crop': "scale"},
  {'height': 150, 'overlay': {'font_family': "Times", 'font_size': 18, 'font_weight': "bold", 'text_align': "center", 'text': "Lorem%2520ipsum%2520dolor%2520sit%2520amet%2520consectetur%2520adipisicing%2520elit%2520sed%2520do%2520eiusmod%2520tempor%2520incididunt%2520ut%2520labore%2520et%2520dolore%2520magna%2520aliqua.%2520Ut%2520enim%2520ad%2520minim%2520veniam%2520quis%2520nostrud%2520exercitation%2520ullamco%2520laboris%2520nisi%2520ut%2520aliquip%2520ex%2520ea%2520commodo%2520consequat."}, 'width': 200, 'crop': "fit"},
  {'angle': 9},
  {'flags': "layer_apply", 'gravity': "north", 'y': 30}
  ])
Node.js (cloudinary 1.x):
Copy to clipboard
cloudinary.image("envelope.jpg", {transformation: [
  {width: 300, crop: "scale"},
  {height: 150, overlay: {font_family: "Times", font_size: 18, font_weight: "bold", text_align: "center", text: "Lorem%2520ipsum%2520dolor%2520sit%2520amet%2520consectetur%2520adipisicing%2520elit%2520sed%2520do%2520eiusmod%2520tempor%2520incididunt%2520ut%2520labore%2520et%2520dolore%2520magna%2520aliqua.%2520Ut%2520enim%2520ad%2520minim%2520veniam%2520quis%2520nostrud%2520exercitation%2520ullamco%2520laboris%2520nisi%2520ut%2520aliquip%2520ex%2520ea%2520commodo%2520consequat."}, width: 200, crop: "fit"},
  {angle: 9},
  {flags: "layer_apply", gravity: "north", y: 30}
  ]})
Java (cloudinary 1.x):
Copy to clipboard
cloudinary.url().transformation(new Transformation()
  .width(300).crop("scale").chain()
  .height(150).overlay(new TextLayer().fontFamily("Times").fontSize(18).fontWeight("bold").textAlign("center").text("Lorem%2520ipsum%2520dolor%2520sit%2520amet%2520consectetur%2520adipisicing%2520elit%2520sed%2520do%2520eiusmod%2520tempor%2520incididunt%2520ut%2520labore%2520et%2520dolore%2520magna%2520aliqua.%2520Ut%2520enim%2520ad%2520minim%2520veniam%2520quis%2520nostrud%2520exercitation%2520ullamco%2520laboris%2520nisi%2520ut%2520aliquip%2520ex%2520ea%2520commodo%2520consequat.")).width(200).crop("fit").chain()
  .angle(9).chain()
  .flags("layer_apply").gravity("north").y(30)).imageTag("envelope.jpg");
JS (@cloudinary/url-gen 1.x):
Copy to clipboard
new CloudinaryImage("envelope.jpg").resize(scale().width(300)).overlay(
  source(
    text(
      "Lorem%20ipsum%20dolor%20sit%20amet%20consectetur%20adipisicing%20elit%20sed%20do%20eiusmod%20tempor%20incididunt%20ut%20labore%20et%20dolore%20magna%20aliqua.%20Ut%20enim%20ad%20minim%20veniam%20quis%20nostrud%20exercitation%20ullamco%20laboris%20nisi%20ut%20aliquip%20ex%20ea%20commodo%20consequat.",
      new TextStyle("Times", 18)
        .fontWeight("bold")
        .textAlignment("center")
    ).transformation(
      new Transformation()
        .resize(fit().width(200).height(150))
        .rotate(byAngle(9))
    )
  ).position(
    new Position()
      .gravity(compass("north"))
      .offsetY(30)
  )
);
JS (cloudinary-core 2.x (legacy)):
Copy to clipboard
cloudinary.imageTag('envelope.jpg', {transformation: [
  {width: 300, crop: "scale"},
  {height: 150, overlay: new cloudinary.TextLayer().fontFamily("Times").fontSize(18).fontWeight("bold").textAlign("center").text("Lorem%2520ipsum%2520dolor%2520sit%2520amet%2520consectetur%2520adipisicing%2520elit%2520sed%2520do%2520eiusmod%2520tempor%2520incididunt%2520ut%2520labore%2520et%2520dolore%2520magna%2520aliqua.%2520Ut%2520enim%2520ad%2520minim%2520veniam%2520quis%2520nostrud%2520exercitation%2520ullamco%2520laboris%2520nisi%2520ut%2520aliquip%2520ex%2520ea%2520commodo%2520consequat."), width: 200, crop: "fit"},
  {angle: 9},
  {flags: "layer_apply", gravity: "north", y: 30}
  ]}).toHtml();
jQuery (cloudinary-jquery 2.x):
Copy to clipboard
$.cloudinary.image("envelope.jpg", {transformation: [
  {width: 300, crop: "scale"},
  {height: 150, overlay: new cloudinary.TextLayer().fontFamily("Times").fontSize(18).fontWeight("bold").textAlign("center").text("Lorem%2520ipsum%2520dolor%2520sit%2520amet%2520consectetur%2520adipisicing%2520elit%2520sed%2520do%2520eiusmod%2520tempor%2520incididunt%2520ut%2520labore%2520et%2520dolore%2520magna%2520aliqua.%2520Ut%2520enim%2520ad%2520minim%2520veniam%2520quis%2520nostrud%2520exercitation%2520ullamco%2520laboris%2520nisi%2520ut%2520aliquip%2520ex%2520ea%2520commodo%2520consequat."), width: 200, crop: "fit"},
  {angle: 9},
  {flags: "layer_apply", gravity: "north", y: 30}
  ]})
React (@cloudinary/react 1.x):
Copy to clipboard
//React SDK transformations are created using @cloudinary/url-gen.
new CloudinaryImage("envelope.jpg").resize(scale().width(300)).overlay(
  source(
    text(
      "Lorem%20ipsum%20dolor%20sit%20amet%20consectetur%20adipisicing%20elit%20sed%20do%20eiusmod%20tempor%20incididunt%20ut%20labore%20et%20dolore%20magna%20aliqua.%20Ut%20enim%20ad%20minim%20veniam%20quis%20nostrud%20exercitation%20ullamco%20laboris%20nisi%20ut%20aliquip%20ex%20ea%20commodo%20consequat.",
      new TextStyle("Times", 18)
        .fontWeight("bold")
        .textAlignment("center")
    ).transformation(
      new Transformation()
        .resize(fit().width(200).height(150))
        .rotate(byAngle(9))
    )
  ).position(
    new Position()
      .gravity(compass("north"))
      .offsetY(30)
  )
);
React (cloudinary-react 1.x):
Copy to clipboard
<Image publicId="envelope.jpg" >
  <Transformation width="300" crop="scale" />
  <Transformation height="150" overlay={{fontFamily: "Times", fontSize: 18, fontWeight: "bold", textAlign: "center", text: "Lorem%2520ipsum%2520dolor%2520sit%2520amet%2520consectetur%2520adipisicing%2520elit%2520sed%2520do%2520eiusmod%2520tempor%2520incididunt%2520ut%2520labore%2520et%2520dolore%2520magna%2520aliqua.%2520Ut%2520enim%2520ad%2520minim%2520veniam%2520quis%2520nostrud%2520exercitation%2520ullamco%2520laboris%2520nisi%2520ut%2520aliquip%2520ex%2520ea%2520commodo%2520consequat."}} width="200" crop="fit" />
  <Transformation angle="9" />
  <Transformation flags="layer_apply" gravity="north" y="30" />
</Image>
Vue.js (cloudinary-vue 1.x):
Copy to clipboard
<cld-image public-id="envelope.jpg" >
  <cld-transformation width="300" crop="scale" />
  <cld-transformation height="150" :overlay="{fontFamily: 'Times', fontSize: 18, fontWeight: 'bold', textAlign: 'center', text: 'Lorem%2520ipsum%2520dolor%2520sit%2520amet%2520consectetur%2520adipisicing%2520elit%2520sed%2520do%2520eiusmod%2520tempor%2520incididunt%2520ut%2520labore%2520et%2520dolore%2520magna%2520aliqua.%2520Ut%2520enim%2520ad%2520minim%2520veniam%2520quis%2520nostrud%2520exercitation%2520ullamco%2520laboris%2520nisi%2520ut%2520aliquip%2520ex%2520ea%2520commodo%2520consequat.'}" width="200" crop="fit" />
  <cld-transformation angle="9" />
  <cld-transformation flags="layer_apply" gravity="north" y="30" />
</cld-image>
Angular (@cloudinary/ng 1.x):
Copy to clipboard
//Angular SDK transformations are created using @cloudinary/url-gen.
new CloudinaryImage("envelope.jpg").resize(scale().width(300)).overlay(
  source(
    text(
      "Lorem%20ipsum%20dolor%20sit%20amet%20consectetur%20adipisicing%20elit%20sed%20do%20eiusmod%20tempor%20incididunt%20ut%20labore%20et%20dolore%20magna%20aliqua.%20Ut%20enim%20ad%20minim%20veniam%20quis%20nostrud%20exercitation%20ullamco%20laboris%20nisi%20ut%20aliquip%20ex%20ea%20commodo%20consequat.",
      new TextStyle("Times", 18)
        .fontWeight("bold")
        .textAlignment("center")
    ).transformation(
      new Transformation()
        .resize(fit().width(200).height(150))
        .rotate(byAngle(9))
    )
  ).position(
    new Position()
      .gravity(compass("north"))
      .offsetY(30)
  )
);
Angular (@cloudinary/angular-5.x 1.x (legacy)):
Copy to clipboard
<cl-image public-id="envelope.jpg" >
  <cl-transformation width="300" crop="scale">
  </cl-transformation>
  <cl-transformation height="150" overlay="text:Times_18_bold_center:Lorem%2520ipsum%2520dolor%2520sit%2520amet%2520consectetur%2520adipisicing%2520elit%2520sed%2520do%2520eiusmod%2520tempor%2520incididunt%2520ut%2520labore%2520et%2520dolore%2520magna%2520aliqua.%2520Ut%2520enim%2520ad%2520minim%2520veniam%2520quis%2520nostrud%2520exercitation%2520ullamco%2520laboris%2520nisi%2520ut%2520aliquip%2520ex%2520ea%2520commodo%2520consequat." width="200" crop="fit">
  </cl-transformation>
  <cl-transformation angle="9">
  </cl-transformation>
  <cl-transformation flags="layer_apply" gravity="north" y="30">
  </cl-transformation>
</cl-image>
.NET (CloudinaryDotNet 1.x):
Copy to clipboard
cloudinary.Api.UrlImgUp.Transform(new Transformation()
  .Width(300).Crop("scale").Chain()
  .Height(150).Overlay(new TextLayer().FontFamily("Times").FontSize(18).FontWeight("bold").TextAlign("center").Text("Lorem%2520ipsum%2520dolor%2520sit%2520amet%2520consectetur%2520adipisicing%2520elit%2520sed%2520do%2520eiusmod%2520tempor%2520incididunt%2520ut%2520labore%2520et%2520dolore%2520magna%2520aliqua.%2520Ut%2520enim%2520ad%2520minim%2520veniam%2520quis%2520nostrud%2520exercitation%2520ullamco%2520laboris%2520nisi%2520ut%2520aliquip%2520ex%2520ea%2520commodo%2520consequat.")).Width(200).Crop("fit").Chain()
  .Angle(9).Chain()
  .Flags("layer_apply").Gravity("north").Y(30)).BuildImageTag("envelope.jpg")
iOS (cloudinary 3.x):
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation()
  .setWidth(300).setCrop("scale").chain()
  .setHeight(150).setOverlay("text:Times_18_bold_center:Lorem%2520ipsum%2520dolor%2520sit%2520amet%2520consectetur%2520adipisicing%2520elit%2520sed%2520do%2520eiusmod%2520tempor%2520incididunt%2520ut%2520labore%2520et%2520dolore%2520magna%2520aliqua.%2520Ut%2520enim%2520ad%2520minim%2520veniam%2520quis%2520nostrud%2520exercitation%2520ullamco%2520laboris%2520nisi%2520ut%2520aliquip%2520ex%2520ea%2520commodo%2520consequat.").setWidth(200).setCrop("fit").chain()
  .setAngle(9).chain()
  .setFlags("layer_apply").setGravity("north").setY(30)).generate("envelope.jpg")!, cloudinary: cloudinary)
Android (cloudinary-android 1.x):
Copy to clipboard
MediaManager.get().url().transformation(new Transformation()
  .width(300).crop("scale").chain()
  .height(150).overlay(new TextLayer().fontFamily("Times").fontSize(18).fontWeight("bold").textAlign("center").text("Lorem%2520ipsum%2520dolor%2520sit%2520amet%2520consectetur%2520adipisicing%2520elit%2520sed%2520do%2520eiusmod%2520tempor%2520incididunt%2520ut%2520labore%2520et%2520dolore%2520magna%2520aliqua.%2520Ut%2520enim%2520ad%2520minim%2520veniam%2520quis%2520nostrud%2520exercitation%2520ullamco%2520laboris%2520nisi%2520ut%2520aliquip%2520ex%2520ea%2520commodo%2520consequat.")).width(200).crop("fit").chain()
  .angle(9).chain()
  .flags("layer_apply").gravity("north").y(30)).generate("envelope.jpg");
Kotlin (kotlin-url-gen 1.x):
Copy to clipboard
// This code example is not currently available.
Multi-line text limited with height

Special characters

Text strings containing special characters need to be modified (escaped) for use with the text overlay feature. This is relevant for any special characters that would not be allowed "as is" in a valid URL path, as well as other special Unicode characters. These text strings should be escaped using %-based UTF-8 encoding to ensure the text string is valid (for example, replace ? with %3F and use %20 for spaces between words). This encoding is done automatically when embedding images using the Cloudinary SDK helper methods and only needs to be done when manually building the asset delivery URL.

Additionally, to include a comma (,) forward slash (/), percent sign (%) or an emoji character in a text overlay, you must double-escape the % sign within those codes. For example:

Custom fonts

By default, only universally available fonts are supported for text overlays. However, if you want to use a non-standard font, you can upload it to your Cloudinary account as a raw, authenticated file and then specify the font's full public_id (including extension) as the font for your overlay:

Copy to clipboard
Cloudinary::Uploader.upload("AlexBrush-Regular.ttf", 
    resource_type: 'raw', # Custom fonts must be upload as 'raw'
    type: 'authenticated', # Custom fonts must be upload as 'authenticated'
    public_id: 'AlexBrush-Regular.ttf')

Ruby (cloudinary 1.x):
Copy to clipboard
cl_image_tag("fireworks.jpg", :transformation=>[
  {:color=>"white", :overlay=>{:font_family=>"ttf", :font_size=>100, :text=>"Happy%2520New%2520Year%25202022%2520"}},
  {:flags=>"layer_apply", :gravity=>"north_west", :x=>30, :y=>30}
  ])
PHP (cloudinary_php 2.x):
Copy to clipboard
(new ImageTag('fireworks.jpg'))
  ->overlay(Overlay::source(
  Source::text("Happy%20New%20Year%202022%20",(new TextStyle("AlexBrush-Regular.ttf",100)))
  ->textColor(Color::WHITE)
  )
  ->position((new Position())
  ->gravity(
  Gravity::compass(
  Compass::northWest()))
->offsetX(30)
->offsetY(30))
  );
PHP (cloudinary_php 1.x (legacy)):
Copy to clipboard
cl_image_tag("fireworks.jpg", array("transformation"=>array(
  array("color"=>"white", "overlay"=>array("font_family"=>"ttf", "font_size"=>100, "text"=>"Happy%2520New%2520Year%25202022%2520")),
  array("flags"=>"layer_apply", "gravity"=>"north_west", "x"=>30, "y"=>30)
  )))
Python (cloudinary 1.x):
Copy to clipboard
CloudinaryImage("fireworks.jpg").image(transformation=[
  {'color': "white", 'overlay': {'font_family': "ttf", 'font_size': 100, 'text': "Happy%2520New%2520Year%25202022%2520"}},
  {'flags': "layer_apply", 'gravity': "north_west", 'x': 30, 'y': 30}
  ])
Node.js (cloudinary 1.x):
Copy to clipboard
cloudinary.image("fireworks.jpg", {transformation: [
  {color: "white", overlay: {font_family: "ttf", font_size: 100, text: "Happy%2520New%2520Year%25202022%2520"}},
  {flags: "layer_apply", gravity: "north_west", x: 30, y: 30}
  ]})
Java (cloudinary 1.x):
Copy to clipboard
cloudinary.url().transformation(new Transformation()
  .color("white").overlay(new TextLayer().fontFamily("ttf").fontSize(100).text("Happy%2520New%2520Year%25202022%2520")).chain()
  .flags("layer_apply").gravity("north_west").x(30).y(30)).imageTag("fireworks.jpg");
JS (@cloudinary/url-gen 1.x):
Copy to clipboard
new CloudinaryImage("fireworks.jpg").overlay(
  source(
    text(
      "Happy%20New%20Year%202022%20",
      new TextStyle("AlexBrush-Regular.ttf", 100)
    ).textColor("white")
  ).position(
    new Position()
      .gravity(compass("north_west"))
      .offsetX(30)
      .offsetY(30)
  )
);
JS (cloudinary-core 2.x (legacy)):
Copy to clipboard
cloudinary.imageTag('fireworks.jpg', {transformation: [
  {color: "white", overlay: new cloudinary.TextLayer().fontFamily("ttf").fontSize(100).text("Happy%2520New%2520Year%25202022%2520")},
  {flags: "layer_apply", gravity: "north_west", x: 30, y: 30}
  ]}).toHtml();
jQuery (cloudinary-jquery 2.x):
Copy to clipboard
$.cloudinary.image("fireworks.jpg", {transformation: [
  {color: "white", overlay: new cloudinary.TextLayer().fontFamily("ttf").fontSize(100).text("Happy%2520New%2520Year%25202022%2520")},
  {flags: "layer_apply", gravity: "north_west", x: 30, y: 30}
  ]})
React (@cloudinary/react 1.x):
Copy to clipboard
//React SDK transformations are created using @cloudinary/url-gen.
new CloudinaryImage("fireworks.jpg").overlay(
  source(
    text(
      "Happy%20New%20Year%202022%20",
      new TextStyle("AlexBrush-Regular.ttf", 100)
    ).textColor("white")
  ).position(
    new Position()
      .gravity(compass("north_west"))
      .offsetX(30)
      .offsetY(30)
  )
);
React (cloudinary-react 1.x):
Copy to clipboard
<Image publicId="fireworks.jpg" >
  <Transformation color="white" overlay={{fontFamily