Cloudinary Blog

Headshot transformations from Fluent + Velocity 2018

Headshot transformations from Fluent + Velocity 2018

On June 13-14, O'Reilly held its annual Fluent + Velocity conference in San Jose and it was great! Cloudinary set up a pretty incredible booth and brought in a professional photographer to take headshots of the attendees who stopped by. Once a photo was snapped, the raw camera file was immediately uploaded to our media library and transformed into something that can be posted right away on LinkedIn.

The setup was effective and easy: We connected the camera to a laptop in the booth with a wired connection via USB (this could just as easily do that over WiFi or Bluetooth as well), which dumped every new photo that was taken into a folder. Then we had a simple node script monitor for new files, and, when they are found, upload them directly to Cloudinary. That took only seconds! By the time people had handed in five to eight professional, high-resolution shots from the photographer, we had the shots all in Cloudinary and ready for the manipulations below.

Cloudinary Headshot DIY

Transformation Station

If you attended Fluent + Velocity and stopped by for a professional headshot at our photo booth (or you've got one from a different source), below are examples of some of the transformations we demonstrated to inspire your own exciting creations.

First, a professional, clean, simple, and effective transformation for use at LinkedIn and similar sites:

  1. Crop to a 1:1 aspect ratio with the face centered, round corners all the way for a circle image.
  2. Apply a grayscale effect.

Apply at scale to 1,000 headshots of your employees and you'll have created a great looking About Us page in no time.

Ruby:
Copy to clipboard
cl_image_tag("_MG_8655_svs9ab_ghxhhf_lrafi0.jpg", :transformation=>[
  {:aspect_ratio=>"1:1", :width=>500, :gravity=>"faces", :effect=>"grayscale", :radius=>"max", :crop=>"fill"},
  {:quality=>"auto", :fetch_format=>:auto}
  ])
PHP:
Copy to clipboard
cl_image_tag("_MG_8655_svs9ab_ghxhhf_lrafi0.jpg", array("transformation"=>array(
  array("aspect_ratio"=>"1:1", "width"=>500, "gravity"=>"faces", "effect"=>"grayscale", "radius"=>"max", "crop"=>"fill"),
  array("quality"=>"auto", "fetch_format"=>"auto")
  )))
Python:
Copy to clipboard
CloudinaryImage("_MG_8655_svs9ab_ghxhhf_lrafi0.jpg").image(transformation=[
  {'aspect_ratio': "1:1", 'width': 500, 'gravity': "faces", 'effect': "grayscale", 'radius': "max", 'crop': "fill"},
  {'quality': "auto", 'fetch_format': "auto"}
  ])
Node.js:
Copy to clipboard
cloudinary.image("_MG_8655_svs9ab_ghxhhf_lrafi0.jpg", {transformation: [
  {aspect_ratio: "1:1", width: 500, gravity: "faces", effect: "grayscale", radius: "max", crop: "fill"},
  {quality: "auto", fetch_format: "auto"}
  ]})
Java:
Copy to clipboard
cloudinary.url().transformation(new Transformation()
  .aspectRatio("1:1").width(500).gravity("faces").effect("grayscale").radius("max").crop("fill").chain()
  .quality("auto").fetchFormat("auto")).imageTag("_MG_8655_svs9ab_ghxhhf_lrafi0.jpg");
JS:
Copy to clipboard
cloudinary.imageTag('_MG_8655_svs9ab_ghxhhf_lrafi0.jpg', {transformation: [
  {aspectRatio: "1:1", width: 500, gravity: "faces", effect: "grayscale", radius: "max", crop: "fill"},
  {quality: "auto", fetchFormat: "auto"}
  ]}).toHtml();
jQuery:
Copy to clipboard
$.cloudinary.image("_MG_8655_svs9ab_ghxhhf_lrafi0.jpg", {transformation: [
  {aspect_ratio: "1:1", width: 500, gravity: "faces", effect: "grayscale", radius: "max", crop: "fill"},
  {quality: "auto", fetch_format: "auto"}
  ]})
React:
Copy to clipboard
<Image publicId="_MG_8655_svs9ab_ghxhhf_lrafi0.jpg" >
  <Transformation aspectRatio="1:1" width="500" gravity="faces" effect="grayscale" radius="max" crop="fill" />
  <Transformation quality="auto" fetchFormat="auto" />
</Image>
Vue.js:
Copy to clipboard
<cld-image publicId="_MG_8655_svs9ab_ghxhhf_lrafi0.jpg" >
  <cld-transformation aspectRatio="1:1" width="500" gravity="faces" effect="grayscale" radius="max" crop="fill" />
  <cld-transformation quality="auto" fetchFormat="auto" />
</cld-image>
Angular:
Copy to clipboard
<cl-image public-id="_MG_8655_svs9ab_ghxhhf_lrafi0.jpg" >
  <cl-transformation aspect-ratio="1:1" width="500" gravity="faces" effect="grayscale" radius="max" crop="fill">
  </cl-transformation>
  <cl-transformation quality="auto" fetch-format="auto">
  </cl-transformation>
</cl-image>
.Net:
Copy to clipboard
cloudinary.Api.UrlImgUp.Transform(new Transformation()
  .AspectRatio("1:1").Width(500).Gravity("faces").Effect("grayscale").Radius("max").Crop("fill").Chain()
  .Quality("auto").FetchFormat("auto")).BuildImageTag("_MG_8655_svs9ab_ghxhhf_lrafi0.jpg")
Android:
Copy to clipboard
MediaManager.get().url().transformation(new Transformation()
  .aspectRatio("1:1").width(500).gravity("faces").effect("grayscale").radius("max").crop("fill").chain()
  .quality("auto").fetchFormat("auto")).generate("_MG_8655_svs9ab_ghxhhf_lrafi0.jpg");
iOS:
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation()
  .setAspectRatio("1:1").setWidth(500).setGravity("faces").setEffect("grayscale").setRadius("max").setCrop("fill").chain()
  .setQuality("auto").setFetchFormat("auto")).generate("_MG_8655_svs9ab_ghxhhf_lrafi0.jpg")!, cloudinary: cloudinary)
