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:
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:
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:
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:
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:
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:
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:
$.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:
<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>
Angular:
<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:
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:
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:
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:
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:
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:
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:
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:
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:
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:
$.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:
<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>
Angular:
<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:
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:
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:
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:
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:
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:
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:
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:
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:
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:
$.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:
<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>
Angular:
<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:
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:
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:
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

Building a Live Feed of FIFA World Cup Moments

Widely acclaimed as the world’s biggest sporting event, the World Cup has established itself as the most captivating tournament to look forward to across the globe. Dating back to 1930, when the first World Cup was hosted in Uruguay, it has always engendered numerous moments of excitement, not only for the participating teams but also for the countries they ably represented. Little could anyone have anticipated that a game of 22 able-bodied men running to take possession of a leather ball could become so famous.

Read more
Auto AI Content Recognition Tagging in Cloudinary DAM

Automating the categorization of your images and videos can help democratize access to your organization's creative assets. Many teams throughout your organization have likely spent a lot of time and effort generating high-quality content, but it'd be all for naught if the content just ends up in some anonymous folder on somebody's hard drive or is randomly dropped into your cloud storage with no functional organizational strategy.

Read more
Capitol 360 Incubating New Waves of MusicTech

Last month, we had the pleasure of supporting Capitol Music Group’s first ever hackathon, the first in a series of hackathons as part of its newly launched Capitol360 Innovation Center, established to bridge the gaps between music and tech and make music better for everyone. We are proud to be a founding technology partner and were honored to play a part in Capitol’s first-ever 24-hour hack. And because so many of us are avid and longtime music fans we’re also personally thrilled to have the opportunity to work with one of the most influential leaders in music to foster these new and meaningful connections.

Read more
Reimaging DAM--The Next-Gen DAM for Marketing & Dev

There are great digital asset management (DAM) products out there for uploading, storing, managing, organizing, and sharing digital assets. With Cloudinary's new end-to-end DAM solution, you can also upload and manage your assets efficiently, but the journey doesn't end there. It continues on to the development and delivery stages, so that your assets can be seamlessly manipulated, optimized, and delivered to create an engaging user experience that will in turn, increase conversion and loyalty.

Read more
Integrating Cloudinary with Forestry’s Media Library

At Forestry, we believe that there is a bright future for static HTML sites built with tools like Jekyll and Hugo. These tools can create sites that run well, and are easy to host and maintain, because they don’t require any server-side code.

Read more