Cloudinary: how to auto-crop around objects

14 Nov 2021 🔖 music jamstack web development
💬 EN

I get the newsletter of a chat room buddy who’s a new senior development experience engineer at Cloudinary, and I realized I’d never shared my hack about how I ensure Robert Bell’s guitar is always visible as I work on a new, responsive Jamstack website for him.

One thing that’s really tough about people with guitars is that the instrument isn’t played anywhere close to their face. Trumpeters have it way easier to look “cool” in pictures cropped to any form of art direction.

https://res.cloudinary.com/brimg/image/upload/c_crop,g_faces,h_480,w_600/r_15/q_auto/f_auto/Solo/Robert-hero

https://res.cloudinary.com/brimg/image/upload/c_crop,g_faces,h_500,w_840/q_auto/f_auto/Solo/Robert-hero

https://res.cloudinary.com/brimg/image/upload/c_crop,g_faces,h_100,w_100/r_15/q_auto/f_auto/Solo/Robert-hero

https://res.cloudinary.com/brimg/image/upload/c_crop,g_face,h_100,w_100/r_15/q_auto/f_auto/Solo/Robert-hero

From the Cloudinary dashboard, I click the three vertical dots in the upper-right corner of the picture I’d like to edit.

To the right, above the image, I click the “Edit crop coordinates” icon, which looks like a square with its edges extended on two corners and a diagonal line running through it.

I take advantage of Cloudinary’s multi-face auto-cropping and simply lie to it about where the “faces” are.