Cloudinary - Cookbook recipes of Facebook

← View popular recipes

Find recipes by tags:

GIF
PDF

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

Scale + position

Scale + position

Transformed

Transformed

URL Ruby PHP Python Node.js Java jQuery .Net All

URL:

http://res.cloudinary.com/demo/image/upload/l_facebook:zuck,w_300/site_bg_bright.jpg

Ruby:

cl_image_tag("site_bg_bright.jpg", :overlay=>"facebook:zuck", :width=>300)

PHP:

cl_image_tag("site_bg_bright.jpg", array("overlay"=>"facebook:zuck", "width"=>300))

Python:

CloudinaryImage("site_bg_bright.jpg").image(overlay="facebook:zuck", width=300)

Node.js:

cloudinary.image("site_bg_bright.jpg", {overlay: "facebook:zuck", width: 300})

Java:

cloudinary.url().transformation(new Transformation().overlay("facebook:zuck").width(300)).imageTag("site_bg_bright.jpg")

jQuery:

$.cloudinary.image("site_bg_bright.jpg", {overlay: "facebook:zuck", width: 300})

.Net:

cloudinary.Api.UrlImgUp.Transform(new Transformation().Overlay("facebook:zuck").Width(300)).BuildImageTag("site_bg_bright.jpg")

by Itay Taragano Jun 15, 2014

Tags:

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

Face detection

With initials

URL Ruby PHP Python Node.js Java jQuery .Net All

URL:

http://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

Ruby:

cl_image_tag("Beckham.jpg", :type=>"facebook", :transformation=>[
  {:width=>100, :height=>100, :gravity=>"face", :effect=>"blur:200", :radius=>"max", :crop=>"thumb"},
  {:overlay=>"text:Arial_50_bold:DB", :color=>"white"}
  ])

PHP:

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"=>"text:Arial_50_bold:DB", "color"=>"white")
  )))

Python:

CloudinaryImage("Beckham.jpg").image(type="facebook", transformation=[
  {"width": 100, "height": 100, "gravity": "face", "effect": "blur:200", "radius": "max", "crop": "thumb"},
  {"overlay": "text:Arial_50_bold:DB", "color": "white"}
  ])

Node.js:

cloudinary.image("Beckham.jpg", {type: "facebook", transformation: [
  {width: 100, height: 100, gravity: "face", effect: "blur:200", radius: "max", crop: "thumb"},
  {overlay: "text:Arial_50_bold:DB", color: "white"}
  ]})

Java:

cloudinary.url().transformation(new Transformation()
  .width(100).height(100).gravity("face").effect("blur:200").radius("max").crop("thumb").chain()
  .overlay("text:Arial_50_bold:DB").color("white")).type("facebook").imageTag("Beckham.jpg")

jQuery:

$.cloudinary.image("Beckham.jpg", {type: "facebook", transformation: [
  {width: 100, height: 100, gravity: "face", effect: "blur:200", radius: "max", crop: "thumb"},
  {overlay: "text:Arial_50_bold:DB", color: "white"}
  ]})

.Net:

cloudinary.Api.UrlImgUp.Transform(new Transformation()
  .Width(100).Height(100).Gravity("face").Effect("blur:200").Radius("max").Crop("thumb").Chain()
  .Overlay("text:Arial_50_bold:DB").Color("white")).Type("facebook").BuildImageTag("Beckham.jpg")

by Itay Taragano Jun 11, 2014

Tags: