> ## Documentation Index
> Fetch the complete documentation index at: https://cloudinary.com/documentation/llms.txt
> Use this file to discover all available pages before exploring further.

# Placing images side by side, vertically, or in a collage


This page covers arranging images side by side, stacked vertically, or in a collage using layer offsets. For basic layer positioning with gravity, see [Layer placement](image_layer_placement). For the layer syntax itself, see [Layer syntax](layers).

You can concatenate, append, or arrange images adjacent to each other, whether side by side, stacked vertically, or in a 2×2 grid or larger mosaic. To do this, use overlays with gravity and x,y placement offsets. Instead of overlaying one image on top of another, you position each additional image outside the canvas of the base image, which automatically expands the canvas to include it.

## Simple side-by-side or vertical arrangement

To place two images next to each other (concatenate them), crop both to a fixed size, then set the `x` offset of the second image to equal the width of the first for a side-by-side arrangement, or the `y` offset to equal the height for vertical stacking.

**Side by side** — dining room image on the left, kitchen image appended to the right:

![Two images placed side by side](https://res.cloudinary.com/demo/image/upload/c_fill,h_300,w_400/l_docs:kitchen-apartment/c_fill,h_300,w_400/fl_layer_apply,x_400/docs/dining-apartment.jpg "thumb: w_600")

```nodejs
cloudinary.image("docs/dining-apartment.jpg", {transformation: [
  {height: 300, width: 400, crop: "fill"},
  {overlay: "docs:kitchen-apartment"},
  {height: 300, width: 400, crop: "fill"},
  {flags: "layer_apply", x: 400}
  ]})
```

```react
import { fill } from "@cloudinary/url-gen/actions/resize";
import { source } from "@cloudinary/url-gen/actions/overlay";
import { image } from "@cloudinary/url-gen/qualifiers/source";
import { Position } from "@cloudinary/url-gen/qualifiers/position";

new CloudinaryImage("docs/dining-apartment.jpg")
  .resize(fill().width(400).height(300))
  .overlay(
    source(
      image("docs/kitchen-apartment").transformation(
        new Transformation().resize(fill().width(400).height(300))
      )
    ).position(new Position().offsetX(400))
  );
```

```vue
import { fill } from "@cloudinary/url-gen/actions/resize";
import { source } from "@cloudinary/url-gen/actions/overlay";
import { image } from "@cloudinary/url-gen/qualifiers/source";
import { Position } from "@cloudinary/url-gen/qualifiers/position";

new CloudinaryImage("docs/dining-apartment.jpg")
  .resize(fill().width(400).height(300))
  .overlay(
    source(
      image("docs/kitchen-apartment").transformation(
        new Transformation().resize(fill().width(400).height(300))
      )
    ).position(new Position().offsetX(400))
  );
```

```angular
import { fill } from "@cloudinary/url-gen/actions/resize";
import { source } from "@cloudinary/url-gen/actions/overlay";
import { image } from "@cloudinary/url-gen/qualifiers/source";
import { Position } from "@cloudinary/url-gen/qualifiers/position";

new CloudinaryImage("docs/dining-apartment.jpg")
  .resize(fill().width(400).height(300))
  .overlay(
    source(
      image("docs/kitchen-apartment").transformation(
        new Transformation().resize(fill().width(400).height(300))
      )
    ).position(new Position().offsetX(400))
  );
```

```js
import { fill } from "@cloudinary/url-gen/actions/resize";
import { source } from "@cloudinary/url-gen/actions/overlay";
import { image } from "@cloudinary/url-gen/qualifiers/source";
import { Position } from "@cloudinary/url-gen/qualifiers/position";

new CloudinaryImage("docs/dining-apartment.jpg")
  .resize(fill().width(400).height(300))
  .overlay(
    source(
      image("docs/kitchen-apartment").transformation(
        new Transformation().resize(fill().width(400).height(300))
      )
    ).position(new Position().offsetX(400))
  );
```

```python
CloudinaryImage("docs/dining-apartment.jpg").image(transformation=[
  {'height': 300, 'width': 400, 'crop': "fill"},
  {'overlay': "docs:kitchen-apartment"},
  {'height': 300, 'width': 400, 'crop': "fill"},
  {'flags': "layer_apply", 'x': 400}
  ])
```

```php
use Cloudinary\Transformation\Resize;
use Cloudinary\Transformation\Overlay;
use Cloudinary\Transformation\Source;
use Cloudinary\Transformation\Position;

(new ImageTag('docs/dining-apartment.jpg'))
	->resize(Resize::fill()->width(400)
->height(300))
	->overlay(Overlay::source(
	Source::image("docs/kitchen-apartment")
	->transformation((new Transformation())
	->resize(Resize::fill()->width(400)
->height(300)))
	)
	->position((new Position())->offsetX(400))
	);
```

```java
cloudinary.url().transformation(new Transformation()
  .height(300).width(400).crop("fill").chain()
  .overlay(new Layer().publicId("docs:kitchen-apartment")).chain()
  .height(300).width(400).crop("fill").chain()
  .flags("layer_apply").x(400)).imageTag("docs/dining-apartment.jpg");
```

```ruby
cl_image_tag("docs/dining-apartment.jpg", transformation: [
  {height: 300, width: 400, crop: "fill"},
  {overlay: "docs:kitchen-apartment"},
  {height: 300, width: 400, crop: "fill"},
  {flags: "layer_apply", x: 400}
  ])
```

```csharp
cloudinary.Api.UrlImgUp.Transform(new Transformation()
  .Height(300).Width(400).Crop("fill").Chain()
  .Overlay(new Layer().PublicId("docs:kitchen-apartment")).Chain()
  .Height(300).Width(400).Crop("fill").Chain()
  .Flags("layer_apply").X(400)).BuildImageTag("docs/dining-apartment.jpg")
```

```dart
cloudinary.image('docs/dining-apartment.jpg').transformation(Transformation()
	.resize(Resize.fill().width(400)
.height(300))
	.overlay(Overlay.source(
	Source.image("docs/kitchen-apartment")
	.transformation(new Transformation()
	.resize(Resize.fill().width(400)
.height(300)))
	)
	.position(Position().offsetX(400))
	));
```

```swift
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation()
  .setHeight(300).setWidth(400).setCrop("fill").chain()
  .setOverlay("docs:kitchen-apartment").chain()
  .setHeight(300).setWidth(400).setCrop("fill").chain()
  .setFlags("layer_apply").setX(400)).generate("docs/dining-apartment.jpg")!, cloudinary: cloudinary)
```

```android
MediaManager.get().url().transformation(new Transformation()
  .height(300).width(400).crop("fill").chain()
  .overlay(new Layer().publicId("docs:kitchen-apartment")).chain()
  .height(300).width(400).crop("fill").chain()
  .flags("layer_apply").x(400)).generate("docs/dining-apartment.jpg");
```

```flutter
cloudinary.image('docs/dining-apartment.jpg').transformation(Transformation()
	.resize(Resize.fill().width(400)
.height(300))
	.overlay(Overlay.source(
	Source.image("docs/kitchen-apartment")
	.transformation(new Transformation()
	.resize(Resize.fill().width(400)
.height(300)))
	)
	.position(Position().offsetX(400))
	));
```

```kotlin
cloudinary.image {
	publicId("docs/dining-apartment.jpg")
	 resize(Resize.fill() { width(400)
 height(300) })
	 overlay(Overlay.source(
	Source.image("docs/kitchen-apartment") {
	 transformation(Transformation {
	 resize(Resize.fill() { width(400)
 height(300) }) })
	 }) {
	 position(Position() { offsetX(400) })
	 }) 
}.generate()
```

```jquery
$.cloudinary.image("docs/dining-apartment.jpg", {transformation: [
  {height: 300, width: 400, crop: "fill"},
  {overlay: new cloudinary.Layer().publicId("docs:kitchen-apartment")},
  {height: 300, width: 400, crop: "fill"},
  {flags: "layer_apply", x: 400}
  ]})
```

```react_native
import { fill } from "@cloudinary/url-gen/actions/resize";
import { source } from "@cloudinary/url-gen/actions/overlay";
import { image } from "@cloudinary/url-gen/qualifiers/source";
import { Position } from "@cloudinary/url-gen/qualifiers/position";

new CloudinaryImage("docs/dining-apartment.jpg")
  .resize(fill().width(400).height(300))
  .overlay(
    source(
      image("docs/kitchen-apartment").transformation(
        new Transformation().resize(fill().width(400).height(300))
      )
    ).position(new Position().offsetX(400))
  );
```

Looking at the URL:

- `c_fill,h_300,w_400` crops the base image (dining room) to 400 × 300 pixels.
- `l_docs:kitchen-apartment` adds the kitchen image as an overlay.
- `c_fill,h_300,w_400` crops the overlay to the same 400 × 300 pixel size.
- `fl_layer_apply,x_400` positions the overlay 400 pixels to the right of the base image center, placing it immediately adjacent to the right edge.

**Stacked vertically** — dining room image on top, kitchen image appended below:

![Two images stacked vertically](https://res.cloudinary.com/demo/image/upload/c_fill,h_300,w_400/l_docs:kitchen-apartment/c_fill,h_300,w_400/fl_layer_apply,y_300/docs/dining-apartment.jpg "thumb: w_400")

```nodejs
cloudinary.image("docs/dining-apartment.jpg", {transformation: [
  {height: 300, width: 400, crop: "fill"},
  {overlay: "docs:kitchen-apartment"},
  {height: 300, width: 400, crop: "fill"},
  {flags: "layer_apply", y: 300}
  ]})
```

```react
import { fill } from "@cloudinary/url-gen/actions/resize";
import { source } from "@cloudinary/url-gen/actions/overlay";
import { image } from "@cloudinary/url-gen/qualifiers/source";
import { Position } from "@cloudinary/url-gen/qualifiers/position";

new CloudinaryImage("docs/dining-apartment.jpg")
  .resize(fill().width(400).height(300))
  .overlay(
    source(
      image("docs/kitchen-apartment").transformation(
        new Transformation().resize(fill().width(400).height(300))
      )
    ).position(new Position().offsetY(300))
  );
```

```vue
import { fill } from "@cloudinary/url-gen/actions/resize";
import { source } from "@cloudinary/url-gen/actions/overlay";
import { image } from "@cloudinary/url-gen/qualifiers/source";
import { Position } from "@cloudinary/url-gen/qualifiers/position";

new CloudinaryImage("docs/dining-apartment.jpg")
  .resize(fill().width(400).height(300))
  .overlay(
    source(
      image("docs/kitchen-apartment").transformation(
        new Transformation().resize(fill().width(400).height(300))
      )
    ).position(new Position().offsetY(300))
  );
```

```angular
import { fill } from "@cloudinary/url-gen/actions/resize";
import { source } from "@cloudinary/url-gen/actions/overlay";
import { image } from "@cloudinary/url-gen/qualifiers/source";
import { Position } from "@cloudinary/url-gen/qualifiers/position";

new CloudinaryImage("docs/dining-apartment.jpg")
  .resize(fill().width(400).height(300))
  .overlay(
    source(
      image("docs/kitchen-apartment").transformation(
        new Transformation().resize(fill().width(400).height(300))
      )
    ).position(new Position().offsetY(300))
  );
```

```js
import { fill } from "@cloudinary/url-gen/actions/resize";
import { source } from "@cloudinary/url-gen/actions/overlay";
import { image } from "@cloudinary/url-gen/qualifiers/source";
import { Position } from "@cloudinary/url-gen/qualifiers/position";

new CloudinaryImage("docs/dining-apartment.jpg")
  .resize(fill().width(400).height(300))
  .overlay(
    source(
      image("docs/kitchen-apartment").transformation(
        new Transformation().resize(fill().width(400).height(300))
      )
    ).position(new Position().offsetY(300))
  );
```

```python
CloudinaryImage("docs/dining-apartment.jpg").image(transformation=[
  {'height': 300, 'width': 400, 'crop': "fill"},
  {'overlay': "docs:kitchen-apartment"},
  {'height': 300, 'width': 400, 'crop': "fill"},
  {'flags': "layer_apply", 'y': 300}
  ])
```

```php
use Cloudinary\Transformation\Resize;
use Cloudinary\Transformation\Overlay;
use Cloudinary\Transformation\Source;
use Cloudinary\Transformation\Position;

(new ImageTag('docs/dining-apartment.jpg'))
	->resize(Resize::fill()->width(400)
->height(300))
	->overlay(Overlay::source(
	Source::image("docs/kitchen-apartment")
	->transformation((new Transformation())
	->resize(Resize::fill()->width(400)
->height(300)))
	)
	->position((new Position())->offsetY(300))
	);
```

```java
cloudinary.url().transformation(new Transformation()
  .height(300).width(400).crop("fill").chain()
  .overlay(new Layer().publicId("docs:kitchen-apartment")).chain()
  .height(300).width(400).crop("fill").chain()
  .flags("layer_apply").y(300)).imageTag("docs/dining-apartment.jpg");
```

```ruby
cl_image_tag("docs/dining-apartment.jpg", transformation: [
  {height: 300, width: 400, crop: "fill"},
  {overlay: "docs:kitchen-apartment"},
  {height: 300, width: 400, crop: "fill"},
  {flags: "layer_apply", y: 300}
  ])
```

```csharp
cloudinary.Api.UrlImgUp.Transform(new Transformation()
  .Height(300).Width(400).Crop("fill").Chain()
  .Overlay(new Layer().PublicId("docs:kitchen-apartment")).Chain()
  .Height(300).Width(400).Crop("fill").Chain()
  .Flags("layer_apply").Y(300)).BuildImageTag("docs/dining-apartment.jpg")
```

```dart
cloudinary.image('docs/dining-apartment.jpg').transformation(Transformation()
	.resize(Resize.fill().width(400)
.height(300))
	.overlay(Overlay.source(
	Source.image("docs/kitchen-apartment")
	.transformation(new Transformation()
	.resize(Resize.fill().width(400)
.height(300)))
	)
	.position(Position().offsetY(300))
	));
```

```swift
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation()
  .setHeight(300).setWidth(400).setCrop("fill").chain()
  .setOverlay("docs:kitchen-apartment").chain()
  .setHeight(300).setWidth(400).setCrop("fill").chain()
  .setFlags("layer_apply").setY(300)).generate("docs/dining-apartment.jpg")!, cloudinary: cloudinary)
```

```android
MediaManager.get().url().transformation(new Transformation()
  .height(300).width(400).crop("fill").chain()
  .overlay(new Layer().publicId("docs:kitchen-apartment")).chain()
  .height(300).width(400).crop("fill").chain()
  .flags("layer_apply").y(300)).generate("docs/dining-apartment.jpg");
```

```flutter
cloudinary.image('docs/dining-apartment.jpg').transformation(Transformation()
	.resize(Resize.fill().width(400)
.height(300))
	.overlay(Overlay.source(
	Source.image("docs/kitchen-apartment")
	.transformation(new Transformation()
	.resize(Resize.fill().width(400)
.height(300)))
	)
	.position(Position().offsetY(300))
	));
```

```kotlin
cloudinary.image {
	publicId("docs/dining-apartment.jpg")
	 resize(Resize.fill() { width(400)
 height(300) })
	 overlay(Overlay.source(
	Source.image("docs/kitchen-apartment") {
	 transformation(Transformation {
	 resize(Resize.fill() { width(400)
 height(300) }) })
	 }) {
	 position(Position() { offsetY(300) })
	 }) 
}.generate()
```

```jquery
$.cloudinary.image("docs/dining-apartment.jpg", {transformation: [
  {height: 300, width: 400, crop: "fill"},
  {overlay: new cloudinary.Layer().publicId("docs:kitchen-apartment")},
  {height: 300, width: 400, crop: "fill"},
  {flags: "layer_apply", y: 300}
  ]})
```

```react_native
import { fill } from "@cloudinary/url-gen/actions/resize";
import { source } from "@cloudinary/url-gen/actions/overlay";
import { image } from "@cloudinary/url-gen/qualifiers/source";
import { Position } from "@cloudinary/url-gen/qualifiers/position";

new CloudinaryImage("docs/dining-apartment.jpg")
  .resize(fill().width(400).height(300))
  .overlay(
    source(
      image("docs/kitchen-apartment").transformation(
        new Transformation().resize(fill().width(400).height(300))
      )
    ).position(new Position().offsetY(300))
  );
```

This time, the vertical (`y`) offset of 300 pixels places it immediately below the bottom edge.

## Multi-image collages and mosaics using variables

For more complex arrangements — such as a 2×2 grid, a mosaic, or a larger collage — you can use [user-defined variables](user_defined_variables) such as `$w_iw` and `$h_ih` to dynamically capture each image's width and height. This approach lets you append images of any size side by side or vertically without knowing their exact dimensions in advance.

Here's an example of four apartment images combined into a 2×2 collage:

![Apartment collage](https://res.cloudinary.com/demo/image/upload/$w_iw/l_docs:kitchen-apartment/fl_layer_apply,x_$w/$h_ih/l_docs:study-apartment/fl_layer_apply,g_east,y_$h/l_docs:lounge-apartment/fl_layer_apply,g_south_west/docs/dining-apartment.jpg "c_thumb,w_600, width:600")

```nodejs
cloudinary.image("docs/dining-apartment.jpg", {transformation: [
  {variables: [["$w", "iw"]]},
  {overlay: "docs:kitchen-apartment"},
  {flags: "layer_apply", x: "$w"},
  {variables: [["$h", "ih"]]},
  {overlay: "docs:study-apartment"},
  {flags: "layer_apply", gravity: "east", y: "$h"},
  {overlay: "docs:lounge-apartment"},
  {flags: "layer_apply", gravity: "south_west"}
  ]})
```

```react
import { set } from "@cloudinary/url-gen/actions/variable";
import { source } from "@cloudinary/url-gen/actions/overlay";
import { expression } from "@cloudinary/url-gen/qualifiers/expression";
import { image } from "@cloudinary/url-gen/qualifiers/source";
import { Position } from "@cloudinary/url-gen/qualifiers/position";
import { compass } from "@cloudinary/url-gen/qualifiers/gravity";

new CloudinaryImage("docs/dining-apartment.jpg")
  .addVariable(set("w", expression("initial_width")))
  .overlay(
    source(image("docs/kitchen-apartment")).position(
      new Position().offsetX("$w")
    )
  )
  .addVariable(set("h", expression("initial_height")))
  .overlay(
    source(image("docs/study-apartment")).position(
      new Position()
        .gravity(compass("east"))
        .offsetY("$h")
    )
  )
  .overlay(
    source(image("docs/lounge-apartment")).position(
      new Position().gravity(compass("south_west"))
    )
  );
```

```vue
import { set } from "@cloudinary/url-gen/actions/variable";
import { source } from "@cloudinary/url-gen/actions/overlay";
import { expression } from "@cloudinary/url-gen/qualifiers/expression";
import { image } from "@cloudinary/url-gen/qualifiers/source";
import { Position } from "@cloudinary/url-gen/qualifiers/position";
import { compass } from "@cloudinary/url-gen/qualifiers/gravity";

new CloudinaryImage("docs/dining-apartment.jpg")
  .addVariable(set("w", expression("initial_width")))
  .overlay(
    source(image("docs/kitchen-apartment")).position(
      new Position().offsetX("$w")
    )
  )
  .addVariable(set("h", expression("initial_height")))
  .overlay(
    source(image("docs/study-apartment")).position(
      new Position()
        .gravity(compass("east"))
        .offsetY("$h")
    )
  )
  .overlay(
    source(image("docs/lounge-apartment")).position(
      new Position().gravity(compass("south_west"))
    )
  );
```

```angular
import { set } from "@cloudinary/url-gen/actions/variable";
import { source } from "@cloudinary/url-gen/actions/overlay";
import { expression } from "@cloudinary/url-gen/qualifiers/expression";
import { image } from "@cloudinary/url-gen/qualifiers/source";
import { Position } from "@cloudinary/url-gen/qualifiers/position";
import { compass } from "@cloudinary/url-gen/qualifiers/gravity";

new CloudinaryImage("docs/dining-apartment.jpg")
  .addVariable(set("w", expression("initial_width")))
  .overlay(
    source(image("docs/kitchen-apartment")).position(
      new Position().offsetX("$w")
    )
  )
  .addVariable(set("h", expression("initial_height")))
  .overlay(
    source(image("docs/study-apartment")).position(
      new Position()
        .gravity(compass("east"))
        .offsetY("$h")
    )
  )
  .overlay(
    source(image("docs/lounge-apartment")).position(
      new Position().gravity(compass("south_west"))
    )
  );
```

```js
import { set } from "@cloudinary/url-gen/actions/variable";
import { source } from "@cloudinary/url-gen/actions/overlay";
import { expression } from "@cloudinary/url-gen/qualifiers/expression";
import { image } from "@cloudinary/url-gen/qualifiers/source";
import { Position } from "@cloudinary/url-gen/qualifiers/position";
import { compass } from "@cloudinary/url-gen/qualifiers/gravity";

new CloudinaryImage("docs/dining-apartment.jpg")
  .addVariable(set("w", expression("initial_width")))
  .overlay(
    source(image("docs/kitchen-apartment")).position(
      new Position().offsetX("$w")
    )
  )
  .addVariable(set("h", expression("initial_height")))
  .overlay(
    source(image("docs/study-apartment")).position(
      new Position()
        .gravity(compass("east"))
        .offsetY("$h")
    )
  )
  .overlay(
    source(image("docs/lounge-apartment")).position(
      new Position().gravity(compass("south_west"))
    )
  );
```

```python
CloudinaryImage("docs/dining-apartment.jpg").image(transformation=[
  {'variables': [["$w", "iw"]]},
  {'overlay': "docs:kitchen-apartment"},
  {'flags': "layer_apply", 'x': "$w"},
  {'variables': [["$h", "ih"]]},
  {'overlay': "docs:study-apartment"},
  {'flags': "layer_apply", 'gravity': "east", 'y': "$h"},
  {'overlay': "docs:lounge-apartment"},
  {'flags': "layer_apply", 'gravity': "south_west"}
  ])
```

```php
use Cloudinary\Transformation\Variable;
use Cloudinary\Transformation\Overlay;
use Cloudinary\Transformation\Expression;
use Cloudinary\Transformation\Source;
use Cloudinary\Transformation\Position;
use Cloudinary\Transformation\Gravity;
use Cloudinary\Transformation\Compass;

(new ImageTag('docs/dining-apartment.jpg'))
	->addVariable(Variable::set("w",
	Expression::expression("initial_width")))
	->overlay(Overlay::source(
	Source::image("docs/kitchen-apartment"))
	->position((new Position())->offsetX("$w"))
	)
	->addVariable(Variable::set("h",
	Expression::expression("initial_height")))
	->overlay(Overlay::source(
	Source::image("docs/study-apartment"))
	->position((new Position())
	->gravity(
	Gravity::compass(
	Compass::east()))
->offsetY("$h"))
	)
	->overlay(Overlay::source(
	Source::image("docs/lounge-apartment"))
	->position((new Position())
	->gravity(
	Gravity::compass(
	Compass::southWest()))
	)
	);
```

```java
cloudinary.url().transformation(new Transformation()
  .variables(variable("$w","iw")).chain()
  .overlay(new Layer().publicId("docs:kitchen-apartment")).chain()
  .flags("layer_apply").x("$w").chain()
  .variables(variable("$w","iw")).variables(variable("$h","ih")).chain()
  .overlay(new Layer().publicId("docs:study-apartment")).chain()
  .flags("layer_apply").gravity("east").y("$h").chain()
  .overlay(new Layer().publicId("docs:lounge-apartment")).chain()
  .flags("layer_apply").gravity("south_west")).imageTag("docs/dining-apartment.jpg");
```

```ruby
cl_image_tag("docs/dining-apartment.jpg", transformation: [
  {variables: [["$w", "iw"]]},
  {overlay: "docs:kitchen-apartment"},
  {flags: "layer_apply", x: "$w"},
  {variables: [["$h", "ih"]]},
  {overlay: "docs:study-apartment"},
  {flags: "layer_apply", gravity: "east", y: "$h"},
  {overlay: "docs:lounge-apartment"},
  {flags: "layer_apply", gravity: "south_west"}
  ])
```

```csharp
cloudinary.Api.UrlImgUp.Transform(new Transformation()
  .Variables("$w", iw).Chain()
  .Overlay(new Layer().PublicId("docs:kitchen-apartment")).Chain()
  .Flags("layer_apply").X("$w").Chain()
  .Variables("$h", ih).Chain()
  .Overlay(new Layer().PublicId("docs:study-apartment")).Chain()
  .Flags("layer_apply").Gravity("east").Y("$h").Chain()
  .Overlay(new Layer().PublicId("docs:lounge-apartment")).Chain()
  .Flags("layer_apply").Gravity("south_west")).BuildImageTag("docs/dining-apartment.jpg")
```

```dart
cloudinary.image('docs/dining-apartment.jpg').transformation(Transformation()
	.addVariable(Variable.set("w",
	Expression.expression("initial_width")))
	.overlay(Overlay.source(
	Source.image("docs/kitchen-apartment"))
	.position(Position().offsetX("$w"))
	)
	.addVariable(Variable.set("h",
	Expression.expression("initial_height")))
	.overlay(Overlay.source(
	Source.image("docs/study-apartment"))
	.position(Position()
	.gravity(
	Gravity.compass(
	Compass.east()))
.offsetY("$h"))
	)
	.overlay(Overlay.source(
	Source.image("docs/lounge-apartment"))
	.position(Position()
	.gravity(
	Gravity.compass(
	Compass.southWest()))
	)
	));
```

```swift
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation()
  .chain()
  .setOverlay("docs:kitchen-apartment").chain()
  .setFlags("layer_apply").setX("$w").chain()
  .chain()
  .setOverlay("docs:study-apartment").chain()
  .setFlags("layer_apply").setGravity("east").setY("$h").chain()
  .setOverlay("docs:lounge-apartment").chain()
  .setFlags("layer_apply").setGravity("south_west")).generate("docs/dining-apartment.jpg")!, cloudinary: cloudinary)
```

```android
MediaManager.get().url().transformation(new Transformation()
  .variables(variable("$w","iw")).chain()
  .overlay(new Layer().publicId("docs:kitchen-apartment")).chain()
  .flags("layer_apply").x("$w").chain()
  .variables(variable("$w","iw")).variables(variable("$h","ih")).chain()
  .overlay(new Layer().publicId("docs:study-apartment")).chain()
  .flags("layer_apply").gravity("east").y("$h").chain()
  .overlay(new Layer().publicId("docs:lounge-apartment")).chain()
  .flags("layer_apply").gravity("south_west")).generate("docs/dining-apartment.jpg");
```

```flutter
cloudinary.image('docs/dining-apartment.jpg').transformation(Transformation()
	.addVariable(Variable.set("w",
	Expression.expression("initial_width")))
	.overlay(Overlay.source(
	Source.image("docs/kitchen-apartment"))
	.position(Position().offsetX("$w"))
	)
	.addVariable(Variable.set("h",
	Expression.expression("initial_height")))
	.overlay(Overlay.source(
	Source.image("docs/study-apartment"))
	.position(Position()
	.gravity(
	Gravity.compass(
	Compass.east()))
.offsetY("$h"))
	)
	.overlay(Overlay.source(
	Source.image("docs/lounge-apartment"))
	.position(Position()
	.gravity(
	Gravity.compass(
	Compass.southWest()))
	)
	));
```

```kotlin
cloudinary.image {
	publicId("docs/dining-apartment.jpg")
	 addVariable(Variable.set("w",
	Expression.expression("initial_width")))
	 overlay(Overlay.source(
	Source.image("docs/kitchen-apartment")) {
	 position(Position() { offsetX("\$w") })
	 })
	 addVariable(Variable.set("h",
	Expression.expression("initial_height")))
	 overlay(Overlay.source(
	Source.image("docs/study-apartment")) {
	 position(Position() {
	 gravity(
	Gravity.compass(
	Compass.east()))
 offsetY("\$h") })
	 })
	 overlay(Overlay.source(
	Source.image("docs/lounge-apartment")) {
	 position(Position() {
	 gravity(
	Gravity.compass(
	Compass.southWest()))
	 })
	 }) 
}.generate()
```

```jquery
$.cloudinary.image("docs/dining-apartment.jpg", {transformation: [
  {variables: [["$w", "iw"]]},
  {overlay: new cloudinary.Layer().publicId("docs:kitchen-apartment")},
  {flags: "layer_apply", x: "$w"},
  {variables: [["$h", "ih"]]},
  {overlay: new cloudinary.Layer().publicId("docs:study-apartment")},
  {flags: "layer_apply", gravity: "east", y: "$h"},
  {overlay: new cloudinary.Layer().publicId("docs:lounge-apartment")},
  {flags: "layer_apply", gravity: "south_west"}
  ]})
```

```react_native
import { set } from "@cloudinary/url-gen/actions/variable";
import { source } from "@cloudinary/url-gen/actions/overlay";
import { expression } from "@cloudinary/url-gen/qualifiers/expression";
import { image } from "@cloudinary/url-gen/qualifiers/source";
import { Position } from "@cloudinary/url-gen/qualifiers/position";
import { compass } from "@cloudinary/url-gen/qualifiers/gravity";

new CloudinaryImage("docs/dining-apartment.jpg")
  .addVariable(set("w", expression("initial_width")))
  .overlay(
    source(image("docs/kitchen-apartment")).position(
      new Position().offsetX("$w")
    )
  )
  .addVariable(set("h", expression("initial_height")))
  .overlay(
    source(image("docs/study-apartment")).position(
      new Position()
        .gravity(compass("east"))
        .offsetY("$h")
    )
  )
  .overlay(
    source(image("docs/lounge-apartment")).position(
      new Position().gravity(compass("south_west"))
    )
  );
```

```nodejs
cloudinary.image("docs/dining-apartment.jpg", {transformation: [
  {variables: [["$w", "iw"]]},
  {overlay: "docs:kitchen-apartment"},
  {flags: "layer_apply", x: "$w"},
  {variables: [["$h", "ih"]]},
  {overlay: "docs:study-apartment"},
  {flags: "layer_apply", gravity: "east", y: "$h"},
  {overlay: "docs:lounge-apartment"},
  {flags: "layer_apply", gravity: "south_west"}
  ]})
```

```react
import { set } from "@cloudinary/url-gen/actions/variable";
import { source } from "@cloudinary/url-gen/actions/overlay";
import { expression } from "@cloudinary/url-gen/qualifiers/expression";
import { image } from "@cloudinary/url-gen/qualifiers/source";
import { Position } from "@cloudinary/url-gen/qualifiers/position";
import { compass } from "@cloudinary/url-gen/qualifiers/gravity";

new CloudinaryImage("docs/dining-apartment.jpg")
  .addVariable(set("w", expression("initial_width")))
  .overlay(
    source(image("docs/kitchen-apartment")).position(
      new Position().offsetX("$w")
    )
  )
  .addVariable(set("h", expression("initial_height")))
  .overlay(
    source(image("docs/study-apartment")).position(
      new Position()
        .gravity(compass("east"))
        .offsetY("$h")
    )
  )
  .overlay(
    source(image("docs/lounge-apartment")).position(
      new Position().gravity(compass("south_west"))
    )
  );
```

```vue
import { set } from "@cloudinary/url-gen/actions/variable";
import { source } from "@cloudinary/url-gen/actions/overlay";
import { expression } from "@cloudinary/url-gen/qualifiers/expression";
import { image } from "@cloudinary/url-gen/qualifiers/source";
import { Position } from "@cloudinary/url-gen/qualifiers/position";
import { compass } from "@cloudinary/url-gen/qualifiers/gravity";

new CloudinaryImage("docs/dining-apartment.jpg")
  .addVariable(set("w", expression("initial_width")))
  .overlay(
    source(image("docs/kitchen-apartment")).position(
      new Position().offsetX("$w")
    )
  )
  .addVariable(set("h", expression("initial_height")))
  .overlay(
    source(image("docs/study-apartment")).position(
      new Position()
        .gravity(compass("east"))
        .offsetY("$h")
    )
  )
  .overlay(
    source(image("docs/lounge-apartment")).position(
      new Position().gravity(compass("south_west"))
    )
  );
```

```angular
import { set } from "@cloudinary/url-gen/actions/variable";
import { source } from "@cloudinary/url-gen/actions/overlay";
import { expression } from "@cloudinary/url-gen/qualifiers/expression";
import { image } from "@cloudinary/url-gen/qualifiers/source";
import { Position } from "@cloudinary/url-gen/qualifiers/position";
import { compass } from "@cloudinary/url-gen/qualifiers/gravity";

new CloudinaryImage("docs/dining-apartment.jpg")
  .addVariable(set("w", expression("initial_width")))
  .overlay(
    source(image("docs/kitchen-apartment")).position(
      new Position().offsetX("$w")
    )
  )
  .addVariable(set("h", expression("initial_height")))
  .overlay(
    source(image("docs/study-apartment")).position(
      new Position()
        .gravity(compass("east"))
        .offsetY("$h")
    )
  )
  .overlay(
    source(image("docs/lounge-apartment")).position(
      new Position().gravity(compass("south_west"))
    )
  );
```

```js
import { set } from "@cloudinary/url-gen/actions/variable";
import { source } from "@cloudinary/url-gen/actions/overlay";
import { expression } from "@cloudinary/url-gen/qualifiers/expression";
import { image } from "@cloudinary/url-gen/qualifiers/source";
import { Position } from "@cloudinary/url-gen/qualifiers/position";
import { compass } from "@cloudinary/url-gen/qualifiers/gravity";

new CloudinaryImage("docs/dining-apartment.jpg")
  .addVariable(set("w", expression("initial_width")))
  .overlay(
    source(image("docs/kitchen-apartment")).position(
      new Position().offsetX("$w")
    )
  )
  .addVariable(set("h", expression("initial_height")))
  .overlay(
    source(image("docs/study-apartment")).position(
      new Position()
        .gravity(compass("east"))
        .offsetY("$h")
    )
  )
  .overlay(
    source(image("docs/lounge-apartment")).position(
      new Position().gravity(compass("south_west"))
    )
  );
```

```python
CloudinaryImage("docs/dining-apartment.jpg").image(transformation=[
  {'variables': [["$w", "iw"]]},
  {'overlay': "docs:kitchen-apartment"},
  {'flags': "layer_apply", 'x': "$w"},
  {'variables': [["$h", "ih"]]},
  {'overlay': "docs:study-apartment"},
  {'flags': "layer_apply", 'gravity': "east", 'y': "$h"},
  {'overlay': "docs:lounge-apartment"},
  {'flags': "layer_apply", 'gravity': "south_west"}
  ])
```

```php
use Cloudinary\Transformation\Variable;
use Cloudinary\Transformation\Overlay;
use Cloudinary\Transformation\Expression;
use Cloudinary\Transformation\Source;
use Cloudinary\Transformation\Position;
use Cloudinary\Transformation\Gravity;
use Cloudinary\Transformation\Compass;

(new ImageTag('docs/dining-apartment.jpg'))
	->addVariable(Variable::set("w",
	Expression::expression("initial_width")))
	->overlay(Overlay::source(
	Source::image("docs/kitchen-apartment"))
	->position((new Position())->offsetX("$w"))
	)
	->addVariable(Variable::set("h",
	Expression::expression("initial_height")))
	->overlay(Overlay::source(
	Source::image("docs/study-apartment"))
	->position((new Position())
	->gravity(
	Gravity::compass(
	Compass::east()))
->offsetY("$h"))
	)
	->overlay(Overlay::source(
	Source::image("docs/lounge-apartment"))
	->position((new Position())
	->gravity(
	Gravity::compass(
	Compass::southWest()))
	)
	);
```

```java
cloudinary.url().transformation(new Transformation()
  .variables(variable("$w","iw")).chain()
  .overlay(new Layer().publicId("docs:kitchen-apartment")).chain()
  .flags("layer_apply").x("$w").chain()
  .variables(variable("$w","iw")).variables(variable("$h","ih")).chain()
  .overlay(new Layer().publicId("docs:study-apartment")).chain()
  .flags("layer_apply").gravity("east").y("$h").chain()
  .overlay(new Layer().publicId("docs:lounge-apartment")).chain()
  .flags("layer_apply").gravity("south_west")).imageTag("docs/dining-apartment.jpg");
```

```ruby
cl_image_tag("docs/dining-apartment.jpg", transformation: [
  {variables: [["$w", "iw"]]},
  {overlay: "docs:kitchen-apartment"},
  {flags: "layer_apply", x: "$w"},
  {variables: [["$h", "ih"]]},
  {overlay: "docs:study-apartment"},
  {flags: "layer_apply", gravity: "east", y: "$h"},
  {overlay: "docs:lounge-apartment"},
  {flags: "layer_apply", gravity: "south_west"}
  ])
```

```csharp
cloudinary.Api.UrlImgUp.Transform(new Transformation()
  .Variables("$w", iw).Chain()
  .Overlay(new Layer().PublicId("docs:kitchen-apartment")).Chain()
  .Flags("layer_apply").X("$w").Chain()
  .Variables("$h", ih).Chain()
  .Overlay(new Layer().PublicId("docs:study-apartment")).Chain()
  .Flags("layer_apply").Gravity("east").Y("$h").Chain()
  .Overlay(new Layer().PublicId("docs:lounge-apartment")).Chain()
  .Flags("layer_apply").Gravity("south_west")).BuildImageTag("docs/dining-apartment.jpg")
```

```dart
cloudinary.image('docs/dining-apartment.jpg').transformation(Transformation()
	.addVariable(Variable.set("w",
	Expression.expression("initial_width")))
	.overlay(Overlay.source(
	Source.image("docs/kitchen-apartment"))
	.position(Position().offsetX("$w"))
	)
	.addVariable(Variable.set("h",
	Expression.expression("initial_height")))
	.overlay(Overlay.source(
	Source.image("docs/study-apartment"))
	.position(Position()
	.gravity(
	Gravity.compass(
	Compass.east()))
.offsetY("$h"))
	)
	.overlay(Overlay.source(
	Source.image("docs/lounge-apartment"))
	.position(Position()
	.gravity(
	Gravity.compass(
	Compass.southWest()))
	)
	));
```

```swift
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation()
  .chain()
  .setOverlay("docs:kitchen-apartment").chain()
  .setFlags("layer_apply").setX("$w").chain()
  .chain()
  .setOverlay("docs:study-apartment").chain()
  .setFlags("layer_apply").setGravity("east").setY("$h").chain()
  .setOverlay("docs:lounge-apartment").chain()
  .setFlags("layer_apply").setGravity("south_west")).generate("docs/dining-apartment.jpg")!, cloudinary: cloudinary)
```

```android
MediaManager.get().url().transformation(new Transformation()
  .variables(variable("$w","iw")).chain()
  .overlay(new Layer().publicId("docs:kitchen-apartment")).chain()
  .flags("layer_apply").x("$w").chain()
  .variables(variable("$w","iw")).variables(variable("$h","ih")).chain()
  .overlay(new Layer().publicId("docs:study-apartment")).chain()
  .flags("layer_apply").gravity("east").y("$h").chain()
  .overlay(new Layer().publicId("docs:lounge-apartment")).chain()
  .flags("layer_apply").gravity("south_west")).generate("docs/dining-apartment.jpg");
```

```flutter
cloudinary.image('docs/dining-apartment.jpg').transformation(Transformation()
	.addVariable(Variable.set("w",
	Expression.expression("initial_width")))
	.overlay(Overlay.source(
	Source.image("docs/kitchen-apartment"))
	.position(Position().offsetX("$w"))
	)
	.addVariable(Variable.set("h",
	Expression.expression("initial_height")))
	.overlay(Overlay.source(
	Source.image("docs/study-apartment"))
	.position(Position()
	.gravity(
	Gravity.compass(
	Compass.east()))
.offsetY("$h"))
	)
	.overlay(Overlay.source(
	Source.image("docs/lounge-apartment"))
	.position(Position()
	.gravity(
	Gravity.compass(
	Compass.southWest()))
	)
	));
```

```kotlin
cloudinary.image {
	publicId("docs/dining-apartment.jpg")
	 addVariable(Variable.set("w",
	Expression.expression("initial_width")))
	 overlay(Overlay.source(
	Source.image("docs/kitchen-apartment")) {
	 position(Position() { offsetX("\$w") })
	 })
	 addVariable(Variable.set("h",
	Expression.expression("initial_height")))
	 overlay(Overlay.source(
	Source.image("docs/study-apartment")) {
	 position(Position() {
	 gravity(
	Gravity.compass(
	Compass.east()))
 offsetY("\$h") })
	 })
	 overlay(Overlay.source(
	Source.image("docs/lounge-apartment")) {
	 position(Position() {
	 gravity(
	Gravity.compass(
	Compass.southWest()))
	 })
	 }) 
}.generate()
```

```jquery
$.cloudinary.image("docs/dining-apartment.jpg", {transformation: [
  {variables: [["$w", "iw"]]},
  {overlay: new cloudinary.Layer().publicId("docs:kitchen-apartment")},
  {flags: "layer_apply", x: "$w"},
  {variables: [["$h", "ih"]]},
  {overlay: new cloudinary.Layer().publicId("docs:study-apartment")},
  {flags: "layer_apply", gravity: "east", y: "$h"},
  {overlay: new cloudinary.Layer().publicId("docs:lounge-apartment")},
  {flags: "layer_apply", gravity: "south_west"}
  ]})
```

```react_native
import { set } from "@cloudinary/url-gen/actions/variable";
import { source } from "@cloudinary/url-gen/actions/overlay";
import { expression } from "@cloudinary/url-gen/qualifiers/expression";
import { image } from "@cloudinary/url-gen/qualifiers/source";
import { Position } from "@cloudinary/url-gen/qualifiers/position";
import { compass } from "@cloudinary/url-gen/qualifiers/gravity";

new CloudinaryImage("docs/dining-apartment.jpg")
  .addVariable(set("w", expression("initial_width")))
  .overlay(
    source(image("docs/kitchen-apartment")).position(
      new Position().offsetX("$w")
    )
  )
  .addVariable(set("h", expression("initial_height")))
  .overlay(
    source(image("docs/study-apartment")).position(
      new Position()
        .gravity(compass("east"))
        .offsetY("$h")
    )
  )
  .overlay(
    source(image("docs/lounge-apartment")).position(
      new Position().gravity(compass("south_west"))
    )
  );
```

* The base image (`docs/dining-apartment`) goes in the top left.
  ![Base image of the apartment collage](https://res.cloudinary.com/demo/image/upload/docs/dining-apartment.jpg "c_thumb,w_300, width:300")

```nodejs
cloudinary.image("docs/dining-apartment.jpg")
```

```react
new CloudinaryImage("docs/dining-apartment.jpg");
```

```vue
new CloudinaryImage("docs/dining-apartment.jpg");
```

```angular
new CloudinaryImage("docs/dining-apartment.jpg");
```

```js
new CloudinaryImage("docs/dining-apartment.jpg");
```

```python
CloudinaryImage("docs/dining-apartment.jpg").image()
```

```php
(new ImageTag('docs/dining-apartment.jpg'));
```

```java
cloudinary.url().transformation(new Transformation().imageTag("docs/dining-apartment.jpg");
```

```ruby
cl_image_tag("docs/dining-apartment.jpg")
```

```csharp
cloudinary.Api.UrlImgUp.BuildImageTag("docs/dining-apartment.jpg")
```

```dart
cloudinary.image('docs/dining-apartment.jpg').transformation(Transformation());
```

```swift
imageView.cldSetImage(cloudinary.createUrl().generate("docs/dining-apartment.jpg")!, cloudinary: cloudinary)
```

```android
MediaManager.get().url().transformation(new Transformation().generate("docs/dining-apartment.jpg");
```

```flutter
cloudinary.image('docs/dining-apartment.jpg').transformation(Transformation());
```

```kotlin
cloudinary.image {
	publicId("docs/dining-apartment.jpg") 
}.generate()
```

```jquery
$.cloudinary.image("docs/dining-apartment.jpg")
```

```react_native
new CloudinaryImage("docs/dining-apartment.jpg");
```
* The kitchen image appends to the right using the base image width as the `x` offset (`$w_iw/l_docs:kitchen-apartment/fl_layer_apply,x_$w`):
    * `$w_iw` sets the `$w` variable to the initial width of the base image.
    * `fl_layer_apply,x_$w` positions the overlay immediately adjacent to the right edge.
  ![Top two images of the apartment collage](https://res.cloudinary.com/demo/image/upload/$w_iw/l_docs:kitchen-apartment/fl_layer_apply,x_$w/docs/dining-apartment.jpg "c_thumb,w_600, width:600")

```nodejs
cloudinary.image("docs/dining-apartment.jpg", {transformation: [
  {variables: [["$w", "iw"]]},
  {overlay: "docs:kitchen-apartment"},
  {flags: "layer_apply", x: "$w"}
  ]})
```

```react
import { set } from "@cloudinary/url-gen/actions/variable";
import { source } from "@cloudinary/url-gen/actions/overlay";
import { expression } from "@cloudinary/url-gen/qualifiers/expression";
import { image } from "@cloudinary/url-gen/qualifiers/source";
import { Position } from "@cloudinary/url-gen/qualifiers/position";

new CloudinaryImage("docs/dining-apartment.jpg")
  .addVariable(set("w", expression("initial_width")))
  .overlay(
    source(image("docs/kitchen-apartment")).position(
      new Position().offsetX("$w")
    )
  );
```

```vue
import { set } from "@cloudinary/url-gen/actions/variable";
import { source } from "@cloudinary/url-gen/actions/overlay";
import { expression } from "@cloudinary/url-gen/qualifiers/expression";
import { image } from "@cloudinary/url-gen/qualifiers/source";
import { Position } from "@cloudinary/url-gen/qualifiers/position";

new CloudinaryImage("docs/dining-apartment.jpg")
  .addVariable(set("w", expression("initial_width")))
  .overlay(
    source(image("docs/kitchen-apartment")).position(
      new Position().offsetX("$w")
    )
  );
```

```angular
import { set } from "@cloudinary/url-gen/actions/variable";
import { source } from "@cloudinary/url-gen/actions/overlay";
import { expression } from "@cloudinary/url-gen/qualifiers/expression";
import { image } from "@cloudinary/url-gen/qualifiers/source";
import { Position } from "@cloudinary/url-gen/qualifiers/position";

new CloudinaryImage("docs/dining-apartment.jpg")
  .addVariable(set("w", expression("initial_width")))
  .overlay(
    source(image("docs/kitchen-apartment")).position(
      new Position().offsetX("$w")
    )
  );
```

```js
import { set } from "@cloudinary/url-gen/actions/variable";
import { source } from "@cloudinary/url-gen/actions/overlay";
import { expression } from "@cloudinary/url-gen/qualifiers/expression";
import { image } from "@cloudinary/url-gen/qualifiers/source";
import { Position } from "@cloudinary/url-gen/qualifiers/position";

new CloudinaryImage("docs/dining-apartment.jpg")
  .addVariable(set("w", expression("initial_width")))
  .overlay(
    source(image("docs/kitchen-apartment")).position(
      new Position().offsetX("$w")
    )
  );
```

```python
CloudinaryImage("docs/dining-apartment.jpg").image(transformation=[
  {'variables': [["$w", "iw"]]},
  {'overlay': "docs:kitchen-apartment"},
  {'flags': "layer_apply", 'x': "$w"}
  ])
```

```php
use Cloudinary\Transformation\Variable;
use Cloudinary\Transformation\Overlay;
use Cloudinary\Transformation\Expression;
use Cloudinary\Transformation\Source;
use Cloudinary\Transformation\Position;

(new ImageTag('docs/dining-apartment.jpg'))
	->addVariable(Variable::set("w",
	Expression::expression("initial_width")))
	->overlay(Overlay::source(
	Source::image("docs/kitchen-apartment"))
	->position((new Position())->offsetX("$w"))
	);
```

```java
cloudinary.url().transformation(new Transformation()
  .variables(variable("$w","iw")).chain()
  .overlay(new Layer().publicId("docs:kitchen-apartment")).chain()
  .flags("layer_apply").x("$w")).imageTag("docs/dining-apartment.jpg");
```

```ruby
cl_image_tag("docs/dining-apartment.jpg", transformation: [
  {variables: [["$w", "iw"]]},
  {overlay: "docs:kitchen-apartment"},
  {flags: "layer_apply", x: "$w"}
  ])
```

```csharp
cloudinary.Api.UrlImgUp.Transform(new Transformation()
  .Variables("$w", iw).Chain()
  .Overlay(new Layer().PublicId("docs:kitchen-apartment")).Chain()
  .Flags("layer_apply").X("$w")).BuildImageTag("docs/dining-apartment.jpg")
```

```dart
cloudinary.image('docs/dining-apartment.jpg').transformation(Transformation()
	.addVariable(Variable.set("w",
	Expression.expression("initial_width")))
	.overlay(Overlay.source(
	Source.image("docs/kitchen-apartment"))
	.position(Position().offsetX("$w"))
	));
```

```swift
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation()
  .chain()
  .setOverlay("docs:kitchen-apartment").chain()
  .setFlags("layer_apply").setX("$w")).generate("docs/dining-apartment.jpg")!, cloudinary: cloudinary)
```

```android
MediaManager.get().url().transformation(new Transformation()
  .variables(variable("$w","iw")).chain()
  .overlay(new Layer().publicId("docs:kitchen-apartment")).chain()
  .flags("layer_apply").x("$w")).generate("docs/dining-apartment.jpg");
```

```flutter
cloudinary.image('docs/dining-apartment.jpg').transformation(Transformation()
	.addVariable(Variable.set("w",
	Expression.expression("initial_width")))
	.overlay(Overlay.source(
	Source.image("docs/kitchen-apartment"))
	.position(Position().offsetX("$w"))
	));
```

```kotlin
cloudinary.image {
	publicId("docs/dining-apartment.jpg")
	 addVariable(Variable.set("w",
	Expression.expression("initial_width")))
	 overlay(Overlay.source(
	Source.image("docs/kitchen-apartment")) {
	 position(Position() { offsetX("\$w") })
	 }) 
}.generate()
```

```jquery
$.cloudinary.image("docs/dining-apartment.jpg", {transformation: [
  {variables: [["$w", "iw"]]},
  {overlay: new cloudinary.Layer().publicId("docs:kitchen-apartment")},
  {flags: "layer_apply", x: "$w"}
  ]})
```

```react_native
import { set } from "@cloudinary/url-gen/actions/variable";
import { source } from "@cloudinary/url-gen/actions/overlay";
import { expression } from "@cloudinary/url-gen/qualifiers/expression";
import { image } from "@cloudinary/url-gen/qualifiers/source";
import { Position } from "@cloudinary/url-gen/qualifiers/position";

new CloudinaryImage("docs/dining-apartment.jpg")
  .addVariable(set("w", expression("initial_width")))
  .overlay(
    source(image("docs/kitchen-apartment")).position(
      new Position().offsetX("$w")
    )
  );
```
* The study image stacks below the kitchen image using `east` gravity and the base image height as the `y` offset (`$h_ih/l_docs:study-apartment/fl_layer_apply,g_east,y_$h`):
    * `$h_ih` sets the `$h` variable to the initial height of the base image.
    * `fl_layer_apply,g_east,y_$h` positions the overlay directly below the kitchen image.
  ![Three images of the apartment collage](https://res.cloudinary.com/demo/image/upload/$w_iw/l_docs:kitchen-apartment/fl_layer_apply,x_$w/$h_ih/l_docs:study-apartment/fl_layer_apply,g_east,y_$h/docs/dining-apartment.jpg "c_thumb,w_600, width:600")

```nodejs
cloudinary.image("docs/dining-apartment.jpg", {transformation: [
  {variables: [["$w", "iw"]]},
  {overlay: "docs:kitchen-apartment"},
  {flags: "layer_apply", x: "$w"},
  {variables: [["$h", "ih"]]},
  {overlay: "docs:study-apartment"},
  {flags: "layer_apply", gravity: "east", y: "$h"}
  ]})
```

```react
import { set } from "@cloudinary/url-gen/actions/variable";
import { source } from "@cloudinary/url-gen/actions/overlay";
import { expression } from "@cloudinary/url-gen/qualifiers/expression";
import { image } from "@cloudinary/url-gen/qualifiers/source";
import { Position } from "@cloudinary/url-gen/qualifiers/position";
import { compass } from "@cloudinary/url-gen/qualifiers/gravity";

new CloudinaryImage("docs/dining-apartment.jpg")
  .addVariable(set("w", expression("initial_width")))
  .overlay(
    source(image("docs/kitchen-apartment")).position(
      new Position().offsetX("$w")
    )
  )
  .addVariable(set("h", expression("initial_height")))
  .overlay(
    source(image("docs/study-apartment")).position(
      new Position()
        .gravity(compass("east"))
        .offsetY("$h")
    )
  );
```

```vue
import { set } from "@cloudinary/url-gen/actions/variable";
import { source } from "@cloudinary/url-gen/actions/overlay";
import { expression } from "@cloudinary/url-gen/qualifiers/expression";
import { image } from "@cloudinary/url-gen/qualifiers/source";
import { Position } from "@cloudinary/url-gen/qualifiers/position";
import { compass } from "@cloudinary/url-gen/qualifiers/gravity";

new CloudinaryImage("docs/dining-apartment.jpg")
  .addVariable(set("w", expression("initial_width")))
  .overlay(
    source(image("docs/kitchen-apartment")).position(
      new Position().offsetX("$w")
    )
  )
  .addVariable(set("h", expression("initial_height")))
  .overlay(
    source(image("docs/study-apartment")).position(
      new Position()
        .gravity(compass("east"))
        .offsetY("$h")
    )
  );
```

```angular
import { set } from "@cloudinary/url-gen/actions/variable";
import { source } from "@cloudinary/url-gen/actions/overlay";
import { expression } from "@cloudinary/url-gen/qualifiers/expression";
import { image } from "@cloudinary/url-gen/qualifiers/source";
import { Position } from "@cloudinary/url-gen/qualifiers/position";
import { compass } from "@cloudinary/url-gen/qualifiers/gravity";

new CloudinaryImage("docs/dining-apartment.jpg")
  .addVariable(set("w", expression("initial_width")))
  .overlay(
    source(image("docs/kitchen-apartment")).position(
      new Position().offsetX("$w")
    )
  )
  .addVariable(set("h", expression("initial_height")))
  .overlay(
    source(image("docs/study-apartment")).position(
      new Position()
        .gravity(compass("east"))
        .offsetY("$h")
    )
  );
```

```js
import { set } from "@cloudinary/url-gen/actions/variable";
import { source } from "@cloudinary/url-gen/actions/overlay";
import { expression } from "@cloudinary/url-gen/qualifiers/expression";
import { image } from "@cloudinary/url-gen/qualifiers/source";
import { Position } from "@cloudinary/url-gen/qualifiers/position";
import { compass } from "@cloudinary/url-gen/qualifiers/gravity";

new CloudinaryImage("docs/dining-apartment.jpg")
  .addVariable(set("w", expression("initial_width")))
  .overlay(
    source(image("docs/kitchen-apartment")).position(
      new Position().offsetX("$w")
    )
  )
  .addVariable(set("h", expression("initial_height")))
  .overlay(
    source(image("docs/study-apartment")).position(
      new Position()
        .gravity(compass("east"))
        .offsetY("$h")
    )
  );
```

```python
CloudinaryImage("docs/dining-apartment.jpg").image(transformation=[
  {'variables': [["$w", "iw"]]},
  {'overlay': "docs:kitchen-apartment"},
  {'flags': "layer_apply", 'x': "$w"},
  {'variables': [["$h", "ih"]]},
  {'overlay': "docs:study-apartment"},
  {'flags': "layer_apply", 'gravity': "east", 'y': "$h"}
  ])
```

```php
use Cloudinary\Transformation\Variable;
use Cloudinary\Transformation\Overlay;
use Cloudinary\Transformation\Expression;
use Cloudinary\Transformation\Source;
use Cloudinary\Transformation\Position;
use Cloudinary\Transformation\Gravity;
use Cloudinary\Transformation\Compass;

(new ImageTag('docs/dining-apartment.jpg'))
	->addVariable(Variable::set("w",
	Expression::expression("initial_width")))
	->overlay(Overlay::source(
	Source::image("docs/kitchen-apartment"))
	->position((new Position())->offsetX("$w"))
	)
	->addVariable(Variable::set("h",
	Expression::expression("initial_height")))
	->overlay(Overlay::source(
	Source::image("docs/study-apartment"))
	->position((new Position())
	->gravity(
	Gravity::compass(
	Compass::east()))
->offsetY("$h"))
	);
```

```java
cloudinary.url().transformation(new Transformation()
  .variables(variable("$w","iw")).chain()
  .overlay(new Layer().publicId("docs:kitchen-apartment")).chain()
  .flags("layer_apply").x("$w").chain()
  .variables(variable("$w","iw")).variables(variable("$h","ih")).chain()
  .overlay(new Layer().publicId("docs:study-apartment")).chain()
  .flags("layer_apply").gravity("east").y("$h")).imageTag("docs/dining-apartment.jpg");
```

```ruby
cl_image_tag("docs/dining-apartment.jpg", transformation: [
  {variables: [["$w", "iw"]]},
  {overlay: "docs:kitchen-apartment"},
  {flags: "layer_apply", x: "$w"},
  {variables: [["$h", "ih"]]},
  {overlay: "docs:study-apartment"},
  {flags: "layer_apply", gravity: "east", y: "$h"}
  ])
```

```csharp
cloudinary.Api.UrlImgUp.Transform(new Transformation()
  .Variables("$w", iw).Chain()
  .Overlay(new Layer().PublicId("docs:kitchen-apartment")).Chain()
  .Flags("layer_apply").X("$w").Chain()
  .Variables("$h", ih).Chain()
  .Overlay(new Layer().PublicId("docs:study-apartment")).Chain()
  .Flags("layer_apply").Gravity("east").Y("$h")).BuildImageTag("docs/dining-apartment.jpg")
```

```dart
cloudinary.image('docs/dining-apartment.jpg').transformation(Transformation()
	.addVariable(Variable.set("w",
	Expression.expression("initial_width")))
	.overlay(Overlay.source(
	Source.image("docs/kitchen-apartment"))
	.position(Position().offsetX("$w"))
	)
	.addVariable(Variable.set("h",
	Expression.expression("initial_height")))
	.overlay(Overlay.source(
	Source.image("docs/study-apartment"))
	.position(Position()
	.gravity(
	Gravity.compass(
	Compass.east()))
.offsetY("$h"))
	));
```

```swift
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation()
  .chain()
  .setOverlay("docs:kitchen-apartment").chain()
  .setFlags("layer_apply").setX("$w").chain()
  .chain()
  .setOverlay("docs:study-apartment").chain()
  .setFlags("layer_apply").setGravity("east").setY("$h")).generate("docs/dining-apartment.jpg")!, cloudinary: cloudinary)
```

```android
MediaManager.get().url().transformation(new Transformation()
  .variables(variable("$w","iw")).chain()
  .overlay(new Layer().publicId("docs:kitchen-apartment")).chain()
  .flags("layer_apply").x("$w").chain()
  .variables(variable("$w","iw")).variables(variable("$h","ih")).chain()
  .overlay(new Layer().publicId("docs:study-apartment")).chain()
  .flags("layer_apply").gravity("east").y("$h")).generate("docs/dining-apartment.jpg");
```

```flutter
cloudinary.image('docs/dining-apartment.jpg').transformation(Transformation()
	.addVariable(Variable.set("w",
	Expression.expression("initial_width")))
	.overlay(Overlay.source(
	Source.image("docs/kitchen-apartment"))
	.position(Position().offsetX("$w"))
	)
	.addVariable(Variable.set("h",
	Expression.expression("initial_height")))
	.overlay(Overlay.source(
	Source.image("docs/study-apartment"))
	.position(Position()
	.gravity(
	Gravity.compass(
	Compass.east()))
.offsetY("$h"))
	));
```

```kotlin
cloudinary.image {
	publicId("docs/dining-apartment.jpg")
	 addVariable(Variable.set("w",
	Expression.expression("initial_width")))
	 overlay(Overlay.source(
	Source.image("docs/kitchen-apartment")) {
	 position(Position() { offsetX("\$w") })
	 })
	 addVariable(Variable.set("h",
	Expression.expression("initial_height")))
	 overlay(Overlay.source(
	Source.image("docs/study-apartment")) {
	 position(Position() {
	 gravity(
	Gravity.compass(
	Compass.east()))
 offsetY("\$h") })
	 }) 
}.generate()
```

```jquery
$.cloudinary.image("docs/dining-apartment.jpg", {transformation: [
  {variables: [["$w", "iw"]]},
  {overlay: new cloudinary.Layer().publicId("docs:kitchen-apartment")},
  {flags: "layer_apply", x: "$w"},
  {variables: [["$h", "ih"]]},
  {overlay: new cloudinary.Layer().publicId("docs:study-apartment")},
  {flags: "layer_apply", gravity: "east", y: "$h"}
  ]})
```

```react_native
import { set } from "@cloudinary/url-gen/actions/variable";
import { source } from "@cloudinary/url-gen/actions/overlay";
import { expression } from "@cloudinary/url-gen/qualifiers/expression";
import { image } from "@cloudinary/url-gen/qualifiers/source";
import { Position } from "@cloudinary/url-gen/qualifiers/position";
import { compass } from "@cloudinary/url-gen/qualifiers/gravity";

new CloudinaryImage("docs/dining-apartment.jpg")
  .addVariable(set("w", expression("initial_width")))
  .overlay(
    source(image("docs/kitchen-apartment")).position(
      new Position().offsetX("$w")
    )
  )
  .addVariable(set("h", expression("initial_height")))
  .overlay(
    source(image("docs/study-apartment")).position(
      new Position()
        .gravity(compass("east"))
        .offsetY("$h")
    )
  );
```
* The lounge image fills the bottom left corner using `south_west` gravity.
  ![Apartment collage](https://res.cloudinary.com/demo/image/upload/$w_iw/l_docs:kitchen-apartment/fl_layer_apply,x_$w/$h_ih/l_docs:study-apartment/fl_layer_apply,g_east,y_$h/l_docs:lounge-apartment/fl_layer_apply,g_south_west/docs/dining-apartment.jpg "c_thumb,w_600, width:600")

You can also set fixed dimensions for each image and add spacing and background colors. For example, the following collage crops each image to 250 × 250 pixels, adds 30 pixels of spacing between them, and applies a `burlywood` background:

![Apartment collage with spacing](https://res.cloudinary.com/demo/image/upload/c_auto,g_auto,h_250,w_250/$w_250/l_docs:kitchen-apartment/c_auto,g_auto,h_250,w_250/fl_layer_apply,x_$w_add_30/$h_250/l_docs:study-apartment/c_auto,g_auto,h_250,w_250/fl_layer_apply,g_east,y_$h_add_30/l_docs:lounge-apartment/c_auto,g_auto,h_250,w_250/fl_layer_apply,g_south_west/b_burlywood/c_lpad,h_590,w_590/docs/dining-apartment.jpg "c_thumb,w_600, width:600")

```nodejs
cloudinary.image("docs/dining-apartment.jpg", {transformation: [
  {gravity: "auto", height: 250, width: 250, crop: "auto"},
  {variables: [["$w", "250"]]},
  {overlay: "docs:kitchen-apartment"},
  {gravity: "auto", height: 250, width: 250, crop: "auto"},
  {flags: "layer_apply", x: "$w + 30"},
  {variables: [["$h", "250"]]},
  {overlay: "docs:study-apartment"},
  {gravity: "auto", height: 250, width: 250, crop: "auto"},
  {flags: "layer_apply", gravity: "east", y: "$h + 30"},
  {overlay: "docs:lounge-apartment"},
  {gravity: "auto", height: 250, width: 250, crop: "auto"},
  {flags: "layer_apply", gravity: "south_west"},
  {background: "burlywood"},
  {height: 590, width: 590, crop: "lpad"}
  ]})
```

```react
import { auto, limitPad } from "@cloudinary/url-gen/actions/resize";
import { set } from "@cloudinary/url-gen/actions/variable";
import { source } from "@cloudinary/url-gen/actions/overlay";
import { image } from "@cloudinary/url-gen/qualifiers/source";
import { Position } from "@cloudinary/url-gen/qualifiers/position";
import { autoGravity, compass } from "@cloudinary/url-gen/qualifiers/gravity";
import { expression } from "@cloudinary/url-gen/qualifiers/expression";

new CloudinaryImage("docs/dining-apartment.jpg")
  .resize(
    auto()
      .width(250)
      .height(250)
      .gravity(autoGravity())
  )
  .addVariable(set("w", 250))
  .overlay(
    source(
      image("docs/kitchen-apartment").transformation(
        new Transformation().resize(
          auto().width(250).height(250).gravity(autoGravity())
        )
      )
    ).position(new Position().offsetX(expression("$w + 30")))
  )
  .addVariable(set("h", 250))
  .overlay(
    source(
      image("docs/study-apartment").transformation(
        new Transformation().resize(
          auto().width(250).height(250).gravity(autoGravity())
        )
      )
    ).position(
      new Position()
        .gravity(compass("east"))
        .offsetY(expression("$h + 30"))
    )
  )
  .overlay(
    source(
      image("docs/lounge-apartment").transformation(
        new Transformation().resize(
          auto().width(250).height(250).gravity(autoGravity())
        )
      )
    ).position(new Position().gravity(compass("south_west")))
  )
  .backgroundColor("burlywood")
  .resize(limitPad().width(590).height(590));
```

```vue
import { auto, limitPad } from "@cloudinary/url-gen/actions/resize";
import { set } from "@cloudinary/url-gen/actions/variable";
import { source } from "@cloudinary/url-gen/actions/overlay";
import { image } from "@cloudinary/url-gen/qualifiers/source";
import { Position } from "@cloudinary/url-gen/qualifiers/position";
import { autoGravity, compass } from "@cloudinary/url-gen/qualifiers/gravity";
import { expression } from "@cloudinary/url-gen/qualifiers/expression";

new CloudinaryImage("docs/dining-apartment.jpg")
  .resize(
    auto()
      .width(250)
      .height(250)
      .gravity(autoGravity())
  )
  .addVariable(set("w", 250))
  .overlay(
    source(
      image("docs/kitchen-apartment").transformation(
        new Transformation().resize(
          auto().width(250).height(250).gravity(autoGravity())
        )
      )
    ).position(new Position().offsetX(expression("$w + 30")))
  )
  .addVariable(set("h", 250))
  .overlay(
    source(
      image("docs/study-apartment").transformation(
        new Transformation().resize(
          auto().width(250).height(250).gravity(autoGravity())
        )
      )
    ).position(
      new Position()
        .gravity(compass("east"))
        .offsetY(expression("$h + 30"))
    )
  )
  .overlay(
    source(
      image("docs/lounge-apartment").transformation(
        new Transformation().resize(
          auto().width(250).height(250).gravity(autoGravity())
        )
      )
    ).position(new Position().gravity(compass("south_west")))
  )
  .backgroundColor("burlywood")
  .resize(limitPad().width(590).height(590));
```

```angular
import { auto, limitPad } from "@cloudinary/url-gen/actions/resize";
import { set } from "@cloudinary/url-gen/actions/variable";
import { source } from "@cloudinary/url-gen/actions/overlay";
import { image } from "@cloudinary/url-gen/qualifiers/source";
import { Position } from "@cloudinary/url-gen/qualifiers/position";
import { autoGravity, compass } from "@cloudinary/url-gen/qualifiers/gravity";
import { expression } from "@cloudinary/url-gen/qualifiers/expression";

new CloudinaryImage("docs/dining-apartment.jpg")
  .resize(
    auto()
      .width(250)
      .height(250)
      .gravity(autoGravity())
  )
  .addVariable(set("w", 250))
  .overlay(
    source(
      image("docs/kitchen-apartment").transformation(
        new Transformation().resize(
          auto().width(250).height(250).gravity(autoGravity())
        )
      )
    ).position(new Position().offsetX(expression("$w + 30")))
  )
  .addVariable(set("h", 250))
  .overlay(
    source(
      image("docs/study-apartment").transformation(
        new Transformation().resize(
          auto().width(250).height(250).gravity(autoGravity())
        )
      )
    ).position(
      new Position()
        .gravity(compass("east"))
        .offsetY(expression("$h + 30"))
    )
  )
  .overlay(
    source(
      image("docs/lounge-apartment").transformation(
        new Transformation().resize(
          auto().width(250).height(250).gravity(autoGravity())
        )
      )
    ).position(new Position().gravity(compass("south_west")))
  )
  .backgroundColor("burlywood")
  .resize(limitPad().width(590).height(590));
```

```js
import { auto, limitPad } from "@cloudinary/url-gen/actions/resize";
import { set } from "@cloudinary/url-gen/actions/variable";
import { source } from "@cloudinary/url-gen/actions/overlay";
import { image } from "@cloudinary/url-gen/qualifiers/source";
import { Position } from "@cloudinary/url-gen/qualifiers/position";
import { autoGravity, compass } from "@cloudinary/url-gen/qualifiers/gravity";
import { expression } from "@cloudinary/url-gen/qualifiers/expression";

new CloudinaryImage("docs/dining-apartment.jpg")
  .resize(
    auto()
      .width(250)
      .height(250)
      .gravity(autoGravity())
  )
  .addVariable(set("w", 250))
  .overlay(
    source(
      image("docs/kitchen-apartment").transformation(
        new Transformation().resize(
          auto().width(250).height(250).gravity(autoGravity())
        )
      )
    ).position(new Position().offsetX(expression("$w + 30")))
  )
  .addVariable(set("h", 250))
  .overlay(
    source(
      image("docs/study-apartment").transformation(
        new Transformation().resize(
          auto().width(250).height(250).gravity(autoGravity())
        )
      )
    ).position(
      new Position()
        .gravity(compass("east"))
        .offsetY(expression("$h + 30"))
    )
  )
  .overlay(
    source(
      image("docs/lounge-apartment").transformation(
        new Transformation().resize(
          auto().width(250).height(250).gravity(autoGravity())
        )
      )
    ).position(new Position().gravity(compass("south_west")))
  )
  .backgroundColor("burlywood")
  .resize(limitPad().width(590).height(590));
```

```python
CloudinaryImage("docs/dining-apartment.jpg").image(transformation=[
  {'gravity': "auto", 'height': 250, 'width': 250, 'crop': "auto"},
  {'variables': [["$w", "250"]]},
  {'overlay': "docs:kitchen-apartment"},
  {'gravity': "auto", 'height': 250, 'width': 250, 'crop': "auto"},
  {'flags': "layer_apply", 'x': "$w + 30"},
  {'variables': [["$h", "250"]]},
  {'overlay': "docs:study-apartment"},
  {'gravity': "auto", 'height': 250, 'width': 250, 'crop': "auto"},
  {'flags': "layer_apply", 'gravity': "east", 'y': "$h + 30"},
  {'overlay': "docs:lounge-apartment"},
  {'gravity': "auto", 'height': 250, 'width': 250, 'crop': "auto"},
  {'flags': "layer_apply", 'gravity': "south_west"},
  {'background': "burlywood"},
  {'height': 590, 'width': 590, 'crop': "lpad"}
  ])
```

```php
use Cloudinary\Transformation\Resize;
use Cloudinary\Transformation\Variable;
use Cloudinary\Transformation\Overlay;
use Cloudinary\Transformation\Source;
use Cloudinary\Transformation\Position;
use Cloudinary\Transformation\Gravity;
use Cloudinary\Transformation\Expression;
use Cloudinary\Transformation\Compass;

(new ImageTag('docs/dining-apartment.jpg'))
	->resize(Resize::auto()->width(250)
->height(250)
	->gravity(
	Gravity::autoGravity())
	)
	->addVariable(Variable::set("w",250))
	->overlay(Overlay::source(
	Source::image("docs/kitchen-apartment")
	->transformation((new Transformation())
	->resize(Resize::auto()->width(250)
->height(250)
	->gravity(
	Gravity::autoGravity())
	))
	)
	->position((new Position())
	->offsetX(
	Expression::expression("$w + 30"))
	)
	)
	->addVariable(Variable::set("h",250))
	->overlay(Overlay::source(
	Source::image("docs/study-apartment")
	->transformation((new Transformation())
	->resize(Resize::auto()->width(250)
->height(250)
	->gravity(
	Gravity::autoGravity())
	))
	)
	->position((new Position())
	->gravity(
	Gravity::compass(
	Compass::east()))
	->offsetY(
	Expression::expression("$h + 30"))
	)
	)
	->overlay(Overlay::source(
	Source::image("docs/lounge-apartment")
	->transformation((new Transformation())
	->resize(Resize::auto()->width(250)
->height(250)
	->gravity(
	Gravity::autoGravity())
	))
	)
	->position((new Position())
	->gravity(
	Gravity::compass(
	Compass::southWest()))
	)
	)
	->backgroundColor(Color::BURLYWOOD)
	->resize(Resize::limitPad()->width(590)
->height(590));
```

```java
cloudinary.url().transformation(new Transformation()
  .gravity("auto").height(250).width(250).crop("auto").chain()
  .variables(variable("$w","250")).chain()
  .overlay(new Layer().publicId("docs:kitchen-apartment")).chain()
  .gravity("auto").height(250).width(250).crop("auto").chain()
  .flags("layer_apply").x("$w + 30").chain()
  .variables(variable("$w","250")).variables(variable("$h","250")).chain()
  .overlay(new Layer().publicId("docs:study-apartment")).chain()
  .gravity("auto").height(250).width(250).crop("auto").chain()
  .flags("layer_apply").gravity("east").y("$h + 30").chain()
  .overlay(new Layer().publicId("docs:lounge-apartment")).chain()
  .gravity("auto").height(250).width(250).crop("auto").chain()
  .flags("layer_apply").gravity("south_west").chain()
  .background("burlywood").chain()
  .height(590).width(590).crop("lpad")).imageTag("docs/dining-apartment.jpg");
```

```ruby
cl_image_tag("docs/dining-apartment.jpg", transformation: [
  {gravity: "auto", height: 250, width: 250, crop: "auto"},
  {variables: [["$w", "250"]]},
  {overlay: "docs:kitchen-apartment"},
  {gravity: "auto", height: 250, width: 250, crop: "auto"},
  {flags: "layer_apply", x: "$w + 30"},
  {variables: [["$h", "250"]]},
  {overlay: "docs:study-apartment"},
  {gravity: "auto", height: 250, width: 250, crop: "auto"},
  {flags: "layer_apply", gravity: "east", y: "$h + 30"},
  {overlay: "docs:lounge-apartment"},
  {gravity: "auto", height: 250, width: 250, crop: "auto"},
  {flags: "layer_apply", gravity: "south_west"},
  {background: "burlywood"},
  {height: 590, width: 590, crop: "lpad"}
  ])
```

```csharp
cloudinary.Api.UrlImgUp.Transform(new Transformation()
  .Gravity("auto").Height(250).Width(250).Crop("auto").Chain()
  .Variables("$w", 250).Chain()
  .Overlay(new Layer().PublicId("docs:kitchen-apartment")).Chain()
  .Gravity("auto").Height(250).Width(250).Crop("auto").Chain()
  .Flags("layer_apply").X("$w + 30").Chain()
  .Variables("$h", 250).Chain()
  .Overlay(new Layer().PublicId("docs:study-apartment")).Chain()
  .Gravity("auto").Height(250).Width(250).Crop("auto").Chain()
  .Flags("layer_apply").Gravity("east").Y("$h + 30").Chain()
  .Overlay(new Layer().PublicId("docs:lounge-apartment")).Chain()
  .Gravity("auto").Height(250).Width(250).Crop("auto").Chain()
  .Flags("layer_apply").Gravity("south_west").Chain()
  .Background("burlywood").Chain()
  .Height(590).Width(590).Crop("lpad")).BuildImageTag("docs/dining-apartment.jpg")
```

```dart
cloudinary.image('docs/dining-apartment.jpg').transformation(Transformation()
	.resize(Resize.auto().width(250)
.height(250)
	.gravity(
	Gravity.autoGravity())
	)
	.addVariable(Variable.set("w",250))
	.overlay(Overlay.source(
	Source.image("docs/kitchen-apartment")
	.transformation(new Transformation()
	.resize(Resize.auto().width(250)
.height(250)
	.gravity(
	Gravity.autoGravity())
	))
	)
	.position(Position()
	.offsetX(
	Expression.expression("$w + 30"))
	)
	)
	.addVariable(Variable.set("h",250))
	.overlay(Overlay.source(
	Source.image("docs/study-apartment")
	.transformation(new Transformation()
	.resize(Resize.auto().width(250)
.height(250)
	.gravity(
	Gravity.autoGravity())
	))
	)
	.position(Position()
	.gravity(
	Gravity.compass(
	Compass.east()))
	.offsetY(
	Expression.expression("$h + 30"))
	)
	)
	.overlay(Overlay.source(
	Source.image("docs/lounge-apartment")
	.transformation(new Transformation()
	.resize(Resize.auto().width(250)
.height(250)
	.gravity(
	Gravity.autoGravity())
	))
	)
	.position(Position()
	.gravity(
	Gravity.compass(
	Compass.southWest()))
	)
	)
	.backgroundColor(Color.BURLYWOOD)
	.resize(Resize.limitPad().width(590)
.height(590)));
```

```swift
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation()
  .setGravity("auto").setHeight(250).setWidth(250).setCrop("auto").chain()
  .chain()
  .setOverlay("docs:kitchen-apartment").chain()
  .setGravity("auto").setHeight(250).setWidth(250).setCrop("auto").chain()
  .setFlags("layer_apply").setX("$w + 30").chain()
  .chain()
  .setOverlay("docs:study-apartment").chain()
  .setGravity("auto").setHeight(250).setWidth(250).setCrop("auto").chain()
  .setFlags("layer_apply").setGravity("east").setY("$h + 30").chain()
  .setOverlay("docs:lounge-apartment").chain()
  .setGravity("auto").setHeight(250).setWidth(250).setCrop("auto").chain()
  .setFlags("layer_apply").setGravity("south_west").chain()
  .setBackground("burlywood").chain()
  .setHeight(590).setWidth(590).setCrop("lpad")).generate("docs/dining-apartment.jpg")!, cloudinary: cloudinary)
```

```android
MediaManager.get().url().transformation(new Transformation()
  .gravity("auto").height(250).width(250).crop("auto").chain()
  .variables(variable("$w","250")).chain()
  .overlay(new Layer().publicId("docs:kitchen-apartment")).chain()
  .gravity("auto").height(250).width(250).crop("auto").chain()
  .flags("layer_apply").x("$w + 30").chain()
  .variables(variable("$w","250")).variables(variable("$h","250")).chain()
  .overlay(new Layer().publicId("docs:study-apartment")).chain()
  .gravity("auto").height(250).width(250).crop("auto").chain()
  .flags("layer_apply").gravity("east").y("$h + 30").chain()
  .overlay(new Layer().publicId("docs:lounge-apartment")).chain()
  .gravity("auto").height(250).width(250).crop("auto").chain()
  .flags("layer_apply").gravity("south_west").chain()
  .background("burlywood").chain()
  .height(590).width(590).crop("lpad")).generate("docs/dining-apartment.jpg");
```

```flutter
cloudinary.image('docs/dining-apartment.jpg').transformation(Transformation()
	.resize(Resize.auto().width(250)
.height(250)
	.gravity(
	Gravity.autoGravity())
	)
	.addVariable(Variable.set("w",250))
	.overlay(Overlay.source(
	Source.image("docs/kitchen-apartment")
	.transformation(new Transformation()
	.resize(Resize.auto().width(250)
.height(250)
	.gravity(
	Gravity.autoGravity())
	))
	)
	.position(Position()
	.offsetX(
	Expression.expression("$w + 30"))
	)
	)
	.addVariable(Variable.set("h",250))
	.overlay(Overlay.source(
	Source.image("docs/study-apartment")
	.transformation(new Transformation()
	.resize(Resize.auto().width(250)
.height(250)
	.gravity(
	Gravity.autoGravity())
	))
	)
	.position(Position()
	.gravity(
	Gravity.compass(
	Compass.east()))
	.offsetY(
	Expression.expression("$h + 30"))
	)
	)
	.overlay(Overlay.source(
	Source.image("docs/lounge-apartment")
	.transformation(new Transformation()
	.resize(Resize.auto().width(250)
.height(250)
	.gravity(
	Gravity.autoGravity())
	))
	)
	.position(Position()
	.gravity(
	Gravity.compass(
	Compass.southWest()))
	)
	)
	.backgroundColor(Color.BURLYWOOD)
	.resize(Resize.limitPad().width(590)
.height(590)));
```

```kotlin
cloudinary.image {
	publicId("docs/dining-apartment.jpg")
	 resize(Resize.auto() { width(250)
 height(250)
	 gravity(
	Gravity.autoGravity())
	 })
	 addVariable(Variable.set("w",250))
	 overlay(Overlay.source(
	Source.image("docs/kitchen-apartment") {
	 transformation(Transformation {
	 resize(Resize.auto() { width(250)
 height(250)
	 gravity(
	Gravity.autoGravity())
	 }) })
	 }) {
	 position(Position() {
	 offsetX(
	Expression.expression("\$w + 30"))
	 })
	 })
	 addVariable(Variable.set("h",250))
	 overlay(Overlay.source(
	Source.image("docs/study-apartment") {
	 transformation(Transformation {
	 resize(Resize.auto() { width(250)
 height(250)
	 gravity(
	Gravity.autoGravity())
	 }) })
	 }) {
	 position(Position() {
	 gravity(
	Gravity.compass(
	Compass.east()))
	 offsetY(
	Expression.expression("\$h + 30"))
	 })
	 })
	 overlay(Overlay.source(
	Source.image("docs/lounge-apartment") {
	 transformation(Transformation {
	 resize(Resize.auto() { width(250)
 height(250)
	 gravity(
	Gravity.autoGravity())
	 }) })
	 }) {
	 position(Position() {
	 gravity(
	Gravity.compass(
	Compass.southWest()))
	 })
	 })
	 backgroundColor(Color.BURLYWOOD)
	 resize(Resize.limitPad() { width(590)
 height(590) }) 
}.generate()
```

```jquery
$.cloudinary.image("docs/dining-apartment.jpg", {transformation: [
  {gravity: "auto", height: 250, width: 250, crop: "auto"},
  {variables: [["$w", "250"]]},
  {overlay: new cloudinary.Layer().publicId("docs:kitchen-apartment")},
  {gravity: "auto", height: 250, width: 250, crop: "auto"},
  {flags: "layer_apply", x: "$w + 30"},
  {variables: [["$h", "250"]]},
  {overlay: new cloudinary.Layer().publicId("docs:study-apartment")},
  {gravity: "auto", height: 250, width: 250, crop: "auto"},
  {flags: "layer_apply", gravity: "east", y: "$h + 30"},
  {overlay: new cloudinary.Layer().publicId("docs:lounge-apartment")},
  {gravity: "auto", height: 250, width: 250, crop: "auto"},
  {flags: "layer_apply", gravity: "south_west"},
  {background: "burlywood"},
  {height: 590, width: 590, crop: "lpad"}
  ]})
```

```react_native
import { auto, limitPad } from "@cloudinary/url-gen/actions/resize";
import { set } from "@cloudinary/url-gen/actions/variable";
import { source } from "@cloudinary/url-gen/actions/overlay";
import { image } from "@cloudinary/url-gen/qualifiers/source";
import { Position } from "@cloudinary/url-gen/qualifiers/position";
import { autoGravity, compass } from "@cloudinary/url-gen/qualifiers/gravity";
import { expression } from "@cloudinary/url-gen/qualifiers/expression";

new CloudinaryImage("docs/dining-apartment.jpg")
  .resize(
    auto()
      .width(250)
      .height(250)
      .gravity(autoGravity())
  )
  .addVariable(set("w", 250))
  .overlay(
    source(
      image("docs/kitchen-apartment").transformation(
        new Transformation().resize(
          auto().width(250).height(250).gravity(autoGravity())
        )
      )
    ).position(new Position().offsetX(expression("$w + 30")))
  )
  .addVariable(set("h", 250))
  .overlay(
    source(
      image("docs/study-apartment").transformation(
        new Transformation().resize(
          auto().width(250).height(250).gravity(autoGravity())
        )
      )
    ).position(
      new Position()
        .gravity(compass("east"))
        .offsetY(expression("$h + 30"))
    )
  )
  .overlay(
    source(
      image("docs/lounge-apartment").transformation(
        new Transformation().resize(
          auto().width(250).height(250).gravity(autoGravity())
        )
      )
    ).position(new Position().gravity(compass("south_west")))
  )
  .backgroundColor("burlywood")
  .resize(limitPad().width(590).height(590));
```

In this example:

* Each image uses `c_auto,g_auto` to crop to a 250 × 250 pixel square, focusing on the most interesting area.
* The `x` and `y` offsets include 30 extra pixels to space out the images (for example, `fl_layer_apply,x_$w_add_30`).
* The background color uses `burlywood`.
* The `lpad` crop mode pads the whole collage to form a uniform border.

> **READING**:
>
> * [Layer syntax](layers): Learn the layer URL syntax and overlay types for images.

> * [Layer placement](image_layer_placement): Position layers using gravity, offsets, and overflow behavior.

> * [Transforming layers](image_layer_transformations): Apply transformations, multiple overlays, and relative sizing to layers.