Cloudinary Blog

Transform your image overlays with on-the-fly manipulation

Dynamically Add and Manipulate Multiple Image Overlays

Front end developers may want to combine multiple images into a single image. For example, when creating and adding watermarks to stock photos, adding shapes or badges, preparing content for print (e.g. placing a logo on a t-shirt or a mug), adding a caption, and so on.

Multiple images can be combined by overlaying them one on top of the other. However, since it is not a given that both the underlying and overlaying images match each other, let alone your graphic design, you may need to perform further image manipulations (e.g. resize, crop, change colors, create a better fit). This is where Cloudinary comes in.

Cloudinary's image overlay feature helps users easily combine multiple images. It supports image and text overlays using on-the-fly manipulation URLs. In this blog post, we will show you how to separately manipulate, process, and transform underlying and overlaying images, then dynamically generate a resulting image that you can embed on your site.

Webinar
How to Optimize for Page Load Speed

Manipulating image overlays

Suppose you have a website that sells personalized gifts. Users can file upload their own photos, add text, and your site will automatically crop and manipulate those photos and text on the gift of their choice. For example, a couple may want to place their picture on a coffee mug. This would require you to resize and manipulate both the underlying image of the coffee mug and the overlaying picture of the couple until they fit together in harmony. Once the images are put in place, you can add text and perform further manipulations if necessary.

Below is an example of the original images of the couple and coffee mug that were uploaded to the cloud for further manipulation and delivery.

Coffee cup Nice couple

You can add an image overlay using Cloudinary's overlay parameter (or l for URLs). Returning to our example, here is what the final version of the coffee mug would look like with the overlaying picture of the couple:

Ruby:
Copy to clipboard
cl_image_tag("coffee_cup.jpg", :transformation=>[
  {:width=>400, :height=>250, :gravity=>"south", :crop=>"fill"},
  {:overlay=>"nice_couple", :width=>90, :gravity=>"center", :y=>18, :x=>-20}
  ])
PHP:
Copy to clipboard
cl_image_tag("coffee_cup.jpg", array("transformation"=>array(
  array("width"=>400, "height"=>250, "gravity"=>"south", "crop"=>"fill"),
  array("overlay"=>"nice_couple", "width"=>90, "gravity"=>"center", "y"=>18, "x"=>-20)
  )))
Python:
Copy to clipboard
CloudinaryImage("coffee_cup.jpg").image(transformation=[
  {'width': 400, 'height': 250, 'gravity': "south", 'crop': "fill"},
  {'overlay': "nice_couple", 'width': 90, 'gravity': "center", 'y': 18, 'x': -20}
  ])
Node.js:
Copy to clipboard
cloudinary.image("coffee_cup.jpg", {transformation: [
  {width: 400, height: 250, gravity: "south", crop: "fill"},
  {overlay: "nice_couple", width: 90, gravity: "center", y: 18, x: -20}
  ]})
Java:
Copy to clipboard
cloudinary.url().transformation(new Transformation()
  .width(400).height(250).gravity("south").crop("fill").chain()
  .overlay(new Layer().publicId("nice_couple")).width(90).gravity("center").y(18).x(-20)).imageTag("coffee_cup.jpg");
JS:
Copy to clipboard
cloudinary.imageTag('coffee_cup.jpg', {transformation: [
  {width: 400, height: 250, gravity: "south", crop: "fill"},
  {overlay: new cloudinary.Layer().publicId("nice_couple"), width: 90, gravity: "center", y: 18, x: -20}
  ]}).toHtml();
jQuery:
Copy to clipboard
$.cloudinary.image("coffee_cup.jpg", {transformation: [
  {width: 400, height: 250, gravity: "south", crop: "fill"},
  {overlay: new cloudinary.Layer().publicId("nice_couple"), width: 90, gravity: "center", y: 18, x: -20}
  ]})
React:
Copy to clipboard
<Image publicId="coffee_cup.jpg" >
  <Transformation width="400" height="250" gravity="south" crop="fill" />
  <Transformation overlay="nice_couple" width="90" gravity="center" y="18" x="-20" />
</Image>
Vue.js:
Copy to clipboard
<cld-image publicId="coffee_cup.jpg" >
  <cld-transformation width="400" height="250" gravity="south" crop="fill" />
  <cld-transformation overlay="nice_couple" width="90" gravity="center" y="18" x="-20" />
</cld-image>
Angular:
Copy to clipboard
<cl-image public-id="coffee_cup.jpg" >
  <cl-transformation width="400" height="250" gravity="south" crop="fill">
  </cl-transformation>
  <cl-transformation overlay="nice_couple" width="90" gravity="center" y="18" x="-20">
  </cl-transformation>
</cl-image>
.Net:
Copy to clipboard
cloudinary.Api.UrlImgUp.Transform(new Transformation()
  .Width(400).Height(250).Gravity("south").Crop("fill").Chain()
  .Overlay(new Layer().PublicId("nice_couple")).Width(90).Gravity("center").Y(18).X(-20)).BuildImageTag("coffee_cup.jpg")
