In order to add an overlay of a social network profile images (e.g., from Facebook, Twitter, Instagram), you should set the name of the network before the profile name, for example:
Facebook profile name (facebook):
http://res.cloudinary.com/demo/image/upload/w_200/l_facebook:zuck,w_50/sample.jpg
Facebook user ID (facebook):
http://res.cloudinary.com/demo/image/upload/w_200/l_facebook:65646572251,w_50/sample.jpg
For more information, please see the Social Media Profile Pictures documentation
Comments
9 comments
How would you go about using r_max with image overlays when fetching a jpg?
In my tests, applying r_max leaves a white background instead of transparent. I tried applying f_png to the facebook overlay, and the resulting image, but it did not make the overlay background transparent. Any ideas?
Hi Graeme,
Indeed by default a JPG format image is delivered which doesn't support transparency. However you can add
.pngto convert it to PNG which does support it.For example:
http://res.cloudinary.com/demo/image/upload/w_200/l_instagram_name:angelinajolieofficial.png,w_50,r_max/sample.jpg
I am trying to capture face from facebook provide and add it as overlay on the sample image. However, the following is not working for me. Pls guide. http://res.cloudinary.com/demo/image/upload/l_facebook:angelinajolieofficial.jpg,w_200,h_200,c_thumb,g_face/sample.jpg
Hi Hardik,
Crrently the
gravityparameter is supported for the main image and not for overlays. It's on our road map to support gravity for overlays as well.In the meantime, a possible workaround can be using the main image as the cropped facebook image while adding the other image as an underlay.
For example:
https://res.cloudinary.com/demo/image/facebook/w_100,h_100,c_thumb,g_face/u_sample/angelinajolieofficial.jpg
UPDATE
We added a new flag in order to apply complex transformations to the overlay image rather than the base image. This can be done by adding a chained transformation and setting the
flagsparameter tolayer_apply(fl_layer_applyin URLs).Here's an example:
http://res.cloudinary.com/demo/image/upload/w_300/l_facebook:angelinajolieofficial.jpg,w_100,h_100,c_thumb,g_face/fl_layer_apply/sample.jpg
All this doesn't work anymore.
I am trying to derive a profile picture for my Instagram account but it is not working.
Based on a recent update of the Instagram API. We experiencing issues with Instagram integrations. We are trying to find a workaround but no ETA yet.
Have you found any workaround for this?
Unfortunately, there is no ETA yet. We will update here when we will have any insights.
Please sign in to leave a comment.