Named transformations (video tutorial)

On this page:

Overview

Named transformations are one of the most useful aspects of Cloudinary’s service, allowing you to take one or more transformations you have created for your images and/or videos and develop a codename for them.

Video tutorial


This video is brought to you by Cloudinary's video player - embed your own!

Tutorial contents

This tutorial presents the following topics. Click a timestamp to jump to that part of the video.

Use-cases for named transformations

Shorten your URLs

Jump to this spot in the video  0:20 Naming the transformation definition will essentially shorten it to one transformation in the URL structure, vastly reducing the original size.

Prevent human error

Jump to this spot in the video  0:41 When applying transformations to an image or video, it can be easy to forget to add one or more in the process.

Add security

Jump to this spot in the video  0:55 Naming a transformation definition hides the original transformation details from being in the URL.
URLRubyPHPPythonNode.jsJavaJSjQueryReactVue.jsAngular.NETiOSAndroidKotlinAll
URL:
Copy to clipboard
https://res.cloudinary.com/demo/image/upload/ar_1:1,c_fill,g_face/bo_5px_solid_rgb:caa5c9/f_webp,fl_animated,fl_awebp/l_samples:cloudinary-icon/f_jpg/fl_layer_apply,g_south_east/Model_woman.jpg
Ruby:
Copy to clipboard
cl_image_tag("Model_woman.jpg", :transformation=>[
  {:aspect_ratio=>"1:1", :gravity=>"face", :crop=>"fill"},
  {:border=>"5px_solid_rgb:caa5c9"},
  {:flags=>["animated", "awebp"], :fetch_format=>"webp"},
  {:overlay=>"samples:cloudinary-icon"},
  {:fetch_format=>"jpg"},
  {:flags=>"layer_apply", :gravity=>"south_east"}
  ])
PHP (cloudinary_php v2.x):
Copy to clipboard
(new ImageTag('Model_woman.jpg'))
  ->resize(Resize::fill()
  ->aspectRatio(
  AspectRatio::ar1X1())
  ->gravity(
  Gravity::focusOn(
  FocusOn::face()))
  )
  ->border(Border::solid(5,Color::rgb("caa5c9")))
  ->transcode(Transcode::toAnimated(
  AnimatedFormat::webp()))
  ->overlay(Overlay::source(
  Source::image("samples/cloudinary-icon")
  ->transformation((new Transformation())
  ->delivery(Delivery::format(
  Format::jpg())))
  )
  ->position((new Position())
  ->gravity(
  Gravity::compass(
  Compass::southEast()))
  )
  );
PHP (cloudinary_php v1.x (legacy)):
Copy to clipboard
cl_image_tag("Model_woman.jpg", array("transformation"=>array(
  array("aspect_ratio"=>"1:1", "gravity"=>"face", "crop"=>"fill"),
  array("border"=>"5px_solid_rgb:caa5c9"),
  array("flags"=>array("animated", "awebp"), "fetch_format"=>"webp"),
  array("overlay"=>"samples:cloudinary-icon"),
  array("fetch_format"=>"jpg"),
  array("flags"=>"layer_apply", "gravity"=>"south_east")
  )))
Python:
Copy to clipboard
CloudinaryImage("Model_woman.jpg").image(transformation=[
  {'aspect_ratio': "1:1", 'gravity': "face", 'crop': "fill"},
  {'border': "5px_solid_rgb:caa5c9"},
  {'flags': ["animated", "awebp"], 'fetch_format': "webp"},
  {'overlay': "samples:cloudinary-icon"},
  {'fetch_format': "jpg"},
  {'flags': "layer_apply", 'gravity': "south_east"}
  ])
Node.js:
Copy to clipboard
cloudinary.image("Model_woman.jpg", {transformation: [
  {aspect_ratio: "1:1", gravity: "face", crop: "fill"},
  {border: "5px_solid_rgb:caa5c9"},
  {flags: ["animated", "awebp"], fetch_format: "webp"},
  {overlay: "samples:cloudinary-icon"},
  {fetch_format: "jpg"},
  {flags: "layer_apply", gravity: "south_east"}
  ]})
