Blurred Background for Videos

Apr 17, 2018

The blurred background effect for videos makes sure that any video, in any direction, will look great!

To use, apply b_blurred:[amount] together with c_pad, like so:

Ruby:
cl_video_tag("ang_dub_vertical", :height=>400, :width=>711, :background=>"blurred:1000", :crop=>"pad")
PHP:
cl_video_tag("ang_dub_vertical", array("height"=>400, "width"=>711, "background"=>"blurred:1000", "crop"=>"pad"))
Python:
CloudinaryVideo("ang_dub_vertical").video(height=400, width=711, background="blurred:1000", crop="pad")
Node.js:
cloudinary.video("ang_dub_vertical", {height: 400, width: 711, background: "blurred:1000", crop: "pad"})
Java:
cloudinary.url().transformation(new Transformation().height(400).width(711).background("blurred:1000").crop("pad")).videoTag("ang_dub_vertical");
JS:
cloudinary.videoTag('ang_dub_vertical', {height: 400, width: 711, background: "blurred:1000", crop: "pad"}).toHtml();
jQuery:
$.cloudinary.video("ang_dub_vertical", {height: 400, width: 711, background: "blurred:1000", crop: "pad"})
React:
<Video publicId="ang_dub_vertical" >
  <Transformation height="400" width="711" background="blurred:1000" crop="pad" />
</Video>
Angular:
<cl-video public-id="ang_dub_vertical" >
  <cl-transformation height="400" width="711" background="blurred:1000" crop="pad">
  </cl-transformation>
</cl-video>
.Net:
cloudinary.Api.UrlVideoUp.Transform(new Transformation().Height(400).Width(711).Background("blurred:1000").Crop("pad")).BuildVideoTag("ang_dub_vertical")
Android:
MediaManager.get().url().transformation(new Transformation().height(400).width(711).background("blurred:1000").crop("pad")).resourceType("video").generate("ang_dub_vertical.mp4");
iOS:
cloudinary.createUrl().setResourceType("video").setTransformation(CLDTransformation().setHeight(400).setWidth(711).setBackground("blurred:1000").setCrop("pad")).generate("ang_dub_vertical.mp4")

Boomerang Transformation Effect

Apr 09, 2018

Boomerang transformation effect for videos and GIFs!

You can apply it by adding e_boomerang to the transformation URL as follows:

Ruby:
cl_image_tag("puppy_leash_xptkoj.gif", :resource_type=>"video", :transformation=>[
  {:effect=>"boomerang"},
  {:effect=>"loop"}
  ])
PHP:
cl_image_tag("puppy_leash_xptkoj.gif", array("resource_type"=>"video", "transformation"=>array(
  array("effect"=>"boomerang"),
  array("effect"=>"loop")
  )))
Python:
CloudinaryVideo("puppy_leash_xptkoj.gif").image(transformation=[
  {"effect": "boomerang"},
  {"effect": "loop"}
  ])
Node.js:
cloudinary.image("puppy_leash_xptkoj.gif", {resource_type: "video", transformation: [
  {effect: "boomerang"},
  {effect: "loop"}
  ]})
Java:
cloudinary.url().transformation(new Transformation()
  .effect("boomerang").chain()
  .effect("loop")).resourceType("video").imageTag("puppy_leash_xptkoj.gif");
JS:
cloudinary.videoTag('puppy_leash_xptkoj.gif', {transformation: [
  {effect: "boomerang"},
  {effect: "loop"}
  ]}).toHtml();
jQuery:
$.cloudinary.image("puppy_leash_xptkoj.gif", {resource_type: "video", transformation: [
  {effect: "boomerang"},
  {effect: "loop"}
  ]})
React:
<Video publicId="puppy_leash_xptkoj.gif" resourceType="video">
  <Transformation effect="boomerang" />
  <Transformation effect="loop" />
</Video>
Angular:
<cl-video public-id="puppy_leash_xptkoj.gif" resource-type="video">
  <cl-transformation effect="boomerang">
  </cl-transformation>
  <cl-transformation effect="loop">
  </cl-transformation>
</cl-video>
.Net:
cloudinary.Api.UrlVideoUp.Transform(new Transformation()
  .Effect("boomerang").Chain()
  .Effect("loop")).BuildImageTag("puppy_leash_xptkoj.gif")
Android:
MediaManager.get().url().transformation(new Transformation()
  .effect("boomerang").chain()
  .effect("loop")).resourceType("video").generate("puppy_leash_xptkoj.gif");
iOS:
cloudinary.createUrl().setResourceType("video").setTransformation(CLDTransformation()
  .setEffect("boomerang").chain()
  .setEffect("loop")).generate("puppy_leash_xptkoj.gif")
Boomerang effect

Reports Viewer Role

Mar 27, 2018

For accounts with multi-users, we've added a viewer of "Reports" page role.

A user with this role will only have access to the Reports page, selected Dashboard elements, and his user info in Settings.

Multiple auto-tagging engines

Mar 19, 2018

You can now combine multiple tagging engines to automatically classify your digital assets, calling more than a single tagging engine in the same API call. This is available for both video and image tagging add-ons, calling only the relevant engines based on the resource type.

The categorization parameter will accept multiple comma-separated values, for example:

:categorization => “aws_rek_tagging,imagga_tagging”

You can read more about this here

Access Control

Mar 12, 2018

A new method for controlling access to resources - supports scheduling an asset to be public within a future date range, and extended support for token-based authentication also to existing URLs, defining the rules for when a specific resource can be accessed.

For example: A stock images website can easily provide temporary access to specific original images from moment of purchase and for a limited time period (e.g 24 hours).