Transformation 1

Next, a transformation that shows personality and creativity. We swapped the purple hair color for a variety of other colors, with the e_replace_color effect dialed in to create the best result possible for a few minutes at the demo station.

Ruby:
Copy to clipboard
cl_image_tag("fluent/thadlrc9tfo7a5valtpg.jpg", :transformation=>[
  {:aspect_ratio=>"2:3", :width=>400, :gravity=>"face", :crop=>"fill"},
  {:overlay=>"fluent:thadlrc9tfo7a5valtpg", :aspect_ratio=>"2:3", :width=>400, :gravity=>"face", :effect=>"replace_color:orange:55:purple", :crop=>"fill"},
  {:flags=>"layer_apply", :gravity=>"west", :x=>400},
  {:overlay=>"fluent:thadlrc9tfo7a5valtpg", :aspect_ratio=>"2:3", :width=>400, :gravity=>"face", :effect=>"replace_color:blue:55:purple", :crop=>"fill"},
  {:flags=>"layer_apply", :gravity=>"west", :x=>800},
  {:overlay=>"fluent:thadlrc9tfo7a5valtpg", :aspect_ratio=>"2:3", :width=>400, :gravity=>"face", :effect=>"replace_color:green:55:purple", :crop=>"fill"},
  {:flags=>"layer_apply", :gravity=>"west", :x=>1200}
  ])
PHP:
Copy to clipboard
cl_image_tag("fluent/thadlrc9tfo7a5valtpg.jpg", array("transformation"=>array(
  array("aspect_ratio"=>"2:3", "width"=>400, "gravity"=>"face", "crop"=>"fill"),
  array("overlay"=>"fluent:thadlrc9tfo7a5valtpg", "aspect_ratio"=>"2:3", "width"=>400, "gravity"=>"face", "effect"=>"replace_color:orange:55:purple", "crop"=>"fill"),
  array("flags"=>"layer_apply", "gravity"=>"west", "x"=>400),
  array("overlay"=>"fluent:thadlrc9tfo7a5valtpg", "aspect_ratio"=>"2:3", "width"=>400, "gravity"=>"face", "effect"=>"replace_color:blue:55:purple", "crop"=>"fill"),
  array("flags"=>"layer_apply", "gravity"=>"west", "x"=>800),
  array("overlay"=>"fluent:thadlrc9tfo7a5valtpg", "aspect_ratio"=>"2:3", "width"=>400, "gravity"=>"face", "effect"=>"replace_color:green:55:purple", "crop"=>"fill"),
  array("flags"=>"layer_apply", "gravity"=>"west", "x"=>1200)
  )))
