Overlaying social profile pictures on top of images

Overlay profile picture from a social network on top of another image by setting the overlayparameter (l in URLs) to the corresponding network and user name. Cloudinary will automatically fetch the latest profile picture of social network sites.

Overlay

Overlay

Transformed

Transformed

Strong colored image with opacity

Strong colored image with opacity
Ruby:
Copy to clipboard
cl_image_tag("site_bg_bright.jpg", :overlay=>"facebook:zuck", :width=>300)
PHP:
Copy to clipboard
cl_image_tag("site_bg_bright.jpg", array("overlay"=>"facebook:zuck", "width"=>300))
Python:
Copy to clipboard
CloudinaryImage("site_bg_bright.jpg").image(overlay="facebook:zuck", width=300)
Node.js:
Copy to clipboard
cloudinary.image("site_bg_bright.jpg", {overlay: "facebook:zuck", width: 300})
Java:
Copy to clipboard
cloudinary.url().transformation(new Transformation().overlay(new Layer().publicId("facebook:zuck")).width(300)).imageTag("site_bg_bright.jpg");
JS:
Copy to clipboard
cloudinary.imageTag('site_bg_bright.jpg', {overlay: new cloudinary.Layer().publicId("facebook:zuck"), width: 300}).toHtml();
jQuery:
Copy to clipboard
$.cloudinary.image("site_bg_bright.jpg", {overlay: new cloudinary.Layer().publicId("facebook:zuck"), width: 300})
React:
Copy to clipboard
<Image publicId="site_bg_bright.jpg" >
  <Transformation overlay="facebook:zuck" width="300" />
</Image>
Vue.js:
Copy to clipboard
<cld-image publicId="site_bg_bright.jpg" >
  <cld-transformation overlay="facebook:zuck" width="300" />
</cld-image>
Angular:
Copy to clipboard
<cl-image public-id="site_bg_bright.jpg" >
  <cl-transformation overlay="facebook:zuck" width="300">
  </cl-transformation>
</cl-image>
.Net:
Copy to clipboard
cloudinary.Api.UrlImgUp.Transform(new Transformation().Overlay(new Layer().PublicId("facebook:zuck")).Width(300)).BuildImageTag("site_bg_bright.jpg")
Android:
Copy to clipboard
MediaManager.get().url().transformation(new Transformation().overlay(new Layer().publicId("facebook:zuck")).width(300)).generate("site_bg_bright.jpg");
iOS:
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setOverlay("facebook:zuck").setWidth(300)).generate("site_bg_bright.jpg")!, cloudinary: cloudinary)
by Itay Taragano

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.

Original

Original

Face detection

Face detection

With initials

With 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)
by Itay Taragano