Android:
Copy to clipboard
MediaManager.get().url().transformation(new Transformation()
  .width(400).height(250).gravity("south").crop("fill").chain()
  .overlay(new Layer().publicId("nice_couple")).width(90).gravity("center").y(18).x(-20)).generate("coffee_cup.jpg");
iOS:
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation()
  .setWidth(400).setHeight(250).setGravity("south").setCrop("fill").chain()
  .setOverlay("nice_couple").setWidth(90).setGravity("center").setY(18).setX(-20)).generate("coffee_cup.jpg")!, cloudinary: cloudinary)
Image overlay

Transformation instructions are used to perform the image manipulations using dynamic URLs. Cloudinary's client libraries assist in building these URLs. You can apply multiple chained transformations by separating them with a slash / in your image's URL.

In order to better manipulate image overlays, you can set the flags parameter to layer_apply (or fl_layer_apply for URLs), which then tells Cloudinary that all chained transformations that were specified up until the flag, are to be applied on the overlaying image instead of the containing image.

Using our coffee mug example, below you can see how we have applied multiple manipulations both on the containing image as well as the overlay. The containing image has been cropped to fill a 400x250 rectangle and the overlaying image of the couple has been cropped using face detection. Color saturation has been increased by 50% and the vignette effect has been applied. Finally, the resulting image has been resized to 100 pixels wide, converted to a circular shape and positioned with 20 pixels offset from the center of the containing image.

Ruby:
Copy to clipboard
cl_image_tag("coffee_cup.jpg", :transformation=>[
  {:width=>400, :height=>250, :gravity=>"south", :crop=>"fill"},
  {:overlay=>"nice_couple", :width=>1.3, :height=>1.3, :gravity=>"faces", :flags=>"region_relative", :crop=>"crop"},
  {:effect=>"saturation:50"},
  {:effect=>"vignette"},
  {:flags=>"layer_apply", :width=>100, :radius=>"max", :gravity=>"center", :y=>20, :x=>-20, :crop=>"scale"}
  ])
PHP:
Copy to clipboard
cl_image_tag("coffee_cup.jpg", array("transformation"=>array(
  array("width"=>400, "height"=>250, "gravity"=>"south", "crop"=>"fill"),
  array("overlay"=>"nice_couple", "width"=>1.3, "height"=>1.3, "gravity"=>"faces", "flags"=>"region_relative", "crop"=>"crop"),
  array("effect"=>"saturation:50"),
  array("effect"=>"vignette"),
  array("flags"=>"layer_apply", "width"=>100, "radius"=>"max", "gravity"=>"center", "y"=>20, "x"=>-20, "crop"=>"scale")
  )))
Python:
Copy to clipboard
CloudinaryImage("coffee_cup.jpg").image(transformation=[
  {'width': 400, 'height': 250, 'gravity': "south", 'crop': "fill"},
  {'overlay': "nice_couple", 'width': 1.3, 'height': 1.3, 'gravity': "faces", 'flags': "region_relative", 'crop': "crop"},
  {'effect': "saturation:50"},
  {'effect': "vignette"},
  {'flags': "layer_apply", 'width': 100, 'radius': "max", 'gravity': "center", 'y': 20, 'x': -20, 'crop': "scale"}
  ])
Node.js:
Copy to clipboard
cloudinary.image("coffee_cup.jpg", {transformation: [
  {width: 400, height: 250, gravity: "south", crop: "fill"},
  {overlay: "nice_couple", width: "1.3", height: "1.3", gravity: "faces", flags: "region_relative", crop: "crop"},
  {effect: "saturation:50"},
  {effect: "vignette"},
  {flags: "layer_apply", width: 100, radius: "max", gravity: "center", y: 20, x: -20, crop: "scale"}
  ]})
Java:
Copy to clipboard
cloudinary.url().transformation(new Transformation()
  .width(400).height(250).gravity("south").crop("fill").chain()
  .overlay(new Layer().publicId("nice_couple")).width(1.3).height(1.3).gravity("faces").flags("region_relative").crop("crop").chain()
  .effect("saturation:50").chain()
  .effect("vignette").chain()
  .flags("layer_apply").width(100).radius("max").gravity("center").y(20).x(-20).crop("scale")).imageTag("coffee_cup.jpg");
JS:
Copy to clipboard
cloudinary.imageTag('coffee_cup.jpg', {transformation: [
  {width: 400, height: 250, gravity: "south", crop: "fill"},
  {overlay: new cloudinary.Layer().publicId("nice_couple"), width: "1.3", height: "1.3", gravity: "faces", flags: "region_relative", crop: "crop"},
  {effect: "saturation:50"},
  {effect: "vignette"},
  {flags: "layer_apply", width: 100, radius: "max", gravity: "center", y: 20, x: -20, crop: "scale"}
  ]}).toHtml();
