Making a grid of headshots

Nicholas Stephan

January 26, 2018 00:25

I'm using Cloudinary for image storage and manipulation. In one place I'm creating a grid (2x2) of headshots. This:

cloudinary.url(images[0], {transformation: [
  {width:90, height:90, crop:'fill'},
  {overlay:images[1], width:90, height:90, x:90, crop:"fill"},
  {overlay:images[2], width:90, height:90, y:90, x:-45, crop:"fill"},
  {overlay:images[3], width:90, height:90, y:45, x:45, crop:"fill"},
  {width:180, height:180, crop:"crop"},
]});

seems to work.

In the rest of the app I use Cloudinary's face recognition (`gravity:"face"`) to crop the headshots, and would like to do the same for each of the quadrants of the grid. But the docs define the `gravity` param as:

> Decides which part of the image to keep while the 'crop', 'pad', 'thumb' and 'fill' crop modes are used. **For overlays, this decides where to place the overlay**.

What do they mean "for overlays, this decides where to place the overlay"? How do I use gravity to control the crop of an overlay, then position four of them in a grid?

Thanks.

0

• 

  Daniel Mendoza

  January 31, 2018 00:49

  @Nicholas Stephan

  I apologize for the late response.

  To answer your questions:

  1. What do they mean "for overlays, this decides where to place the overlay"?

  As an example, https://res.cloudinary.com/demo/h_200,l_couple,g_north_west/sample.jpg, the overlay can be positioned in the north-west corner of the base image "sample".

  2. How do I use gravity to control the crop of an overlay, then position four of them in a grid?

  We can set the `gravity` parameter as `face` to first focus on the face (`/l_lady,g_face/` in URLs) and we chain it with another transformation to position the image in the desired position by using `gravity` parameter as `north_west` and `flags` parameter as `layer_apply` (`/g_north_west,fl_layer_apply/` in URLs). More information on gravity options can be found here: https://cloudinary.com/documentation/image_transformations#control_gravity. The `flags` parameter set to `layer_apply` applies the transformation to the overlay/underlay before it. Here is an example:

  https://res.cloudinary.com/demo/h_200,w_200,l_couple,g_faces,c_fill/g_north_west,fl_layer_apply/sample.jpg  

  We can now repeat that same process and generate the necessary 2x2 grid of headshots:

  http://res.cloudinary.com/demo/image/upload/w_400,h_400,c_fill/l_couple,w_200,h_200,c_thumb,g_faces/g_north_west,fl_layer_apply/l_woman,w_200,h_200,c_fill,g_face/g_north_east,fl_layer_apply/l_lady,w_200,h_200,c_fill,g_face/g_south_west,fl_layer_apply/l_butterfly,w_200,h_200,c_fill,g_face/g_south_east,fl_layer_apply/sample.jpg

  0

Post is closed for comments.