Rounded profile picture with initials

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.

Ruby:
Copy to clipboard
cl_image_tag("Beckham.jpg", :type=>"facebook")
PHP:
Copy to clipboard
cl_image_tag("Beckham.jpg", array("type"=>"facebook"))
Python:
Copy to clipboard
CloudinaryImage("Beckham.jpg").image(type="facebook")
Node.js:
Copy to clipboard
cloudinary.image("Beckham.jpg", {type: "facebook"})
Java:
Copy to clipboard
cloudinary.url().type("facebook").imageTag("Beckham.jpg");
JS:
Copy to clipboard
cloudinary.imageTag('Beckham.jpg', {type: "facebook"}).toHtml();
jQuery:
Copy to clipboard
$.cloudinary.image("Beckham.jpg", {type: "facebook"})
React:
Copy to clipboard
<Image publicId="Beckham.jpg" type="facebook">

</Image>
Vue.js:
Copy to clipboard
<cld-image publicId="Beckham.jpg" type="facebook">

</cld-image>
Angular:
Copy to clipboard
<cl-image public-id="Beckham.jpg" type="facebook">

</cl-image>
.Net:
Copy to clipboard
cloudinary.Api.UrlImgUp.Type("facebook").BuildImageTag("Beckham.jpg")
Android:
Copy to clipboard
MediaManager.get().url().type("facebook").generate("Beckham.jpg");
iOS:
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().setType( "facebook").generate("Beckham.jpg")!, cloudinary: cloudinary)
Original

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

Ruby:
Copy to clipboard
cl_image_tag("Beckham.jpg", :width=>100, :height=>100, :gravity=>"face", :crop=>"thumb", :type=>"facebook")
PHP:
Copy to clipboard
cl_image_tag("Beckham.jpg", array("width"=>100, "height"=>100, "gravity"=>"face", "crop"=>"thumb", "type"=>"facebook"))
Python:
Copy to clipboard
CloudinaryImage("Beckham.jpg").image(width=100, height=100, gravity="face", crop="thumb", type="facebook")
Node.js:
Copy to clipboard
cloudinary.image("Beckham.jpg", {width: 100, height: 100, gravity: "face", crop: "thumb", type: "facebook"})
Java:
Copy to clipboard
cloudinary.url().transformation(new Transformation().width(100).height(100).gravity("face").crop("thumb")).type("facebook").imageTag("Beckham.jpg");
JS:
Copy to clipboard
cloudinary.imageTag('Beckham.jpg', {width: 100, height: 100, gravity: "face", crop: "thumb", type: "facebook"}).toHtml();
jQuery:
Copy to clipboard
$.cloudinary.image("Beckham.jpg", {width: 100, height: 100, gravity: "face", crop: "thumb", type: "facebook"})
React:
Copy to clipboard
<Image publicId="Beckham.jpg" type="facebook">
  <Transformation width="100" height="100" gravity="face" crop="thumb" />
</Image>
Vue.js:
Copy to clipboard
<cld-image publicId="Beckham.jpg" type="facebook">
  <cld-transformation width="100" height="100" gravity="face" crop="thumb" />
</cld-image>
Angular:
Copy to clipboard
<cl-image public-id="Beckham.jpg" type="facebook">
  <cl-transformation width="100" height="100" gravity="face" crop="thumb">
  </cl-transformation>
</cl-image>
.Net:
Copy to clipboard
cloudinary.Api.UrlImgUp.Transform(new Transformation().Width(100).Height(100).Gravity("face").Crop("thumb")).Type("facebook").BuildImageTag("Beckham.jpg")
Android:
Copy to clipboard
MediaManager.get().url().transformation(new Transformation().width(100).height(100).gravity("face").crop("thumb")).type("facebook").generate("Beckham.jpg");
iOS:
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().setType( "facebook").setTransformation(CLDTransformation().setWidth(100).setHeight(100).setGravity("face").setCrop("thumb")).generate("Beckham.jpg")!, cloudinary: cloudinary)
Face detection

Setting the radius parameter to max will generate a circle:

Ruby:
Copy to clipboard
cl_image_tag("Beckham.jpg", :width=>100, :height=>100, :gravity=>"face", :radius=>"max", :crop=>"thumb", :type=>"facebook")
PHP:
Copy to clipboard
cl_image_tag("Beckham.jpg", array("width"=>100, "height"=>100, "gravity"=>"face", "radius"=>"max", "crop"=>"thumb", "type"=>"facebook"))
Python:
Copy to clipboard
CloudinaryImage("Beckham.jpg").image(width=100, height=100, gravity="face", radius="max", crop="thumb", type="facebook")
Node.js:
Copy to clipboard
cloudinary.image("Beckham.jpg", {width: 100, height: 100, gravity: "face", radius: "max", crop: "thumb", type: "facebook"})
Java:
Copy to clipboard
cloudinary.url().transformation(new Transformation().width(100).height(100).gravity("face").radius("max").crop("thumb")).type("facebook").imageTag("Beckham.jpg");
JS:
Copy to clipboard
cloudinary.imageTag('Beckham.jpg', {width: 100, height: 100, gravity: "face", radius: "max", crop: "thumb", type: "facebook"}).toHtml();
jQuery:
Copy to clipboard
$.cloudinary.image("Beckham.jpg", {width: 100, height: 100, gravity: "face", radius: "max", crop: "thumb", type: "facebook"})
React:
Copy to clipboard
<Image publicId="Beckham.jpg" type="facebook">
  <Transformation width="100" height="100" gravity="face" radius="max" crop="thumb" />