jQuery:
Copy to clipboard
$.cloudinary.image("coffee_cup.jpg", {transformation: [
  {width: 400, height: 250, gravity: "south", crop: "fill"},
  {overlay: new cloudinary.Layer().publicId("nice_couple"), width: "1.3", height: "1.3", gravity: "faces", flags: "region_relative", crop: "crop"},
  {effect: "saturation:50"},
  {effect: "vignette"},
  {flags: "layer_apply", width: 100, radius: "max", gravity: "center", y: 20, x: -20, crop: "scale"}
  ]})
React:
Copy to clipboard
<Image publicId="coffee_cup.jpg" >
  <Transformation width="400" height="250" gravity="south" crop="fill" />
  <Transformation overlay="nice_couple" width="1.3" height="1.3" gravity="faces" flags="region_relative" crop="crop" />
  <Transformation effect="saturation:50" />
  <Transformation effect="vignette" />
  <Transformation flags="layer_apply" width="100" radius="max" gravity="center" y="20" x="-20" crop="scale" />
</Image>
Vue.js:
Copy to clipboard
<cld-image publicId="coffee_cup.jpg" >
  <cld-transformation width="400" height="250" gravity="south" crop="fill" />
  <cld-transformation overlay="nice_couple" width="1.3" height="1.3" gravity="faces" flags="region_relative" crop="crop" />
  <cld-transformation effect="saturation:50" />
  <cld-transformation effect="vignette" />
  <cld-transformation flags="layer_apply" width="100" radius="max" gravity="center" y="20" x="-20" crop="scale" />
</cld-image>
Angular:
Copy to clipboard
<cl-image public-id="coffee_cup.jpg" >
  <cl-transformation width="400" height="250" gravity="south" crop="fill">
  </cl-transformation>
  <cl-transformation overlay="nice_couple" width="1.3" height="1.3" gravity="faces" flags="region_relative" crop="crop">
  </cl-transformation>
  <cl-transformation effect="saturation:50">
  </cl-transformation>
  <cl-transformation effect="vignette">
  </cl-transformation>
  <cl-transformation flags="layer_apply" width="100" radius="max" gravity="center" y="20" x="-20" crop="scale">
  </cl-transformation>
</cl-image>
.Net:
Copy to clipboard
cloudinary.Api.UrlImgUp.Transform(new Transformation()
  .Width(400).Height(250).Gravity("south").Crop("fill").Chain()
  .Overlay(new Layer().PublicId("nice_couple")).Width(1.3).Height(1.3).Gravity("faces").Flags("region_relative").Crop("crop").Chain()
  .Effect("saturation:50").Chain()
  .Effect("vignette").Chain()
  .Flags("layer_apply").Width(100).Radius("max").Gravity("center").Y(20).X(-20).Crop("scale")).BuildImageTag("coffee_cup.jpg")
Android:
Copy to clipboard
MediaManager.get().url().transformation(new Transformation()
  .width(400).height(250).gravity("south").crop("fill").chain()
  .overlay(new Layer().publicId("nice_couple")).width(1.3).height(1.3).gravity("faces").flags("region_relative").crop("crop").chain()
  .effect("saturation:50").chain()
  .effect("vignette").chain()
  .flags("layer_apply").width(100).radius("max").gravity("center").y(20).x(-20).crop("scale")).generate("coffee_cup.jpg");
iOS:
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation()
  .setWidth(400).setHeight(250).setGravity("south").setCrop("fill").chain()
  .setOverlay("nice_couple").setWidth(1.3).setHeight(1.3).setGravity("faces").setFlags("region_relative").setCrop("crop").chain()
  .setEffect("saturation:50").chain()
  .setEffect("vignette").chain()
  .setFlags("layer_apply").setWidth(100).setRadius("max").setGravity("center").setY(20).setX(-20).setCrop("scale")).generate("coffee_cup.jpg")!, cloudinary: cloudinary)
Image overlay with further manipulation

Learn more about Cloudinary’s image manipulation capabilities

Manipulating multiple image overlays

In addition to being able to manipulate a single image overlay, Cloudinary allows you to add and manipulate multiple overlays, as well. You can do this by chaining another overlay, setting the flags parameter to layer_apply (or fl_layer_apply for URLs), and applying multiple image transformations. Adding another overlay is as simple as manipulating a picture to suit the existing underlying and overlaying images. In our coffee mug example, we added a balloon as an additional overlay and performed the following manipulations: resized to be 30 pixels wide, changed the hue level to pink, and rotated it five degrees.

Ruby:
Copy to clipboard
cl_image_tag("coffee_cup.jpg", :transformation=>[
  {:width=>400, :height=>250, :gravity=>"south", :crop=>"fill"},
  {:overlay=>"nice_couple", :width=>1.3, :height=>1.3, :gravity=>"faces", :flags=>"region_relative", :crop=>"crop"},
  {:effect=>"saturation:50"},
  {:effect=>"vignette"},
  {:flags=>"layer_apply", :width=>100, :radius=>"max", :gravity=>"center", :y=>20, :x=>-20, :crop=>"scale"},
  {:overlay=>"balloon", :width=>30},
  {:effect=>"hue:-20", :angle=>5},
  {:flags=>"layer_apply", :x=>30, :y=>5}
  ])
