Cld_cli

Commanding Cloudinary Through the CLI

May 17, 2020

The Cloudinary CLI (Command Line Interface) enables you to interact with Cloudinary through the command line. This allows you to do virtually anything you can do with the Cloudinary upload and admin APIs, and much of the functionality that’s available through your account console.

For example, you can perform Admin and Upload API operations by typing commands into a terminal without having to spend time setting up a formal coding environment. Additional helper commands are provided to help you to try out transformations, optimizations, and other common actions with minimal effort. You can also combine CLI commands in a batch file to automate laborious tasks.

Read more here

Fine_edges

Fine Edges AI Background Removal

May 03, 2020

Defining the edges of the foreground object can be difficult, and for images of foreground objects with fine detail around its edges, such as hair, this can be virtually impossible.

By setting the background_removal parameter to cloudinary_ai:fine_edges when uploading or updating an image, we'll make sure to select the image to its finest details!

Check it out

Video Summarization

Apr 27, 2020

Check out our updated and enhanced Video Summarization (e_preview) capabilities to create engaging video previews using AI.

Get more clicks to your video and product by using an engaging, smart preview video, instead of a static image.

Read more here

Example

Advanced <img> Components

Apr 19, 2020

Perform more powerful and advanced actions on your assets with our Angular SDK:

Lazy Loading - images that contain this attribute will be lazy loaded, meaning the image will only load when it is in the view port or when scrolled down to it. This is extremely helpful in cases where you have a lot of images on your webpage and you don’t want to load all of your images at once to save on bandwidth.

Placeholder - setting a much smaller, lower quality version of the original image as a placeholder until the original image is loaded.

Accessibility Mode for visual assistance - for example when creating a web app that can toggle to dark-mode (a darker tint of the page view). The accessibility mode will allow you to translate this dark-mode to the images as well by adding the attribute accessiblity='darkmode'.

Learn more

Examples

Sample

Cloudinary_web_wp_email_banner_1x

New & Powerful Plugin for WordPress!

Apr 07, 2020

Our enhanced WordPress plugin is now available, making advanced image and video management for WordPress easier, with powerful automation and AI technologies. Dynamically manage, optimize and deliver images and videos across all devices, viewports, and layouts in the most efficient format, quality, and resolution.

  • Upload once and deliver anywhere by synchronizing and adding images and videos to the media library and automatically adapting them, with content-aware AI, to fit any design, layout, and resolution.
  • Manipulate images and videos with on-the-fly transformations at a global level, taxonomy (category or tag) level or individually directly from the plugin.
  • Maintain a single source of truth to manage all your assets with full DAM capabilities including AI-powered tagging, search, metadata management, and collaboration with controlled sharing and comments all from within our embedded media library.
  • Optimize customer experience and decrease page loading time by automatically delivering your images and videos in the most efficient quality and format with effortless setup.

Read more here

Available for free to all users and certified for Wordpress VIP customers, the plugin is easy to integrate into your WordPress environment. For those already utilizing the WordPress plugin, migrating is simple and intuitive.

Cloudinary ISO/IEC 27701:2019 Certified

Mar 29, 2020

During this audit process our responsibility and accountability for PII processing were audited and found to be best of breed, making Cloudinary a true leader in all-things-privacy.

We believe that adherence to recognized standards sends a valuable and important message to all of you, our customers and business partners. Demonstrating a clear commitment to information security and data privacy management, security and privacy are top priority for us.

Video Progress Indicator

Mar 22, 2020

Add a progress indicator overlay to your videos using the progressbar effect e_progressbar.

This can be used to show the video's progress when a video is played inline and the controls are hidden. You can customize the indicator using the type, color and width parameters.

Read more here

Ruby:
Copy to clipboard
cl_image_tag("dog.gif", :resource_type=>"video", :transformation=>[
  {:width=>600, :quality=>"auto", :crop=>"scale"},
  {:effect=>"progressbar:type_frame:color_blue"}
  ])