Python:
Copy to clipboard
CloudinaryImage("fluent/thadlrc9tfo7a5valtpg.jpg").image(transformation=[
  {'aspect_ratio': "2:3", 'width': 400, 'gravity': "face", 'crop': "fill"},
  {'overlay': "fluent:thadlrc9tfo7a5valtpg", 'aspect_ratio': "2:3", 'width': 400, 'gravity': "face", 'effect': "replace_color:orange:55:purple", 'crop': "fill"},
  {'flags': "layer_apply", 'gravity': "west", 'x': 400},
  {'overlay': "fluent:thadlrc9tfo7a5valtpg", 'aspect_ratio': "2:3", 'width': 400, 'gravity': "face", 'effect': "replace_color:blue:55:purple", 'crop': "fill"},
  {'flags': "layer_apply", 'gravity': "west", 'x': 800},
  {'overlay': "fluent:thadlrc9tfo7a5valtpg", 'aspect_ratio': "2:3", 'width': 400, 'gravity': "face", 'effect': "replace_color:green:55:purple", 'crop': "fill"},
  {'flags': "layer_apply", 'gravity': "west", 'x': 1200}
  ])
Node.js:
Copy to clipboard
cloudinary.image("fluent/thadlrc9tfo7a5valtpg.jpg", {transformation: [
  {aspect_ratio: "2:3", width: 400, gravity: "face", crop: "fill"},
  {overlay: "fluent:thadlrc9tfo7a5valtpg", aspect_ratio: "2:3", width: 400, gravity: "face", effect: "replace_color:orange:55:purple", crop: "fill"},
  {flags: "layer_apply", gravity: "west", x: 400},
  {overlay: "fluent:thadlrc9tfo7a5valtpg", aspect_ratio: "2:3", width: 400, gravity: "face", effect: "replace_color:blue:55:purple", crop: "fill"},
  {flags: "layer_apply", gravity: "west", x: 800},
  {overlay: "fluent:thadlrc9tfo7a5valtpg", aspect_ratio: "2:3", width: 400, gravity: "face", effect: "replace_color:green:55:purple", crop: "fill"},
  {flags: "layer_apply", gravity: "west", x: 1200}
  ]})
Java:
Copy to clipboard
cloudinary.url().transformation(new Transformation()
  .aspectRatio("2:3").width(400).gravity("face").crop("fill").chain()
  .overlay(new Layer().publicId("fluent:thadlrc9tfo7a5valtpg")).aspectRatio("2:3").width(400).gravity("face").effect("replace_color:orange:55:purple").crop("fill").chain()
  .flags("layer_apply").gravity("west").x(400).chain()
  .overlay(new Layer().publicId("fluent:thadlrc9tfo7a5valtpg")).aspectRatio("2:3").width(400).gravity("face").effect("replace_color:blue:55:purple").crop("fill").chain()
  .flags("layer_apply").gravity("west").x(800).chain()
  .overlay(new Layer().publicId("fluent:thadlrc9tfo7a5valtpg")).aspectRatio("2:3").width(400).gravity("face").effect("replace_color:green:55:purple").crop("fill").chain()
  .flags("layer_apply").gravity("west").x(1200)).imageTag("fluent/thadlrc9tfo7a5valtpg.jpg");