PHP:
Copy to clipboard
cl_image_tag("coffee_cup.jpg", array("transformation"=>array(
  array("width"=>400, "height"=>250, "gravity"=>"south", "crop"=>"fill"),
  array("overlay"=>"nice_couple", "width"=>1.3, "height"=>1.3, "gravity"=>"faces", "flags"=>"region_relative", "crop"=>"crop"),
  array("effect"=>"saturation:50"),
  array("effect"=>"vignette"),
  array("flags"=>"layer_apply", "width"=>100, "radius"=>"max", "gravity"=>"center", "y"=>20, "x"=>-20, "crop"=>"scale"),
  array("overlay"=>"balloon", "width"=>30),
  array("effect"=>"hue:-20", "angle"=>5),
  array("flags"=>"layer_apply", "x"=>30, "y"=>5)
  )))
Python:
Copy to clipboard
CloudinaryImage("coffee_cup.jpg").image(transformation=[
  {'width': 400, 'height': 250, 'gravity': "south", 'crop': "fill"},
  {'overlay': "nice_couple", 'width': 1.3, 'height': 1.3, 'gravity': "faces", 'flags': "region_relative", 'crop': "crop"},
  {'effect': "saturation:50"},
  {'effect': "vignette"},
  {'flags': "layer_apply", 'width': 100, 'radius': "max", 'gravity': "center", 'y': 20, 'x': -20, 'crop': "scale"},
  {'overlay': "balloon", 'width': 30},
  {'effect': "hue:-20", 'angle': 5},
  {'flags': "layer_apply", 'x': 30, 'y': 5}
  ])
Node.js:
Copy to clipboard
cloudinary.image("coffee_cup.jpg", {transformation: [
  {width: 400, height: 250, gravity: "south", crop: "fill"},
  {overlay: "nice_couple", width: "1.3", height: "1.3", gravity: "faces", flags: "region_relative", crop: "crop"},
  {effect: "saturation:50"},
  {effect: "vignette"},
  {flags: "layer_apply", width: 100, radius: "max", gravity: "center", y: 20, x: -20, crop: "scale"},
  {overlay: "balloon", width: 30},
  {effect: "hue:-20", angle: 5},
  {flags: "layer_apply", x: 30, y: 5}
  ]})
Java:
Copy to clipboard
cloudinary.url().transformation(new Transformation()
  .width(400).height(250).gravity("south").crop("fill").chain()
  .overlay(new Layer().publicId("nice_couple")).width(1.3).height(1.3).gravity("faces").flags("region_relative").crop("crop").chain()
  .effect("saturation:50").chain()
  .effect("vignette").chain()
  .flags("layer_apply").width(100).radius("max").gravity("center").y(20).x(-20).crop("scale").chain()
  .overlay(new Layer().publicId("balloon")).width(30).chain()
  .effect("hue:-20").angle(5).chain()
  .flags("layer_apply").x(30).y(5)).imageTag("coffee_cup.jpg");
JS:
Copy to clipboard
cloudinary.imageTag('coffee_cup.jpg', {transformation: [
  {width: 400, height: 250, gravity: "south", crop: "fill"},
  {overlay: new cloudinary.Layer().publicId("nice_couple"), width: "1.3", height: "1.3", gravity: "faces", flags: "region_relative", crop: "crop"},
  {effect: "saturation:50"},
  {effect: "vignette"},
  {flags: "layer_apply", width: 100, radius: "max", gravity: "center", y: 20, x: -20, crop: "scale"},
  {overlay: new cloudinary.Layer().publicId("balloon"), width: 30},
  {effect: "hue:-20", angle: 5},
  {flags: "layer_apply", x: 30, y: 5}
  ]}).toHtml();
jQuery:
Copy to clipboard
$.cloudinary.image("coffee_cup.jpg", {transformation: [
  {width: 400, height: 250, gravity: "south", crop: "fill"},
  {overlay: new cloudinary.Layer().publicId("nice_couple"), width: "1.3", height: "1.3", gravity: "faces", flags: "region_relative", crop: "crop"},
  {effect: "saturation:50"},
  {effect: "vignette"},
  {flags: "layer_apply", width: 100, radius: "max", gravity: "center", y: 20, x: -20, crop: "scale"},
  {overlay: new cloudinary.Layer().publicId("balloon"), width: 30},
  {effect: "hue:-20", angle: 5},
  {flags: "layer_apply", x: 30, y: 5}
  ]})