</Image>
Vue.js:
Copy to clipboard
<cld-image publicId="Beckham.jpg" type="facebook">
  <cld-transformation width="100" height="100" gravity="face" radius="max" crop="thumb" />
</cld-image>
Angular:
Copy to clipboard
<cl-image public-id="Beckham.jpg" type="facebook">
  <cl-transformation width="100" height="100" gravity="face" radius="max" crop="thumb">
  </cl-transformation>
</cl-image>
.Net:
Copy to clipboard
cloudinary.Api.UrlImgUp.Transform(new Transformation().Width(100).Height(100).Gravity("face").Radius("max").Crop("thumb")).Type("facebook").BuildImageTag("Beckham.jpg")
Android:
Copy to clipboard
MediaManager.get().url().transformation(new Transformation().width(100).height(100).gravity("face").radius("max").crop("thumb")).type("facebook").generate("Beckham.jpg");
iOS:
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().setType( "facebook").setTransformation(CLDTransformation().setWidth(100).setHeight(100).setGravity("face").setRadius("max").setCrop("thumb")).generate("Beckham.jpg")!, cloudinary: cloudinary)
Face detection

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

Ruby:
Copy to clipboard
cl_image_tag("Beckham.jpg", :width=>100, :height=>100, :gravity=>"face", :effect=>"blur:200", :radius=>"max", :crop=>"thumb", :type=>"facebook")
PHP:
Copy to clipboard
cl_image_tag("Beckham.jpg", array("width"=>100, "height"=>100, "gravity"=>"face", "effect"=>"blur:200", "radius"=>"max", "crop"=>"thumb", "type"=>"facebook"))
Python:
Copy to clipboard
CloudinaryImage("Beckham.jpg").image(width=100, height=100, gravity="face", effect="blur:200", radius="max", crop="thumb", type="facebook")
Node.js:
Copy to clipboard
cloudinary.image("Beckham.jpg", {width: 100, height: 100, gravity: "face", effect: "blur:200", radius: "max", crop: "thumb", type: "facebook"})
Java:
Copy to clipboard
cloudinary.url().transformation(new Transformation().width(100).height(100).gravity("face").effect("blur:200").radius("max").crop("thumb")).type("facebook").imageTag("Beckham.jpg");
JS:
Copy to clipboard
cloudinary.imageTag('Beckham.jpg', {width: 100, height: 100, gravity: "face", effect: "blur:200", radius: "max", crop: "thumb", type: "facebook"}).toHtml();
jQuery:
Copy to clipboard
$.cloudinary.image("Beckham.jpg", {width: 100, height: 100, gravity: "face", effect: "blur:200", radius: "max", crop: "thumb", type: "facebook"})
React:
Copy to clipboard
<Image publicId="Beckham.jpg" type="facebook">
  <Transformation width="100" height="100" gravity="face" effect="blur:200" radius="max" crop="thumb" />
</Image>
Vue.js:
Copy to clipboard
<cld-image publicId="Beckham.jpg" type="facebook">
  <cld-transformation width="100" height="100" gravity="face" effect="blur:200" radius="max" crop="thumb" />
</cld-image>
Angular:
Copy to clipboard
<cl-image public-id="Beckham.jpg" type="facebook">
  <cl-transformation width="100" height="100" gravity="face" effect="blur:200" radius="max" crop="thumb">
  </cl-transformation>
</cl-image>
.Net:
Copy to clipboard
cloudinary.Api.UrlImgUp.Transform(new Transformation().Width(100).Height(100).Gravity("face").Effect("blur:200").Radius("max").Crop("thumb")).Type("facebook").BuildImageTag("Beckham.jpg")
Android:
Copy to clipboard
MediaManager.get().url().transformation(new Transformation().width(100).height(100).gravity("face").effect("blur:200").radius("max").crop("thumb")).type("facebook").generate("Beckham.jpg");
iOS:
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().setType( "facebook").setTransformation(CLDTransformation().setWidth(100).setHeight(100).setGravity("face").setEffect("blur:200").setRadius("max").setCrop("thumb")).generate("Beckham.jpg")!, cloudinary: cloudinary)
Blur

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