JS:
Copy to clipboard
cloudinary.imageTag('fluent/thadlrc9tfo7a5valtpg.jpg', {transformation: [
  {aspectRatio: "2:3", width: 400, gravity: "face", crop: "fill"},
  {overlay: new cloudinary.Layer().publicId("fluent:thadlrc9tfo7a5valtpg"), aspectRatio: "2:3", width: 400, gravity: "face", effect: "replace_color:orange:55:purple", crop: "fill"},
  {flags: "layer_apply", gravity: "west", x: 400},
  {overlay: new cloudinary.Layer().publicId("fluent:thadlrc9tfo7a5valtpg"), aspectRatio: "2:3", width: 400, gravity: "face", effect: "replace_color:blue:55:purple", crop: "fill"},
  {flags: "layer_apply", gravity: "west", x: 800},
  {overlay: new cloudinary.Layer().publicId("fluent:thadlrc9tfo7a5valtpg"), aspectRatio: "2:3", width: 400, gravity: "face", effect: "replace_color:green:55:purple", crop: "fill"},
  {flags: "layer_apply", gravity: "west", x: 1200}
  ]}).toHtml();
jQuery:
Copy to clipboard
$.cloudinary.image("fluent/thadlrc9tfo7a5valtpg.jpg", {transformation: [
  {aspect_ratio: "2:3", width: 400, gravity: "face", crop: "fill"},
  {overlay: new cloudinary.Layer().publicId("fluent:thadlrc9tfo7a5valtpg"), aspect_ratio: "2:3", width: 400, gravity: "face", effect: "replace_color:orange:55:purple", crop: "fill"},
  {flags: "layer_apply", gravity: "west", x: 400},
  {overlay: new cloudinary.Layer().publicId("fluent:thadlrc9tfo7a5valtpg"), aspect_ratio: "2:3", width: 400, gravity: "face", effect: "replace_color:blue:55:purple", crop: "fill"},
  {flags: "layer_apply", gravity: "west", x: 800},
  {overlay: new cloudinary.Layer().publicId("fluent:thadlrc9tfo7a5valtpg"), aspect_ratio: "2:3", width: 400, gravity: "face", effect: "replace_color:green:55:purple", crop: "fill"},
  {flags: "layer_apply", gravity: "west", x: 1200}
  ]})
React:
Copy to clipboard
<Image publicId="fluent/thadlrc9tfo7a5valtpg.jpg" >
  <Transformation aspectRatio="2:3" width="400" gravity="face" crop="fill" />
  <Transformation overlay="fluent:thadlrc9tfo7a5valtpg" aspectRatio="2:3" width="400" gravity="face" effect="replace_color:orange:55:purple" crop="fill" />
  <Transformation flags="layer_apply" gravity="west" x="400" />
  <Transformation overlay="fluent:thadlrc9tfo7a5valtpg" aspectRatio="2:3" width="400" gravity="face" effect="replace_color:blue:55:purple" crop="fill" />
  <Transformation flags="layer_apply" gravity="west" x="800" />
  <Transformation overlay="fluent:thadlrc9tfo7a5valtpg" aspectRatio="2:3" width="400" gravity="face" effect="replace_color:green:55:purple" crop="fill" />
  <Transformation flags="layer_apply" gravity="west" x="1200" />
</Image>
Vue.js:
Copy to clipboard
<cld-image publicId="fluent/thadlrc9tfo7a5valtpg.jpg" >
  <cld-transformation aspectRatio="2:3" width="400" gravity="face" crop="fill" />
  <cld-transformation overlay="fluent:thadlrc9tfo7a5valtpg" aspectRatio="2:3" width="400" gravity="face" effect="replace_color:orange:55:purple" crop="fill" />
  <cld-transformation flags="layer_apply" gravity="west" x="400" />
  <cld-transformation overlay="fluent:thadlrc9tfo7a5valtpg" aspectRatio="2:3" width="400" gravity="face" effect="replace_color:blue:55:purple" crop="fill" />
  <cld-transformation flags="layer_apply" gravity="west" x="800" />
  <cld-transformation overlay="fluent:thadlrc9tfo7a5valtpg" aspectRatio="2:3" width="400" gravity="face" effect="replace_color:green:55:purple" crop="fill" />
  <cld-transformation flags="layer_apply" gravity="west" x="1200" />
</cld-image>
Angular:
Copy to clipboard
<cl-image public-id="fluent/thadlrc9tfo7a5valtpg.jpg" >
  <cl-transformation aspect-ratio="2:3" width="400" gravity="face" crop="fill">
  </cl-transformation>
  <cl-transformation overlay="fluent:thadlrc9tfo7a5valtpg" aspect-ratio="2:3" width="400" gravity="face" effect="replace_color:orange:55:purple" crop="fill">
  </cl-transformation>
  <cl-transformation flags="layer_apply" gravity="west" x="400">
  </cl-transformation>
  <cl-transformation overlay="fluent:thadlrc9tfo7a5valtpg" aspect-ratio="2:3" width="400" gravity="face" effect="replace_color:blue:55:purple" crop="fill">
  </cl-transformation>
  <cl-transformation flags="layer_apply" gravity="west" x="800">
  </cl-transformation>
  <cl-transformation overlay="fluent:thadlrc9tfo7a5valtpg" aspect-ratio="2:3" width="400" gravity="face" effect="replace_color:green:55:purple" crop="fill">
  </cl-transformation>
  <cl-transformation flags="layer_apply" gravity="west" x="1200">
  </cl-transformation>
</cl-image>
.Net:
Copy to clipboard
cloudinary.Api.UrlImgUp.Transform(new Transformation()
  .AspectRatio("2:3").Width(400).Gravity("face").Crop("fill").Chain()
  .Overlay(new Layer().PublicId("fluent:thadlrc9tfo7a5valtpg")).AspectRatio("2:3").Width(400).Gravity("face").Effect("replace_color:orange:55:purple").Crop("fill").Chain()
  .Flags("layer_apply").Gravity("west").X(400).Chain()
  .Overlay(new Layer().PublicId("fluent:thadlrc9tfo7a5valtpg")).AspectRatio("2:3").Width(400).Gravity("face").Effect("replace_color:blue:55:purple").Crop("fill").Chain()
  .Flags("layer_apply").Gravity("west").X(800).Chain()
  .Overlay(new Layer().PublicId("fluent:thadlrc9tfo7a5valtpg")).AspectRatio("2:3").Width(400).Gravity("face").Effect("replace_color:green:55:purple").Crop("fill").Chain()
  .Flags("layer_apply").Gravity("west").X(1200)).BuildImageTag("fluent/thadlrc9tfo7a5valtpg.jpg")
Android:
Copy to clipboard
MediaManager.get().url().transformation(new Transformation()
  .aspectRatio("2:3").width(400).gravity("face").crop("fill").chain()
  .overlay(new Layer().publicId("fluent:thadlrc9tfo7a5valtpg")).aspectRatio("2:3").width(400).gravity("face").effect("replace_color:orange:55:purple").crop("fill").chain()
  .flags("layer_apply").gravity("west").x(400).chain()
  .overlay(new Layer().publicId("fluent:thadlrc9tfo7a5valtpg")).aspectRatio("2:3").width(400).gravity("face").effect("replace_color:blue:55:purple").crop("fill").chain()
  .flags("layer_apply").gravity("west").x(800).chain()
  .overlay(new Layer().publicId("fluent:thadlrc9tfo7a5valtpg")).aspectRatio("2:3").width(400).gravity("face").effect("replace_color:green:55:purple").crop("fill").chain()
  .flags("layer_apply").gravity("west").x(1200)).generate("fluent/thadlrc9tfo7a5valtpg.jpg");
iOS:
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation()
  .setAspectRatio("2:3").setWidth(400).setGravity("face").setCrop("fill").chain()
  .setOverlay("fluent:thadlrc9tfo7a5valtpg").setAspectRatio("2:3").setWidth(400).setGravity("face").setEffect("replace_color:orange:55:purple").setCrop("fill").chain()
  .setFlags("layer_apply").setGravity("west").setX(400).chain()
  .setOverlay("fluent:thadlrc9tfo7a5valtpg").setAspectRatio("2:3").setWidth(400).setGravity("face").setEffect("replace_color:blue:55:purple").setCrop("fill").chain()
  .setFlags("layer_apply").setGravity("west").setX(800).chain()
  .setOverlay("fluent:thadlrc9tfo7a5valtpg").setAspectRatio("2:3").setWidth(400).setGravity("face").setEffect("replace_color:green:55:purple").setCrop("fill").chain()
  .setFlags("layer_apply").setGravity("west").setX(1200)).generate("fluent/thadlrc9tfo7a5valtpg.jpg")!, cloudinary: cloudinary)
Transformation 2