React:
Copy to clipboard
<Image publicId="coffee_cup.jpg" >
  <Transformation width="400" height="250" gravity="south" crop="fill" />
  <Transformation overlay="nice_couple" width="1.3" height="1.3" gravity="faces" flags="region_relative" crop="crop" />
  <Transformation effect="saturation:50" />
  <Transformation effect="vignette" />
  <Transformation flags="layer_apply" width="100" radius="max" gravity="center" y="20" x="-20" crop="scale" />
  <Transformation overlay="balloon" width="30" />
  <Transformation effect="hue:-20" angle="5" />
  <Transformation flags="layer_apply" x="30" y="5" />
</Image>
Vue.js:
Copy to clipboard
<cld-image publicId="coffee_cup.jpg" >
  <cld-transformation width="400" height="250" gravity="south" crop="fill" />
  <cld-transformation overlay="nice_couple" width="1.3" height="1.3" gravity="faces" flags="region_relative" crop="crop" />
  <cld-transformation effect="saturation:50" />
  <cld-transformation effect="vignette" />
  <cld-transformation flags="layer_apply" width="100" radius="max" gravity="center" y="20" x="-20" crop="scale" />
  <cld-transformation overlay="balloon" width="30" />
  <cld-transformation effect="hue:-20" angle="5" />
  <cld-transformation flags="layer_apply" x="30" y="5" />
</cld-image>
Angular:
Copy to clipboard
<cl-image public-id="coffee_cup.jpg" >
  <cl-transformation width="400" height="250" gravity="south" crop="fill">
  </cl-transformation>
  <cl-transformation overlay="nice_couple" width="1.3" height="1.3" gravity="faces" flags="region_relative" crop="crop">
  </cl-transformation>
  <cl-transformation effect="saturation:50">
  </cl-transformation>
  <cl-transformation effect="vignette">
  </cl-transformation>
  <cl-transformation flags="layer_apply" width="100" radius="max" gravity="center" y="20" x="-20" crop="scale">
  </cl-transformation>
  <cl-transformation overlay="balloon" width="30">
  </cl-transformation>
  <cl-transformation effect="hue:-20" angle="5">
  </cl-transformation>
  <cl-transformation flags="layer_apply" x="30" y="5">
  </cl-transformation>
</cl-image>
.Net:
Copy to clipboard
cloudinary.Api.UrlImgUp.Transform(new Transformation()
  .Width(400).Height(250).Gravity("south").Crop("fill").Chain()
  .Overlay(new Layer().PublicId("nice_couple")).Width(1.3).Height(1.3).Gravity("faces").Flags("region_relative").Crop("crop").Chain()
  .Effect("saturation:50").Chain()
  .Effect("vignette").Chain()
  .Flags("layer_apply").Width(100).Radius("max").Gravity("center").Y(20).X(-20).Crop("scale").Chain()
  .Overlay(new Layer().PublicId("balloon")).Width(30).Chain()
  .Effect("hue:-20").Angle(5).Chain()
  .Flags("layer_apply").X(30).Y(5)).BuildImageTag("coffee_cup.jpg")
Android:
Copy to clipboard
MediaManager.get().url().transformation(new Transformation()
  .width(400).height(250).gravity("south").crop("fill").chain()
  .overlay(new Layer().publicId("nice_couple")).width(1.3).height(1.3).gravity("faces").flags("region_relative").crop("crop").chain()
  .effect("saturation:50").chain()
  .effect("vignette").chain()
  .flags("layer_apply").width(100).radius("max").gravity("center").y(20).x(-20).crop("scale").chain()
  .overlay(new Layer().publicId("balloon")).width(30).chain()
  .effect("hue:-20").angle(5).chain()
  .flags("layer_apply").x(30).y(5)).generate("coffee_cup.jpg");
iOS:
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation()
  .setWidth(400).setHeight(250).setGravity("south").setCrop("fill").chain()
  .setOverlay("nice_couple").setWidth(1.3).setHeight(1.3).setGravity("faces").setFlags("region_relative").setCrop("crop").chain()
  .setEffect("saturation:50").chain()
  .setEffect("vignette").chain()
  .setFlags("layer_apply").setWidth(100).setRadius("max").setGravity("center").setY(20).setX(-20).setCrop("scale").chain()
  .setOverlay("balloon").setWidth(30).chain()
  .setEffect("hue:-20").setAngle(5).chain()
  .setFlags("layer_apply").setX(30).setY(5)).generate("coffee_cup.jpg")!, cloudinary: cloudinary)
Multiple image overlays with manipulations

Manipulating text overlays

Cloudinary supports adding dynamic text overlays in any style of customized text. What's more, the text overlay can be further manipulated, just like image overlays. So, returning to our example, we have now added a text overlay that we have colored, using the colorize effect, and rotated.

