Original
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.
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") )))
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"} ])
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");
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();
$.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"} ]})
<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>
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")
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");
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)