Finally, something fun and eye catching: Create on Cloudinary an animated GIF from a set of images by leveraging many of the cool capabilities showcased above to standardize everything and by adding a text overlay for social sharing.

To do all that, simply tag all the images you desire for the set, perform the standard transformations of a crop to a 1:1 aspect ratio, and add a text overlay in the bottom-right corner.

Ruby:
Copy to clipboard
cl_image_tag("fluent-gif-1.gif", :type=>"multi", :transformation=>[
  {:aspect_ratio=>"1:1", :width=>300, :gravity=>"face", :crop=>"fill"},
  {:overlay=>{:font_family=>"rubik", :font_size=>25, :font_weight=>"bold", :stroke=>"stroke", :text=>"Cloudinary%20Rocks%21"}, :gravity=>"south_east", :color=>"blue", :border=>"2px_solid_pink"},
  {:delay=>"500"}
  ])
PHP:
Copy to clipboard
cl_image_tag("fluent-gif-1.gif", array("type"=>"multi", "transformation"=>array(
  array("aspect_ratio"=>"1:1", "width"=>300, "gravity"=>"face", "crop"=>"fill"),
  array("overlay"=>array("font_family"=>"rubik", "font_size"=>25, "font_weight"=>"bold", "stroke"=>"stroke", "text"=>"Cloudinary%20Rocks%21"), "gravity"=>"south_east", "color"=>"blue", "border"=>"2px_solid_pink"),
  array("delay"=>"500")
  )))
Python:
Copy to clipboard
CloudinaryImage("fluent-gif-1.gif").image(type="multi", transformation=[
  {'aspect_ratio': "1:1", 'width': 300, 'gravity': "face", 'crop': "fill"},
  {'overlay': {'font_family': "rubik", 'font_size': 25, 'font_weight': "bold", 'stroke': "stroke", 'text': "Cloudinary%20Rocks%21"}, 'gravity': "south_east", 'color': "blue", 'border': "2px_solid_pink"},
  {'delay': "500"}
  ])
Node.js:
Copy to clipboard
cloudinary.image("fluent-gif-1.gif", {type: "multi", transformation: [
  {aspect_ratio: "1:1", width: 300, gravity: "face", crop: "fill"},
  {overlay: {font_family: "rubik", font_size: 25, font_weight: "bold", stroke: "stroke", text: "Cloudinary%20Rocks%21"}, gravity: "south_east", color: "blue", border: "2px_solid_pink"},
  {delay: "500"}
  ]})
Java:
Copy to clipboard
cloudinary.url().transformation(new Transformation()
  .aspectRatio("1:1").width(300).gravity("face").crop("fill").chain()
  .overlay(new TextLayer().fontFamily("rubik").fontSize(25).fontWeight("bold").stroke("stroke").text("Cloudinary%20Rocks%21")).gravity("south_east").color("blue").border("2px_solid_pink").chain()
  .delay("500")).type("multi").imageTag("fluent-gif-1.gif");
JS:
Copy to clipboard
cloudinary.imageTag('fluent-gif-1.gif', {type: "multi", transformation: [
  {aspectRatio: "1:1", width: 300, gravity: "face", crop: "fill"},
  {overlay: new cloudinary.TextLayer().fontFamily("rubik").fontSize(25).fontWeight("bold").stroke("stroke").text("Cloudinary%20Rocks%21"), gravity: "south_east", color: "blue", border: "2px_solid_pink"},
  {delay: "500"}
  ]}).toHtml();
jQuery:
Copy to clipboard
$.cloudinary.image("fluent-gif-1.gif", {type: "multi", transformation: [
  {aspect_ratio: "1:1", width: 300, gravity: "face", crop: "fill"},
  {overlay: new cloudinary.TextLayer().fontFamily("rubik").fontSize(25).fontWeight("bold").stroke("stroke").text("Cloudinary%20Rocks%21"), gravity: "south_east", color: "blue", border: "2px_solid_pink"},
  {delay: "500"}
  ]})
React:
Copy to clipboard
<Image publicId="fluent-gif-1.gif" type="multi">
  <Transformation aspectRatio="1:1" width="300" gravity="face" crop="fill" />
  <Transformation overlay={{fontFamily: "rubik", fontSize: 25, fontWeight: "bold", stroke: "stroke", text: "Cloudinary%20Rocks%21"}} gravity="south_east" color="blue" border="2px_solid_pink" />
  <Transformation delay="500" />