Ruby:
Copy to clipboard
cl_image_tag("coffee_cup.jpg", :transformation=>[
  {:width=>400, :height=>250, :gravity=>"south", :crop=>"fill"},
  {:overlay=>"nice_couple", :width=>1.3, :height=>1.3, :gravity=>"faces", :flags=>"region_relative", :crop=>"crop"},
  {:effect=>"saturation:50"},
  {:effect=>"vignette"},
  {:flags=>"layer_apply", :width=>100, :radius=>"max", :gravity=>"center", :y=>20, :x=>-20, :crop=>"scale"},
  {:overlay=>"balloon", :width=>30},
  {:effect=>"hue:-20", :angle=>5},
  {:flags=>"layer_apply", :x=>30, :y=>5},
  {:overlay=>{:font_family=>"Cookie", :font_size=>40, :font_weight=>"bold", :text=>"Love"}, :effect=>"colorize", :color=>"#f08"},
  {:angle=>20, :flags=>"layer_apply", :x=>-45, :y=>44}
  ])
PHP:
Copy to clipboard
cl_image_tag("coffee_cup.jpg", array("transformation"=>array(
  array("width"=>400, "height"=>250, "gravity"=>"south", "crop"=>"fill"),
  array("overlay"=>"nice_couple", "width"=>1.3, "height"=>1.3, "gravity"=>"faces", "flags"=>"region_relative", "crop"=>"crop"),
  array("effect"=>"saturation:50"),
  array("effect"=>"vignette"),
  array("flags"=>"layer_apply", "width"=>100, "radius"=>"max", "gravity"=>"center", "y"=>20, "x"=>-20, "crop"=>"scale"),
  array("overlay"=>"balloon", "width"=>30),
  array("effect"=>"hue:-20", "angle"=>5),
  array("flags"=>"layer_apply", "x"=>30, "y"=>5),
  array("overlay"=>array("font_family"=>"Cookie", "font_size"=>40, "font_weight"=>"bold", "text"=>"Love"), "effect"=>"colorize", "color"=>"#f08"),
  array("angle"=>20, "flags"=>"layer_apply", "x"=>-45, "y"=>44)
  )))
Python:
Copy to clipboard
CloudinaryImage("coffee_cup.jpg").image(transformation=[
  {'width': 400, 'height': 250, 'gravity': "south", 'crop': "fill"},
  {'overlay': "nice_couple", 'width': 1.3, 'height': 1.3, 'gravity': "faces", 'flags': "region_relative", 'crop': "crop"},
  {'effect': "saturation:50"},
  {'effect': "vignette"},
  {'flags': "layer_apply", 'width': 100, 'radius': "max", 'gravity': "center", 'y': 20, 'x': -20, 'crop': "scale"},
  {'overlay': "balloon", 'width': 30},
  {'effect': "hue:-20", 'angle': 5},
  {'flags': "layer_apply", 'x': 30, 'y': 5},
  {'overlay': {'font_family': "Cookie", 'font_size': 40, 'font_weight': "bold", 'text': "Love"}, 'effect': "colorize", 'color': "#f08"},
  {'angle': 20, 'flags': "layer_apply", 'x': -45, 'y': 44}
  ])
Node.js:
Copy to clipboard
cloudinary.image("coffee_cup.jpg", {transformation: [
  {width: 400, height: 250, gravity: "south", crop: "fill"},
  {overlay: "nice_couple", width: "1.3", height: "1.3", gravity: "faces", flags: "region_relative", crop: "crop"},
  {effect: "saturation:50"},
  {effect: "vignette"},
  {flags: "layer_apply", width: 100, radius: "max", gravity: "center", y: 20, x: -20, crop: "scale"},
  {overlay: "balloon", width: 30},
  {effect: "hue:-20", angle: 5},
  {flags: "layer_apply", x: 30, y: 5},
  {overlay: {font_family: "Cookie", font_size: 40, font_weight: "bold", text: "Love"}, effect: "colorize", color: "#f08"},
  {angle: 20, flags: "layer_apply", x: -45, y: 44}
  ]})
Java:
Copy to clipboard
cloudinary.url().transformation(new Transformation()
  .width(400).height(250).gravity("south").crop("fill").chain()
  .overlay(new Layer().publicId("nice_couple")).width(1.3).height(1.3).gravity("faces").flags("region_relative").crop("crop").chain()
  .effect("saturation:50").chain()
  .effect("vignette").chain()
  .flags("layer_apply").width(100).radius("max").gravity("center").y(20).x(-20).crop("scale").chain()
  .overlay(new Layer().publicId("balloon")).width(30).chain()
  .effect("hue:-20").angle(5).chain()
  .flags("layer_apply").x(30).y(5).chain()
  .overlay(new TextLayer().fontFamily("Cookie").fontSize(40).fontWeight("bold").text("Love")).effect("colorize").color("#f08").chain()
  .angle(20).flags("layer_apply").x(-45).y(44)).imageTag("coffee_cup.jpg");