PHP:
Copy to clipboard
cl_image_tag("dog.gif", array("resource_type"=>"video", "transformation"=>array(
  array("width"=>600, "quality"=>"auto", "crop"=>"scale"),
  array("effect"=>"progressbar:type_frame:color_blue")
  )))
Python:
Copy to clipboard
CloudinaryVideo("dog.gif").image(transformation=[
  {'width': 600, 'quality': "auto", 'crop': "scale"},
  {'effect': "progressbar:type_frame:color_blue"}
  ])
Node.js:
Copy to clipboard
cloudinary.image("dog.gif", {resource_type: "video", transformation: [
  {width: 600, quality: "auto", crop: "scale"},
  {effect: "progressbar:type_frame:color_blue"}
  ]})
Java:
Copy to clipboard
cloudinary.url().transformation(new Transformation()
  .width(600).quality("auto").crop("scale").chain()
  .effect("progressbar:type_frame:color_blue")).resourceType("video").imageTag("dog.gif");
JS:
Copy to clipboard
cloudinary.videoTag('dog.gif', {transformation: [
  {width: 600, quality: "auto", crop: "scale"},
  {effect: "progressbar:type_frame:color_blue"}
  ]}).toHtml();
jQuery:
Copy to clipboard
$.cloudinary.image("dog.gif", {resource_type: "video", transformation: [
  {width: 600, quality: "auto", crop: "scale"},
  {effect: "progressbar:type_frame:color_blue"}
  ]})
React:
Copy to clipboard
<Video publicId="dog.gif" resourceType="video">
  <Transformation width="600" quality="auto" crop="scale" />
  <Transformation effect="progressbar:type_frame:color_blue" />
</Video>
Vue.js:
Copy to clipboard
<cld-video publicId="dog.gif" resourceType="video">
  <cld-transformation width="600" quality="auto" crop="scale" />
  <cld-transformation effect="progressbar:type_frame:color_blue" />
</cld-video>
Angular:
Copy to clipboard
<cl-video public-id="dog.gif" resource-type="video">
  <cl-transformation width="600" quality="auto" crop="scale">
  </cl-transformation>
  <cl-transformation effect="progressbar:type_frame:color_blue">
  </cl-transformation>
</cl-video>
.Net:
Copy to clipboard
cloudinary.Api.UrlVideoUp.Transform(new Transformation()
  .Width(600).Quality("auto").Crop("scale").Chain()
  .Effect("progressbar:type_frame:color_blue")).BuildImageTag("dog.gif")
Android:
Copy to clipboard
MediaManager.get().url().transformation(new Transformation()
  .width(600).quality("auto").crop("scale").chain()
  .effect("progressbar:type_frame:color_blue")).resourceType("video").generate("dog.gif");
iOS:
Copy to clipboard
cloudinary.createUrl().setResourceType("video").setTransformation(CLDTransformation()
  .setWidth(600).setQuality("auto").setCrop("scale").chain()
  .setEffect("progressbar:type_frame:color_blue")).generate("dog.gif")
Progress bar

Interactive Image Editing

Mar 10, 2020

Edit images interactively - now within the Media Library!

Easily crop your assets in various aspect ratios or custom coordinates through the Media Editor. You can then either download the result or save it as a new version of the original.

This is phase one of the interactive editing, with future capabilities to be added such as image overlays, effects and more, so stay tuned!

Interactive Image Editing

Improved Background Removal Service

Feb 13, 2020

We've updated the Cloudinary Background Removal engine and we're excited to show off!

What you can expect to find:

  • Accuracy improvements - the results are much more accurate than before, now optimized also for studio shoots.
  • Performance enhancement - The model runs three times faster!
  • Backward compatible - all the documented functionalities still work of course

Below are some "before and after" examples:

Spoons - Before and After:

Spoons before after

Shoes - Before and After:

Shoe before after

More Updates