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:
Below are the steps of creating the above transformation URL. Each step is appended to the previous one, to create the final URL -
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.../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_applyflag 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_210offset, 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.../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.../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
Comments
2 comments
Here is my recipe for Chocolate Cake: Take Chocolate and eat the chocolate cake. TADA.
That what it feels like to read this article, can someone explain step by step how this URL was built???
Hey Helmut, thank you for your feedback!
We've now updated this article, please let us know if you have any specific questions regarding the collage creating process.
Please sign in to leave a comment.