JS:
Copy to clipboard
cloudinary.imageTag('coffee_cup.jpg', {transformation: [
  {width: 400, height: 250, gravity: "south", crop: "fill"},
  {overlay: new cloudinary.Layer().publicId("nice_couple"), width: "1.3", height: "1.3", gravity: "faces", flags: "region_relative", crop: "crop"},
  {effect: "saturation:50"},
  {effect: "vignette"},
  {flags: "layer_apply", width: 100, radius: "max", gravity: "center", y: 20, x: -20, crop: "scale"},
  {overlay: new cloudinary.Layer().publicId("balloon"), width: 30},
  {effect: "hue:-20", angle: 5},
  {flags: "layer_apply", x: 30, y: 5},
  {overlay: new cloudinary.TextLayer().fontFamily("Cookie").fontSize(40).fontWeight("bold").text("Love"), effect: "colorize", color: "#f08"},
  {angle: 20, flags: "layer_apply", x: -45, y: 44}
  ]}).toHtml();
jQuery:
Copy to clipboard
$.cloudinary.image("coffee_cup.jpg", {transformation: [
  {width: 400, height: 250, gravity: "south", crop: "fill"},
  {overlay: new cloudinary.Layer().publicId("nice_couple"), width: "1.3", height: "1.3", gravity: "faces", flags: "region_relative", crop: "crop"},
  {effect: "saturation:50"},
  {effect: "vignette"},
  {flags: "layer_apply", width: 100, radius: "max", gravity: "center", y: 20, x: -20, crop: "scale"},
  {overlay: new cloudinary.Layer().publicId("balloon"), width: 30},
  {effect: "hue:-20", angle: 5},
  {flags: "layer_apply", x: 30, y: 5},
  {overlay: new cloudinary.TextLayer().fontFamily("Cookie").fontSize(40).fontWeight("bold").text("Love"), effect: "colorize", color: "#f08"},
  {angle: 20, flags: "layer_apply", x: -45, y: 44}
  ]})
React:
Copy to clipboard
<Image publicId="coffee_cup.jpg" >
  <Transformation width="400" height="250" gravity="south" crop="fill" />
  <Transformation overlay="nice_couple" width="1.3" height="1.3" gravity="faces" flags="region_relative" crop="crop" />
  <Transformation effect="saturation:50" />
  <Transformation effect="vignette" />
  <Transformation flags="layer_apply" width="100" radius="max" gravity="center" y="20" x="-20" crop="scale" />
  <Transformation overlay="balloon" width="30" />
  <Transformation effect="hue:-20" angle="5" />
  <Transformation flags="layer_apply" x="30" y="5" />
  <Transformation overlay={{fontFamily: "Cookie", fontSize: 40, fontWeight: "bold", text: "Love"}} effect="colorize" color="#f08" />
  <Transformation angle="20" flags="layer_apply" x="-45" y="44" />
</Image>
Vue.js:
Copy to clipboard
<cld-image publicId="coffee_cup.jpg" >
  <cld-transformation width="400" height="250" gravity="south" crop="fill" />
  <cld-transformation overlay="nice_couple" width="1.3" height="1.3" gravity="faces" flags="region_relative" crop="crop" />
  <cld-transformation effect="saturation:50" />
  <cld-transformation effect="vignette" />
  <cld-transformation flags="layer_apply" width="100" radius="max" gravity="center" y="20" x="-20" crop="scale" />
  <cld-transformation overlay="balloon" width="30" />
  <cld-transformation effect="hue:-20" angle="5" />
  <cld-transformation flags="layer_apply" x="30" y="5" />
  <cld-transformation overlay={{fontFamily: "Cookie", fontSize: 40, fontWeight: "bold", text: "Love"}} effect="colorize" color="#f08" />
  <cld-transformation angle="20" flags="layer_apply" x="-45" y="44" />
</cld-image>
Angular:
Copy to clipboard
<cl-image public-id="coffee_cup.jpg" >
  <cl-transformation width="400" height="250" gravity="south" crop="fill">
  </cl-transformation>
  <cl-transformation overlay="nice_couple" width="1.3" height="1.3" gravity="faces" flags="region_relative" crop="crop">
  </cl-transformation>
  <cl-transformation effect="saturation:50">
  </cl-transformation>
  <cl-transformation effect="vignette">
  </cl-transformation>
  <cl-transformation flags="layer_apply" width="100" radius="max" gravity="center" y="20" x="-20" crop="scale">
  </cl-transformation>
  <cl-transformation overlay="balloon" width="30">
  </cl-transformation>
  <cl-transformation effect="hue:-20" angle="5">
  </cl-transformation>
  <cl-transformation flags="layer_apply" x="30" y="5">
  </cl-transformation>
  <cl-transformation overlay="text:Cookie_40_bold:Love" effect="colorize" color="#f08">
  </cl-transformation>
  <cl-transformation angle="20" flags="layer_apply" x="-45" y="44">
  </cl-transformation>