Ruby:
Copy to clipboard
cl_image_tag("Beckham.jpg", :type=>"facebook", :transformation=>[
  {:width=>100, :height=>100, :gravity=>"face", :effect=>"blur:200", :radius=>"max", :crop=>"thumb"},
  {:overlay=>{:font_family=>"Arial", :font_size=>50, :font_weight=>"bold", :text=>"DB"}, :color=>"white"}
  ])
PHP:
Copy to clipboard
cl_image_tag("Beckham.jpg", array("type"=>"facebook", "transformation"=>array(
  array("width"=>100, "height"=>100, "gravity"=>"face", "effect"=>"blur:200", "radius"=>"max", "crop"=>"thumb"),
  array("overlay"=>array("font_family"=>"Arial", "font_size"=>50, "font_weight"=>"bold", "text"=>"DB"), "color"=>"white")
  )))
Python:
Copy to clipboard
CloudinaryImage("Beckham.jpg").image(type="facebook", transformation=[
  {'width': 100, 'height': 100, 'gravity': "face", 'effect': "blur:200", 'radius': "max", 'crop': "thumb"},
  {'overlay': {'font_family': "Arial", 'font_size': 50, 'font_weight': "bold", 'text': "DB"}, 'color': "white"}
  ])
Node.js:
Copy to clipboard
cloudinary.image("Beckham.jpg", {type: "facebook", transformation: [
  {width: 100, height: 100, gravity: "face", effect: "blur:200", radius: "max", crop: "thumb"},
  {overlay: {font_family: "Arial", font_size: 50, font_weight: "bold", text: "DB"}, color: "white"}
  ]})
Java:
Copy to clipboard
cloudinary.url().transformation(new Transformation()
  .width(100).height(100).gravity("face").effect("blur:200").radius("max").crop("thumb").chain()
  .overlay(new TextLayer().fontFamily("Arial").fontSize(50).fontWeight("bold").text("DB")).color("white")).type("facebook").imageTag("Beckham.jpg");
JS:
Copy to clipboard
cloudinary.imageTag('Beckham.jpg', {type: "facebook", transformation: [
  {width: 100, height: 100, gravity: "face", effect: "blur:200", radius: "max", crop: "thumb"},
  {overlay: new cloudinary.TextLayer().fontFamily("Arial").fontSize(50).fontWeight("bold").text("DB"), color: "white"}
  ]}).toHtml();
jQuery:
Copy to clipboard
$.cloudinary.image("Beckham.jpg", {type: "facebook", transformation: [
  {width: 100, height: 100, gravity: "face", effect: "blur:200", radius: "max", crop: "thumb"},
  {overlay: new cloudinary.TextLayer().fontFamily("Arial").fontSize(50).fontWeight("bold").text("DB"), color: "white"}
  ]})
React:
Copy to clipboard
<Image publicId="Beckham.jpg" type="facebook">
  <Transformation width="100" height="100" gravity="face" effect="blur:200" radius="max" crop="thumb" />
  <Transformation overlay={{fontFamily: "Arial", fontSize: 50, fontWeight: "bold", text: "DB"}} color="white" />
</Image>
Vue.js:
Copy to clipboard
<cld-image publicId="Beckham.jpg" type="facebook">
  <cld-transformation width="100" height="100" gravity="face" effect="blur:200" radius="max" crop="thumb" />
  <cld-transformation overlay={{fontFamily: "Arial", fontSize: 50, fontWeight: "bold", text: "DB"}} color="white" />
</cld-image>
Angular:
Copy to clipboard
<cl-image public-id="Beckham.jpg" type="facebook">
  <cl-transformation width="100" height="100" gravity="face" effect="blur:200" radius="max" crop="thumb">
  </cl-transformation>
  <cl-transformation overlay="text:Arial_50_bold:DB" color="white">
  </cl-transformation>
</cl-image>
.Net:
Copy to clipboard
cloudinary.Api.UrlImgUp.Transform(new Transformation()
  .Width(100).Height(100).Gravity("face").Effect("blur:200").Radius("max").Crop("thumb").Chain()
  .Overlay(new TextLayer().FontFamily("Arial").FontSize(50).FontWeight("bold").Text("DB")).Color("white")).Type("facebook").BuildImageTag("Beckham.jpg")
Android:
Copy to clipboard
MediaManager.get().url().transformation(new Transformation()
  .width(100).height(100).gravity("face").effect("blur:200").radius("max").crop("thumb").chain()
  .overlay(new TextLayer().fontFamily("Arial").fontSize(50).fontWeight("bold").text("DB")).color("white")).type("facebook").generate("Beckham.jpg");
iOS:
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().setType( "facebook").setTransformation(CLDTransformation()
  .setWidth(100).setHeight(100).setGravity("face").setEffect("blur:200").setRadius("max").setCrop("thumb").chain()
  .setOverlay("text:Arial_50_bold:DB").setColor("white")).generate("Beckham.jpg")!, cloudinary: cloudinary)
With initials

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

Please see the following documentation for more information: Documentation - Social media profile pictures

by Itay Taragano