Generate your photo collage online

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:

yellow_tulip
brown_sheep
horses
white_chicken

Now we'll take these four images and place them one next to the other:

Ruby:
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"}
  ])
PHP:
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")
  )))
Python:
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"}
  ])
Node.js:
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"}
  ]})
Java:
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");
JS:
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();
jQuery:
$.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"}
  ]})
React:
<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>
Angular:
<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>
.Net:
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")
Android:
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");
iOS:
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)
Various images

We can add a fifth image (with the public ID 'butterfly') while rotating it a bit:

Ruby:
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}
  ])
PHP:
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)
  )))
Python:
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}
  ])
Node.js:
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}
  ]})
Java:
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");
JS:
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();
jQuery:
$.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}
  ]})
React:
<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>
Angular:
<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>
.Net:
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")
Android:
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");
iOS:
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)
Five images

Now we'll round the corners of the image by setting the radius parameter (r in URLs) to the required pixels:

Ruby:
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}
  ])
PHP:
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)
  )))
Python:
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}
  ])
Node.js:
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}
  ]})
Java:
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");
JS:
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();
jQuery:
$.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}
  ]})
React:
<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>
Angular:
<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>
.Net:
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")
Android:
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");
iOS:
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)
Rounded corners collage

Now let's add a nice caption text:

Ruby:
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}
  ])
PHP:
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)
  )))
Python:
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}
  ])
Node.js:
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}
  ]})
Java:
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");
JS:
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();
jQuery:
$.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}
  ]})
React:
<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>
Angular:
<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>
.Net:
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")
Android:
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");
iOS:
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)
Collage with text

Finally, we'll add a nice shadow effect by setting the effect parameter to shadow (e_shadow in URLs):

Ruby:
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"}
  ])
PHP:
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")
  )))
Python:
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"}
  ])
Node.js:
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"}
  ]})
Java:
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");
JS:
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();
jQuery:
$.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"}
  ]})
React:
<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>
Angular:
<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>
.Net:
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")
Android:
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");
iOS:
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)
Collage with text

Here's another collage example:

Ruby:
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"}
  ])
PHP:
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")
  )))
Python:
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"}
  ])
Node.js:
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"}
  ]})
Java:
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");
JS:
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();
jQuery:
$.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"}
  ]})
React:
<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>
Angular:
<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>
.Net:
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")
Android:
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");
iOS:
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)
Another collage

by Itay Taragano