Java:
Copy to clipboard
cloudinary.url().transformation(new Transformation()
  .aspectRatio("1:1").gravity("face").crop("fill").chain()
  .border("5px_solid_rgb:caa5c9").chain()
  .flags("animated", "awebp").fetchFormat("webp").chain()
  .overlay(new Layer().publicId("samples:cloudinary-icon")).chain()
  .fetchFormat("jpg").chain()
  .flags("layer_apply").gravity("south_east")).imageTag("Model_woman.jpg");
JS (js-url-gen v1.x):
Copy to clipboard
// This code example is not currently available.
JS (cloudinary-core v2.x (legacy)):
Copy to clipboard
cloudinary.imageTag('Model_woman.jpg', {transformation: [
  {aspectRatio: "1:1", gravity: "face", crop: "fill"},
  {border: "5px_solid_rgb:caa5c9"},
  {flags: ["animated", "awebp"], fetchFormat: "webp"},
  {overlay: new cloudinary.Layer().publicId("samples:cloudinary-icon")},
  {fetchFormat: "jpg"},
  {flags: "layer_apply", gravity: "south_east"}
  ]}).toHtml();
jQuery:
Copy to clipboard
$.cloudinary.image("Model_woman.jpg", {transformation: [
  {aspect_ratio: "1:1", gravity: "face", crop: "fill"},
  {border: "5px_solid_rgb:caa5c9"},
  {flags: ["animated", "awebp"], fetch_format: "webp"},
  {overlay: new cloudinary.Layer().publicId("samples:cloudinary-icon")},
  {fetch_format: "jpg"},
  {flags: "layer_apply", gravity: "south_east"}
  ]})
React:
Copy to clipboard
<Image publicId="Model_woman.jpg" >
  <Transformation aspectRatio="1:1" gravity="face" crop="fill" />
  <Transformation border="5px_solid_rgb:caa5c9" />
  <Transformation flags={["animated", "awebp"]} fetchFormat="webp" />
  <Transformation overlay="samples:cloudinary-icon" />
  <Transformation fetchFormat="jpg" />
  <Transformation flags="layer_apply" gravity="south_east" />
</Image>
Vue.js:
Copy to clipboard
<cld-image public-id="Model_woman.jpg" >
  <cld-transformation aspect-ratio="1:1" gravity="face" crop="fill" />
  <cld-transformation border="5px_solid_rgb:caa5c9" />
  <cld-transformation flags={["animated", "awebp"]} fetch-format="webp" />
  <cld-transformation :overlay="samples:cloudinary-icon" />
  <cld-transformation fetch-format="jpg" />
  <cld-transformation flags="layer_apply" gravity="south_east" />
</cld-image>
Angular:
Copy to clipboard
<cl-image public-id="Model_woman.jpg" >
  <cl-transformation aspect-ratio="1:1" gravity="face" crop="fill">
  </cl-transformation>
  <cl-transformation border="5px_solid_rgb:caa5c9">
  </cl-transformation>
  <cl-transformation flags={{["animated", "awebp"]}} fetch-format="webp">
  </cl-transformation>
  <cl-transformation overlay="samples:cloudinary-icon">
  </cl-transformation>
  <cl-transformation fetch-format="jpg">
  </cl-transformation>
  <cl-transformation flags="layer_apply" gravity="south_east">
  </cl-transformation>
</cl-image>
.NET:
Copy to clipboard
cloudinary.Api.UrlImgUp.Transform(new Transformation()
  .AspectRatio("1:1").Gravity("face").Crop("fill").Chain()
  .Border("5px_solid_rgb:caa5c9").Chain()
  .Flags("animated", "awebp").FetchFormat("webp").Chain()
  .Overlay(new Layer().PublicId("samples:cloudinary-icon")).Chain()
  .FetchFormat("jpg").Chain()
  .Flags("layer_apply").Gravity("south_east")).BuildImageTag("Model_woman.jpg")
iOS:
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation()
  .setAspectRatio("1:1").setGravity("face").setCrop("fill").chain()
  .setBorder("5px_solid_rgb:caa5c9").chain()
  .setFlags("animated", "awebp").setFetchFormat("webp").chain()
  .setOverlay("samples:cloudinary-icon").chain()
  .setFetchFormat("jpg").chain()
  .setFlags("layer_apply").setGravity("south_east")).generate("Model_woman.jpg")!, cloudinary: cloudinary)
