Rounded profile picture with initials
Rounded profile picture with initials
Social apps
Presentation
Cropping
Intermediate

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.

Original

https://res.cloudinary.com/demo/image/facebook/Beckham.jpg

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): Face detection

https://res.cloudinary.com/demo/image/facebook/w_100,h_100,c_thumb,g_face/Beckham.jpg

Setting the radius parameter to max will generate a circle: Face detection

https://res.cloudinary.com/demo/image/facebook/w_100,h_100,c_thumb,g_face,r_max/Beckham.jpg

Now we'll make the image blurry so we can see the text overlay more clearly: Blur

https://res.cloudinary.com/demo/image/facebook/w_100,h_100,c_thumb,g_face,e_blur:200,r_max/Beckham.jpg

Finally, we'll add the text overlay dynamically by setting the required font's parameters and the user's initials: With initials

https://res.cloudinary.com/demo/image/facebook/w_100,h_100,c_thumb,g_face,e_blur:200,r_max/l_text:Arial_50_bold:DB,co_white/Beckham.jpg

Here are the supported parameters for the various networks:

  • facebook - Profile ID or Profile name in Facebook
  • twitter_name- Profile name in Twitter
  • twitter - Profile ID in Twitter
  • instagram_name - Profile name in Instagram
  • instagram - Profile ID in Instagram
  • gplus - 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