The access_control attribute is a premium feature that requires CDN setup.

Copy image URL directly to clipboard

Mar 05, 2018

In the Media Library, when you hover over a card in the grid - you can now copy the image URL directly to your clipboard, and paste it wherever you like.

Copy to clipboard

JavaScript library version 2.5.0

Feb 28, 2018

Our JavaScript libraries have been updated to version 2.5.0.

Some new functionalities and features:

  • Support SEO urls
  • Selectively import lodash to avoid bundling the whole lodash

Google Auto-Tagging Add-on

Feb 20, 2018

Extend Cloudinary's powerful semantic data extraction and image tagging features with the Google auto tagging add-on, using Google Vision API label tagging.

Google Auto Tagging

When using the Google auto tagging add-on, your images are automatically tagged according to the categories detected in each image.

By setting the categorization parameter to google_tagging when calling Cloudinary's upload or update methods, Google is used to automatically classify the scenes of the uploaded or specified existing image.

The upload API response includes the automatic categorization identified by the Google auto tagging add-on, with a numerical confidence score value that represents the confidence level of the detected category (e.g. 1.0 means 100% confidence).

Read more about it here

Improved color mapping & new palette

Feb 14, 2018

New Cloudinary color palette available, consisting of 16 colors, making searching and arranging media by predominant colors more accurate. The response for resource info will now include the new Cloudinary palette, in addition to the existing Google palette.

Color Palette

Crop mode - Fill or Pad

Feb 05, 2018

Sometimes, cropping to a certain aspect ratio will have no choice but to crop interesting areas of the image. When a compromise is needed, the new g_auto crop mode that pads when needed, will use just enough padding to get a good crop. Syntax: c_fill_pad,g_auto

Fill or Pad not applied:

Ruby:
cl_image_tag("eagle_closeup.jpg", :width=>600, :height=>400, :crop=>"fill")
PHP:
cl_image_tag("eagle_closeup.jpg", array("width"=>600, "height"=>400, "crop"=>"fill"))
Python:
CloudinaryImage("eagle_closeup.jpg").image(width=600, height=400, crop="fill")
Node.js:
cloudinary.image("eagle_closeup.jpg", {width: 600, height: 400, crop: "fill"})
Java:
cloudinary.url().transformation(new Transformation().width(600).height(400).crop("fill")).imageTag("eagle_closeup.jpg");
JS:
cloudinary.imageTag('eagle_closeup.jpg', {width: 600, height: 400, crop: "fill"}).toHtml();
jQuery:
$.cloudinary.image("eagle_closeup.jpg", {width: 600, height: 400, crop: "fill"})
React:
<Image publicId="eagle_closeup.jpg" >
  <Transformation width="600" height="400" crop="fill" />
</Image>
Angular:
<cl-image public-id="eagle_closeup.jpg" >
  <cl-transformation width="600" height="400" crop="fill">
  </cl-transformation>
</cl-image>
.Net:
cloudinary.Api.UrlImgUp.Transform(new Transformation().Width(600).Height(400).Crop("fill")).BuildImageTag("eagle_closeup.jpg")
Android:
MediaManager.get().url().transformation(new Transformation().width(600).height(400).crop("fill")).generate("eagle_closeup.jpg");
iOS:
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setWidth(600).setHeight(400).setCrop("fill")).generate("eagle_closeup.jpg")!, cloudinary: cloudinary)
Fill or Pad not applied

Fill or Pad applied:

Ruby:
cl_image_tag("eagle_closeup.jpg", :width=>600, :height=>400, :gravity=>"auto", :background=>"auto", :crop=>"fill_pad")
PHP:
cl_image_tag("eagle_closeup.jpg", array("width"=>600, "height"=>400, "gravity"=>"auto", "background"=>"auto", "crop"=>"fill_pad"))
Python:
CloudinaryImage("eagle_closeup.jpg").image(width=600, height=400, gravity="auto", background="auto", crop="fill_pad")
Node.js:
cloudinary.image("eagle_closeup.jpg", {width: 600, height: 400, gravity: "auto", background: "auto", crop: "fill_pad"})
Java:
cloudinary.url().transformation(new Transformation().width(600).height(400).gravity("auto").background("auto").crop("fill_pad")).imageTag("eagle_closeup.jpg");
JS:
cloudinary.imageTag('eagle_closeup.jpg', {width: 600, height: 400, gravity: "auto", background: "auto", crop: "fill_pad"}).toHtml();
jQuery:
$.cloudinary.image("eagle_closeup.jpg", {width: 600, height: 400, gravity: "auto", background: "auto", crop: "fill_pad"})
React:
<Image publicId="eagle_closeup.jpg" >
  <Transformation width="600" height="400" gravity="auto" background="auto" crop="fill_pad" />
</Image>
Angular:
<cl-image public-id="eagle_closeup.jpg" >
  <cl-transformation width="600" height="400" gravity="auto" background="auto" crop="fill_pad">
  </cl-transformation>
</cl-image>
.Net:
cloudinary.Api.UrlImgUp.Transform(new Transformation().Width(600).Height(400).Gravity("auto").Background("auto").Crop("fill_pad")).BuildImageTag("eagle_closeup.jpg")
Android:
MediaManager.get().url().transformation(new Transformation().width(600).height(400).gravity("auto").background("auto").crop("fill_pad")).generate("eagle_closeup.jpg");
iOS:
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setWidth(600).setHeight(400).setGravity("auto").setBackground("auto").setCrop("fill_pad")).generate("eagle_closeup.jpg")!, cloudinary: cloudinary)
Fill or Pad applied

More Updates