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.

Here's an original image:

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

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

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

</cl-image>
.Net:
Copy to clipboard
cloudinary.Api.UrlImgUp.BuildImageTag("site_bg_bright.jpg")
Android:
Copy to clipboard
MediaManager.get().url().generate("site_bg_bright.jpg");
iOS:
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().generate("site_bg_bright.jpg")!, cloudinary: cloudinary)
Original
Here's how to add a fetched Facebook profile picture:
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)
Overlay

You can apply any further transformations on the overlaid image, for example, cropping the image as a circle and applying a 'sepia' effect:

Ruby:
Copy to clipboard
cl_image_tag("site_bg_bright.jpg", :overlay=>"twitter_name:BrunoMars.png", :width=>300, :radius=>"max", :effect=>"sepia")
PHP:
Copy to clipboard
cl_image_tag("site_bg_bright.jpg", array("overlay"=>"twitter_name:BrunoMars.png", "width"=>300, "radius"=>"max", "effect"=>"sepia"))
Python:
Copy to clipboard
CloudinaryImage("site_bg_bright.jpg").image(overlay="twitter_name:BrunoMars.png", width=300, radius="max", effect="sepia")
Node.js:
Copy to clipboard
cloudinary.image("site_bg_bright.jpg", {overlay: "twitter_name:BrunoMars.png", width: 300, radius: "max", effect: "sepia"})
Java:
Copy to clipboard
cloudinary.url().transformation(new Transformation().overlay(new Layer().publicId("twitter_name:BrunoMars.png")).width(300).radius("max").effect("sepia")).imageTag("site_bg_bright.jpg");
JS:
Copy to clipboard
cloudinary.imageTag('site_bg_bright.jpg', {overlay: new cloudinary.Layer().publicId("twitter_name:BrunoMars.png"), width: 300, radius: "max", effect: "sepia"}).toHtml();
jQuery:
Copy to clipboard
$.cloudinary.image("site_bg_bright.jpg", {overlay: new cloudinary.Layer().publicId("twitter_name:BrunoMars.png"), width: 300, radius: "max", effect: "sepia"})
React:
Copy to clipboard
<Image publicId="site_bg_bright.jpg" >
  <Transformation overlay="twitter_name:BrunoMars.png" width="300" radius="max" effect="sepia" />
</Image>
Vue.js:
Copy to clipboard
<cld-image publicId="site_bg_bright.jpg" >
  <cld-transformation overlay="twitter_name:BrunoMars.png" width="300" radius="max" effect="sepia" />
</cld-image>
Angular:
Copy to clipboard
<cl-image public-id="site_bg_bright.jpg" >
  <cl-transformation overlay="twitter_name:BrunoMars.png" width="300" radius="max" effect="sepia">
  </cl-transformation>
</cl-image>
.Net:
Copy to clipboard
cloudinary.Api.UrlImgUp.Transform(new Transformation().Overlay(new Layer().PublicId("twitter_name:BrunoMars.png")).Width(300).Radius("max").Effect("sepia")).BuildImageTag("site_bg_bright.jpg")
Android:
Copy to clipboard
MediaManager.get().url().transformation(new Transformation().overlay(new Layer().publicId("twitter_name:BrunoMars.png")).width(300).radius("max").effect("sepia")).generate("site_bg_bright.jpg");
iOS:
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setOverlay("twitter_name:BrunoMars.png").setWidth(300).setRadius("max").setEffect("sepia")).generate("site_bg_bright.jpg")!, cloudinary: cloudinary)
Transformed

Overlays usually look better on brighter background images rather than on strong colored ones. You can use the opacity parameter (o in URLs) to brighten the base image as needed. Here's an example of brightening an image with the opacity parameter, scaling it down and overlaying Lance Armstrong's Twitter profile picture:

Ruby:
Copy to clipboard
cl_image_tag("pasta.jpg", :transformation=>[
  {:width=>300, :opacity=>30, :crop=>"scale"},
  {:overlay=>"twitter_name:lancearmstrong", :width=>100}
  ])
PHP:
Copy to clipboard
cl_image_tag("pasta.jpg", array("transformation"=>array(
  array("width"=>300, "opacity"=>30, "crop"=>"scale"),
  array("overlay"=>"twitter_name:lancearmstrong", "width"=>100)
  )))
Python:
Copy to clipboard
CloudinaryImage("pasta.jpg").image(transformation=[
  {'width': 300, 'opacity': 30, 'crop': "scale"},
  {'overlay': "twitter_name:lancearmstrong", 'width': 100}
  ])
Node.js:
Copy to clipboard
cloudinary.image("pasta.jpg", {transformation: [
  {width: 300, opacity: 30, crop: "scale"},
  {overlay: "twitter_name:lancearmstrong", width: 100}
  ]})
Java:
Copy to clipboard
cloudinary.url().transformation(new Transformation()
  .width(300).opacity(30).crop("scale").chain()
  .overlay(new Layer().publicId("twitter_name:lancearmstrong")).width(100)).imageTag("pasta.jpg");
JS:
Copy to clipboard
cloudinary.imageTag('pasta.jpg', {transformation: [
  {width: 300, opacity: 30, crop: "scale"},
  {overlay: new cloudinary.Layer().publicId("twitter_name:lancearmstrong"), width: 100}
  ]}).toHtml();
jQuery:
Copy to clipboard
$.cloudinary.image("pasta.jpg", {transformation: [
  {width: 300, opacity: 30, crop: "scale"},
  {overlay: new cloudinary.Layer().publicId("twitter_name:lancearmstrong"), width: 100}
  ]})
React:
Copy to clipboard
<Image publicId="pasta.jpg" >
  <Transformation width="300" opacity="30" crop="scale" />
  <Transformation overlay="twitter_name:lancearmstrong" width="100" />
</Image>
Vue.js:
Copy to clipboard
<cld-image publicId="pasta.jpg" >
  <cld-transformation width="300" opacity="30" crop="scale" />
  <cld-transformation overlay="twitter_name:lancearmstrong" width="100" />
</cld-image>
Angular:
Copy to clipboard
<cl-image public-id="pasta.jpg" >
  <cl-transformation width="300" opacity="30" crop="scale">
  </cl-transformation>
  <cl-transformation overlay="twitter_name:lancearmstrong" width="100">
  </cl-transformation>
</cl-image>
.Net:
Copy to clipboard
cloudinary.Api.UrlImgUp.Transform(new Transformation()
  .Width(300).Opacity(30).Crop("scale").Chain()
  .Overlay(new Layer().PublicId("twitter_name:lancearmstrong")).Width(100)).BuildImageTag("pasta.jpg")
Android:
Copy to clipboard
MediaManager.get().url().transformation(new Transformation()
  .width(300).opacity(30).crop("scale").chain()
  .overlay(new Layer().publicId("twitter_name:lancearmstrong")).width(100)).generate("pasta.jpg");
iOS:
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation()
  .setWidth(300).setOpacity(30).setCrop("scale").chain()
  .setOverlay("twitter_name:lancearmstrong").setWidth(100)).generate("pasta.jpg")!, cloudinary: cloudinary)
Strong colored image with opacity

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

Have a look at the following for more information:
Documentation - Social Media profile pictures

by Itay Taragano