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

Get More from Your Media with New Magento Extension

Having an eCommerce platform that both provides a seamless and satisfactory shopping experience, while also serving as a powerful back-office system is crucial to business success today.

As a leading eCommerce platform, Magento offers numerous essential features. Additionally, you can leverage its extensions, such as those for dedicated payments and advanced media management, for other purposes. Cloudinary, long a popular Magento extension, just released a new version with the following powerful features:

Read more
Converting Videos to GIFs in Kotlin-Based Android Apps

Among the image formats available today, Graphics Interchange Format (GIF) works for both static and animated images. A popular use of GIF images—commonly called GIFs—is to repeatedly loop motions, which you cannot in real life. Many people have turned themselves into online celebrities through effective application of GIFs.

Read more
Simple Steps to Make Your Site Accessible With Cloudinary

Web accessibility (a11y) is about gaining an insight into—

It’s a blurry line between accessibility and usability (or user experience) and one might argue that they are actually the same thing. Nonetheless, if your audience can't use your app with ease and confidence, then it’s not accessible enough and the user experience is not good enough.

Read more