Automatically fetch social networks' profile pictures by setting the type
parameter to the required network (e.g., facebook
), apply any further transformations and add the user's initials as a text overlay.
Lots of sites nowadays allow their users to log in with their social networks account. Cloudinary can automatically fetch the latest profile picture of the user, based on either the user name or the user ID.
Let's say we want to fetch the Facebook profile picture of David Beckham. We can use the Facebook's username ('Beckham') to get the profile picture.
You can ask Cloudinary to crop the image based on the automatically detected face of the image by setting the gravity
parameter to face
(g_face
in URLs):
Setting the radius
parameter to max
will generate a circle:
Now we'll make the image blurry so we can see the text overlay more clearly:
Finally, we'll add the text overlay dynamically by setting the required font's parameters and the user's initials:
Here are the supported parameters for the various networks:
facebook
- Profile ID or Profile name in Facebooktwitter_name
- Profile name in Twittertwitter
- Profile ID in Twitterinstagram_name
- Profile name in Instagraminstagram
- Profile ID in Instagramgplus
- Profile ID in Google Plus
Have a look at the following for more information:
Documentation - Facebook profile pictures
Documentation - Twitter profile pictures
Blog post - Display Instagram and Google+ profile pictures in your website and mobile app