Collages are epic. They grab attention and say a lot. But its not always easy to create one.

Before you create a collage, it's important to have a rough idea of how the final result should look. But don't worry if you don't have an idea yet. This article will provide you a step by step guide to create a collage. In the end, you will be ready to customize it as per your need.

Sounds good? Let's jump right into it.

Steps to create a collage

We will use the following example - A collection of women's clothing.

This collage is created using the following URL:,h-1245:oi-women-dress-1.jpg,ox-0,oy-0,ow-600,oh-600,oib-15_FFFFFF:oi-women-dress-2.jpg,ox-615,oy-0,ow-600,oh-600,oib-15_FFFFFF:oi-women-dress-3.jpg,ox-0,oy-615,ow-600,oh-600,oib-15_FFFFFF:oi-women-dress-4.jpg,ox-615,oy-615,ow-600,oh-600,oib-15_FFFFFF:ot-Women%27s%20Clothing,otbg-00000080,otp-20,ots-60,otc-FFFFFF:b-2_000000

The URL may look scary, but don't worry. I will break it down for you.

Basically, we will use overlays in to create a photo collage.

Let's understand the different parameters and the whole process so that you can create something on your own.

Notice that:

  • This collage is made up of 4 images.
  • All individual images have a white border of 15px (that is what creating a grid)
  • There is a text "Women's Clothing" in the center.
  • The whole image has a 2px black border.

These individual images are accessible separately through URL-endpoint. For this example, we have uploaded them in the Media library, but it is up to you where you store them – Media library or your storage. Both work the same way.

Now we want to join these individual images and create a big photo. For that, we will first need a white canvas.

Create a white canvas

To create a canvas of the desired dimension, you can upload this white image in your media library and use it as a base image.

Download the white canvas image.

For our example, the dimension of the white canvas will be 1245×1245. Each individual image is 600×600, separated with a 15px white border.

So its 15(left border)+600(top-left image)+15(middle border is collapsed)+600(top-right image)+15(right border) = 1245. Same goes for height.

The white canvas URL will be,h-1245

You can use width(w) and height(h) parameters to create any dimension you want. Now that we have canvas let's add these individual images on it.

Add individual images

Let's stitch the top-left image on the above canvas at x=0,y=0 using image overlay and chained transformations.

The URL becomes:,h-1245:oi-women-dress-1.jpg,ox-0,oy-0,ow-600,oh-600,oib-15_FFFFFF

We have also added a white border of 15px using the oib parameter i.e. oib-15_FFFFFF

A single image added on a big white canvas

Let's stitch the remaining three images using chained transformation. Position can be controlled using ox and oy parameters:

  • Top right image at x=615,y=0.
  • Bottom left image at x=0,y=615
  • Bottom right image at x=615,y-615

Now we have the following URL:,h-1245:oi-women-dress-1.jpg,ox-0,oy-0,ow-600,oh-600,oib-15_FFFFFF:oi-women-dress-2.jpg,ox-615,oy-0,ow-600,oh-600,oib-15_FFFFFF:oi-women-dress-3.jpg,ox-0,oy-615,ow-600,oh-600,oib-15_FFFFFF:oi-women-dress-4.jpg,ox-615,oy-615,ow-600,oh-600,oib-15_FFFFFF

Collage created using 4 individual images

Add a text overlay

Let's add a text "Women's Clothing" on above image using text overlays in

Text can be added using ot parameter i.e. ot-Women%27s%20Clothing (its encoded). After that we also need to add a black transparent background which can be controlled using the otbg parameter i.e. otbg-00000080.

The URL becomes:,h-1245:oi-women-dress-1.jpg,ox-0,oy-0,ow-600,oh-600,oib-15_FFFFFF:oi-women-dress-2.jpg,ox-615,oy-0,ow-600,oh-600,oib-15_FFFFFF:oi-women-dress-3.jpg,ox-0,oy-615,ow-600,oh-600,oib-15_FFFFFF:oi-women-dress-4.jpg,ox-615,oy-615,ow-600,oh-600,oib-15_FFFFFF:ot-Women%27s%20Clothing,otbg-00000080,otp-20,ots-60,otc-FFFFFF:f-jpg

Collage created using 4 individual images and a text overlay

Add a black border

To add a border we will use b parameter. Let's add a 2px black border using b-2_000000.

The URL becomes:,h-1245:oi-women-dress-1.jpg,ox-0,oy-0,ow-600,oh-600,oib-15_FFFFFF:oi-women-dress-2.jpg,ox-615,oy-0,ow-600,oh-600,oib-15_FFFFFF:oi-women-dress-3.jpg,ox-0,oy-615,ow-600,oh-600,oib-15_FFFFFF:oi-women-dress-4.jpg,ox-615,oy-615,ow-600,oh-600,oib-15_FFFFFF:ot-Women%27s%20Clothing,otbg-00000080,otp-20,ots-60,otc-FFFFFF:b-2_000000

Women's clothing collage with text overlay


It becomes effortless to create engaging visuals when you have the ability to create stunning images dynamically, as shown above. The overall idea is:

  1. First select the individual images. These images can be returned from the backend API as well. And you can create a dynamic photo collage to showcase a product collection, or event cover.
  2. Decide the final layout and create a canvas accordingly using the white image.
  3. Add individual images using overlays in
  4. That's it

Let us know about your use-case in the comments section.

A few other examples,h-610:oi-women-dress-2.jpg,ox-0,oy-0,ow-600,oh-600,oib-5_FFFFFF,oit-99:oi-women-dress-1.jpg,ox-500,oy-150,ow-200,oh-300,oib-5_FFFFFF/white-canvas.png,h-1000:oi-women-dress-1.jpg,ox-0,oy-0,ow-666,oh-500,oicm-pad_resize,oifo-left,oibg-0F0F0F:oi-women-dress-4.jpg,ox-0,oy-500,ow-666,oh-500,oicm-pad_resize,oifo-right,oibg-0F0F0F:b-5_0F0F0F

Where to go from here?

  • Learn more about overlays from documentation.
  • Try creating a collage and share it in the comments section for others.
  • If you face any problem, reach out to us at We will be happy to help!