</cl-image>
.Net:
Copy to clipboard
cloudinary.Api.UrlImgUp.Transform(new Transformation()
  .Width(400).Height(250).Gravity("south").Crop("fill").Chain()
  .Overlay(new Layer().PublicId("nice_couple")).Width(1.3).Height(1.3).Gravity("faces").Flags("region_relative").Crop("crop").Chain()
  .Effect("saturation:50").Chain()
  .Effect("vignette").Chain()
  .Flags("layer_apply").Width(100).Radius("max").Gravity("center").Y(20).X(-20).Crop("scale").Chain()
  .Overlay(new Layer().PublicId("balloon")).Width(30).Chain()
  .Effect("hue:-20").Angle(5).Chain()
  .Flags("layer_apply").X(30).Y(5).Chain()
  .Overlay(new TextLayer().FontFamily("Cookie").FontSize(40).FontWeight("bold").Text("Love")).Effect("colorize").Color("#f08").Chain()
  .Angle(20).Flags("layer_apply").X(-45).Y(44)).BuildImageTag("coffee_cup.jpg")
Android:
Copy to clipboard
MediaManager.get().url().transformation(new Transformation()
  .width(400).height(250).gravity("south").crop("fill").chain()
  .overlay(new Layer().publicId("nice_couple")).width(1.3).height(1.3).gravity("faces").flags("region_relative").crop("crop").chain()
  .effect("saturation:50").chain()
  .effect("vignette").chain()
  .flags("layer_apply").width(100).radius("max").gravity("center").y(20).x(-20).crop("scale").chain()
  .overlay(new Layer().publicId("balloon")).width(30).chain()
  .effect("hue:-20").angle(5).chain()
  .flags("layer_apply").x(30).y(5).chain()
  .overlay(new TextLayer().fontFamily("Cookie").fontSize(40).fontWeight("bold").text("Love")).effect("colorize").color("#f08").chain()
  .angle(20).flags("layer_apply").x(-45).y(44)).generate("coffee_cup.jpg");
iOS:
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation()
  .setWidth(400).setHeight(250).setGravity("south").setCrop("fill").chain()
  .setOverlay("nice_couple").setWidth(1.3).setHeight(1.3).setGravity("faces").setFlags("region_relative").setCrop("crop").chain()
  .setEffect("saturation:50").chain()
  .setEffect("vignette").chain()
  .setFlags("layer_apply").setWidth(100).setRadius("max").setGravity("center").setY(20).setX(-20).setCrop("scale").chain()
  .setOverlay("balloon").setWidth(30).chain()
  .setEffect("hue:-20").setAngle(5).chain()
  .setFlags("layer_apply").setX(30).setY(5).chain()
  .setOverlay("text:Cookie_40_bold:Love").setEffect("colorize").setColor("#f08").chain()
  .setAngle(20).setFlags("layer_apply").setX(-45).setY(44)).generate("coffee_cup.jpg")!, cloudinary: cloudinary)
Multiple image and text overlays with further manipulation

Summary

Cloudinary’s powerful capabilities allow you to manipulate and generate complex, combined images that match your graphic design requirements. You can use Cloudinary's dynamic manipulation URLs with user-uploaded images in order to manipulate the images while combining multiple images and text overlays into a single new image. With the new features introduced in this post, you can apply Cloudinary’s rich set of manipulation capabilities separately on each layer of underlying or overlaying images or text. All overlay manipulation features are available with all Cloudinary plans, including the free tier. If you don't have a Cloudinary account yet, sign up for a free account here.

Recent Blog Posts

A New, Simple Tool for Creating Text Overlays for Images

Many Cloudinary users desire a UI for tasks like creating text overlays for images, which they then embed on webpages or download for marketing campaigns. Generating such overlays with the Cloudinary Media Library UI involves a bit of a learning curve, especially if they require multiple fonts or text lines, which even experienced users might find challenging to implement.

Read more
Transitioning JPEG-Based to JPEG XL-Based Images for Web Platforms

When the JPEG codec was being developed in the late 1980s, no standardized, lossy image-compression formats existed. JPEG became ready at exactly the right time in 1992, when the World Wide Web and digital cameras were about to become a thing. The introduction of HTML’s <img> tag in 1995 ensured the recognition of JPEG as the web format—at least for photographs. During the 1990s, digital cameras replaced analog ones and, given the limited memory capacities of that era, JPEG became the standard format for photography, especially for consumer-grade cameras.

Read more

Amplify Your Jamstack With Video

By Alex Patterson
Amplify Your Jamstack With Cloudinary Video

As defined by Amazon Web Services (AWS), Amplify is a set of products and tools with which mobile and front-end web developers can build and deploy AWS-powered, secure, and scalable full-stack apps. Also, you can efficiently configure their back ends, connect them to your app with just a few lines of code, and deploy static web apps in only three steps. Historically, because of their performance issues, managing images and videos is a daunting challenge for developers. Even though you can easily load media to an S3 bucket with AWS Amplify, transforming, compressing, and responsively delivering them is labor intensive and time consuming.

Read more
Cloudinary Helps Move James Hardie’s Experience Online

While COVID has affected most businesses, it has been particularly hard on those that sell products for the physical ‘brick and mortar’ world. One company that literally fits that bill is our Australian customer James Hardie, the largest global manufacturer of fibre cement products used in both domestic and commercial construction. These are materials that its buyers ideally want to see up close, in detail. When customers have questions, they expect personal service.

Read more