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 v1:
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")
  )))
PHP v2:
Copy to clipboard
(new ImageTag('_MG_8655_svs9ab_ghxhhf_lrafi0.jpg'))
  ->resize(Resize::fill()->width(500)
    ->aspectRatio(AspectRatio::ar1X1())
    ->gravity(Gravity::focusOn(FocusOn::faces())))
  ->roundCorners(RoundCorners::max())
  ->effect(Effect::grayscale())
  ->delivery(Delivery::format(Format::auto()))
  ->delivery(Delivery::quality(Quality::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 v1:
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)
  )))
PHP v2:
Copy to clipboard
(new ImageTag('fluent/thadlrc9tfo7a5valtpg.jpg'))
  ->resize(Resize::fill()->width(400)->aspectRatio('2:3')->gravity(Gravity::focusOn(FocusOn::face())))
  ->overlay(
      Overlay::source(Source::image('fluent/thadlrc9tfo7a5valtpg')
        ->transformation((new ImageTransformation())
          ->adjust(Adjust::replaceColor(Color::ORANGE)
            ->fromColor(Color::PURPLE)->tolerance(55))
          ->resize(Resize::fill()->width(400)->aspectRatio('2:3')->gravity(Gravity::focusOn(FocusOn::face())))))
      ->position((new Position())
        ->gravity(Gravity::compass(Compass::west()))
        ->offsetX(400)))
    ->overlay(
        Overlay::source(Source::image('fluent/thadlrc9tfo7a5valtpg')
          ->transformation((new ImageTransformation())
            ->adjust(Adjust::replaceColor(Color::BLUE)
              ->fromColor(Color::PURPLE)->tolerance(55))
            ->resize(Resize::fill()->width(400)->aspectRatio('2:3')->gravity(Gravity::focusOn(FocusOn::face())))))
        ->position((new Position())
          ->gravity(Gravity::compass(Compass::west()))
          ->offsetX(800)))
          ->overlay(
              Overlay::source(Source::image('fluent/thadlrc9tfo7a5valtpg')
                ->transformation((new ImageTransformation())
                  ->adjust(Adjust::replaceColor(Color::GREEN)
                    ->fromColor(Color::PURPLE)->tolerance(55))
                  ->resize(Resize::fill()->width(400)->aspectRatio('2:3')->gravity(Gravity::focusOn(FocusOn::face())))))
              ->position((new Position())
                ->gravity(Gravity::compass(Compass::west()))
                ->offsetX(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 v1:
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")
  )))
PHP v2:
Copy to clipboard
(new ImageTag('fluent-gif-1.gif'))
  ->resize(Resize::fill()->width(300)
    ->aspectRatio(AspectRatio::ar1X1())
    ->gravity(Gravity::focusOn(FocusOn::face())))
  ->overlay(
      Overlay::source(
          Source::text('Cloudinary Rocks!', (new TextStyle('rubik', 25))
            ->fontWeight(FontWeight::bold())
            ->stroke())
          ->textColor(Color::BLUE)
          ->transformation((new ImageTransformation())
            ->border(Border::solid(2, Color::PINK))))
        ->position((new Position())
          ->gravity(Gravity::compass(Compass::southEast()))))
          ->transcode(Transcode::toAnimated()->sampling(500))
          ->deliveryType('multi');
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")).Action("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

Why the Future of E-commerce Is Live

In a previous post, I discussed how “going live” is gaining popularity across industries and verticals. What began as a way for gamers to jam together has evolved into a medium for broader entertainment and business purposes. To continue the conversation, this post unpacks the current trends of shoppable live streams to shine a light on how brands are leveraging “lives” to connect with shoppers in new ways.

Read more
An Overview of Live-Streaming Video Trends

“Let’s go live.” For decades, that’s what newscasters say as they cut to real-time footage of a colleague reporting in the field. The live-video feed adds visual interest and perspective to a story beyond what can be communicated by someone sitting behind the news desk. In the same way, live-streaming video nowadays adds context to other consumer environments. From gaming and events to shopping and social media, “going live” enhances everyday experiences, and it’s something anyone can do with relative ease.

Read more
Readying Live Streams for Video on Demand

When planning a live broadcast or stream, companies often overlook the redistribution phase, but live-stream videos are useful well beyond their initial streaming. Why? Because not everyone watches the first run. For a wider audience, it makes sense to repost live content on your website under an “events” tab, on YouTube, and other social sites for video on demand (VOD). However, preparing footage for reposting can be a lot of work.

Read more
Optimize Visual Media for a Fast and Captivating Digital Experience

Did you know that humans process imagery 60,000 times faster than text? In fact, 90% of the information our brains process is visual, which makes it seem a no-brainer—pun intended—that brands are connecting with consumers through visual content online. However, adding media assets like images and videos to websites comes with a tradeoff: the more media, the heavier the site, which results in a noticeable slowdown in page loads and a reduction in content quality.

Read more