Android:
Copy to clipboard
MediaManager.get().url().transformation(new Transformation()
  .aspectRatio("1:1").gravity("face").crop("fill").chain()
  .border("5px_solid_rgb:caa5c9").chain()
  .flags("animated", "awebp").fetchFormat("webp").chain()
  .overlay(new Layer().publicId("samples:cloudinary-icon")).chain()
  .fetchFormat("jpg").chain()
  .flags("layer_apply").gravity("south_east")).generate("Model_woman.jpg");
Kotlin:
Copy to clipboard
// This code example is not currently available.
URLRubyPHPPythonNode.jsJavaJSjQueryReactVue.jsAngular.NETiOSAndroidKotlinAll
URL:
Copy to clipboard
https://res.cloudinary.com/demo/image/upload/t_global/Model_woman.jpg
Ruby:
Copy to clipboard
cl_image_tag("Model_woman.jpg", :transformation=>["global"])
PHP (cloudinary_php v2.x):
Copy to clipboard
(new ImageTag('Model_woman.jpg'))
  ->namedTransformation(NamedTransformation::name("global"));
PHP (cloudinary_php v1.x (legacy)):
Copy to clipboard
cl_image_tag("Model_woman.jpg", array("transformation"=>array("global")))
Python:
Copy to clipboard
CloudinaryImage("Model_woman.jpg").image(transformation=["global"])
Node.js:
Copy to clipboard
cloudinary.image("Model_woman.jpg", {transformation: ["global"]})
Java:
Copy to clipboard
cloudinary.url().transformation(new Transformation().named("global")).imageTag("Model_woman.jpg");
JS (js-url-gen v1.x):
Copy to clipboard
new CloudinaryImage("Model_woman.jpg").namedTransformation(name("global"));
JS (cloudinary-core v2.x (legacy)):
Copy to clipboard
cloudinary.imageTag('Model_woman.jpg', {transformation: ["global"]}).toHtml();
jQuery:
Copy to clipboard
$.cloudinary.image("Model_woman.jpg", {transformation: ["global"]})
React:
Copy to clipboard
<Image publicId="Model_woman.jpg" >
  <Transformation transformation={["global"]} />
</Image>
Vue.js:
Copy to clipboard
<cld-image public-id="Model_woman.jpg" >
  <cld-transformation transformation={["global"]} />
</cld-image>
Angular:
Copy to clipboard
<cl-image public-id="Model_woman.jpg" >
  <cl-transformation transformation={{["global"]}}>
  </cl-transformation>
</cl-image>
.NET:
Copy to clipboard
cloudinary.Api.UrlImgUp.Transform(new Transformation().Named("global")).BuildImageTag("Model_woman.jpg")
iOS:
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setNamed("global")).generate("Model_woman.jpg")!, cloudinary: cloudinary)
Android:
Copy to clipboard
MediaManager.get().url().transformation(new Transformation().named("global")).generate("Model_woman.jpg");
Kotlin:
Copy to clipboard
cloudinary.image {
  publicId("Model_woman.jpg")
   namedTransformation(NamedTransformation.name("global")) 
}.generate()
Click on the sample URLs and you'll see that both images look the same. The first example exposes all the steps with its overly long URL, whereas the second is much shorter and concealed.

Create a transformation in the console

Jump to this spot in the video  1:21 Begin developing your transformation in the Edit page for one or your assets in your Media Library.

Save the transformation as a named transformation

Jump to this spot in the video  2:49 Take your existing transformation and save it as a named transformation, in the Transformation Editor.

Apply a named transformation to an image or video

Jump to this spot in the video  3:18 Apply the named transformation to any image or video in your Cloudinary Media Library as you would with other transformations. Simply use the t_ parameter and then the name of the transformation, e.g. t_global.

Use a named transformation as a preset

Jump to this spot in the video  3:34 You can also add any named transformation as a preset by selecting the Add to Presets link, when you are viewing the transformation in the Transformations page.

Keep learning

Related topics

If you like this, you might also like...

Media Library Intro
Explore the main elements of the Media Library
Media Library Upload
Drag & drop or select from remote sources to upload
Transformation Basics
Learn the basics of a transformation URL

 

Cloudinary Academy

 

Check out Cloudinary Academy for free self-paced Cloudinary courses on a variety of developer or DAM topics, or register for formal instructor-led courses, either virtual or on-site.

 

✔️ Feedback sent!

Rate this page: