Cloudinary cookbook background
Cloudinary Cookbook
← View popular recipes
Find recipes by tags:
View all tags

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:

Copy to clipboard
https://res.cloudinary.com/demo/image/upload/yellow_tulip.jpg
yellow_tulip
Copy to clipboard
https://res.cloudinary.com/demo/image/upload/brown_sheep.jpg
brown_sheep
Copy to clipboard
https://res.cloudinary.com/demo/image/upload/horses.jpg
horses
Copy to clipboard
https://res.cloudinary.com/demo/image/upload/white_chicken.jpg
white_chicken

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

URLRubyPHP v1PHP v2PythonNode.jsJavaJSjQueryReactVue.jsAngular.NETAndroidiOSAll
URL:
Copy to clipboard
https://res.cloudinary.com/demo/image/upload/w_220,h_140,c_fill/l_brown_sheep,w_220,h_140,c_fill,x_220/l_horses,w_220,h_140,c_fill,y_140,x_-110/l_white_chicken,w_220,h_140,c_fill,y_70,x_110/yellow_tulip.jpg
Ruby:
Copy to clipboard
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 v1:
Copy to clipboard
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")
  )))
PHP v2:
Copy to clipboard
(new ImageTag('yellow_tulip.jpg'))
  ->resize(Resize::fill()->width(220)->height(140))
  ->overlay(
      Overlay::source(Source::image('brown_sheep')
        ->transformation((new ImageTransformation())
          ->resize(Resize::fill()->width(220)->height(140))))
      ->position((new Position())
        ->offsetX(220)))
    ->overlay(
        Overlay::source(Source::image('horses')
          ->transformation((new ImageTransformation())
            ->resize(Resize::fill()->width(220)->height(140))))
        ->position((new Position())
          ->offsetX(-110)->offsetY(140)))
          ->overlay(
              Overlay::source(Source::image('white_chicken')
                ->transformation((new ImageTransformation())
                  ->resize(Resize::fill()->width(220)->height(140))))
              ->position((new Position())
                ->offsetX(110)->offsetY(70)
          
        
          ));
Python:
Copy to clipboard
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:
Copy to clipboard
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:
Copy to clipboard
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:
Copy to clipboard
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:
Copy to clipboard
$.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:
Copy to clipboard
<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>
Vue.js:
Copy to clipboard
<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>
Angular:
Copy to clipboard
<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:
Copy to clipboard
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:
Copy to clipboard
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:
Copy to clipboard
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:

URLRubyPHP v1PHP v2PythonNode.jsJavaJSjQueryReactVue.jsAngular.NETAndroidiOSAll
URL:
Copy to clipboard
https://res.cloudinary.com/demo/image/upload/w_220,h_140,c_fill/l_brown_sheep,w_220,h_140,c_fill,x_220/l_horses,w_220,h_140,c_fill,y_140,x_-110/l_white_chicken,w_220,h_140,c_fill,y_70,x_110/l_butterfly.png,h_200,x_-10,a_10/yellow_tulip.jpg
Ruby:
Copy to clipboard
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 v1:
Copy to clipboard
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)
  )))
PHP v2:
Copy to clipboard
(new ImageTag('yellow_tulip.jpg'))
  ->resize(Resize::fill()->width(220)->height(140))
  ->overlay(
      Overlay::source(Source::image('brown_sheep')
        ->transformation((new ImageTransformation())
          ->resize(Resize::fill()->width(220)->height(140))))
      ->position((new Position())
        ->offsetX(220)))
    ->overlay(
        Overlay::source(Source::image('horses')
          ->transformation((new ImageTransformation())
            ->resize(Resize::fill()->width(220)->height(140))))
        ->position((new Position())
          ->offsetX(-110)->offsetY(140)))
          ->overlay(
              Overlay::source(Source::image('white_chicken')
                ->transformation((new ImageTransformation())
                  ->resize(Resize::fill()->width(220)->height(140))))
              ->position((new Position())
                ->offsetX(110)->offsetY(70)))
            ->overlay(
                Overlay::source(Source::image('butterfly')
                  ->format(Format::png())
                  ->transformation((new ImageTransformation())
                    ->rotate(Rotate::byAngle(10))
                    ->resize(Resize::scale()->height(200))))
                ->position((new Position())
                  ->offsetX(-10)
              
            
              
            ));
Python:
Copy to clipboard
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:
Copy to clipboard
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:
Copy to clipboard
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:
Copy to clipboard
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:
Copy to clipboard
$.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:
Copy to clipboard
<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>
Vue.js:
Copy to clipboard
<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>
Angular:
Copy to clipboard
<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:
Copy to clipboard
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:
Copy to clipboard
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:
Copy to clipboard
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:

URLRubyPHP v1PHP v2PythonNode.jsJavaJSjQueryReactVue.jsAngular.NETAndroidiOSAll
URL:
Copy to clipboard
https://res.cloudinary.com/demo/image/upload/w_220,h_140,c_fill/l_brown_sheep,w_220,h_140,c_fill,x_220/l_horses,w_220,h_140,c_fill,y_140,x_-110/l_white_chicken,w_220,h_140,c_fill,y_70,x_110/l_butterfly.png,h_200,x_-10,a_10/r_20/yellow_tulip.jpg
Ruby:
Copy to clipboard
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 v1:
Copy to clipboard
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)
  )))
PHP v2:
Copy to clipboard
(new ImageTag('yellow_tulip.jpg'))
  ->resize(Resize::fill()->width(220)->height(140))
  ->overlay(
      Overlay::source(Source::image('brown_sheep')
        ->transformation((new ImageTransformation())
          ->resize(Resize::fill()->width(220)->height(140))))
      ->position((new Position())
        ->offsetX(220)))
    ->overlay(
        Overlay::source(Source::image('horses')
          ->transformation((new ImageTransformation())
            ->resize(Resize::fill()->width(220)->height(140))))
        ->position((new Position())
          ->offsetX(-110)->offsetY(140)))
          ->overlay(
              Overlay::source(Source::image('white_chicken')
                ->transformation((new ImageTransformation())
                  ->resize(Resize::fill()->width(220)->height(140))))
              ->position((new Position())
                ->offsetX(110)->offsetY(70)))
            ->overlay(
                Overlay::source(Source::image('butterfly')
                  ->format(Format::png())
                  ->transformation((new ImageTransformation())
                    ->rotate(Rotate::byAngle(10))
                    ->resize(Resize::scale()->height(200))))
                ->position((new Position())
                  ->offsetX(-10)))
                  ->roundCorners(RoundCorners::byRadius(20));
Python:
Copy to clipboard
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:
Copy to clipboard
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:
Copy to clipboard
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:
Copy to clipboard
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:
Copy to clipboard
$.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:
Copy to clipboard
<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>
Vue.js:
Copy to clipboard
<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>
Angular:
Copy to clipboard
<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:
Copy to clipboard
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:
Copy to clipboard
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:
Copy to clipboard
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:

URLRubyPHP v1PHP v2PythonNode.jsJavaJSjQueryReactVue.jsAngular.NETAndroidiOSAll
URL:
Copy to clipboard
https://res.cloudinary.com/demo/image/upload/w_220,h_140,c_fill/l_brown_sheep,w_220,h_140,c_fill,x_220/l_horses,w_220,h_140,c_fill,y_140,x_-110/l_white_chicken,w_220,h_140,c_fill,y_70,x_110/l_butterfly.png,h_200,x_-10,a_10/w_400,h_260,c_crop,r_20/l_text:Parisienne_35_bold:Memories from our trip,co_rgb:990C47,y_155/yellow_tulip.jpg
Ruby:
Copy to clipboard
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 v1:
Copy to clipboard
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)
  )))
PHP v2:
Copy to clipboard
(new ImageTag('yellow_tulip.jpg'))
  ->resize(Resize::fill()->width(220)->height(140))
  ->overlay(
      Overlay::source(Source::image('brown_sheep')
        ->transformation((new ImageTransformation())
          ->resize(Resize::fill()->width(220)->height(140))))
      ->position((new Position())
        ->offsetX(220)))
    ->overlay(
        Overlay::source(Source::image('horses')
          ->transformation((new ImageTransformation())
            ->resize(Resize::fill()->width(220)->height(140))))
        ->position((new Position())
          ->offsetX(-110)->offsetY(140)))
          ->overlay(
              Overlay::source(Source::image('white_chicken')
                ->transformation((new ImageTransformation())
                  ->resize(Resize::fill()->width(220)->height(140))))
              ->position((new Position())
                ->offsetX(110)->offsetY(70)))
            ->overlay(
                Overlay::source(Source::image('butterfly')
                  ->format(Format::png())
                  ->transformation((new ImageTransformation())
                    ->rotate(Rotate::byAngle(10))
                    ->resize(Resize::scale()->height(200))))
                ->position((new Position())
                  ->offsetX(-10)))
                  ->resize(Resize::crop()->width(400)->height(260))
                  ->roundCorners(RoundCorners::byRadius(20))
                  ->overlay(
                      Overlay::source(
                          Source::text('Memories from our trip', (new TextStyle('Parisienne', 35))
                            ->fontWeight(FontWeight::bold()))
                          ->textColor(Color::rgb('990C47')))
                        ->position((new Position())
                          ->offsetY(155)
                      
                    
                      
                    
                      
                      ));
Python:
Copy to clipboard
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:
Copy to clipboard
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:
Copy to clipboard
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:
Copy to clipboard
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:
Copy to clipboard
$.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:
Copy to clipboard
<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>
Vue.js:
Copy to clipboard
<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>
Angular:
Copy to clipboard
<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:
Copy to clipboard
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:
Copy to clipboard
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:
Copy to clipboard
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):

URLRubyPHP v1PHP v2PythonNode.jsJavaJSjQueryReactVue.jsAngular.NETAndroidiOSAll
URL:
Copy to clipboard
https://res.cloudinary.com/demo/image/upload/w_220,h_140,c_fill/l_brown_sheep,w_220,h_140,c_fill,x_220/l_horses,w_220,h_140,c_fill,y_140,x_-110/l_white_chicken,w_220,h_140,c_fill,y_70,x_110/l_butterfly.png,h_200,x_-10,a_10/w_400,h_260,c_crop,r_20/l_text:Parisienne_35_bold:Memories from our trip,co_rgb:990C47,y_155/e_shadow/yellow_tulip.jpg
Ruby:
Copy to clipboard
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 v1:
Copy to clipboard
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")
  )))
PHP v2:
Copy to clipboard
(new ImageTag('yellow_tulip.jpg'))
  ->resize(Resize::fill()->width(220)->height(140))
  ->overlay(
      Overlay::source(Source::image('brown_sheep')
        ->transformation((new ImageTransformation())
          ->resize(Resize::fill()->width(220)->height(140))))
      ->position((new Position())
        ->offsetX(220)))
    ->overlay(
        Overlay::source(Source::image('horses')
          ->transformation((new ImageTransformation())
            ->resize(Resize::fill()->width(220)->height(140))))
        ->position((new Position())
          ->offsetX(-110)->offsetY(140)))
          ->overlay(
              Overlay::source(Source::image('white_chicken')
                ->transformation((new ImageTransformation())
                  ->resize(Resize::fill()->width(220)->height(140))))
              ->position((new Position())
                ->offsetX(110)->offsetY(70)))
            ->overlay(
                Overlay::source(Source::image('butterfly')
                  ->format(Format::png())
                  ->transformation((new ImageTransformation())
                    ->rotate(Rotate::byAngle(10))
                    ->resize(Resize::scale()->height(200))))
                ->position((new Position())
                  ->offsetX(-10)))
                  ->resize(Resize::crop()->width(400)->height(260))
                  ->roundCorners(RoundCorners::byRadius(20))
                  ->overlay(
                      Overlay::source(
                          Source::text('Memories from our trip', (new TextStyle('Parisienne', 35))
                            ->fontWeight(FontWeight::bold()))
                          ->textColor(Color::rgb('990C47')))
                        ->position((new Position())
                          ->offsetY(155)))
                          ->effect(Effect::shadow());
Python:
Copy to clipboard
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:
Copy to clipboard
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:
Copy to clipboard
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:
Copy to clipboard
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:
Copy to clipboard
$.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:
Copy to clipboard
<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>
Vue.js:
Copy to clipboard
<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>
Angular:
Copy to clipboard
<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:
Copy to clipboard
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:
Copy to clipboard
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:
Copy to clipboard
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:

URLRubyPHP v1PHP v2PythonNode.jsJavaJSjQueryReactVue.jsAngular.NETAndroidiOSAll
URL:
Copy to clipboard
https://res.cloudinary.com/demo/image/upload/w_100,h_100,c_fill/l_sample,w_100,h_100,c_fill,x_100/l_kitten,w_100,h_100,c_fill,y_100,x_-50/l_autumn_leaves,w_100,h_100,c_fill,y_50,x_50/r_max/e_shadow/fat_cat.jpg
Ruby:
Copy to clipboard
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 v1:
Copy to clipboard
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")
  )))
PHP v2:
Copy to clipboard
(new ImageTag('fat_cat.jpg'))
  ->resize(Resize::fill()->width(100)->height(100))
  ->overlay(
      Overlay::source(Source::image('sample')
        ->transformation((new ImageTransformation())
          ->resize(Resize::fill()->width(100)->height(100))))
      ->position((new Position())
        ->offsetX(100)))
    ->overlay(
        Overlay::source(Source::image('kitten')
          ->transformation((new ImageTransformation())
            ->resize(Resize::fill()->width(100)->height(100))))
        ->position((new Position())
          ->offsetX(-50)->offsetY(100)))
          ->overlay(
              Overlay::source(Source::image('autumn_leaves')
                ->transformation((new ImageTransformation())
                  ->resize(Resize::fill()->width(100)->height(100))))
              ->position((new Position())
                ->offsetX(50)->offsetY(50)))
            ->roundCorners(RoundCorners::max())
            ->effect(Effect::shadow());
Python:
Copy to clipboard
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:
Copy to clipboard
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:
Copy to clipboard
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:
Copy to clipboard
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:
Copy to clipboard
$.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:
Copy to clipboard
<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>
Vue.js:
Copy to clipboard
<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>
Angular:
Copy to clipboard
<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:
Copy to clipboard
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:
Copy to clipboard
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:
Copy to clipboard
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
Tags: