Create image collages

Overview

Image collages are composed of several different images, combined together in a specific layout.

You can programmatically create image collages by combining assets that you've already uploaded to your Cloudinary storage. You can specify spacing and colors, and you can choose the composition of the overall collage.

This collage is composed of four images in one row, with black spacing between each:

Create collages using overlays

Another way to create collages with Cloudinary is to use overlays.

By specifying the positions of the images to be adjacent to one another, rather than overlaying the images on top of each other, you can create collages on the fly.

Here's an example of four images of an apartment combined as a collage using overlays:

• The base image is the one in the top left (docs/dining-apartment).
  
• The kitchen image is applied to the right of it using the width of the initial image 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 image to the right of the base image.
    
• The study image is positioned below the kitchen image, by using east gravity and the height of the base image 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 image below the kitchen image.
    
• The lounge image is positioned using south_west gravity to fill the bottom left corner.
  

You can also set specific dimensions for each of the images, and use different x and y offsets with a background color to space out the images.

For example, in the following collage:

• Each of the images are cropped to a 250 x 250 pixel square, using c_auto,g_auto to focus on the most interesting part of each image
• 30 pixels are added to the x and y offsets to space out the images (fl_layer_apply,x_$w_add_30)
• The background color is set to burlywood
• The whole collage is padded using the limit padding mode to form a border around it.