Take your base image and use the overlay
parameter (l
in URLs) to add any further images. Set the required width
and height
(w
and h
in URLs) with the required crop mode, and add any further transformations, effects and texts.
Cloudinary allows taking any of your uploaded images and add them as overlays on any base image. The base image can be either from your uploaded images, remotely fetched images and more.
Here are four upload images we'd like to generate a collage from:




Now we'll take these four images and place them one next to the other:
cl_image_tag("yellow_tulip.jpg", :transformation=>[ {:width=>220, :height=>140, :crop=>"fill"}, {:overlay=>"brown_sheep", :width=>220, :height=>140, :x=>220, :crop=>"fill"}, {:overlay=>"horses", :width=>220, :height=>140, :y=>140, :x=>-110, :crop=>"fill"}, {:overlay=>"white_chicken", :width=>220, :height=>140, :y=>70, :x=>110, :crop=>"fill"} ])
cl_image_tag("yellow_tulip.jpg", array("transformation"=>array( array("width"=>220, "height"=>140, "crop"=>"fill"), array("overlay"=>"brown_sheep", "width"=>220, "height"=>140, "x"=>220, "crop"=>"fill"), array("overlay"=>"horses", "width"=>220, "height"=>140, "y"=>140, "x"=>-110, "crop"=>"fill"), array("overlay"=>"white_chicken", "width"=>220, "height"=>140, "y"=>70, "x"=>110, "crop"=>"fill") )))
CloudinaryImage("yellow_tulip.jpg").image(transformation=[ {'width': 220, 'height': 140, 'crop': "fill"}, {'overlay': "brown_sheep", 'width': 220, 'height': 140, 'x': 220, 'crop': "fill"}, {'overlay': "horses", 'width': 220, 'height': 140, 'y': 140, 'x': -110, 'crop': "fill"}, {'overlay': "white_chicken", 'width': 220, 'height': 140, 'y': 70, 'x': 110, 'crop': "fill"} ])
cloudinary.image("yellow_tulip.jpg", {transformation: [ {width: 220, height: 140, crop: "fill"}, {overlay: "brown_sheep", width: 220, height: 140, x: 220, crop: "fill"}, {overlay: "horses", width: 220, height: 140, y: 140, x: -110, crop: "fill"}, {overlay: "white_chicken", width: 220, height: 140, y: 70, x: 110, crop: "fill"} ]})
cloudinary.url().transformation(new Transformation() .width(220).height(140).crop("fill").chain() .overlay(new Layer().publicId("brown_sheep")).width(220).height(140).x(220).crop("fill").chain() .overlay(new Layer().publicId("horses")).width(220).height(140).y(140).x(-110).crop("fill").chain() .overlay(new Layer().publicId("white_chicken")).width(220).height(140).y(70).x(110).crop("fill")).imageTag("yellow_tulip.jpg");
cloudinary.imageTag('yellow_tulip.jpg', {transformation: [ {width: 220, height: 140, crop: "fill"}, {overlay: new cloudinary.Layer().publicId("brown_sheep"), width: 220, height: 140, x: 220, crop: "fill"}, {overlay: new cloudinary.Layer().publicId("horses"), width: 220, height: 140, y: 140, x: -110, crop: "fill"}, {overlay: new cloudinary.Layer().publicId("white_chicken"), width: 220, height: 140, y: 70, x: 110, crop: "fill"} ]}).toHtml();
$.cloudinary.image("yellow_tulip.jpg", {transformation: [ {width: 220, height: 140, crop: "fill"}, {overlay: new cloudinary.Layer().publicId("brown_sheep"), width: 220, height: 140, x: 220, crop: "fill"}, {overlay: new cloudinary.Layer().publicId("horses"), width: 220, height: 140, y: 140, x: -110, crop: "fill"}, {overlay: new cloudinary.Layer().publicId("white_chicken"), width: 220, height: 140, y: 70, x: 110, crop: "fill"} ]})
<Image publicId="yellow_tulip.jpg" > <Transformation width="220" height="140" crop="fill" /> <Transformation overlay="brown_sheep" width="220" height="140" x="220" crop="fill" /> <Transformation overlay="horses" width="220" height="140" y="140" x="-110" crop="fill" /> <Transformation overlay="white_chicken" width="220" height="140" y="70" x="110" crop="fill" /> </Image>
<cld-image publicId="yellow_tulip.jpg" > <cld-transformation width="220" height="140" crop="fill" /> <cld-transformation overlay="brown_sheep" width="220" height="140" x="220" crop="fill" /> <cld-transformation overlay="horses" width="220" height="140" y="140" x="-110" crop="fill" /> <cld-transformation overlay="white_chicken" width="220" height="140" y="70" x="110" crop="fill" /> </cld-image>
<cl-image public-id="yellow_tulip.jpg" > <cl-transformation width="220" height="140" crop="fill"> </cl-transformation> <cl-transformation overlay="brown_sheep" width="220" height="140" x="220" crop="fill"> </cl-transformation> <cl-transformation overlay="horses" width="220" height="140" y="140" x="-110" crop="fill"> </cl-transformation> <cl-transformation overlay="white_chicken" width="220" height="140" y="70" x="110" crop="fill"> </cl-transformation> </cl-image>
cloudinary.Api.UrlImgUp.Transform(new Transformation() .Width(220).Height(140).Crop("fill").Chain() .Overlay(new Layer().PublicId("brown_sheep")).Width(220).Height(140).X(220).Crop("fill").Chain() .Overlay(new Layer().PublicId("horses")).Width(220).Height(140).Y(140).X(-110).Crop("fill").Chain() .Overlay(new Layer().PublicId("white_chicken")).Width(220).Height(140).Y(70).X(110).Crop("fill")).BuildImageTag("yellow_tulip.jpg")
MediaManager.get().url().transformation(new Transformation() .width(220).height(140).crop("fill").chain() .overlay(new Layer().publicId("brown_sheep")).width(220).height(140).x(220).crop("fill").chain() .overlay(new Layer().publicId("horses")).width(220).height(140).y(140).x(-110).crop("fill").chain() .overlay(new Layer().publicId("white_chicken")).width(220).height(140).y(70).x(110).crop("fill")).generate("yellow_tulip.jpg");
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation() .setWidth(220).setHeight(140).setCrop("fill").chain() .setOverlay("brown_sheep").setWidth(220).setHeight(140).setX(220).setCrop("fill").chain() .setOverlay("horses").setWidth(220).setHeight(140).setY(140).setX(-110).setCrop("fill").chain() .setOverlay("white_chicken").setWidth(220).setHeight(140).setY(70).setX(110).setCrop("fill")).generate("yellow_tulip.jpg")!, cloudinary: cloudinary)

We can add a fifth image (with the public ID 'butterfly') while rotating it a bit:
cl_image_tag("yellow_tulip.jpg", :transformation=>[ {:width=>220, :height=>140, :crop=>"fill"}, {:overlay=>"brown_sheep", :width=>220, :height=>140, :x=>220, :crop=>"fill"}, {:overlay=>"horses", :width=>220, :height=>140, :y=>140, :x=>-110, :crop=>"fill"}, {:overlay=>"white_chicken", :width=>220, :height=>140, :y=>70, :x=>110, :crop=>"fill"}, {:overlay=>"butterfly.png", :height=>200, :x=>-10, :angle=>10} ])
cl_image_tag("yellow_tulip.jpg", array("transformation"=>array( array("width"=>220, "height"=>140, "crop"=>"fill"), array("overlay"=>"brown_sheep", "width"=>220, "height"=>140, "x"=>220, "crop"=>"fill"), array("overlay"=>"horses", "width"=>220, "height"=>140, "y"=>140, "x"=>-110, "crop"=>"fill"), array("overlay"=>"white_chicken", "width"=>220, "height"=>140, "y"=>70, "x"=>110, "crop"=>"fill"), array("overlay"=>"butterfly.png", "height"=>200, "x"=>-10, "angle"=>10) )))
CloudinaryImage("yellow_tulip.jpg").image(transformation=[ {'width': 220, 'height': 140, 'crop': "fill"}, {'overlay': "brown_sheep", 'width': 220, 'height': 140, 'x': 220, 'crop': "fill"}, {'overlay': "horses", 'width': 220, 'height': 140, 'y': 140, 'x': -110, 'crop': "fill"}, {'overlay': "white_chicken", 'width': 220, 'height': 140, 'y': 70, 'x': 110, 'crop': "fill"}, {'overlay': "butterfly.png", 'height': 200, 'x': -10, 'angle': 10} ])
cloudinary.image("yellow_tulip.jpg", {transformation: [ {width: 220, height: 140, crop: "fill"}, {overlay: "brown_sheep", width: 220, height: 140, x: 220, crop: "fill"}, {overlay: "horses", width: 220, height: 140, y: 140, x: -110, crop: "fill"}, {overlay: "white_chicken", width: 220, height: 140, y: 70, x: 110, crop: "fill"}, {overlay: "butterfly.png", height: 200, x: -10, angle: 10} ]})
cloudinary.url().transformation(new Transformation() .width(220).height(140).crop("fill").chain() .overlay(new Layer().publicId("brown_sheep")).width(220).height(140).x(220).crop("fill").chain() .overlay(new Layer().publicId("horses")).width(220).height(140).y(140).x(-110).crop("fill").chain() .overlay(new Layer().publicId("white_chicken")).width(220).height(140).y(70).x(110).crop("fill").chain() .overlay(new Layer().publicId("butterfly.png")).height(200).x(-10).angle(10)).imageTag("yellow_tulip.jpg");
cloudinary.imageTag('yellow_tulip.jpg', {transformation: [ {width: 220, height: 140, crop: "fill"}, {overlay: new cloudinary.Layer().publicId("brown_sheep"), width: 220, height: 140, x: 220, crop: "fill"}, {overlay: new cloudinary.Layer().publicId("horses"), width: 220, height: 140, y: 140, x: -110, crop: "fill"}, {overlay: new cloudinary.Layer().publicId("white_chicken"), width: 220, height: 140, y: 70, x: 110, crop: "fill"}, {overlay: new cloudinary.Layer().publicId("butterfly.png"), height: 200, x: -10, angle: 10} ]}).toHtml();
$.cloudinary.image("yellow_tulip.jpg", {transformation: [ {width: 220, height: 140, crop: "fill"}, {overlay: new cloudinary.Layer().publicId("brown_sheep"), width: 220, height: 140, x: 220, crop: "fill"}, {overlay: new cloudinary.Layer().publicId("horses"), width: 220, height: 140, y: 140, x: -110, crop: "fill"}, {overlay: new cloudinary.Layer().publicId("white_chicken"), width: 220, height: 140, y: 70, x: 110, crop: "fill"}, {overlay: new cloudinary.Layer().publicId("butterfly.png"), height: 200, x: -10, angle: 10} ]})
<Image publicId="yellow_tulip.jpg" > <Transformation width="220" height="140" crop="fill" /> <Transformation overlay="brown_sheep" width="220" height="140" x="220" crop="fill" /> <Transformation overlay="horses" width="220" height="140" y="140" x="-110" crop="fill" /> <Transformation overlay="white_chicken" width="220" height="140" y="70" x="110" crop="fill" /> <Transformation overlay="butterfly.png" height="200" x="-10" angle="10" /> </Image>
<cld-image publicId="yellow_tulip.jpg" > <cld-transformation width="220" height="140" crop="fill" /> <cld-transformation overlay="brown_sheep" width="220" height="140" x="220" crop="fill" /> <cld-transformation overlay="horses" width="220" height="140" y="140" x="-110" crop="fill" /> <cld-transformation overlay="white_chicken" width="220" height="140" y="70" x="110" crop="fill" /> <cld-transformation overlay="butterfly.png" height="200" x="-10" angle="10" /> </cld-image>
<cl-image public-id="yellow_tulip.jpg" > <cl-transformation width="220" height="140" crop="fill"> </cl-transformation> <cl-transformation overlay="brown_sheep" width="220" height="140" x="220" crop="fill"> </cl-transformation> <cl-transformation overlay="horses" width="220" height="140" y="140" x="-110" crop="fill"> </cl-transformation> <cl-transformation overlay="white_chicken" width="220" height="140" y="70" x="110" crop="fill"> </cl-transformation> <cl-transformation overlay="butterfly.png" height="200" x="-10" angle="10"> </cl-transformation> </cl-image>
cloudinary.Api.UrlImgUp.Transform(new Transformation() .Width(220).Height(140).Crop("fill").Chain() .Overlay(new Layer().PublicId("brown_sheep")).Width(220).Height(140).X(220).Crop("fill").Chain() .Overlay(new Layer().PublicId("horses")).Width(220).Height(140).Y(140).X(-110).Crop("fill").Chain() .Overlay(new Layer().PublicId("white_chicken")).Width(220).Height(140).Y(70).X(110).Crop("fill").Chain() .Overlay(new Layer().PublicId("butterfly.png")).Height(200).X(-10).Angle(10)).BuildImageTag("yellow_tulip.jpg")
MediaManager.get().url().transformation(new Transformation() .width(220).height(140).crop("fill").chain() .overlay(new Layer().publicId("brown_sheep")).width(220).height(140).x(220).crop("fill").chain() .overlay(new Layer().publicId("horses")).width(220).height(140).y(140).x(-110).crop("fill").chain() .overlay(new Layer().publicId("white_chicken")).width(220).height(140).y(70).x(110).crop("fill").chain() .overlay(new Layer().publicId("butterfly.png")).height(200).x(-10).angle(10)).generate("yellow_tulip.jpg");
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation() .setWidth(220).setHeight(140).setCrop("fill").chain() .setOverlay("brown_sheep").setWidth(220).setHeight(140).setX(220).setCrop("fill").chain() .setOverlay("horses").setWidth(220).setHeight(140).setY(140).setX(-110).setCrop("fill").chain() .setOverlay("white_chicken").setWidth(220).setHeight(140).setY(70).setX(110).setCrop("fill").chain() .setOverlay("butterfly.png").setHeight(200).setX(-10).setAngle(10)).generate("yellow_tulip.jpg")!, cloudinary: cloudinary)