</Image>
Vue.js:
Copy to clipboard
<cld-image publicId="fluent-gif-1.gif" type="multi">
  <cld-transformation aspectRatio="1:1" width="300" gravity="face" crop="fill" />
  <cld-transformation overlay={{fontFamily: "rubik", fontSize: 25, fontWeight: "bold", stroke: "stroke", text: "Cloudinary%20Rocks%21"}} gravity="south_east" color="blue" border="2px_solid_pink" />
  <cld-transformation delay="500" />
</cld-image>
Angular:
Copy to clipboard
<cl-image public-id="fluent-gif-1.gif" type="multi">
  <cl-transformation aspect-ratio="1:1" width="300" gravity="face" crop="fill">
  </cl-transformation>
  <cl-transformation overlay="text:rubik_25_bold_stroke:Cloudinary%20Rocks%21" gravity="south_east" color="blue" border="2px_solid_pink">
  </cl-transformation>
  <cl-transformation delay="500">
  </cl-transformation>
</cl-image>
.Net:
Copy to clipboard
cloudinary.Api.UrlImgUp.Transform(new Transformation()
  .AspectRatio("1:1").Width(300).Gravity("face").Crop("fill").Chain()
  .Overlay(new TextLayer().FontFamily("rubik").FontSize(25).FontWeight("bold").Stroke("stroke").Text("Cloudinary%20Rocks%21")).Gravity("south_east").Color("blue").Border("2px_solid_pink").Chain()
  .Delay("500")).Type("multi").BuildImageTag("fluent-gif-1.gif")
Android:
Copy to clipboard
MediaManager.get().url().transformation(new Transformation()
  .aspectRatio("1:1").width(300).gravity("face").crop("fill").chain()
  .overlay(new TextLayer().fontFamily("rubik").fontSize(25).fontWeight("bold").stroke("stroke").text("Cloudinary%20Rocks%21")).gravity("south_east").color("blue").border("2px_solid_pink").chain()
  .delay("500")).type("multi").generate("fluent-gif-1.gif");
iOS:
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().setType( "multi").setTransformation(CLDTransformation()
  .setAspectRatio("1:1").setWidth(300).setGravity("face").setCrop("fill").chain()
  .setOverlay("text:rubik_25_bold_stroke:Cloudinary%20Rocks%21").setGravity("south_east").setColor("blue").setBorder("2px_solid_pink").chain()
  .setDelay("500")).generate("fluent-gif-1.gif")!, cloudinary: cloudinary)
Transformation 3

Got some other creations or fun ideas? Add them below in the comments! In the mean time, check our some of the fun transformations submitted by people who visited our booth!

“User1” “User2” “User3” “User4”

Recent Blog Posts

Laravel File Upload to a Local Server Or to the Cloud

Currently, Laravel is the most renowned PHP framework, boasting of a large developer community; several open-source packages, such as Cashier, Sanctum, Scout, and Telescope; and a host of paid platforms, e.g., Laravel Forge, Envoyer, and Vapor. Laravel Forge & Envoyer ably supports deployment and use of Laravel production-based apps.

Read more
TedsVintageArt.com Automates Generation of Captivating Product Images on Cloudinary

At TedsVintageArt.com, we digitally restore historic maps and sell their art prints on multiple platforms, such as Amazon, Etsy, eBay, and Houzz. As our operations ramped up years ago, it took an inordinately long time to generate custom images for our products. Plus, since we sell art, it behooves us to produce multiple high-quality images for each print, which was another time-consuming task.

Read more
lastminute.com Takes a Vacation From Media-Management Headaches With Cloudinary

As a 20-year online leader in travel and leisure retail, Europe-based public company lastminute.com along with its 1,200 employees are committed to enriching the lives of vacationers through comprehensive and enticing products and services. Beyond flight deals and tours, it's the images and videos, whether of that luxury villa in Greece, romantic Parisian street, or exotic stroll through the Marrakech markets, that attract audiences and boost bookings.

Read more