How can I create a collage out of several uploaded images?

A collage can be easily generated by using the overlay transformation.
In this article, we'll show you how to create a collage by directly using URL transformation parameters.

Consider the following 4 images that were uploaded in advance:
http://res.cloudinary.com/demo/image/upload/face_left.jpg
http://res.cloudinary.com/demo/image/upload/face_top.jpg
http://res.cloudinary.com/demo/image/upload/woman1.jpg
http://res.cloudinary.com/demo/image/upload/butterfly.jpg

The next URL will generate a collage, based on the first image (face_left) overlaid with the other three. All images are cropped to the same sizes (with "face detection" gravity) and differently located within the frame:

http://res.cloudinary.com/demo/image/upload/c_thumb,g_faces,h_160,w_200/c_thumb,g_faces,h_160,l_butterfly,w_200/fl_layer_apply,g_north_west,x_210/c_thumb,g_faces,h_160,l_woman1,w_200/fl_layer_apply,g_north_west,y_170/c_thumb,g_faces,h_160,l_front_face,w_200/fl_layer_apply,g_north_west,x_210,y_170/face_left

Below are the steps of creating the above transformation URL. Each step is appended to the previous one, to create the final URL - 

1. c_thumb,g_faces,h_160,w_200
   Scaling down the base image ("face_left") to a width of 200 pixels and a height of 160 pixels, using a combination of the "thumbnail" cropping mode (c_thumb) together with the "faces" gravity in order to get the image centered at the faces detected in the image: 
   
   Current URL - https://res.cloudinary.com/demo/image/upload/c_thumb,g_faces,h_160,w_200/face_left
2. .../c_thumb,g_faces,h_160,l_butterfly,w_200
/fl_layer_apply,g_north_west,x_210
   Adding an overlay of the "butterfly" image (l_butterfly), scaled down to 200x160 pixels the same way as described in step 1 (c_thumb,g_faces,h_160,w_200), and placing the overlay with an offset of 210 pixels to the right of the top left corner (g_north_west,x_210). Additional information regarding thelayer_apply flag can be found at the end of this article.
   
   Notice the 10 pixels wide white space generated between the images - This is achieved by thex_210 offset, which is set to 10 pixels more than the base image width.
   Current URL -
   https://res.cloudinary.com/demo/image/upload/c_thumb,g_faces,h_160,w_200/c_thumb,g_faces,h_160,l_butterfly,w_200/fl_layer_apply,g_north_west,x_210/face_left
3. .../c_thumb,g_faces,h_160,l_woman1,w_200
/fl_layer_apply,g_north_west,y_170
   Essentially the same as step 2! Adding the "woman1" image scaled-down to 200x160 and positioned 170 pixels below the top left corner (g_north_west,x_170):
   
   Current URL -
   https://res.cloudinary.com/demo/image/upload/c_thumb,g_faces,h_160,w_200/c_thumb,g_faces,h_160,l_butterfly,w_200/fl_layer_apply,g_north_west,x_210/c_thumb,g_faces,h_160,l_woman1,w_200/fl_layer_apply,g_north_west,y_170/face_left
4. .../c_thumb,g_faces,h_160,l_front_face,w_200
/fl_layer_apply,g_north_west,x_210,y_170
   Essentially the same as step 2 as well! Adding the "front_face" image scaled-down and positioned 170 pixels below, and 210 pixels to the right of the top left corner (g_north_west,x_210,y_170):
   
   Final URL -
   https://res.cloudinary.com/demo/image/upload/c_thumb,g_faces,h_160,w_200/c_thumb,g_faces,h_160,l_butterfly,w_200/fl_layer_apply,g_north_west,x_210/c_thumb,g_faces,h_160,l_woman1,w_200/fl_layer_apply,g_north_west,y_170/c_thumb,g_faces,h_160,l_front_face,w_200/fl_layer_apply,g_north_west,x_210,y_170/face_left

Notice the use of fl_layer_apply which encapsulates the layers and defines where the layers definitions end. Transformation parameters that reside within the layer_apply component, define the relationship between the overlayed image and the base image (e.g - positioning of the layer). Transformation parameters the reside between the layer declaration (l_<image>) and the layer_apply component (not including), are applied to the layer image itself. Additional detail regarding the layer_apply flag can be found here.

More information on how to manipulate overlaid images can be read in the following blog post:
http://cloudinary.com/blog/transform_your_image_overlays_with_on_the_fly_manipulation