Now we'll round the corners of the image by setting the radius
parameter (r
in URLs) to the required pixels:
cl_image_tag("yellow_tulip.jpg", :transformation=>[ {:width=>220, :height=>140, :crop=>"fill"}, {:overlay=>"brown_sheep", :width=>220, :height=>140, :x=>220, :crop=>"fill"}, {:overlay=>"horses", :width=>220, :height=>140, :y=>140, :x=>-110, :crop=>"fill"}, {:overlay=>"white_chicken", :width=>220, :height=>140, :y=>70, :x=>110, :crop=>"fill"}, {:overlay=>"butterfly.png", :height=>200, :x=>-10, :angle=>10}, {:radius=>20} ])
cl_image_tag("yellow_tulip.jpg", array("transformation"=>array( array("width"=>220, "height"=>140, "crop"=>"fill"), array("overlay"=>"brown_sheep", "width"=>220, "height"=>140, "x"=>220, "crop"=>"fill"), array("overlay"=>"horses", "width"=>220, "height"=>140, "y"=>140, "x"=>-110, "crop"=>"fill"), array("overlay"=>"white_chicken", "width"=>220, "height"=>140, "y"=>70, "x"=>110, "crop"=>"fill"), array("overlay"=>"butterfly.png", "height"=>200, "x"=>-10, "angle"=>10), array("radius"=>20) )))
CloudinaryImage("yellow_tulip.jpg").image(transformation=[ {'width': 220, 'height': 140, 'crop': "fill"}, {'overlay': "brown_sheep", 'width': 220, 'height': 140, 'x': 220, 'crop': "fill"}, {'overlay': "horses", 'width': 220, 'height': 140, 'y': 140, 'x': -110, 'crop': "fill"}, {'overlay': "white_chicken", 'width': 220, 'height': 140, 'y': 70, 'x': 110, 'crop': "fill"}, {'overlay': "butterfly.png", 'height': 200, 'x': -10, 'angle': 10}, {'radius': 20} ])
cloudinary.image("yellow_tulip.jpg", {transformation: [ {width: 220, height: 140, crop: "fill"}, {overlay: "brown_sheep", width: 220, height: 140, x: 220, crop: "fill"}, {overlay: "horses", width: 220, height: 140, y: 140, x: -110, crop: "fill"}, {overlay: "white_chicken", width: 220, height: 140, y: 70, x: 110, crop: "fill"}, {overlay: "butterfly.png", height: 200, x: -10, angle: 10}, {radius: 20} ]})
cloudinary.url().transformation(new Transformation() .width(220).height(140).crop("fill").chain() .overlay(new Layer().publicId("brown_sheep")).width(220).height(140).x(220).crop("fill").chain() .overlay(new Layer().publicId("horses")).width(220).height(140).y(140).x(-110).crop("fill").chain() .overlay(new Layer().publicId("white_chicken")).width(220).height(140).y(70).x(110).crop("fill").chain() .overlay(new Layer().publicId("butterfly.png")).height(200).x(-10).angle(10).chain() .radius(20)).imageTag("yellow_tulip.jpg");
cloudinary.imageTag('yellow_tulip.jpg', {transformation: [ {width: 220, height: 140, crop: "fill"}, {overlay: new cloudinary.Layer().publicId("brown_sheep"), width: 220, height: 140, x: 220, crop: "fill"}, {overlay: new cloudinary.Layer().publicId("horses"), width: 220, height: 140, y: 140, x: -110, crop: "fill"}, {overlay: new cloudinary.Layer().publicId("white_chicken"), width: 220, height: 140, y: 70, x: 110, crop: "fill"}, {overlay: new cloudinary.Layer().publicId("butterfly.png"), height: 200, x: -10, angle: 10}, {radius: 20} ]}).toHtml();
$.cloudinary.image("yellow_tulip.jpg", {transformation: [ {width: 220, height: 140, crop: "fill"}, {overlay: new cloudinary.Layer().publicId("brown_sheep"), width: 220, height: 140, x: 220, crop: "fill"}, {overlay: new cloudinary.Layer().publicId("horses"), width: 220, height: 140, y: 140, x: -110, crop: "fill"}, {overlay: new cloudinary.Layer().publicId("white_chicken"), width: 220, height: 140, y: 70, x: 110, crop: "fill"}, {overlay: new cloudinary.Layer().publicId("butterfly.png"), height: 200, x: -10, angle: 10}, {radius: 20} ]})
<Image publicId="yellow_tulip.jpg" > <Transformation width="220" height="140" crop="fill" /> <Transformation overlay="brown_sheep" width="220" height="140" x="220" crop="fill" /> <Transformation overlay="horses" width="220" height="140" y="140" x="-110" crop="fill" /> <Transformation overlay="white_chicken" width="220" height="140" y="70" x="110" crop="fill" /> <Transformation overlay="butterfly.png" height="200" x="-10" angle="10" /> <Transformation radius="20" /> </Image>
<cld-image publicId="yellow_tulip.jpg" > <cld-transformation width="220" height="140" crop="fill" /> <cld-transformation overlay="brown_sheep" width="220" height="140" x="220" crop="fill" /> <cld-transformation overlay="horses" width="220" height="140" y="140" x="-110" crop="fill" /> <cld-transformation overlay="white_chicken" width="220" height="140" y="70" x="110" crop="fill" /> <cld-transformation overlay="butterfly.png" height="200" x="-10" angle="10" /> <cld-transformation radius="20" /> </cld-image>
<cl-image public-id="yellow_tulip.jpg" > <cl-transformation width="220" height="140" crop="fill"> </cl-transformation> <cl-transformation overlay="brown_sheep" width="220" height="140" x="220" crop="fill"> </cl-transformation> <cl-transformation overlay="horses" width="220" height="140" y="140" x="-110" crop="fill"> </cl-transformation> <cl-transformation overlay="white_chicken" width="220" height="140" y="70" x="110" crop="fill"> </cl-transformation> <cl-transformation overlay="butterfly.png" height="200" x="-10" angle="10"> </cl-transformation> <cl-transformation radius="20"> </cl-transformation> </cl-image>
cloudinary.Api.UrlImgUp.Transform(new Transformation() .Width(220).Height(140).Crop("fill").Chain() .Overlay(new Layer().PublicId("brown_sheep")).Width(220).Height(140).X(220).Crop("fill").Chain() .Overlay(new Layer().PublicId("horses")).Width(220).Height(140).Y(140).X(-110).Crop("fill").Chain() .Overlay(new Layer().PublicId("white_chicken")).Width(220).Height(140).Y(70).X(110).Crop("fill").Chain() .Overlay(new Layer().PublicId("butterfly.png")).Height(200).X(-10).Angle(10).Chain() .Radius(20)).BuildImageTag("yellow_tulip.jpg")
MediaManager.get().url().transformation(new Transformation() .width(220).height(140).crop("fill").chain() .overlay(new Layer().publicId("brown_sheep")).width(220).height(140).x(220).crop("fill").chain() .overlay(new Layer().publicId("horses")).width(220).height(140).y(140).x(-110).crop("fill").chain() .overlay(new Layer().publicId("white_chicken")).width(220).height(140).y(70).x(110).crop("fill").chain() .overlay(new Layer().publicId("butterfly.png")).height(200).x(-10).angle(10).chain() .radius(20)).generate("yellow_tulip.jpg");
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation() .setWidth(220).setHeight(140).setCrop("fill").chain() .setOverlay("brown_sheep").setWidth(220).setHeight(140).setX(220).setCrop("fill").chain() .setOverlay("horses").setWidth(220).setHeight(140).setY(140).setX(-110).setCrop("fill").chain() .setOverlay("white_chicken").setWidth(220).setHeight(140).setY(70).setX(110).setCrop("fill").chain() .setOverlay("butterfly.png").setHeight(200).setX(-10).setAngle(10).chain() .setRadius(20)).generate("yellow_tulip.jpg")!, cloudinary: cloudinary)

Now let's add a nice caption text:
cl_image_tag("yellow_tulip.jpg", :transformation=>[ {:width=>220, :height=>140, :crop=>"fill"}, {:overlay=>"brown_sheep", :width=>220, :height=>140, :x=>220, :crop=>"fill"}, {:overlay=>"horses", :width=>220, :height=>140, :y=>140, :x=>-110, :crop=>"fill"}, {:overlay=>"white_chicken", :width=>220, :height=>140, :y=>70, :x=>110, :crop=>"fill"}, {:overlay=>"butterfly.png", :height=>200, :x=>-10, :angle=>10}, {:width=>400, :height=>260, :radius=>20, :crop=>"crop"}, {:overlay=>{:font_family=>"Parisienne", :font_size=>35, :font_weight=>"bold", :text=>"Memories%20from%20our%20trip"}, :color=>"#990C47", :y=>155} ])
cl_image_tag("yellow_tulip.jpg", array("transformation"=>array( array("width"=>220, "height"=>140, "crop"=>"fill"), array("overlay"=>"brown_sheep", "width"=>220, "height"=>140, "x"=>220, "crop"=>"fill"), array("overlay"=>"horses", "width"=>220, "height"=>140, "y"=>140, "x"=>-110, "crop"=>"fill"), array("overlay"=>"white_chicken", "width"=>220, "height"=>140, "y"=>70, "x"=>110, "crop"=>"fill"), array("overlay"=>"butterfly.png", "height"=>200, "x"=>-10, "angle"=>10), array("width"=>400, "height"=>260, "radius"=>20, "crop"=>"crop"), array("overlay"=>array("font_family"=>"Parisienne", "font_size"=>35, "font_weight"=>"bold", "text"=>"Memories%20from%20our%20trip"), "color"=>"#990C47", "y"=>155) )))
CloudinaryImage("yellow_tulip.jpg").image(transformation=[ {'width': 220, 'height': 140, 'crop': "fill"}, {'overlay': "brown_sheep", 'width': 220, 'height': 140, 'x': 220, 'crop': "fill"}, {'overlay': "horses", 'width': 220, 'height': 140, 'y': 140, 'x': -110, 'crop': "fill"}, {'overlay': "white_chicken", 'width': 220, 'height': 140, 'y': 70, 'x': 110, 'crop': "fill"}, {'overlay': "butterfly.png", 'height': 200, 'x': -10, 'angle': 10}, {'width': 400, 'height': 260, 'radius': 20, 'crop': "crop"}, {'overlay': {'font_family': "Parisienne", 'font_size': 35, 'font_weight': "bold", 'text': "Memories%20from%20our%20trip"}, 'color': "#990C47", 'y': 155} ])
cloudinary.image("yellow_tulip.jpg", {transformation: [ {width: 220, height: 140, crop: "fill"}, {overlay: "brown_sheep", width: 220, height: 140, x: 220, crop: "fill"}, {overlay: "horses", width: 220, height: 140, y: 140, x: -110, crop: "fill"}, {overlay: "white_chicken", width: 220, height: 140, y: 70, x: 110, crop: "fill"}, {overlay: "butterfly.png", height: 200, x: -10, angle: 10}, {width: 400, height: 260, radius: 20, crop: "crop"}, {overlay: {font_family: "Parisienne", font_size: 35, font_weight: "bold", text: "Memories%20from%20our%20trip"}, color: "#990C47", y: 155} ]})
cloudinary.url().transformation(new Transformation() .width(220).height(140).crop("fill").chain() .overlay(new Layer().publicId("brown_sheep")).width(220).height(140).x(220).crop("fill").chain() .overlay(new Layer().publicId("horses")).width(220).height(140).y(140).x(-110).crop("fill").chain() .overlay(new Layer().publicId("white_chicken")).width(220).height(140).y(70).x(110).crop("fill").chain() .overlay(new Layer().publicId("butterfly.png")).height(200).x(-10).angle(10).chain() .width(400).height(260).radius(20).crop("crop").chain() .overlay(new TextLayer().fontFamily("Parisienne").fontSize(35).fontWeight("bold").text("Memories%20from%20our%20trip")).color("#990C47").y(155)).imageTag("yellow_tulip.jpg");
cloudinary.imageTag('yellow_tulip.jpg', {transformation: [ {width: 220, height: 140, crop: "fill"}, {overlay: new cloudinary.Layer().publicId("brown_sheep"), width: 220, height: 140, x: 220, crop: "fill"}, {overlay: new cloudinary.Layer().publicId("horses"), width: 220, height: 140, y: 140, x: -110, crop: "fill"}, {overlay: new cloudinary.Layer().publicId("white_chicken"), width: 220, height: 140, y: 70, x: 110, crop: "fill"}, {overlay: new cloudinary.Layer().publicId("butterfly.png"), height: 200, x: -10, angle: 10}, {width: 400, height: 260, radius: 20, crop: "crop"}, {overlay: new cloudinary.TextLayer().fontFamily("Parisienne").fontSize(35).fontWeight("bold").text("Memories%20from%20our%20trip"), color: "#990C47", y: 155} ]}).toHtml();
$.cloudinary.image("yellow_tulip.jpg", {transformation: [ {width: 220, height: 140, crop: "fill"}, {overlay: new cloudinary.Layer().publicId("brown_sheep"), width: 220, height: 140, x: 220, crop: "fill"}, {overlay: new cloudinary.Layer().publicId("horses"), width: 220, height: 140, y: 140, x: -110, crop: "fill"}, {overlay: new cloudinary.Layer().publicId("white_chicken"), width: 220, height: 140, y: 70, x: 110, crop: "fill"}, {overlay: new cloudinary.Layer().publicId("butterfly.png"), height: 200, x: -10, angle: 10}, {width: 400, height: 260, radius: 20, crop: "crop"}, {overlay: new cloudinary.TextLayer().fontFamily("Parisienne").fontSize(35).fontWeight("bold").text("Memories%20from%20our%20trip"), color: "#990C47", y: 155} ]})
<Image publicId="yellow_tulip.jpg" > <Transformation width="220" height="140" crop="fill" /> <Transformation overlay="brown_sheep" width="220" height="140" x="220" crop="fill" /> <Transformation overlay="horses" width="220" height="140" y="140" x="-110" crop="fill" /> <Transformation overlay="white_chicken" width="220" height="140" y="70" x="110" crop="fill" /> <Transformation overlay="butterfly.png" height="200" x="-10" angle="10" /> <Transformation width="400" height="260" radius="20" crop="crop" /> <Transformation overlay={{fontFamily: "Parisienne", fontSize: 35, fontWeight: "bold", text: "Memories%20from%20our%20trip"}} color="#990C47" y="155" /> </Image>
<cld-image publicId="yellow_tulip.jpg" > <cld-transformation width="220" height="140" crop="fill" /> <cld-transformation overlay="brown_sheep" width="220" height="140" x="220" crop="fill" /> <cld-transformation overlay="horses" width="220" height="140" y="140" x="-110" crop="fill" /> <cld-transformation overlay="white_chicken" width="220" height="140" y="70" x="110" crop="fill" /> <cld-transformation overlay="butterfly.png" height="200" x="-10" angle="10" /> <cld-transformation width="400" height="260" radius="20" crop="crop" /> <cld-transformation overlay={{fontFamily: "Parisienne", fontSize: 35, fontWeight: "bold", text: "Memories%20from%20our%20trip"}} color="#990C47" y="155" /> </cld-image>
<cl-image public-id="yellow_tulip.jpg" > <cl-transformation width="220" height="140" crop="fill"> </cl-transformation> <cl-transformation overlay="brown_sheep" width="220" height="140" x="220" crop="fill"> </cl-transformation> <cl-transformation overlay="horses" width="220" height="140" y="140" x="-110" crop="fill"> </cl-transformation> <cl-transformation overlay="white_chicken" width="220" height="140" y="70" x="110" crop="fill"> </cl-transformation> <cl-transformation overlay="butterfly.png" height="200" x="-10" angle="10"> </cl-transformation> <cl-transformation width="400" height="260" radius="20" crop="crop"> </cl-transformation> <cl-transformation overlay="text:Parisienne_35_bold:Memories%20from%20our%20trip" color="#990C47" y="155"> </cl-transformation> </cl-image>
cloudinary.Api.UrlImgUp.Transform(new Transformation() .Width(220).Height(140).Crop("fill").Chain() .Overlay(new Layer().PublicId("brown_sheep")).Width(220).Height(140).X(220).Crop("fill").Chain() .Overlay(new Layer().PublicId("horses")).Width(220).Height(140).Y(140).X(-110).Crop("fill").Chain() .Overlay(new Layer().PublicId("white_chicken")).Width(220).Height(140).Y(70).X(110).Crop("fill").Chain() .Overlay(new Layer().PublicId("butterfly.png")).Height(200).X(-10).Angle(10).Chain() .Width(400).Height(260).Radius(20).Crop("crop").Chain() .Overlay(new TextLayer().FontFamily("Parisienne").FontSize(35).FontWeight("bold").Text("Memories%20from%20our%20trip")).Color("#990C47").Y(155)).BuildImageTag("yellow_tulip.jpg")
MediaManager.get().url().transformation(new Transformation() .width(220).height(140).crop("fill").chain() .overlay(new Layer().publicId("brown_sheep")).width(220).height(140).x(220).crop("fill").chain() .overlay(new Layer().publicId("horses")).width(220).height(140).y(140).x(-110).crop("fill").chain() .overlay(new Layer().publicId("white_chicken")).width(220).height(140).y(70).x(110).crop("fill").chain() .overlay(new Layer().publicId("butterfly.png")).height(200).x(-10).angle(10).chain() .width(400).height(260).radius(20).crop("crop").chain() .overlay(new TextLayer().fontFamily("Parisienne").fontSize(35).fontWeight("bold").text("Memories%20from%20our%20trip")).color("#990C47").y(155)).generate("yellow_tulip.jpg");
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation() .setWidth(220).setHeight(140).setCrop("fill").chain() .setOverlay("brown_sheep").setWidth(220).setHeight(140).setX(220).setCrop("fill").chain() .setOverlay("horses").setWidth(220).setHeight(140).setY(140).setX(-110).setCrop("fill").chain() .setOverlay("white_chicken").setWidth(220).setHeight(140).setY(70).setX(110).setCrop("fill").chain() .setOverlay("butterfly.png").setHeight(200).setX(-10).setAngle(10).chain() .setWidth(400).setHeight(260).setRadius(20).setCrop("crop").chain() .setOverlay("text:Parisienne_35_bold:Memories%20from%20our%20trip").setColor("#990C47").setY(155)).generate("yellow_tulip.jpg")!, cloudinary: cloudinary)

Finally, we'll add a nice shadow effect by setting the effect
parameter to shadow
(e_shadow
in URLs):
cl_image_tag("yellow_tulip.jpg", :transformation=>[ {:width=>220, :height=>140, :crop=>"fill"}, {:overlay=>"brown_sheep", :width=>220, :height=>140, :x=>220, :crop=>"fill"}, {:overlay=>"horses", :width=>220, :height=>140, :y=>140, :x=>-110, :crop=>"fill"}, {:overlay=>"white_chicken", :width=>220, :height=>140, :y=>70, :x=>110, :crop=>"fill"}, {:overlay=>"butterfly.png", :height=>200, :x=>-10, :angle=>10}, {:width=>400, :height=>260, :radius=>20, :crop=>"crop"}, {:overlay=>{:font_family=>"Parisienne", :font_size=>35, :font_weight=>"bold", :text=>"Memories%20from%20our%20trip"}, :color=>"#990C47", :y=>155}, {:effect=>"shadow"} ])
cl_image_tag("yellow_tulip.jpg", array("transformation"=>array( array("width"=>220, "height"=>140, "crop"=>"fill"), array("overlay"=>"brown_sheep", "width"=>220, "height"=>140, "x"=>220, "crop"=>"fill"), array("overlay"=>"horses", "width"=>220, "height"=>140, "y"=>140, "x"=>-110, "crop"=>"fill"), array("overlay"=>"white_chicken", "width"=>220, "height"=>140, "y"=>70, "x"=>110, "crop"=>"fill"), array("overlay"=>"butterfly.png", "height"=>200, "x"=>-10, "angle"=>10), array("width"=>400, "height"=>260, "radius"=>20, "crop"=>"crop"), array("overlay"=>array("font_family"=>"Parisienne", "font_size"=>35, "font_weight"=>"bold", "text"=>"Memories%20from%20our%20trip"), "color"=>"#990C47", "y"=>155), array("effect"=>"shadow") )))
CloudinaryImage("yellow_tulip.jpg").image(transformation=[ {'width': 220, 'height': 140, 'crop': "fill"}, {'overlay': "brown_sheep", 'width': 220, 'height': 140, 'x': 220, 'crop': "fill"}, {'overlay': "horses", 'width': 220, 'height': 140, 'y': 140, 'x': -110, 'crop': "fill"}, {'overlay': "white_chicken", 'width': 220, 'height': 140, 'y': 70, 'x': 110, 'crop': "fill"}, {'overlay': "butterfly.png", 'height': 200, 'x': -10, 'angle': 10}, {'width': 400, 'height': 260, 'radius': 20, 'crop': "crop"}, {'overlay': {'font_family': "Parisienne", 'font_size': 35, 'font_weight': "bold", 'text': "Memories%20from%20our%20trip"}, 'color': "#990C47", 'y': 155}, {'effect': "shadow"} ])
cloudinary.image("yellow_tulip.jpg", {transformation: [ {width: 220, height: 140, crop: "fill"}, {overlay: "brown_sheep", width: 220, height: 140, x: 220, crop: "fill"}, {overlay: "horses", width: 220, height: 140, y: 140, x: -110, crop: "fill"}, {overlay: "white_chicken", width: 220, height: 140, y: 70, x: 110, crop: "fill"}, {overlay: "butterfly.png", height: 200, x: -10, angle: 10}, {width: 400, height: 260, radius: 20, crop: "crop"}, {overlay: {font_family: "Parisienne", font_size: 35, font_weight: "bold", text: "Memories%20from%20our%20trip"}, color: "#990C47", y: 155}, {effect: "shadow"} ]})
cloudinary.url().transformation(new Transformation() .width(220).height(140).crop("fill").chain() .overlay(new Layer().publicId("brown_sheep")).width(220).height(140).x(220).crop("fill").chain() .overlay(new Layer().publicId("horses")).width(220).height(140).y(140).x(-110).crop("fill").chain() .overlay(new Layer().publicId("white_chicken")).width(220).height(140).y(70).x(110).crop("fill").chain() .overlay(new Layer().publicId("butterfly.png")).height(200).x(-10).angle(10).chain() .width(400).height(260).radius(20).crop("crop").chain() .overlay(new TextLayer().fontFamily("Parisienne").fontSize(35).fontWeight("bold").text("Memories%20from%20our%20trip")).color("#990C47").y(155).chain() .effect("shadow")).imageTag("yellow_tulip.jpg");
cloudinary.imageTag('yellow_tulip.jpg', {transformation: [ {width: 220, height: 140, crop: "fill"}, {overlay: new cloudinary.Layer().publicId("brown_sheep"), width: 220, height: 140, x: 220, crop: "fill"}, {overlay: new cloudinary.Layer().publicId("horses"), width: 220, height: 140, y: 140, x: -110, crop: "fill"}, {overlay: new cloudinary.Layer().publicId("white_chicken"), width: 220, height: 140, y: 70, x: 110, crop: "fill"}, {overlay: new cloudinary.Layer().publicId("butterfly.png"), height: 200, x: -10, angle: 10}, {width: 400, height: 260, radius: 20, crop: "crop"}, {overlay: new cloudinary.TextLayer().fontFamily("Parisienne").fontSize(35).fontWeight("bold").text("Memories%20from%20our%20trip"), color: "#990C47", y: 155}, {effect: "shadow"} ]}).toHtml();
$.cloudinary.image("yellow_tulip.jpg", {transformation: [ {width: 220, height: 140, crop: "fill"}, {overlay: new cloudinary.Layer().publicId("brown_sheep"), width: 220, height: 140, x: 220, crop: "fill"}, {overlay: new cloudinary.Layer().publicId("horses"), width: 220, height: 140, y: 140, x: -110, crop: "fill"}, {overlay: new cloudinary.Layer().publicId("white_chicken"), width: 220, height: 140, y: 70, x: 110, crop: "fill"}, {overlay: new cloudinary.Layer().publicId("butterfly.png"), height: 200, x: -10, angle: 10}, {width: 400, height: 260, radius: 20, crop: "crop"}, {overlay: new cloudinary.TextLayer().fontFamily("Parisienne").fontSize(35).fontWeight("bold").text("Memories%20from%20our%20trip"), color: "#990C47", y: 155}, {effect: "shadow"} ]})
<Image publicId="yellow_tulip.jpg" > <Transformation width="220" height="140" crop="fill" /> <Transformation overlay="brown_sheep" width="220" height="140" x="220" crop="fill" /> <Transformation overlay="horses" width="220" height="140" y="140" x="-110" crop="fill" /> <Transformation overlay="white_chicken" width="220" height="140" y="70" x="110" crop="fill" /> <Transformation overlay="butterfly.png" height="200" x="-10" angle="10" /> <Transformation width="400" height="260" radius="20" crop="crop" /> <Transformation overlay={{fontFamily: "Parisienne", fontSize: 35, fontWeight: "bold", text: "Memories%20from%20our%20trip"}} color="#990C47" y="155" /> <Transformation effect="shadow" /> </Image>
<cld-image publicId="yellow_tulip.jpg" > <cld-transformation width="220" height="140" crop="fill" /> <cld-transformation overlay="brown_sheep" width="220" height="140" x="220" crop="fill" /> <cld-transformation overlay="horses" width="220" height="140" y="140" x="-110" crop="fill" /> <cld-transformation overlay="white_chicken" width="220" height="140" y="70" x="110" crop="fill" /> <cld-transformation overlay="butterfly.png" height="200" x="-10" angle="10" /> <cld-transformation width="400" height="260" radius="20" crop="crop" /> <cld-transformation overlay={{fontFamily: "Parisienne", fontSize: 35, fontWeight: "bold", text: "Memories%20from%20our%20trip"}} color="#990C47" y="155" /> <cld-transformation effect="shadow" /> </cld-image>
<cl-image public-id="yellow_tulip.jpg" > <cl-transformation width="220" height="140" crop="fill"> </cl-transformation> <cl-transformation overlay="brown_sheep" width="220" height="140" x="220" crop="fill"> </cl-transformation> <cl-transformation overlay="horses" width="220" height="140" y="140" x="-110" crop="fill"> </cl-transformation> <cl-transformation overlay="white_chicken" width="220" height="140" y="70" x="110" crop="fill"> </cl-transformation> <cl-transformation overlay="butterfly.png" height="200" x="-10" angle="10"> </cl-transformation> <cl-transformation width="400" height="260" radius="20" crop="crop"> </cl-transformation> <cl-transformation overlay="text:Parisienne_35_bold:Memories%20from%20our%20trip" color="#990C47" y="155"> </cl-transformation> <cl-transformation effect="shadow"> </cl-transformation> </cl-image>
cloudinary.Api.UrlImgUp.Transform(new Transformation() .Width(220).Height(140).Crop("fill").Chain() .Overlay(new Layer().PublicId("brown_sheep")).Width(220).Height(140).X(220).Crop("fill").Chain() .Overlay(new Layer().PublicId("horses")).Width(220).Height(140).Y(140).X(-110).Crop("fill").Chain() .Overlay(new Layer().PublicId("white_chicken")).Width(220).Height(140).Y(70).X(110).Crop("fill").Chain() .Overlay(new Layer().PublicId("butterfly.png")).Height(200).X(-10).Angle(10).Chain() .Width(400).Height(260).Radius(20).Crop("crop").Chain() .Overlay(new TextLayer().FontFamily("Parisienne").FontSize(35).FontWeight("bold").Text("Memories%20from%20our%20trip")).Color("#990C47").Y(155).Chain() .Effect("shadow")).BuildImageTag("yellow_tulip.jpg")
MediaManager.get().url().transformation(new Transformation() .width(220).height(140).crop("fill").chain() .overlay(new Layer().publicId("brown_sheep")).width(220).height(140).x(220).crop("fill").chain() .overlay(new Layer().publicId("horses")).width(220).height(140).y(140).x(-110).crop("fill").chain() .overlay(new Layer().publicId("white_chicken")).width(220).height(140).y(70).x(110).crop("fill").chain() .overlay(new Layer().publicId("butterfly.png")).height(200).x(-10).angle(10).chain() .width(400).height(260).radius(20).crop("crop").chain() .overlay(new TextLayer().fontFamily("Parisienne").fontSize(35).fontWeight("bold").text("Memories%20from%20our%20trip")).color("#990C47").y(155).chain() .effect("shadow")).generate("yellow_tulip.jpg");
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation() .setWidth(220).setHeight(140).setCrop("fill").chain() .setOverlay("brown_sheep").setWidth(220).setHeight(140).setX(220).setCrop("fill").chain() .setOverlay("horses").setWidth(220).setHeight(140).setY(140).setX(-110).setCrop("fill").chain() .setOverlay("white_chicken").setWidth(220).setHeight(140).setY(70).setX(110).setCrop("fill").chain() .setOverlay("butterfly.png").setHeight(200).setX(-10).setAngle(10).chain() .setWidth(400).setHeight(260).setRadius(20).setCrop("crop").chain() .setOverlay("text:Parisienne_35_bold:Memories%20from%20our%20trip").setColor("#990C47").setY(155).chain() .setEffect("shadow")).generate("yellow_tulip.jpg")!, cloudinary: cloudinary)

Here's another collage example:
cl_image_tag("fat_cat.jpg", :transformation=>[ {:width=>100, :height=>100, :crop=>"fill"}, {:overlay=>"sample", :width=>100, :height=>100, :x=>100, :crop=>"fill"}, {:overlay=>"kitten", :width=>100, :height=>100, :y=>100, :x=>-50, :crop=>"fill"}, {:overlay=>"autumn_leaves", :width=>100, :height=>100, :y=>50, :x=>50, :crop=>"fill"}, {:radius=>"max"}, {:effect=>"shadow"} ])
cl_image_tag("fat_cat.jpg", array("transformation"=>array( array("width"=>100, "height"=>100, "crop"=>"fill"), array("overlay"=>"sample", "width"=>100, "height"=>100, "x"=>100, "crop"=>"fill"), array("overlay"=>"kitten", "width"=>100, "height"=>100, "y"=>100, "x"=>-50, "crop"=>"fill"), array("overlay"=>"autumn_leaves", "width"=>100, "height"=>100, "y"=>50, "x"=>50, "crop"=>"fill"), array("radius"=>"max"), array("effect"=>"shadow") )))
CloudinaryImage("fat_cat.jpg").image(transformation=[ {'width': 100, 'height': 100, 'crop': "fill"}, {'overlay': "sample", 'width': 100, 'height': 100, 'x': 100, 'crop': "fill"}, {'overlay': "kitten", 'width': 100, 'height': 100, 'y': 100, 'x': -50, 'crop': "fill"}, {'overlay': "autumn_leaves", 'width': 100, 'height': 100, 'y': 50, 'x': 50, 'crop': "fill"}, {'radius': "max"}, {'effect': "shadow"} ])
cloudinary.image("fat_cat.jpg", {transformation: [ {width: 100, height: 100, crop: "fill"}, {overlay: "sample", width: 100, height: 100, x: 100, crop: "fill"}, {overlay: "kitten", width: 100, height: 100, y: 100, x: -50, crop: "fill"}, {overlay: "autumn_leaves", width: 100, height: 100, y: 50, x: 50, crop: "fill"}, {radius: "max"}, {effect: "shadow"} ]})
cloudinary.url().transformation(new Transformation() .width(100).height(100).crop("fill").chain() .overlay(new Layer().publicId("sample")).width(100).height(100).x(100).crop("fill").chain() .overlay(new Layer().publicId("kitten")).width(100).height(100).y(100).x(-50).crop("fill").chain() .overlay(new Layer().publicId("autumn_leaves")).width(100).height(100).y(50).x(50).crop("fill").chain() .radius("max").chain() .effect("shadow")).imageTag("fat_cat.jpg");
cloudinary.imageTag('fat_cat.jpg', {transformation: [ {width: 100, height: 100, crop: "fill"}, {overlay: new cloudinary.Layer().publicId("sample"), width: 100, height: 100, x: 100, crop: "fill"}, {overlay: new cloudinary.Layer().publicId("kitten"), width: 100, height: 100, y: 100, x: -50, crop: "fill"}, {overlay: new cloudinary.Layer().publicId("autumn_leaves"), width: 100, height: 100, y: 50, x: 50, crop: "fill"}, {radius: "max"}, {effect: "shadow"} ]}).toHtml();
$.cloudinary.image("fat_cat.jpg", {transformation: [ {width: 100, height: 100, crop: "fill"}, {overlay: new cloudinary.Layer().publicId("sample"), width: 100, height: 100, x: 100, crop: "fill"}, {overlay: new cloudinary.Layer().publicId("kitten"), width: 100, height: 100, y: 100, x: -50, crop: "fill"}, {overlay: new cloudinary.Layer().publicId("autumn_leaves"), width: 100, height: 100, y: 50, x: 50, crop: "fill"}, {radius: "max"}, {effect: "shadow"} ]})
<Image publicId="fat_cat.jpg" > <Transformation width="100" height="100" crop="fill" /> <Transformation overlay="sample" width="100" height="100" x="100" crop="fill" /> <Transformation overlay="kitten" width="100" height="100" y="100" x="-50" crop="fill" /> <Transformation overlay="autumn_leaves" width="100" height="100" y="50" x="50" crop="fill" /> <Transformation radius="max" /> <Transformation effect="shadow" /> </Image>
<cld-image publicId="fat_cat.jpg" > <cld-transformation width="100" height="100" crop="fill" /> <cld-transformation overlay="sample" width="100" height="100" x="100" crop="fill" /> <cld-transformation overlay="kitten" width="100" height="100" y="100" x="-50" crop="fill" /> <cld-transformation overlay="autumn_leaves" width="100" height="100" y="50" x="50" crop="fill" /> <cld-transformation radius="max" /> <cld-transformation effect="shadow" /> </cld-image>
<cl-image public-id="fat_cat.jpg" > <cl-transformation width="100" height="100" crop="fill"> </cl-transformation> <cl-transformation overlay="sample" width="100" height="100" x="100" crop="fill"> </cl-transformation> <cl-transformation overlay="kitten" width="100" height="100" y="100" x="-50" crop="fill"> </cl-transformation> <cl-transformation overlay="autumn_leaves" width="100" height="100" y="50" x="50" crop="fill"> </cl-transformation> <cl-transformation radius="max"> </cl-transformation> <cl-transformation effect="shadow"> </cl-transformation> </cl-image>
cloudinary.Api.UrlImgUp.Transform(new Transformation() .Width(100).Height(100).Crop("fill").Chain() .Overlay(new Layer().PublicId("sample")).Width(100).Height(100).X(100).Crop("fill").Chain() .Overlay(new Layer().PublicId("kitten")).Width(100).Height(100).Y(100).X(-50).Crop("fill").Chain() .Overlay(new Layer().PublicId("autumn_leaves")).Width(100).Height(100).Y(50).X(50).Crop("fill").Chain() .Radius("max").Chain() .Effect("shadow")).BuildImageTag("fat_cat.jpg")
MediaManager.get().url().transformation(new Transformation() .width(100).height(100).crop("fill").chain() .overlay(new Layer().publicId("sample")).width(100).height(100).x(100).crop("fill").chain() .overlay(new Layer().publicId("kitten")).width(100).height(100).y(100).x(-50).crop("fill").chain() .overlay(new Layer().publicId("autumn_leaves")).width(100).height(100).y(50).x(50).crop("fill").chain() .radius("max").chain() .effect("shadow")).generate("fat_cat.jpg");
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation() .setWidth(100).setHeight(100).setCrop("fill").chain() .setOverlay("sample").setWidth(100).setHeight(100).setX(100).setCrop("fill").chain() .setOverlay("kitten").setWidth(100).setHeight(100).setY(100).setX(-50).setCrop("fill").chain() .setOverlay("autumn_leaves").setWidth(100).setHeight(100).setY(50).setX(50).setCrop("fill").chain() .setRadius("max").chain() .setEffect("shadow")).generate("fat_cat.jpg")!, cloudinary: cloudinary)
