{"id":21495,"date":"2017-03-15T15:47:06","date_gmt":"2017-03-15T15:47:06","guid":{"rendered":"http:\/\/user_defined_variables_can_transform_the_way_you_deliver_media"},"modified":"2026-03-15T12:53:31","modified_gmt":"2026-03-15T19:53:31","slug":"user_defined_variables_can_transform_the_way_you_deliver_media","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/user_defined_variables_can_transform_the_way_you_deliver_media","title":{"rendered":"User-defined variables can transform the way you deliver media"},"content":{"rendered":"<div class=\"wp-block-cloudinary-markdown \"><p>No programmer could imagine a world without variables. Neither can Cloudinary. That\u2019s why Cloudinary now offers image  transformations that support <strong>user-defined variables<\/strong>.<\/p>\n<p>Using Cloudinary, you can already deliver transformed images with a variety of transformations, including resizing, cropping, rotating, a huge toolbox of special effects and filters, text and image overlays, and more, all of which you can deliver responsively, on-the-fly, and optimized for quick delivery via CDN.<\/p>\n<p>But there are many scenarios when you may want to set up a fixed set of transformations to be applied to a variety of media assets, with one or a few variations depending on the specific image to be delivered, or on other factors that are determined at a later time.<\/p>\n<h2>Applying User-Defined Variables<\/h2>\n<p>By including user-defined variables in your transformations, you can assign different values to specific elements of the transformation when you deliver the file. For example, you could:<\/p>\n<ul>\n<li>\n<p>Apply resizing, cropping, and certain special effect transformations to all images, but use a variable for the text overlay element of the transformation, so that each image can be customized with a user\u2019s name.<\/p>\n<\/li>\n<li>\n<p>Calculate the required width of an overlay based on the evaluation of a condition, and then pass that number as a variable value to the transformation component where the overlay is applied.<\/p>\n<\/li>\n<li>\n<p>Set certain elements of your Web site profile images, such as size, circular shape, quality, and more, but allow your users to select from special effects and artistic filters to apply.<\/p>\n<\/li>\n<\/ul>\n<p>Until now, goals like these could only be accomplished through a combination of transformation API and your own application code. Now you can do it all within the transformation code.<\/p>\n<p>User-defined variables can be useful in conjunction with <a href=\"https:\/\/cloudinary.com\/documentation\/image_transformations#conditional_transformations\">conditional transformations<\/a>. You can simplify and improve the legibility of conditional transformation code by assigning different values to variables based on conditions, and then pass the relevant value to the transformation code in a separate component of a chained transformation.<\/p>\n<p>You can also now apply <a href=\"https:\/\/cloudinary.com\/documentation\/image_transformations#arithmetic_expressions\">arithmetic operators<\/a> to numeric parameters or user-defined variables representing numeric parameters. To make it more interesting, your user-defined variables can even take on the value of an already known parameter value adjusted by some arithmetic expression. For example, you could assign the <code>textwidth<\/code> variable to be equal to the width of the image minus 10. Then you could create a text overlay whose width is assigned the value of the <code>textwidth<\/code> variable.<\/p>\n<p>User-defined variables are even more valuable when working with <a href=\"https:\/\/cloudinary.com\/documentation\/image_transformations#named_transformations\">named transformations<\/a>, which enable you to keep your transformation code completely separate from your URL delivery code, and now enable you to keep variable values separate from your transformation code as well.<\/p>\n<p>Between <strong>variables<\/strong>, <strong>conditional transformations<\/strong>, <strong>arithmetic expressions<\/strong>, and the function-like <strong>named transformations<\/strong>, you\u2019ve nearly got everything you need to consider the Cloudinary transformation API a programming language in and of itself.<\/p>\n<h2>The basics<\/h2>\n<p>In general, to include a user-defined variable in your transformation, you just specify any variable name of your choice preceded by the <code>$<\/code> sign, instead of a static parameter value, and you assign values to your variable similar to the way you would for a regular parameter.<\/p>\n<h3>Numbers<\/h3>\n<p>This is all it takes to create a basic user-defined variable for a numeric parameter:<\/p>\n<p><cld-code-widget\n      class=\" c-code-widget\"\n      snippets=\"[{&quot;sdkId&quot;:&quot;nodejs&quot;,&quot;framework&quot;:&quot;nodejs&quot;,&quot;language&quot;:&quot;nodejs&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.image(\\&quot;apple_size.jpg\\&quot;, {transformation: [ {variables: [[\\&quot;$imgwidth\\&quot;, \\&quot;270\\&quot;]]}, {width: \\&quot;$imgwidth\\&quot;, crop: \\&quot;scale\\&quot;} ]})&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image(\\&quot;apple_size.jpg\\&quot;, {transformation: [\\n  {variables: [[\\&quot;$imgwidth\\&quot;, \\&quot;270\\&quot;]]},\\n  {width: \\&quot;$imgwidth\\&quot;, crop: \\&quot;scale\\&quot;}\\n  ]})&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Node.js&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;},{&quot;sdkId&quot;:&quot;react_2&quot;,&quot;framework&quot;:&quot;react_2&quot;,&quot;language&quot;:&quot;react&quot;,&quot;rawCodeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;apple_size.jpg\\&quot;)\\n  .addVariable(set(\\&quot;imgwidth\\&quot;, 270))\\n  .resize(scale().width(\\&quot;$imgwidth\\&quot;));&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;apple_size.jpg\\&quot;)\\n  .addVariable(set(\\&quot;imgwidth\\&quot;, 270))\\n  .resize(scale().width(\\&quot;$imgwidth\\&quot;));&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;React&quot;,&quot;packageName&quot;:&quot;@cloudinary\\\/react&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;react&quot;,&quot;framework&quot;:&quot;react&quot;,&quot;language&quot;:&quot;react&quot;,&quot;rawCodeSnippet&quot;:&quot;&lt;Image publicId=\\&quot;apple_size.jpg\\&quot; &gt; &lt;Transformation variables={[[\\&quot;$imgwidth\\&quot;, \\&quot;270\\&quot;]]} \\\/&gt; &lt;Transformation width=\\&quot;$imgwidth\\&quot; crop=\\&quot;scale\\&quot; \\\/&gt; &lt;\\\/Image&gt;&quot;,&quot;codeSnippet&quot;:&quot;&lt;Image publicId=\\&quot;apple_size.jpg\\&quot; &gt;\\n\\t&lt;Transformation variables={[[\\&quot;$imgwidth\\&quot;, \\&quot;270\\&quot;]]} \\\/&gt;\\n\\t&lt;Transformation width=\\&quot;$imgwidth\\&quot; crop=\\&quot;scale\\&quot; \\\/&gt;\\n&lt;\\\/Image&gt;&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;React&quot;,&quot;packageName&quot;:&quot;cloudinary-react&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;vue_2&quot;,&quot;framework&quot;:&quot;vue_2&quot;,&quot;language&quot;:&quot;vue&quot;,&quot;rawCodeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;apple_size.jpg\\&quot;)\\n  .addVariable(set(\\&quot;imgwidth\\&quot;, 270))\\n  .resize(scale().width(\\&quot;$imgwidth\\&quot;));&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;apple_size.jpg\\&quot;)\\n  .addVariable(set(\\&quot;imgwidth\\&quot;, 270))\\n  .resize(scale().width(\\&quot;$imgwidth\\&quot;));&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Vue.js&quot;,&quot;packageName&quot;:&quot;@cloudinary\\\/vue&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;vue&quot;,&quot;framework&quot;:&quot;vue&quot;,&quot;language&quot;:&quot;vue&quot;,&quot;rawCodeSnippet&quot;:&quot;&lt;cld-image public-id=\\&quot;apple_size.jpg\\&quot; &gt; &lt;cld-transformation :variables=\\&quot;[[&#039;$imgwidth&#039;, &#039;270&#039;]]\\&quot; \\\/&gt; &lt;cld-transformation width=\\&quot;$imgwidth\\&quot; crop=\\&quot;scale\\&quot; \\\/&gt; &lt;\\\/cld-image&gt;&quot;,&quot;codeSnippet&quot;:&quot;&lt;cld-image public-id=\\&quot;apple_size.jpg\\&quot; &gt;\\n\\t&lt;cld-transformation :variables=\\&quot;[[&#039;$imgwidth&#039;, &#039;270&#039;]]\\&quot; \\\/&gt;\\n\\t&lt;cld-transformation width=\\&quot;$imgwidth\\&quot; crop=\\&quot;scale\\&quot; \\\/&gt;\\n&lt;\\\/cld-image&gt;&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Vue.js&quot;,&quot;packageName&quot;:&quot;cloudinary-vue&quot;,&quot;packageStatus&quot;:&quot;legacy&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;angular_2&quot;,&quot;framework&quot;:&quot;angular_2&quot;,&quot;language&quot;:&quot;angular&quot;,&quot;rawCodeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;apple_size.jpg\\&quot;)\\n  .addVariable(set(\\&quot;imgwidth\\&quot;, 270))\\n  .resize(scale().width(\\&quot;$imgwidth\\&quot;));&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;apple_size.jpg\\&quot;)\\n  .addVariable(set(\\&quot;imgwidth\\&quot;, 270))\\n  .resize(scale().width(\\&quot;$imgwidth\\&quot;));&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Angular&quot;,&quot;packageName&quot;:&quot;@cloudinary\\\/ng&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;angular&quot;,&quot;framework&quot;:&quot;angular&quot;,&quot;language&quot;:&quot;angular&quot;,&quot;rawCodeSnippet&quot;:&quot;&lt;cl-image public-id=\\&quot;apple_size.jpg\\&quot; &gt; &lt;cl-transformation variables=\\&quot;[[&#039;$imgwidth&#039;, &#039;270&#039;]]\\&quot;&gt; &lt;\\\/cl-transformation&gt; &lt;cl-transformation width=\\&quot;$imgwidth\\&quot; crop=\\&quot;scale\\&quot;&gt; &lt;\\\/cl-transformation&gt; &lt;\\\/cl-image&gt;&quot;,&quot;codeSnippet&quot;:&quot;&lt;cl-image public-id=\\&quot;apple_size.jpg\\&quot; &gt;\\n\\t&lt;cl-transformation variables=\\&quot;[[&#039;$imgwidth&#039;, &#039;270&#039;]]\\&quot;&gt;\\n\\t&lt;\\\/cl-transformation&gt;\\n\\t&lt;cl-transformation width=\\&quot;$imgwidth\\&quot; crop=\\&quot;scale\\&quot;&gt;\\n\\t&lt;\\\/cl-transformation&gt;\\n&lt;\\\/cl-image&gt;&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Angular&quot;,&quot;packageName&quot;:&quot;@cloudinary\\\/angular-5.x&quot;,&quot;packageStatus&quot;:&quot;legacy&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;js_2&quot;,&quot;framework&quot;:&quot;js_2&quot;,&quot;language&quot;:&quot;js&quot;,&quot;rawCodeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;apple_size.jpg\\&quot;)\\n  .addVariable(set(\\&quot;imgwidth\\&quot;, 270))\\n  .resize(scale().width(\\&quot;$imgwidth\\&quot;));&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;apple_size.jpg\\&quot;)\\n  .addVariable(set(\\&quot;imgwidth\\&quot;, 270))\\n  .resize(scale().width(\\&quot;$imgwidth\\&quot;));&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;JS&quot;,&quot;packageName&quot;:&quot;@cloudinary\\\/url-gen&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;js&quot;,&quot;framework&quot;:&quot;js&quot;,&quot;language&quot;:&quot;js&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.imageTag(&#039;apple_size.jpg&#039;, {transformation: [ {variables: [[\\&quot;$imgwidth\\&quot;, \\&quot;270\\&quot;]]}, {width: \\&quot;$imgwidth\\&quot;, crop: \\&quot;scale\\&quot;} ]}).toHtml();&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.imageTag(&#039;apple_size.jpg&#039;, {transformation: [\\n  {variables: [[\\&quot;$imgwidth\\&quot;, \\&quot;270\\&quot;]]},\\n  {width: \\&quot;$imgwidth\\&quot;, crop: \\&quot;scale\\&quot;}\\n  ]}).toHtml();&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;JS&quot;,&quot;packageName&quot;:&quot;cloudinary-core&quot;,&quot;packageStatus&quot;:&quot;legacy&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;},{&quot;sdkId&quot;:&quot;python&quot;,&quot;framework&quot;:&quot;python&quot;,&quot;language&quot;:&quot;python&quot;,&quot;rawCodeSnippet&quot;:&quot;CloudinaryImage(\\&quot;apple_size.jpg\\&quot;).image(transformation=[ {&#039;variables&#039;: [[\\&quot;$imgwidth\\&quot;, \\&quot;270\\&quot;]]}, {&#039;width&#039;: \\&quot;$imgwidth\\&quot;, &#039;crop&#039;: \\&quot;scale\\&quot;} ])&quot;,&quot;codeSnippet&quot;:&quot;CloudinaryImage(\\&quot;apple_size.jpg\\&quot;).image(transformation=[\\n  {&#039;variables&#039;: [[\\&quot;$imgwidth\\&quot;, \\&quot;270\\&quot;]]},\\n  {&#039;width&#039;: \\&quot;$imgwidth\\&quot;, &#039;crop&#039;: \\&quot;scale\\&quot;}\\n  ])&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Python&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;php_2&quot;,&quot;framework&quot;:&quot;php_2&quot;,&quot;language&quot;:&quot;php&quot;,&quot;rawCodeSnippet&quot;:&quot;(new ImageTag(&#039;apple_size.jpg&#039;))\\n\\t-&gt;addVariable(Variable::set(\\&quot;imgwidth\\&quot;,270))\\n\\t-&gt;resize(Resize::scale()-&gt;width(\\&quot;$imgwidth\\&quot;));&quot;,&quot;codeSnippet&quot;:&quot;(new ImageTag(&#039;apple_size.jpg&#039;))\\n\\t-&gt;addVariable(Variable::set(\\&quot;imgwidth\\&quot;,270))\\n\\t-&gt;resize(Resize::scale()-&gt;width(\\&quot;$imgwidth\\&quot;));&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;PHP&quot;,&quot;packageName&quot;:&quot;cloudinary_php&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;3.x&quot;},{&quot;sdkId&quot;:&quot;php&quot;,&quot;framework&quot;:&quot;php&quot;,&quot;language&quot;:&quot;php&quot;,&quot;rawCodeSnippet&quot;:&quot;cl_image_tag(\\&quot;apple_size.jpg\\&quot;, array(\\&quot;transformation\\&quot;=&gt;array( array(\\&quot;variables\\&quot;=&gt;array(array(\\&quot;$imgwidth\\&quot;, \\&quot;270\\&quot;))), array(\\&quot;width\\&quot;=&gt;\\&quot;$imgwidth\\&quot;, \\&quot;crop\\&quot;=&gt;\\&quot;scale\\&quot;) )))&quot;,&quot;codeSnippet&quot;:&quot;cl_image_tag(\\&quot;apple_size.jpg\\&quot;, array(\\&quot;transformation\\&quot;=&gt;array(\\n  array(\\&quot;variables\\&quot;=&gt;array(array(\\&quot;$imgwidth\\&quot;, \\&quot;270\\&quot;))),\\n  array(\\&quot;width\\&quot;=&gt;\\&quot;$imgwidth\\&quot;, \\&quot;crop\\&quot;=&gt;\\&quot;scale\\&quot;)\\n  )))&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;PHP&quot;,&quot;packageName&quot;:&quot;cloudinary_php&quot;,&quot;packageStatus&quot;:&quot;legacy&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;java&quot;,&quot;framework&quot;:&quot;java&quot;,&quot;language&quot;:&quot;java&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.url().transformation(new Transformation().variables(variable(\\&quot;$imgwidth\\&quot;,\\&quot;270\\&quot;)).chain() .width(\\&quot;$imgwidth\\&quot;).crop(\\&quot;scale\\&quot;)).imageTag(\\&quot;apple_size.jpg\\&quot;);&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.url().transformation(new Transformation()\\n  .variables(variable(\\&quot;$imgwidth\\&quot;,\\&quot;270\\&quot;)).chain()\\n  .width(\\&quot;$imgwidth\\&quot;).crop(\\&quot;scale\\&quot;)).imageTag(\\&quot;apple_size.jpg\\&quot;);&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Java&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;},{&quot;sdkId&quot;:&quot;ruby&quot;,&quot;framework&quot;:&quot;ruby&quot;,&quot;language&quot;:&quot;ruby&quot;,&quot;rawCodeSnippet&quot;:&quot;cl_image_tag(\\&quot;apple_size.jpg\\&quot;, transformation: [ {variables: [[\\&quot;$imgwidth\\&quot;, \\&quot;270\\&quot;]]}, {width: \\&quot;$imgwidth\\&quot;, crop: \\&quot;scale\\&quot;} ])&quot;,&quot;codeSnippet&quot;:&quot;cl_image_tag(\\&quot;apple_size.jpg\\&quot;, transformation: [\\n  {variables: [[\\&quot;$imgwidth\\&quot;, \\&quot;270\\&quot;]]},\\n  {width: \\&quot;$imgwidth\\&quot;, crop: \\&quot;scale\\&quot;}\\n  ])&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Ruby&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;},{&quot;sdkId&quot;:&quot;csharp&quot;,&quot;framework&quot;:&quot;csharp&quot;,&quot;language&quot;:&quot;csharp&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.Api.UrlImgUp.Transform(new Transformation().Variables(\\&quot;$imgwidth\\&quot;, 270).Chain() .Width(\\&quot;$imgwidth\\&quot;).Crop(\\&quot;scale\\&quot;)).BuildImageTag(\\&quot;apple_size.jpg\\&quot;)&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.Api.UrlImgUp.Transform(new Transformation()\\n  .Variables(\\&quot;$imgwidth\\&quot;, 270).Chain()\\n  .Width(\\&quot;$imgwidth\\&quot;).Crop(\\&quot;scale\\&quot;)).BuildImageTag(\\&quot;apple_size.jpg\\&quot;)&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;.NET&quot;,&quot;packageName&quot;:&quot;CloudinaryDotNet&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;dart&quot;,&quot;framework&quot;:&quot;dart&quot;,&quot;language&quot;:&quot;dart&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.image(&#039;apple_size.jpg&#039;).transformation(Transformation()\\n\\t.addVariable(Variable.set(\\&quot;imgwidth\\&quot;,270))\\n\\t.resize(Resize.scale().width(\\&quot;$imgwidth\\&quot;)));&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image(&#039;apple_size.jpg&#039;).transformation(Transformation()\\n\\t.addVariable(Variable.set(\\&quot;imgwidth\\&quot;,270))\\n\\t.resize(Resize.scale().width(\\&quot;$imgwidth\\&quot;)));&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Dart&quot;,&quot;packageName&quot;:&quot;cloudinary_dart&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;swift&quot;,&quot;framework&quot;:&quot;swift&quot;,&quot;language&quot;:&quot;swift&quot;,&quot;rawCodeSnippet&quot;:&quot;imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().chain() .setWidth(\\&quot;$imgwidth\\&quot;).setCrop(\\&quot;scale\\&quot;)).generate(\\&quot;apple_size.jpg\\&quot;)!, cloudinary: cloudinary)&quot;,&quot;codeSnippet&quot;:&quot;imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation()\\n  .chain()\\n  .setWidth(\\&quot;$imgwidth\\&quot;).setCrop(\\&quot;scale\\&quot;)).generate(\\&quot;apple_size.jpg\\&quot;)!, cloudinary: cloudinary)&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;iOS&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;5.x&quot;},{&quot;sdkId&quot;:&quot;android&quot;,&quot;framework&quot;:&quot;android&quot;,&quot;language&quot;:&quot;android&quot;,&quot;rawCodeSnippet&quot;:&quot;MediaManager.get().url().transformation(new Transformation().variables(variable(\\&quot;$imgwidth\\&quot;,\\&quot;270\\&quot;)).chain() .width(\\&quot;$imgwidth\\&quot;).crop(\\&quot;scale\\&quot;)).generate(\\&quot;apple_size.jpg\\&quot;);&quot;,&quot;codeSnippet&quot;:&quot;MediaManager.get().url().transformation(new Transformation()\\n  .variables(variable(\\&quot;$imgwidth\\&quot;,\\&quot;270\\&quot;)).chain()\\n  .width(\\&quot;$imgwidth\\&quot;).crop(\\&quot;scale\\&quot;)).generate(\\&quot;apple_size.jpg\\&quot;);&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Android&quot;,&quot;packageName&quot;:&quot;cloudinary-android&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;3.x&quot;},{&quot;sdkId&quot;:&quot;flutter&quot;,&quot;framework&quot;:&quot;flutter&quot;,&quot;language&quot;:&quot;flutter&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.image(&#039;apple_size.jpg&#039;).transformation(Transformation()\\n\\t.addVariable(Variable.set(\\&quot;imgwidth\\&quot;,270))\\n\\t.resize(Resize.scale().width(\\&quot;$imgwidth\\&quot;)));&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image(&#039;apple_size.jpg&#039;).transformation(Transformation()\\n\\t.addVariable(Variable.set(\\&quot;imgwidth\\&quot;,270))\\n\\t.resize(Resize.scale().width(\\&quot;$imgwidth\\&quot;)));&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Flutter&quot;,&quot;packageName&quot;:&quot;cloudinary_flutter&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;kotlin&quot;,&quot;framework&quot;:&quot;kotlin&quot;,&quot;language&quot;:&quot;kotlin&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.image {\\n\\tpublicId(\\&quot;apple_size.jpg\\&quot;)\\n\\t addVariable(Variable.set(\\&quot;imgwidth\\&quot;,270))\\n\\t resize(Resize.scale() { width(\\&quot;\\\\$imgwidth\\&quot;) }) \\n}.generate()&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image {\\n\\tpublicId(\\&quot;apple_size.jpg\\&quot;)\\n\\t addVariable(Variable.set(\\&quot;imgwidth\\&quot;,270))\\n\\t resize(Resize.scale() { width(\\&quot;\\\\$imgwidth\\&quot;) }) \\n}.generate()&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Kotlin&quot;,&quot;packageName&quot;:&quot;kotlin-url-gen&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;jquery&quot;,&quot;framework&quot;:&quot;jquery&quot;,&quot;language&quot;:&quot;jquery&quot;,&quot;rawCodeSnippet&quot;:&quot;$.cloudinary.image(\\&quot;apple_size.jpg\\&quot;, {transformation: [ {variables: [[\\&quot;$imgwidth\\&quot;, \\&quot;270\\&quot;]]}, {width: \\&quot;$imgwidth\\&quot;, crop: \\&quot;scale\\&quot;} ]})&quot;,&quot;codeSnippet&quot;:&quot;$.cloudinary.image(\\&quot;apple_size.jpg\\&quot;, {transformation: [\\n  {variables: [[\\&quot;$imgwidth\\&quot;, \\&quot;270\\&quot;]]},\\n  {width: \\&quot;$imgwidth\\&quot;, crop: \\&quot;scale\\&quot;}\\n  ]})&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;jQuery&quot;,&quot;packageName&quot;:&quot;cloudinary-jquery&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;},{&quot;sdkId&quot;:&quot;react_native&quot;,&quot;framework&quot;:&quot;react_native&quot;,&quot;language&quot;:&quot;react_native&quot;,&quot;rawCodeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;apple_size.jpg\\&quot;)\\n  .addVariable(set(\\&quot;imgwidth\\&quot;, 270))\\n  .resize(scale().width(\\&quot;$imgwidth\\&quot;));&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;apple_size.jpg\\&quot;)\\n  .addVariable(set(\\&quot;imgwidth\\&quot;, 270))\\n  .resize(scale().width(\\&quot;$imgwidth\\&quot;));&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;React Native&quot;,&quot;packageName&quot;:&quot;cloudinary-react-native&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;}]\"\n      parsed-url=\"{&quot;url&quot;:&quot;https:\\\/\\\/res.cloudinary.com\\\/demo\\\/image\\\/upload\\\/$imgwidth_270\\\/w_$imgwidth\\\/apple_size.jpg&quot;,&quot;cloud_name&quot;:&quot;demo&quot;,&quot;host&quot;:&quot;res.cloudinary.com&quot;,&quot;type&quot;:&quot;upload&quot;,&quot;resource_type&quot;:&quot;image&quot;,&quot;transformation&quot;:[{&quot;$imgwidth&quot;:&quot;270&quot;},{&quot;width&quot;:&quot;$imgwidth&quot;}],&quot;transformation_string&quot;:&quot;$imgwidth_270\\\/w_$imgwidth&quot;,&quot;url_suffix&quot;:&quot;&quot;,&quot;version&quot;:&quot;&quot;,&quot;secure&quot;:true,&quot;public_id&quot;:&quot;apple_size.jpg&quot;,&quot;extension&quot;:&quot;jpg&quot;,&quot;format&quot;:&quot;jpg&quot;,&quot;format_code&quot;:true,&quot;url_code&quot;:false,&quot;signature&quot;:&quot;&quot;,&quot;private_cdn&quot;:false,&quot;result_asset_type&quot;:&quot;image&quot;}\"\n      with-url=\"true\"\n    >\n      <span class=\"u-visually-hidden\">Loading code examples<\/span>\n    <\/cld-code-widget><a class=\"c-image-link\" href=\"https:\/\/res.cloudinary.com\/demo\/image\/upload\/$imgwidth_270\/w_$imgwidth\/apple_size.jpg\" target=\"_blank\"><img decoding=\"async\" src=\"https:\/\/res.cloudinary.com\/demo\/image\/upload\/$imgwidth_270\/w_$imgwidth\/apple_size.jpg\" alt=\"simple variable\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"270\" height=\"180\"\/><\/a><\/p>\n<p>As you can see in this simplified example, we created a user-defined variable named <code>imgwidth<\/code>, initialized it with the value 270, and then later assigned the <code>imgwidth<\/code> variable to the <code>width<\/code> parameter.<\/p>\n<h3>Strings<\/h3>\n<p>You use variables for string parameters in a similar way, but you bound the string value with  <code>! !<\/code> characters in the assignment, for example, <code>!MyStringValue!<\/code>.<\/p>\n<p>For example, have a look at this basket of strings.\nThere are several transformations, but the value of the effect gets a different string value in each case, controlled by a variable:<\/p>\n<div style=\"clear: both; margin-bottom: 20px\">\n<\/div>\n<div style=\"text-align:center;\">\n<span style=\"display:inline-block;vertical-align:top;\">\n<a href=\"https:\/\/res.cloudinary.com\/demo\/image\/upload\/w_1000,c_scale\/$effect_!red!\/e_$effect\/bo_20px_solid_white\/strings.jpg\" target =\"_blank\"><img decoding=\"async\" src=\"https:\/\/res.cloudinary.com\/demo\/image\/upload\/w_1000,c_scale\/$effect_!red!\/e_$effect\/bo_20px_solid_white\/w_220\/strings.jpg\" alt=\"variable value = red\" title=\"variable value = red\" style=\"margin-right: 10px;display:block;\" \/><\/a>\n<\/span>\n<span style=\"display:inline-block;vertical-align:top;\">\n<a href=\"https:\/\/res.cloudinary.com\/demo\/image\/upload\/w_1000,c_scale\/$effect_!ordered_dither!\/e_$effect\/bo_20px_solid_white\/strings.jpg\" target =\"_blank\"><img decoding=\"async\" src=\"https:\/\/res.cloudinary.com\/demo\/image\/upload\/w_1000,c_scale\/$effect_!ordered_dither!\/e_$effect\/bo_20px_solid_white\/w_220\/strings.jpg\" alt=\"variable value = red\" title=\"variable value = red\" style=\"margin-right: 10px;display:block;\" \/><\/a>\n<\/span>\n<span style=\"display:inline-block;vertical-align:top;\">\n<a href=\"https:\/\/res.cloudinary.com\/demo\/image\/upload\/w_1000,c_scale\/$effect_!sepia!\/e_$effect\/bo_20px_solid_white\/strings.jpg\" target =\"_blank\"><img decoding=\"async\" src=\"https:\/\/res.cloudinary.com\/demo\/image\/upload\/w_1000,c_scale\/$effect_!sepia!\/e_$effect\/bo_20px_solid_white\/w_220\/strings.jpg\" alt=\"variable value = red\" title=\"variable value = red\" style=\"margin-right: 10px;display:block;\" \/><\/a>\n<\/span>\n<\/div>\n<div style=\"clear: both; margin-bottom: 20px\">\n<\/div>\n<p>Below, we show how to deliver the sepia image on the right: we assign the <code>!sepia!<\/code> string to the <code>$effect<\/code> variable, and then we set the <code>effect<\/code> transformation parameter to use whatever value is in the <code>$effect<\/code> parameter:<\/p>\n<p><cld-code-widget\n      class=\" c-code-widget\"\n      snippets=\"[{&quot;sdkId&quot;:&quot;nodejs&quot;,&quot;framework&quot;:&quot;nodejs&quot;,&quot;language&quot;:&quot;nodejs&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.image(\\&quot;strings.jpg\\&quot;, {transformation: [ {width: 1000, crop: \\&quot;scale\\&quot;}, {variables: [[\\&quot;$effect\\&quot;, \\&quot;!sepia!\\&quot;]]}, {effect: \\&quot;$effect\\&quot;}, {border: \\&quot;20px_solid_white\\&quot;} ]})&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image(\\&quot;strings.jpg\\&quot;, {transformation: [\\n  {width: 1000, crop: \\&quot;scale\\&quot;},\\n  {variables: [[\\&quot;$effect\\&quot;, \\&quot;!sepia!\\&quot;]]},\\n  {effect: \\&quot;$effect\\&quot;},\\n  {border: \\&quot;20px_solid_white\\&quot;}\\n  ]})&quot;,&quot;status&quot;:51,&quot;statusText&quot;:&quot;Ruby code_generator_failed_unexpectedly&quot;,&quot;displayName&quot;:&quot;Node.js&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;},{&quot;sdkId&quot;:&quot;react_2&quot;,&quot;framework&quot;:&quot;react_2&quot;,&quot;language&quot;:&quot;react&quot;,&quot;rawCodeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;strings.jpg\\&quot;).addTransformation(\\n  \\&quot;w_1000,c_scale\\\/$effect_!sepia!\\\/e_$effect\\\/bo_20px_solid_white\\&quot;\\n);&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;strings.jpg\\&quot;).addTransformation(\\n  \\&quot;w_1000,c_scale\\\/$effect_!sepia!\\\/e_$effect\\\/bo_20px_solid_white\\&quot;\\n);&quot;,&quot;status&quot;:50,&quot;statusText&quot;:&quot;Ruby action_generator_failed_unexpectedly&quot;,&quot;displayName&quot;:&quot;React&quot;,&quot;packageName&quot;:&quot;@cloudinary\\\/react&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;react&quot;,&quot;framework&quot;:&quot;react&quot;,&quot;language&quot;:&quot;react&quot;,&quot;rawCodeSnippet&quot;:&quot;&lt;Image publicId=\\&quot;strings.jpg\\&quot; &gt; &lt;Transformation width=\\&quot;1000\\&quot; crop=\\&quot;scale\\&quot; \\\/&gt; &lt;Transformation variables={[[\\&quot;$effect\\&quot;, \\&quot;!sepia!\\&quot;]]} \\\/&gt; &lt;Transformation effect=\\&quot;$effect\\&quot; \\\/&gt; &lt;Transformation border=\\&quot;20px_solid_white\\&quot; \\\/&gt; &lt;\\\/Image&gt;&quot;,&quot;codeSnippet&quot;:&quot;&lt;Image publicId=\\&quot;strings.jpg\\&quot; &gt;\\n\\t&lt;Transformation width=\\&quot;1000\\&quot; crop=\\&quot;scale\\&quot; \\\/&gt;\\n\\t&lt;Transformation variables={[[\\&quot;$effect\\&quot;, \\&quot;!sepia!\\&quot;]]} \\\/&gt;\\n\\t&lt;Transformation effect=\\&quot;$effect\\&quot; \\\/&gt;\\n\\t&lt;Transformation border=\\&quot;20px_solid_white\\&quot; \\\/&gt;\\n&lt;\\\/Image&gt;&quot;,&quot;status&quot;:51,&quot;statusText&quot;:&quot;Ruby code_generator_failed_unexpectedly&quot;,&quot;displayName&quot;:&quot;React&quot;,&quot;packageName&quot;:&quot;cloudinary-react&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;vue_2&quot;,&quot;framework&quot;:&quot;vue_2&quot;,&quot;language&quot;:&quot;vue&quot;,&quot;rawCodeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;strings.jpg\\&quot;).addTransformation(\\n  \\&quot;w_1000,c_scale\\\/$effect_!sepia!\\\/e_$effect\\\/bo_20px_solid_white\\&quot;\\n);&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;strings.jpg\\&quot;).addTransformation(\\n  \\&quot;w_1000,c_scale\\\/$effect_!sepia!\\\/e_$effect\\\/bo_20px_solid_white\\&quot;\\n);&quot;,&quot;status&quot;:50,&quot;statusText&quot;:&quot;Ruby action_generator_failed_unexpectedly&quot;,&quot;displayName&quot;:&quot;Vue.js&quot;,&quot;packageName&quot;:&quot;@cloudinary\\\/vue&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;vue&quot;,&quot;framework&quot;:&quot;vue&quot;,&quot;language&quot;:&quot;vue&quot;,&quot;rawCodeSnippet&quot;:&quot;&lt;cld-image public-id=\\&quot;strings.jpg\\&quot; &gt; &lt;cld-transformation width=\\&quot;1000\\&quot; crop=\\&quot;scale\\&quot; \\\/&gt; &lt;cld-transformation :variables=\\&quot;[[&#039;$effect&#039;, &#039;!sepia!&#039;]]\\&quot; \\\/&gt; &lt;cld-transformation effect=\\&quot;$effect\\&quot; \\\/&gt; &lt;cld-transformation border=\\&quot;20px_solid_white\\&quot; \\\/&gt; &lt;\\\/cld-image&gt;&quot;,&quot;codeSnippet&quot;:&quot;&lt;cld-image public-id=\\&quot;strings.jpg\\&quot; &gt;\\n\\t&lt;cld-transformation width=\\&quot;1000\\&quot; crop=\\&quot;scale\\&quot; \\\/&gt;\\n\\t&lt;cld-transformation :variables=\\&quot;[[&#039;$effect&#039;, &#039;!sepia!&#039;]]\\&quot; \\\/&gt;\\n\\t&lt;cld-transformation effect=\\&quot;$effect\\&quot; \\\/&gt;\\n\\t&lt;cld-transformation border=\\&quot;20px_solid_white\\&quot; \\\/&gt;\\n&lt;\\\/cld-image&gt;&quot;,&quot;status&quot;:51,&quot;statusText&quot;:&quot;Ruby code_generator_failed_unexpectedly&quot;,&quot;displayName&quot;:&quot;Vue.js&quot;,&quot;packageName&quot;:&quot;cloudinary-vue&quot;,&quot;packageStatus&quot;:&quot;legacy&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;angular_2&quot;,&quot;framework&quot;:&quot;angular_2&quot;,&quot;language&quot;:&quot;angular&quot;,&quot;rawCodeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;strings.jpg\\&quot;).addTransformation(\\n  \\&quot;w_1000,c_scale\\\/$effect_!sepia!\\\/e_$effect\\\/bo_20px_solid_white\\&quot;\\n);&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;strings.jpg\\&quot;).addTransformation(\\n  \\&quot;w_1000,c_scale\\\/$effect_!sepia!\\\/e_$effect\\\/bo_20px_solid_white\\&quot;\\n);&quot;,&quot;status&quot;:50,&quot;statusText&quot;:&quot;Ruby action_generator_failed_unexpectedly&quot;,&quot;displayName&quot;:&quot;Angular&quot;,&quot;packageName&quot;:&quot;@cloudinary\\\/ng&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;angular&quot;,&quot;framework&quot;:&quot;angular&quot;,&quot;language&quot;:&quot;angular&quot;,&quot;rawCodeSnippet&quot;:&quot;&lt;cl-image public-id=\\&quot;strings.jpg\\&quot; &gt; &lt;cl-transformation width=\\&quot;1000\\&quot; crop=\\&quot;scale\\&quot;&gt; &lt;\\\/cl-transformation&gt; &lt;cl-transformation variables=\\&quot;[[&#039;$effect&#039;, &#039;!sepia!&#039;]]\\&quot;&gt; &lt;\\\/cl-transformation&gt; &lt;cl-transformation effect=\\&quot;$effect\\&quot;&gt; &lt;\\\/cl-transformation&gt; &lt;cl-transformation border=\\&quot;20px_solid_white\\&quot;&gt; &lt;\\\/cl-transformation&gt; &lt;\\\/cl-image&gt;&quot;,&quot;codeSnippet&quot;:&quot;&lt;cl-image public-id=\\&quot;strings.jpg\\&quot; &gt;\\n\\t&lt;cl-transformation width=\\&quot;1000\\&quot; crop=\\&quot;scale\\&quot;&gt;\\n\\t&lt;\\\/cl-transformation&gt;\\n\\t&lt;cl-transformation variables=\\&quot;[[&#039;$effect&#039;, &#039;!sepia!&#039;]]\\&quot;&gt;\\n\\t&lt;\\\/cl-transformation&gt;\\n\\t&lt;cl-transformation effect=\\&quot;$effect\\&quot;&gt;\\n\\t&lt;\\\/cl-transformation&gt;\\n\\t&lt;cl-transformation border=\\&quot;20px_solid_white\\&quot;&gt;\\n\\t&lt;\\\/cl-transformation&gt;\\n&lt;\\\/cl-image&gt;&quot;,&quot;status&quot;:51,&quot;statusText&quot;:&quot;Ruby code_generator_failed_unexpectedly&quot;,&quot;displayName&quot;:&quot;Angular&quot;,&quot;packageName&quot;:&quot;@cloudinary\\\/angular-5.x&quot;,&quot;packageStatus&quot;:&quot;legacy&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;js_2&quot;,&quot;framework&quot;:&quot;js_2&quot;,&quot;language&quot;:&quot;js&quot;,&quot;rawCodeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;strings.jpg\\&quot;).addTransformation(\\n  \\&quot;w_1000,c_scale\\\/$effect_!sepia!\\\/e_$effect\\\/bo_20px_solid_white\\&quot;\\n);&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;strings.jpg\\&quot;).addTransformation(\\n  \\&quot;w_1000,c_scale\\\/$effect_!sepia!\\\/e_$effect\\\/bo_20px_solid_white\\&quot;\\n);&quot;,&quot;status&quot;:50,&quot;statusText&quot;:&quot;Ruby action_generator_failed_unexpectedly&quot;,&quot;displayName&quot;:&quot;JS&quot;,&quot;packageName&quot;:&quot;@cloudinary\\\/url-gen&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;js&quot;,&quot;framework&quot;:&quot;js&quot;,&quot;language&quot;:&quot;js&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.imageTag(&#039;strings.jpg&#039;, {transformation: [ {width: 1000, crop: \\&quot;scale\\&quot;}, {variables: [[\\&quot;$effect\\&quot;, \\&quot;!sepia!\\&quot;]]}, {effect: \\&quot;$effect\\&quot;}, {border: \\&quot;20px_solid_white\\&quot;} ]}).toHtml();&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.imageTag(&#039;strings.jpg&#039;, {transformation: [\\n  {width: 1000, crop: \\&quot;scale\\&quot;},\\n  {variables: [[\\&quot;$effect\\&quot;, \\&quot;!sepia!\\&quot;]]},\\n  {effect: \\&quot;$effect\\&quot;},\\n  {border: \\&quot;20px_solid_white\\&quot;}\\n  ]}).toHtml();&quot;,&quot;status&quot;:51,&quot;statusText&quot;:&quot;Ruby code_generator_failed_unexpectedly&quot;,&quot;displayName&quot;:&quot;JS&quot;,&quot;packageName&quot;:&quot;cloudinary-core&quot;,&quot;packageStatus&quot;:&quot;legacy&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;},{&quot;sdkId&quot;:&quot;python&quot;,&quot;framework&quot;:&quot;python&quot;,&quot;language&quot;:&quot;python&quot;,&quot;rawCodeSnippet&quot;:&quot;CloudinaryImage(\\&quot;strings.jpg\\&quot;).image(transformation=[ {&#039;width&#039;: 1000, &#039;crop&#039;: \\&quot;scale\\&quot;}, {&#039;variables&#039;: [[\\&quot;$effect\\&quot;, \\&quot;!sepia!\\&quot;]]}, {&#039;effect&#039;: \\&quot;$effect\\&quot;}, {&#039;border&#039;: \\&quot;20px_solid_white\\&quot;} ])&quot;,&quot;codeSnippet&quot;:&quot;CloudinaryImage(\\&quot;strings.jpg\\&quot;).image(transformation=[\\n  {&#039;width&#039;: 1000, &#039;crop&#039;: \\&quot;scale\\&quot;},\\n  {&#039;variables&#039;: [[\\&quot;$effect\\&quot;, \\&quot;!sepia!\\&quot;]]},\\n  {&#039;effect&#039;: \\&quot;$effect\\&quot;},\\n  {&#039;border&#039;: \\&quot;20px_solid_white\\&quot;}\\n  ])&quot;,&quot;status&quot;:51,&quot;statusText&quot;:&quot;Ruby code_generator_failed_unexpectedly&quot;,&quot;displayName&quot;:&quot;Python&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;php_2&quot;,&quot;framework&quot;:&quot;php_2&quot;,&quot;language&quot;:&quot;php&quot;,&quot;rawCodeSnippet&quot;:&quot;(new ImageTag(&#039;strings.jpg&#039;))\\n\\t-&gt;addTransformation(\\&quot;w_1000,c_scale\\\/$effect_!sepia!\\\/e_$effect\\\/bo_20px_solid_white\\&quot;);&quot;,&quot;codeSnippet&quot;:&quot;(new ImageTag(&#039;strings.jpg&#039;))\\n\\t-&gt;addTransformation(\\&quot;w_1000,c_scale\\\/$effect_!sepia!\\\/e_$effect\\\/bo_20px_solid_white\\&quot;);&quot;,&quot;status&quot;:50,&quot;statusText&quot;:&quot;Ruby action_generator_failed_unexpectedly&quot;,&quot;displayName&quot;:&quot;PHP&quot;,&quot;packageName&quot;:&quot;cloudinary_php&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;3.x&quot;},{&quot;sdkId&quot;:&quot;php&quot;,&quot;framework&quot;:&quot;php&quot;,&quot;language&quot;:&quot;php&quot;,&quot;rawCodeSnippet&quot;:&quot;cl_image_tag(\\&quot;strings.jpg\\&quot;, array(\\&quot;transformation\\&quot;=&gt;array( array(\\&quot;width\\&quot;=&gt;1000, \\&quot;crop\\&quot;=&gt;\\&quot;scale\\&quot;), array(\\&quot;variables\\&quot;=&gt;array(array(\\&quot;$effect\\&quot;, \\&quot;!sepia!\\&quot;))), array(\\&quot;effect\\&quot;=&gt;\\&quot;$effect\\&quot;), array(\\&quot;border\\&quot;=&gt;\\&quot;20px_solid_white\\&quot;) )))&quot;,&quot;codeSnippet&quot;:&quot;cl_image_tag(\\&quot;strings.jpg\\&quot;, array(\\&quot;transformation\\&quot;=&gt;array(\\n  array(\\&quot;width\\&quot;=&gt;1000, \\&quot;crop\\&quot;=&gt;\\&quot;scale\\&quot;),\\n  array(\\&quot;variables\\&quot;=&gt;array(array(\\&quot;$effect\\&quot;, \\&quot;!sepia!\\&quot;))),\\n  array(\\&quot;effect\\&quot;=&gt;\\&quot;$effect\\&quot;),\\n  array(\\&quot;border\\&quot;=&gt;\\&quot;20px_solid_white\\&quot;)\\n  )))&quot;,&quot;status&quot;:51,&quot;statusText&quot;:&quot;Ruby code_generator_failed_unexpectedly&quot;,&quot;displayName&quot;:&quot;PHP&quot;,&quot;packageName&quot;:&quot;cloudinary_php&quot;,&quot;packageStatus&quot;:&quot;legacy&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;java&quot;,&quot;framework&quot;:&quot;java&quot;,&quot;language&quot;:&quot;java&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.url().transformation(new Transformation().width(1000).crop(\\&quot;scale\\&quot;).chain() .variables(variable(\\&quot;$effect\\&quot;,\\&quot;!sepia!\\&quot;)).chain() .effect(\\&quot;$effect\\&quot;).chain() .border(\\&quot;20px_solid_white\\&quot;)).imageTag(\\&quot;strings.jpg\\&quot;);&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.url().transformation(new Transformation()\\n  .width(1000).crop(\\&quot;scale\\&quot;).chain()\\n  .variables(variable(\\&quot;$effect\\&quot;,\\&quot;!sepia!\\&quot;)).chain()\\n  .effect(\\&quot;$effect\\&quot;).chain()\\n  .border(\\&quot;20px_solid_white\\&quot;)).imageTag(\\&quot;strings.jpg\\&quot;);&quot;,&quot;status&quot;:51,&quot;statusText&quot;:&quot;Ruby code_generator_failed_unexpectedly&quot;,&quot;displayName&quot;:&quot;Java&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;},{&quot;sdkId&quot;:&quot;ruby&quot;,&quot;framework&quot;:&quot;ruby&quot;,&quot;language&quot;:&quot;ruby&quot;,&quot;rawCodeSnippet&quot;:&quot;cl_image_tag(\\&quot;strings.jpg\\&quot;, transformation: [ {width: 1000, crop: \\&quot;scale\\&quot;}, {variables: [[\\&quot;$effect\\&quot;, \\&quot;!sepia!\\&quot;]]}, {effect: \\&quot;$effect\\&quot;}, {border: \\&quot;20px_solid_white\\&quot;} ])&quot;,&quot;codeSnippet&quot;:&quot;cl_image_tag(\\&quot;strings.jpg\\&quot;, transformation: [\\n  {width: 1000, crop: \\&quot;scale\\&quot;},\\n  {variables: [[\\&quot;$effect\\&quot;, \\&quot;!sepia!\\&quot;]]},\\n  {effect: \\&quot;$effect\\&quot;},\\n  {border: \\&quot;20px_solid_white\\&quot;}\\n  ])&quot;,&quot;status&quot;:51,&quot;statusText&quot;:&quot;Ruby code_generator_failed_unexpectedly&quot;,&quot;displayName&quot;:&quot;Ruby&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;},{&quot;sdkId&quot;:&quot;csharp&quot;,&quot;framework&quot;:&quot;csharp&quot;,&quot;language&quot;:&quot;csharp&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.Api.UrlImgUp.Transform(new Transformation().Width(1000).Crop(\\&quot;scale\\&quot;).Chain() .Variables(\\&quot;$effect\\&quot;, !sepia!).Chain() .Effect(\\&quot;$effect\\&quot;).Chain() .Border(\\&quot;20px_solid_white\\&quot;)).BuildImageTag(\\&quot;strings.jpg\\&quot;)&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.Api.UrlImgUp.Transform(new Transformation()\\n  .Width(1000).Crop(\\&quot;scale\\&quot;).Chain()\\n  .Variables(\\&quot;$effect\\&quot;, !sepia!).Chain()\\n  .Effect(\\&quot;$effect\\&quot;).Chain()\\n  .Border(\\&quot;20px_solid_white\\&quot;)).BuildImageTag(\\&quot;strings.jpg\\&quot;)&quot;,&quot;status&quot;:51,&quot;statusText&quot;:&quot;Ruby code_generator_failed_unexpectedly&quot;,&quot;displayName&quot;:&quot;.NET&quot;,&quot;packageName&quot;:&quot;CloudinaryDotNet&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;dart&quot;,&quot;framework&quot;:&quot;dart&quot;,&quot;language&quot;:&quot;dart&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.image(&#039;strings.jpg&#039;).transformation(Transformation()\\n\\t.addTransformation(\\&quot;w_1000,c_scale\\\/$effect_!sepia!\\\/e_$effect\\\/bo_20px_solid_white\\&quot;));&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image(&#039;strings.jpg&#039;).transformation(Transformation()\\n\\t.addTransformation(\\&quot;w_1000,c_scale\\\/$effect_!sepia!\\\/e_$effect\\\/bo_20px_solid_white\\&quot;));&quot;,&quot;status&quot;:50,&quot;statusText&quot;:&quot;Ruby action_generator_failed_unexpectedly&quot;,&quot;displayName&quot;:&quot;Dart&quot;,&quot;packageName&quot;:&quot;cloudinary_dart&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;swift&quot;,&quot;framework&quot;:&quot;swift&quot;,&quot;language&quot;:&quot;swift&quot;,&quot;rawCodeSnippet&quot;:&quot;imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setWidth(1000).setCrop(\\&quot;scale\\&quot;).chain() .chain() .setEffect(\\&quot;$effect\\&quot;).chain() .setBorder(\\&quot;20px_solid_white\\&quot;)).generate(\\&quot;strings.jpg\\&quot;)!, cloudinary: cloudinary)&quot;,&quot;codeSnippet&quot;:&quot;imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation()\\n  .setWidth(1000).setCrop(\\&quot;scale\\&quot;).chain()\\n  .chain()\\n  .setEffect(\\&quot;$effect\\&quot;).chain()\\n  .setBorder(\\&quot;20px_solid_white\\&quot;)).generate(\\&quot;strings.jpg\\&quot;)!, cloudinary: cloudinary)&quot;,&quot;status&quot;:51,&quot;statusText&quot;:&quot;Ruby code_generator_failed_unexpectedly&quot;,&quot;displayName&quot;:&quot;iOS&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;5.x&quot;},{&quot;sdkId&quot;:&quot;android&quot;,&quot;framework&quot;:&quot;android&quot;,&quot;language&quot;:&quot;android&quot;,&quot;rawCodeSnippet&quot;:&quot;MediaManager.get().url().transformation(new Transformation().width(1000).crop(\\&quot;scale\\&quot;).chain() .variables(variable(\\&quot;$effect\\&quot;,\\&quot;!sepia!\\&quot;)).chain() .effect(\\&quot;$effect\\&quot;).chain() .border(\\&quot;20px_solid_white\\&quot;)).generate(\\&quot;strings.jpg\\&quot;);&quot;,&quot;codeSnippet&quot;:&quot;MediaManager.get().url().transformation(new Transformation()\\n  .width(1000).crop(\\&quot;scale\\&quot;).chain()\\n  .variables(variable(\\&quot;$effect\\&quot;,\\&quot;!sepia!\\&quot;)).chain()\\n  .effect(\\&quot;$effect\\&quot;).chain()\\n  .border(\\&quot;20px_solid_white\\&quot;)).generate(\\&quot;strings.jpg\\&quot;);&quot;,&quot;status&quot;:51,&quot;statusText&quot;:&quot;Ruby code_generator_failed_unexpectedly&quot;,&quot;displayName&quot;:&quot;Android&quot;,&quot;packageName&quot;:&quot;cloudinary-android&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;3.x&quot;},{&quot;sdkId&quot;:&quot;flutter&quot;,&quot;framework&quot;:&quot;flutter&quot;,&quot;language&quot;:&quot;flutter&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.image(&#039;strings.jpg&#039;).transformation(Transformation()\\n\\t.addTransformation(\\&quot;w_1000,c_scale\\\/$effect_!sepia!\\\/e_$effect\\\/bo_20px_solid_white\\&quot;));&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image(&#039;strings.jpg&#039;).transformation(Transformation()\\n\\t.addTransformation(\\&quot;w_1000,c_scale\\\/$effect_!sepia!\\\/e_$effect\\\/bo_20px_solid_white\\&quot;));&quot;,&quot;status&quot;:50,&quot;statusText&quot;:&quot;Ruby action_generator_failed_unexpectedly&quot;,&quot;displayName&quot;:&quot;Flutter&quot;,&quot;packageName&quot;:&quot;cloudinary_flutter&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;kotlin&quot;,&quot;framework&quot;:&quot;kotlin&quot;,&quot;language&quot;:&quot;kotlin&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.image {\\n\\tpublicId(\\&quot;strings.jpg\\&quot;)\\n\\t addTransformation(\\&quot;w_1000,c_scale\\\/\\\\$effect_!sepia!\\\/e_\\\\$effect\\\/bo_20px_solid_white\\&quot;) \\n}.generate()&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image {\\n\\tpublicId(\\&quot;strings.jpg\\&quot;)\\n\\t addTransformation(\\&quot;w_1000,c_scale\\\/\\\\$effect_!sepia!\\\/e_\\\\$effect\\\/bo_20px_solid_white\\&quot;) \\n}.generate()&quot;,&quot;status&quot;:50,&quot;statusText&quot;:&quot;Ruby action_generator_failed_unexpectedly&quot;,&quot;displayName&quot;:&quot;Kotlin&quot;,&quot;packageName&quot;:&quot;kotlin-url-gen&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;jquery&quot;,&quot;framework&quot;:&quot;jquery&quot;,&quot;language&quot;:&quot;jquery&quot;,&quot;rawCodeSnippet&quot;:&quot;$.cloudinary.image(\\&quot;strings.jpg\\&quot;, {transformation: [ {width: 1000, crop: \\&quot;scale\\&quot;}, {variables: [[\\&quot;$effect\\&quot;, \\&quot;!sepia!\\&quot;]]}, {effect: \\&quot;$effect\\&quot;}, {border: \\&quot;20px_solid_white\\&quot;} ]})&quot;,&quot;codeSnippet&quot;:&quot;$.cloudinary.image(\\&quot;strings.jpg\\&quot;, {transformation: [\\n  {width: 1000, crop: \\&quot;scale\\&quot;},\\n  {variables: [[\\&quot;$effect\\&quot;, \\&quot;!sepia!\\&quot;]]},\\n  {effect: \\&quot;$effect\\&quot;},\\n  {border: \\&quot;20px_solid_white\\&quot;}\\n  ]})&quot;,&quot;status&quot;:51,&quot;statusText&quot;:&quot;Ruby code_generator_failed_unexpectedly&quot;,&quot;displayName&quot;:&quot;jQuery&quot;,&quot;packageName&quot;:&quot;cloudinary-jquery&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;},{&quot;sdkId&quot;:&quot;react_native&quot;,&quot;framework&quot;:&quot;react_native&quot;,&quot;language&quot;:&quot;react_native&quot;,&quot;rawCodeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;strings.jpg\\&quot;).addTransformation(\\n  \\&quot;w_1000,c_scale\\\/$effect_!sepia!\\\/e_$effect\\\/bo_20px_solid_white\\&quot;\\n);&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;strings.jpg\\&quot;).addTransformation(\\n  \\&quot;w_1000,c_scale\\\/$effect_!sepia!\\\/e_$effect\\\/bo_20px_solid_white\\&quot;\\n);&quot;,&quot;status&quot;:50,&quot;statusText&quot;:&quot;Ruby action_generator_failed_unexpectedly&quot;,&quot;displayName&quot;:&quot;React Native&quot;,&quot;packageName&quot;:&quot;cloudinary-react-native&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;}]\"\n      parsed-url=\"{&quot;url&quot;:&quot;https:\\\/\\\/res.cloudinary.com\\\/demo\\\/image\\\/upload\\\/w_1000,c_scale\\\/$effect_!sepia!\\\/e_$effect\\\/bo_20px_solid_white\\\/strings.jpg&quot;,&quot;cloud_name&quot;:&quot;demo&quot;,&quot;host&quot;:&quot;res.cloudinary.com&quot;,&quot;type&quot;:&quot;upload&quot;,&quot;resource_type&quot;:&quot;image&quot;,&quot;transformation&quot;:[{&quot;width&quot;:&quot;1000&quot;,&quot;crop_mode&quot;:&quot;scale&quot;},{&quot;$effect&quot;:&quot;!sepia!&quot;},{&quot;effect&quot;:&quot;$effect&quot;},{&quot;border&quot;:&quot;20px_solid_white&quot;}],&quot;transformation_string&quot;:&quot;w_1000,c_scale\\\/$effect_!sepia!\\\/e_$effect\\\/bo_20px_solid_white&quot;,&quot;url_suffix&quot;:&quot;&quot;,&quot;version&quot;:&quot;&quot;,&quot;secure&quot;:true,&quot;public_id&quot;:&quot;strings.jpg&quot;,&quot;extension&quot;:&quot;jpg&quot;,&quot;format&quot;:&quot;jpg&quot;,&quot;format_code&quot;:true,&quot;url_code&quot;:false,&quot;signature&quot;:&quot;&quot;,&quot;private_cdn&quot;:false,&quot;result_asset_type&quot;:&quot;image&quot;,&quot;error&quot;:{}}\"\n      with-url=\"true\"\n    >\n      <span class=\"u-visually-hidden\">Loading code examples<\/span>\n    <\/cld-code-widget><\/p>\n<h3>Text overlays<\/h3>\n<p>You can also use string variables for the text, or even part of the text, in a text overlay. To differentiate the variable from the rest of the text in the text overlay, there\u2019s a special variable syntax: <code>$(variablename)<\/code>. Below, the text overlay has fixed text <code>\u00a9<\/code> followed by the variable <code>name<\/code>, using the syntax <code>$(name)<\/code>.<\/p>\n<p><cld-code-widget\n      class=\" c-code-widget\"\n      snippets=\"[{&quot;sdkId&quot;:&quot;nodejs&quot;,&quot;framework&quot;:&quot;nodejs&quot;,&quot;language&quot;:&quot;nodejs&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.image(\\&quot;canyons.jpg\\&quot;, {transformation: [ {variables: [[\\&quot;$name\\&quot;, \\&quot;!Jane Smith!\\&quot;]]}, {width: 1080, crop: \\&quot;scale\\&quot;}, {overlay: {font_family: \\&quot;MS\\&quot;, font_size: 36, text: \\&quot;%20%C2%A9%24%28name%29%20\\&quot;}, gravity: \\&quot;south_east\\&quot;, x: 10, y: 10, background: \\&quot;#e7e5e5\\&quot;, opacity: 75, radius: 15} ]})&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image(\\&quot;canyons.jpg\\&quot;, {transformation: [\\n  {variables: [[\\&quot;$name\\&quot;, \\&quot;!Jane Smith!\\&quot;]]},\\n  {width: 1080, crop: \\&quot;scale\\&quot;},\\n  {overlay: {font_family: \\&quot;MS\\&quot;, font_size: 36, text: \\&quot;%20%C2%A9%24%28name%29%20\\&quot;}, gravity: \\&quot;south_east\\&quot;, x: 10, y: 10, background: \\&quot;#e7e5e5\\&quot;, opacity: 75, radius: 15}\\n  ]})&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Node.js&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;},{&quot;sdkId&quot;:&quot;react_2&quot;,&quot;framework&quot;:&quot;react_2&quot;,&quot;language&quot;:&quot;react&quot;,&quot;rawCodeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;canyons.jpg\\&quot;)\\n  .addVariable(set(\\&quot;name\\&quot;, \\&quot;Jane Smith\\&quot;))\\n  .resize(scale().width(1080))\\n  .overlay(\\n    source(\\n      text(\\&quot; \\u00a9$(name) \\&quot;, new TextStyle(\\&quot;Comic Sans MS\\&quot;, 36))\\n        .backgroundColor(\\&quot;#e7e5e5\\&quot;)\\n        .transformation(\\n          new Transformation().roundCorners(byRadius(15)).adjust(opacity(75))\\n        )\\n    ).position(\\n      new Position()\\n        .gravity(compass(\\&quot;south_east\\&quot;))\\n        .offsetX(10)\\n        .offsetY(10)\\n    )\\n  );&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;canyons.jpg\\&quot;)\\n  .addVariable(set(\\&quot;name\\&quot;, \\&quot;Jane Smith\\&quot;))\\n  .resize(scale().width(1080))\\n  .overlay(\\n    source(\\n      text(\\&quot; \\u00a9$(name) \\&quot;, new TextStyle(\\&quot;Comic Sans MS\\&quot;, 36))\\n        .backgroundColor(\\&quot;#e7e5e5\\&quot;)\\n        .transformation(\\n          new Transformation().roundCorners(byRadius(15)).adjust(opacity(75))\\n        )\\n    ).position(\\n      new Position()\\n        .gravity(compass(\\&quot;south_east\\&quot;))\\n        .offsetX(10)\\n        .offsetY(10)\\n    )\\n  );&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;React&quot;,&quot;packageName&quot;:&quot;@cloudinary\\\/react&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;react&quot;,&quot;framework&quot;:&quot;react&quot;,&quot;language&quot;:&quot;react&quot;,&quot;rawCodeSnippet&quot;:&quot;&lt;Image publicId=\\&quot;canyons.jpg\\&quot; &gt; &lt;Transformation variables={[[\\&quot;$name\\&quot;, \\&quot;!Jane Smith!\\&quot;]]} \\\/&gt; &lt;Transformation width=\\&quot;1080\\&quot; crop=\\&quot;scale\\&quot; \\\/&gt; &lt;Transformation overlay={{fontFamily: \\&quot;MS\\&quot;, fontSize: 36, text: \\&quot;%20%C2%A9%24%28name%29%20\\&quot;}} gravity=\\&quot;south_east\\&quot; x=\\&quot;10\\&quot; y=\\&quot;10\\&quot; background=\\&quot;#e7e5e5\\&quot; opacity=\\&quot;75\\&quot; radius=\\&quot;15\\&quot; \\\/&gt; &lt;\\\/Image&gt;&quot;,&quot;codeSnippet&quot;:&quot;&lt;Image publicId=\\&quot;canyons.jpg\\&quot; &gt;\\n\\t&lt;Transformation variables={[[\\&quot;$name\\&quot;, \\&quot;!Jane Smith!\\&quot;]]} \\\/&gt;\\n\\t&lt;Transformation width=\\&quot;1080\\&quot; crop=\\&quot;scale\\&quot; \\\/&gt;\\n\\t&lt;Transformation overlay={{fontFamily: \\&quot;MS\\&quot;, fontSize: 36, text: \\&quot;%20%C2%A9%24%28name%29%20\\&quot;}} gravity=\\&quot;south_east\\&quot; x=\\&quot;10\\&quot; y=\\&quot;10\\&quot; background=\\&quot;#e7e5e5\\&quot; opacity=\\&quot;75\\&quot; radius=\\&quot;15\\&quot; \\\/&gt;\\n&lt;\\\/Image&gt;&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;React&quot;,&quot;packageName&quot;:&quot;cloudinary-react&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;vue_2&quot;,&quot;framework&quot;:&quot;vue_2&quot;,&quot;language&quot;:&quot;vue&quot;,&quot;rawCodeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;canyons.jpg\\&quot;)\\n  .addVariable(set(\\&quot;name\\&quot;, \\&quot;Jane Smith\\&quot;))\\n  .resize(scale().width(1080))\\n  .overlay(\\n    source(\\n      text(\\&quot; \\u00a9$(name) \\&quot;, new TextStyle(\\&quot;Comic Sans MS\\&quot;, 36))\\n        .backgroundColor(\\&quot;#e7e5e5\\&quot;)\\n        .transformation(\\n          new Transformation().roundCorners(byRadius(15)).adjust(opacity(75))\\n        )\\n    ).position(\\n      new Position()\\n        .gravity(compass(\\&quot;south_east\\&quot;))\\n        .offsetX(10)\\n        .offsetY(10)\\n    )\\n  );&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;canyons.jpg\\&quot;)\\n  .addVariable(set(\\&quot;name\\&quot;, \\&quot;Jane Smith\\&quot;))\\n  .resize(scale().width(1080))\\n  .overlay(\\n    source(\\n      text(\\&quot; \\u00a9$(name) \\&quot;, new TextStyle(\\&quot;Comic Sans MS\\&quot;, 36))\\n        .backgroundColor(\\&quot;#e7e5e5\\&quot;)\\n        .transformation(\\n          new Transformation().roundCorners(byRadius(15)).adjust(opacity(75))\\n        )\\n    ).position(\\n      new Position()\\n        .gravity(compass(\\&quot;south_east\\&quot;))\\n        .offsetX(10)\\n        .offsetY(10)\\n    )\\n  );&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Vue.js&quot;,&quot;packageName&quot;:&quot;@cloudinary\\\/vue&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;vue&quot;,&quot;framework&quot;:&quot;vue&quot;,&quot;language&quot;:&quot;vue&quot;,&quot;rawCodeSnippet&quot;:&quot;&lt;cld-image public-id=\\&quot;canyons.jpg\\&quot; &gt; &lt;cld-transformation :variables=\\&quot;[[&#039;$name&#039;, &#039;!Jane Smith!&#039;]]\\&quot; \\\/&gt; &lt;cld-transformation width=\\&quot;1080\\&quot; crop=\\&quot;scale\\&quot; \\\/&gt; &lt;cld-transformation :overlay=\\&quot;{fontFamily: &#039;MS&#039;, fontSize: 36, text: &#039;%20%C2%A9%24%28name%29%20&#039;}\\&quot; gravity=\\&quot;south_east\\&quot; x=\\&quot;10\\&quot; y=\\&quot;10\\&quot; background=\\&quot;#e7e5e5\\&quot; opacity=\\&quot;75\\&quot; radius=\\&quot;15\\&quot; \\\/&gt; &lt;\\\/cld-image&gt;&quot;,&quot;codeSnippet&quot;:&quot;&lt;cld-image public-id=\\&quot;canyons.jpg\\&quot; &gt;\\n\\t&lt;cld-transformation :variables=\\&quot;[[&#039;$name&#039;, &#039;!Jane Smith!&#039;]]\\&quot; \\\/&gt;\\n\\t&lt;cld-transformation width=\\&quot;1080\\&quot; crop=\\&quot;scale\\&quot; \\\/&gt;\\n\\t&lt;cld-transformation :overlay=\\&quot;{fontFamily: &#039;MS&#039;, fontSize: 36, text: &#039;%20%C2%A9%24%28name%29%20&#039;}\\&quot; gravity=\\&quot;south_east\\&quot; x=\\&quot;10\\&quot; y=\\&quot;10\\&quot; background=\\&quot;#e7e5e5\\&quot; opacity=\\&quot;75\\&quot; radius=\\&quot;15\\&quot; \\\/&gt;\\n&lt;\\\/cld-image&gt;&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Vue.js&quot;,&quot;packageName&quot;:&quot;cloudinary-vue&quot;,&quot;packageStatus&quot;:&quot;legacy&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;angular_2&quot;,&quot;framework&quot;:&quot;angular_2&quot;,&quot;language&quot;:&quot;angular&quot;,&quot;rawCodeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;canyons.jpg\\&quot;)\\n  .addVariable(set(\\&quot;name\\&quot;, \\&quot;Jane Smith\\&quot;))\\n  .resize(scale().width(1080))\\n  .overlay(\\n    source(\\n      text(\\&quot; \\u00a9$(name) \\&quot;, new TextStyle(\\&quot;Comic Sans MS\\&quot;, 36))\\n        .backgroundColor(\\&quot;#e7e5e5\\&quot;)\\n        .transformation(\\n          new Transformation().roundCorners(byRadius(15)).adjust(opacity(75))\\n        )\\n    ).position(\\n      new Position()\\n        .gravity(compass(\\&quot;south_east\\&quot;))\\n        .offsetX(10)\\n        .offsetY(10)\\n    )\\n  );&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;canyons.jpg\\&quot;)\\n  .addVariable(set(\\&quot;name\\&quot;, \\&quot;Jane Smith\\&quot;))\\n  .resize(scale().width(1080))\\n  .overlay(\\n    source(\\n      text(\\&quot; \\u00a9$(name) \\&quot;, new TextStyle(\\&quot;Comic Sans MS\\&quot;, 36))\\n        .backgroundColor(\\&quot;#e7e5e5\\&quot;)\\n        .transformation(\\n          new Transformation().roundCorners(byRadius(15)).adjust(opacity(75))\\n        )\\n    ).position(\\n      new Position()\\n        .gravity(compass(\\&quot;south_east\\&quot;))\\n        .offsetX(10)\\n        .offsetY(10)\\n    )\\n  );&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Angular&quot;,&quot;packageName&quot;:&quot;@cloudinary\\\/ng&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;angular&quot;,&quot;framework&quot;:&quot;angular&quot;,&quot;language&quot;:&quot;angular&quot;,&quot;rawCodeSnippet&quot;:&quot;&lt;cl-image public-id=\\&quot;canyons.jpg\\&quot; &gt; &lt;cl-transformation variables=\\&quot;[[&#039;$name&#039;, &#039;!Jane Smith!&#039;]]\\&quot;&gt; &lt;\\\/cl-transformation&gt; &lt;cl-transformation width=\\&quot;1080\\&quot; crop=\\&quot;scale\\&quot;&gt; &lt;\\\/cl-transformation&gt; &lt;cl-transformation overlay=\\&quot;text:Comic%20Sans%20MS_36:%20%C2%A9%24%28name%29%20\\&quot; gravity=\\&quot;south_east\\&quot; x=\\&quot;10\\&quot; y=\\&quot;10\\&quot; background=\\&quot;#e7e5e5\\&quot; opacity=\\&quot;75\\&quot; radius=\\&quot;15\\&quot;&gt; &lt;\\\/cl-transformation&gt; &lt;\\\/cl-image&gt;&quot;,&quot;codeSnippet&quot;:&quot;&lt;cl-image public-id=\\&quot;canyons.jpg\\&quot; &gt;\\n\\t&lt;cl-transformation variables=\\&quot;[[&#039;$name&#039;, &#039;!Jane Smith!&#039;]]\\&quot;&gt;\\n\\t&lt;\\\/cl-transformation&gt;\\n\\t&lt;cl-transformation width=\\&quot;1080\\&quot; crop=\\&quot;scale\\&quot;&gt;\\n\\t&lt;\\\/cl-transformation&gt;\\n\\t&lt;cl-transformation overlay=\\&quot;text:Comic%20Sans%20MS_36:%20%C2%A9%24%28name%29%20\\&quot; gravity=\\&quot;south_east\\&quot; x=\\&quot;10\\&quot; y=\\&quot;10\\&quot; background=\\&quot;#e7e5e5\\&quot; opacity=\\&quot;75\\&quot; radius=\\&quot;15\\&quot;&gt;\\n\\t&lt;\\\/cl-transformation&gt;\\n&lt;\\\/cl-image&gt;&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Angular&quot;,&quot;packageName&quot;:&quot;@cloudinary\\\/angular-5.x&quot;,&quot;packageStatus&quot;:&quot;legacy&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;js_2&quot;,&quot;framework&quot;:&quot;js_2&quot;,&quot;language&quot;:&quot;js&quot;,&quot;rawCodeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;canyons.jpg\\&quot;)\\n  .addVariable(set(\\&quot;name\\&quot;, \\&quot;Jane Smith\\&quot;))\\n  .resize(scale().width(1080))\\n  .overlay(\\n    source(\\n      text(\\&quot; \\u00a9$(name) \\&quot;, new TextStyle(\\&quot;Comic Sans MS\\&quot;, 36))\\n        .backgroundColor(\\&quot;#e7e5e5\\&quot;)\\n        .transformation(\\n          new Transformation().roundCorners(byRadius(15)).adjust(opacity(75))\\n        )\\n    ).position(\\n      new Position()\\n        .gravity(compass(\\&quot;south_east\\&quot;))\\n        .offsetX(10)\\n        .offsetY(10)\\n    )\\n  );&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;canyons.jpg\\&quot;)\\n  .addVariable(set(\\&quot;name\\&quot;, \\&quot;Jane Smith\\&quot;))\\n  .resize(scale().width(1080))\\n  .overlay(\\n    source(\\n      text(\\&quot; \\u00a9$(name) \\&quot;, new TextStyle(\\&quot;Comic Sans MS\\&quot;, 36))\\n        .backgroundColor(\\&quot;#e7e5e5\\&quot;)\\n        .transformation(\\n          new Transformation().roundCorners(byRadius(15)).adjust(opacity(75))\\n        )\\n    ).position(\\n      new Position()\\n        .gravity(compass(\\&quot;south_east\\&quot;))\\n        .offsetX(10)\\n        .offsetY(10)\\n    )\\n  );&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;JS&quot;,&quot;packageName&quot;:&quot;@cloudinary\\\/url-gen&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;js&quot;,&quot;framework&quot;:&quot;js&quot;,&quot;language&quot;:&quot;js&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.imageTag(&#039;canyons.jpg&#039;, {transformation: [ {variables: [[\\&quot;$name\\&quot;, \\&quot;!Jane Smith!\\&quot;]]}, {width: 1080, crop: \\&quot;scale\\&quot;}, {overlay: new cloudinary.TextLayer().fontFamily(\\&quot;MS\\&quot;).fontSize(36).text(\\&quot;%20%C2%A9%24%28name%29%20\\&quot;), gravity: \\&quot;south_east\\&quot;, x: 10, y: 10, background: \\&quot;#e7e5e5\\&quot;, opacity: 75, radius: 15} ]}).toHtml();&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.imageTag(&#039;canyons.jpg&#039;, {transformation: [\\n  {variables: [[\\&quot;$name\\&quot;, \\&quot;!Jane Smith!\\&quot;]]},\\n  {width: 1080, crop: \\&quot;scale\\&quot;},\\n  {overlay: new cloudinary.TextLayer().fontFamily(\\&quot;MS\\&quot;).fontSize(36).text(\\&quot;%20%C2%A9%24%28name%29%20\\&quot;), gravity: \\&quot;south_east\\&quot;, x: 10, y: 10, background: \\&quot;#e7e5e5\\&quot;, opacity: 75, radius: 15}\\n  ]}).toHtml();&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;JS&quot;,&quot;packageName&quot;:&quot;cloudinary-core&quot;,&quot;packageStatus&quot;:&quot;legacy&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;},{&quot;sdkId&quot;:&quot;python&quot;,&quot;framework&quot;:&quot;python&quot;,&quot;language&quot;:&quot;python&quot;,&quot;rawCodeSnippet&quot;:&quot;CloudinaryImage(\\&quot;canyons.jpg\\&quot;).image(transformation=[ {&#039;variables&#039;: [[\\&quot;$name\\&quot;, \\&quot;!Jane Smith!\\&quot;]]}, {&#039;width&#039;: 1080, &#039;crop&#039;: \\&quot;scale\\&quot;}, {&#039;overlay&#039;: {&#039;font_family&#039;: \\&quot;MS\\&quot;, &#039;font_size&#039;: 36, &#039;text&#039;: \\&quot;%20%C2%A9%24%28name%29%20\\&quot;}, &#039;gravity&#039;: \\&quot;south_east\\&quot;, &#039;x&#039;: 10, &#039;y&#039;: 10, &#039;background&#039;: \\&quot;#e7e5e5\\&quot;, &#039;opacity&#039;: 75, &#039;radius&#039;: 15} ])&quot;,&quot;codeSnippet&quot;:&quot;CloudinaryImage(\\&quot;canyons.jpg\\&quot;).image(transformation=[\\n  {&#039;variables&#039;: [[\\&quot;$name\\&quot;, \\&quot;!Jane Smith!\\&quot;]]},\\n  {&#039;width&#039;: 1080, &#039;crop&#039;: \\&quot;scale\\&quot;},\\n  {&#039;overlay&#039;: {&#039;font_family&#039;: \\&quot;MS\\&quot;, &#039;font_size&#039;: 36, &#039;text&#039;: \\&quot;%20%C2%A9%24%28name%29%20\\&quot;}, &#039;gravity&#039;: \\&quot;south_east\\&quot;, &#039;x&#039;: 10, &#039;y&#039;: 10, &#039;background&#039;: \\&quot;#e7e5e5\\&quot;, &#039;opacity&#039;: 75, &#039;radius&#039;: 15}\\n  ])&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Python&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;php_2&quot;,&quot;framework&quot;:&quot;php_2&quot;,&quot;language&quot;:&quot;php&quot;,&quot;rawCodeSnippet&quot;:&quot;(new ImageTag(&#039;canyons.jpg&#039;))\\n\\t-&gt;addVariable(Variable::set(\\&quot;name\\&quot;,\\&quot;Jane Smith\\&quot;))\\n\\t-&gt;resize(Resize::scale()-&gt;width(1080))\\n\\t-&gt;overlay(Overlay::source(\\n\\tSource::text(\\&quot; \\u00a9$(name) \\&quot;,(new TextStyle(\\&quot;Comic Sans MS\\&quot;,36)))\\n\\t-&gt;backgroundColor(Color::rgb(\\&quot;e7e5e5\\&quot;))\\n\\t-&gt;transformation((new Transformation())\\n\\t-&gt;roundCorners(RoundCorners::byRadius(15))\\n\\t-&gt;adjust(Adjust::opacity(75)))\\n\\t)\\n\\t-&gt;position((new Position())\\n\\t-&gt;gravity(\\n\\tGravity::compass(\\n\\tCompass::southEast()))\\n-&gt;offsetX(10)\\n-&gt;offsetY(10))\\n\\t);&quot;,&quot;codeSnippet&quot;:&quot;(new ImageTag(&#039;canyons.jpg&#039;))\\n\\t-&gt;addVariable(Variable::set(\\&quot;name\\&quot;,\\&quot;Jane Smith\\&quot;))\\n\\t-&gt;resize(Resize::scale()-&gt;width(1080))\\n\\t-&gt;overlay(Overlay::source(\\n\\tSource::text(\\&quot; \\u00a9$(name) \\&quot;,(new TextStyle(\\&quot;Comic Sans MS\\&quot;,36)))\\n\\t-&gt;backgroundColor(Color::rgb(\\&quot;e7e5e5\\&quot;))\\n\\t-&gt;transformation((new Transformation())\\n\\t-&gt;roundCorners(RoundCorners::byRadius(15))\\n\\t-&gt;adjust(Adjust::opacity(75)))\\n\\t)\\n\\t-&gt;position((new Position())\\n\\t-&gt;gravity(\\n\\tGravity::compass(\\n\\tCompass::southEast()))\\n-&gt;offsetX(10)\\n-&gt;offsetY(10))\\n\\t);&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;PHP&quot;,&quot;packageName&quot;:&quot;cloudinary_php&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;3.x&quot;},{&quot;sdkId&quot;:&quot;php&quot;,&quot;framework&quot;:&quot;php&quot;,&quot;language&quot;:&quot;php&quot;,&quot;rawCodeSnippet&quot;:&quot;cl_image_tag(\\&quot;canyons.jpg\\&quot;, array(\\&quot;transformation\\&quot;=&gt;array( array(\\&quot;variables\\&quot;=&gt;array(array(\\&quot;$name\\&quot;, \\&quot;!Jane Smith!\\&quot;))), array(\\&quot;width\\&quot;=&gt;1080, \\&quot;crop\\&quot;=&gt;\\&quot;scale\\&quot;), array(\\&quot;overlay\\&quot;=&gt;array(\\&quot;font_family\\&quot;=&gt;\\&quot;MS\\&quot;, \\&quot;font_size\\&quot;=&gt;36, \\&quot;text\\&quot;=&gt;\\&quot;%20%C2%A9%24%28name%29%20\\&quot;), \\&quot;gravity\\&quot;=&gt;\\&quot;south_east\\&quot;, \\&quot;x\\&quot;=&gt;10, \\&quot;y\\&quot;=&gt;10, \\&quot;background\\&quot;=&gt;\\&quot;#e7e5e5\\&quot;, \\&quot;opacity\\&quot;=&gt;75, \\&quot;radius\\&quot;=&gt;15) )))&quot;,&quot;codeSnippet&quot;:&quot;cl_image_tag(\\&quot;canyons.jpg\\&quot;, array(\\&quot;transformation\\&quot;=&gt;array(\\n  array(\\&quot;variables\\&quot;=&gt;array(array(\\&quot;$name\\&quot;, \\&quot;!Jane Smith!\\&quot;))),\\n  array(\\&quot;width\\&quot;=&gt;1080, \\&quot;crop\\&quot;=&gt;\\&quot;scale\\&quot;),\\n  array(\\&quot;overlay\\&quot;=&gt;array(\\&quot;font_family\\&quot;=&gt;\\&quot;MS\\&quot;, \\&quot;font_size\\&quot;=&gt;36, \\&quot;text\\&quot;=&gt;\\&quot;%20%C2%A9%24%28name%29%20\\&quot;), \\&quot;gravity\\&quot;=&gt;\\&quot;south_east\\&quot;, \\&quot;x\\&quot;=&gt;10, \\&quot;y\\&quot;=&gt;10, \\&quot;background\\&quot;=&gt;\\&quot;#e7e5e5\\&quot;, \\&quot;opacity\\&quot;=&gt;75, \\&quot;radius\\&quot;=&gt;15)\\n  )))&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;PHP&quot;,&quot;packageName&quot;:&quot;cloudinary_php&quot;,&quot;packageStatus&quot;:&quot;legacy&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;java&quot;,&quot;framework&quot;:&quot;java&quot;,&quot;language&quot;:&quot;java&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.url().transformation(new Transformation().variables(variable(\\&quot;$name\\&quot;,\\&quot;!Jane Smith!\\&quot;)).chain() .width(1080).crop(\\&quot;scale\\&quot;).chain() .overlay(new TextLayer().fontFamily(\\&quot;MS\\&quot;).fontSize(36).text(\\&quot;%20%C2%A9%24%28name%29%20\\&quot;)).gravity(\\&quot;south_east\\&quot;).x(10).y(10).background(\\&quot;#e7e5e5\\&quot;).opacity(75).radius(15)).imageTag(\\&quot;canyons.jpg\\&quot;);&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.url().transformation(new Transformation()\\n  .variables(variable(\\&quot;$name\\&quot;,\\&quot;!Jane Smith!\\&quot;)).chain()\\n  .width(1080).crop(\\&quot;scale\\&quot;).chain()\\n  .overlay(new TextLayer().fontFamily(\\&quot;MS\\&quot;).fontSize(36).text(\\&quot;%20%C2%A9%24%28name%29%20\\&quot;)).gravity(\\&quot;south_east\\&quot;).x(10).y(10).background(\\&quot;#e7e5e5\\&quot;).opacity(75).radius(15)).imageTag(\\&quot;canyons.jpg\\&quot;);&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Java&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;},{&quot;sdkId&quot;:&quot;ruby&quot;,&quot;framework&quot;:&quot;ruby&quot;,&quot;language&quot;:&quot;ruby&quot;,&quot;rawCodeSnippet&quot;:&quot;cl_image_tag(\\&quot;canyons.jpg\\&quot;, transformation: [ {variables: [[\\&quot;$name\\&quot;, \\&quot;!Jane Smith!\\&quot;]]}, {width: 1080, crop: \\&quot;scale\\&quot;}, {overlay: {font_family: \\&quot;MS\\&quot;, font_size: 36, text: \\&quot;%20%C2%A9%24%28name%29%20\\&quot;}, gravity: \\&quot;south_east\\&quot;, x: 10, y: 10, background: \\&quot;#e7e5e5\\&quot;, opacity: 75, radius: 15} ])&quot;,&quot;codeSnippet&quot;:&quot;cl_image_tag(\\&quot;canyons.jpg\\&quot;, transformation: [\\n  {variables: [[\\&quot;$name\\&quot;, \\&quot;!Jane Smith!\\&quot;]]},\\n  {width: 1080, crop: \\&quot;scale\\&quot;},\\n  {overlay: {font_family: \\&quot;MS\\&quot;, font_size: 36, text: \\&quot;%20%C2%A9%24%28name%29%20\\&quot;}, gravity: \\&quot;south_east\\&quot;, x: 10, y: 10, background: \\&quot;#e7e5e5\\&quot;, opacity: 75, radius: 15}\\n  ])&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Ruby&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;},{&quot;sdkId&quot;:&quot;csharp&quot;,&quot;framework&quot;:&quot;csharp&quot;,&quot;language&quot;:&quot;csharp&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.Api.UrlImgUp.Transform(new Transformation().Variables(\\&quot;$name\\&quot;, !Jane Smith!).Chain() .Width(1080).Crop(\\&quot;scale\\&quot;).Chain() .Overlay(new TextLayer().FontFamily(\\&quot;MS\\&quot;).FontSize(36).Text(\\&quot;%20%C2%A9%24%28name%29%20\\&quot;)).Gravity(\\&quot;south_east\\&quot;).X(10).Y(10).Background(\\&quot;#e7e5e5\\&quot;).Opacity(75).Radius(15)).BuildImageTag(\\&quot;canyons.jpg\\&quot;)&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.Api.UrlImgUp.Transform(new Transformation()\\n  .Variables(\\&quot;$name\\&quot;, !Jane Smith!).Chain()\\n  .Width(1080).Crop(\\&quot;scale\\&quot;).Chain()\\n  .Overlay(new TextLayer().FontFamily(\\&quot;MS\\&quot;).FontSize(36).Text(\\&quot;%20%C2%A9%24%28name%29%20\\&quot;)).Gravity(\\&quot;south_east\\&quot;).X(10).Y(10).Background(\\&quot;#e7e5e5\\&quot;).Opacity(75).Radius(15)).BuildImageTag(\\&quot;canyons.jpg\\&quot;)&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;.NET&quot;,&quot;packageName&quot;:&quot;CloudinaryDotNet&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;dart&quot;,&quot;framework&quot;:&quot;dart&quot;,&quot;language&quot;:&quot;dart&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.image(&#039;canyons.jpg&#039;).transformation(Transformation()\\n\\t.addTransformation(\\&quot;$name_!Jane Smith!\\\/w_1080\\\/l_text:Comic Sans MS_36: \\u00a9$(name) ,g_south_east,x_10,y_10,b_rgb:e7e5e5,o_75,r_15\\&quot;));&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image(&#039;canyons.jpg&#039;).transformation(Transformation()\\n\\t.addTransformation(\\&quot;$name_!Jane Smith!\\\/w_1080\\\/l_text:Comic Sans MS_36: \\u00a9$(name) ,g_south_east,x_10,y_10,b_rgb:e7e5e5,o_75,r_15\\&quot;));&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Dart&quot;,&quot;packageName&quot;:&quot;cloudinary_dart&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;swift&quot;,&quot;framework&quot;:&quot;swift&quot;,&quot;language&quot;:&quot;swift&quot;,&quot;rawCodeSnippet&quot;:&quot;imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().chain() .setWidth(1080).setCrop(\\&quot;scale\\&quot;).chain() .setOverlay(\\&quot;text:Comic%20Sans%20MS_36:%20%C2%A9%24%28name%29%20\\&quot;).setGravity(\\&quot;south_east\\&quot;).setX(10).setY(10).setBackground(\\&quot;#e7e5e5\\&quot;).setOpacity(75).setRadius(15)).generate(\\&quot;canyons.jpg\\&quot;)!, cloudinary: cloudinary)&quot;,&quot;codeSnippet&quot;:&quot;imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation()\\n  .chain()\\n  .setWidth(1080).setCrop(\\&quot;scale\\&quot;).chain()\\n  .setOverlay(\\&quot;text:Comic%20Sans%20MS_36:%20%C2%A9%24%28name%29%20\\&quot;).setGravity(\\&quot;south_east\\&quot;).setX(10).setY(10).setBackground(\\&quot;#e7e5e5\\&quot;).setOpacity(75).setRadius(15)).generate(\\&quot;canyons.jpg\\&quot;)!, cloudinary: cloudinary)&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;iOS&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;5.x&quot;},{&quot;sdkId&quot;:&quot;android&quot;,&quot;framework&quot;:&quot;android&quot;,&quot;language&quot;:&quot;android&quot;,&quot;rawCodeSnippet&quot;:&quot;MediaManager.get().url().transformation(new Transformation().variables(variable(\\&quot;$name\\&quot;,\\&quot;!Jane Smith!\\&quot;)).chain() .width(1080).crop(\\&quot;scale\\&quot;).chain() .overlay(new TextLayer().fontFamily(\\&quot;MS\\&quot;).fontSize(36).text(\\&quot;%20%C2%A9%24%28name%29%20\\&quot;)).gravity(\\&quot;south_east\\&quot;).x(10).y(10).background(\\&quot;#e7e5e5\\&quot;).opacity(75).radius(15)).generate(\\&quot;canyons.jpg\\&quot;);&quot;,&quot;codeSnippet&quot;:&quot;MediaManager.get().url().transformation(new Transformation()\\n  .variables(variable(\\&quot;$name\\&quot;,\\&quot;!Jane Smith!\\&quot;)).chain()\\n  .width(1080).crop(\\&quot;scale\\&quot;).chain()\\n  .overlay(new TextLayer().fontFamily(\\&quot;MS\\&quot;).fontSize(36).text(\\&quot;%20%C2%A9%24%28name%29%20\\&quot;)).gravity(\\&quot;south_east\\&quot;).x(10).y(10).background(\\&quot;#e7e5e5\\&quot;).opacity(75).radius(15)).generate(\\&quot;canyons.jpg\\&quot;);&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Android&quot;,&quot;packageName&quot;:&quot;cloudinary-android&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;3.x&quot;},{&quot;sdkId&quot;:&quot;flutter&quot;,&quot;framework&quot;:&quot;flutter&quot;,&quot;language&quot;:&quot;flutter&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.image(&#039;canyons.jpg&#039;).transformation(Transformation()\\n\\t.addTransformation(\\&quot;$name_!Jane Smith!\\\/w_1080\\\/l_text:Comic Sans MS_36: \\u00a9$(name) ,g_south_east,x_10,y_10,b_rgb:e7e5e5,o_75,r_15\\&quot;));&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image(&#039;canyons.jpg&#039;).transformation(Transformation()\\n\\t.addTransformation(\\&quot;$name_!Jane Smith!\\\/w_1080\\\/l_text:Comic Sans MS_36: \\u00a9$(name) ,g_south_east,x_10,y_10,b_rgb:e7e5e5,o_75,r_15\\&quot;));&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Flutter&quot;,&quot;packageName&quot;:&quot;cloudinary_flutter&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;kotlin&quot;,&quot;framework&quot;:&quot;kotlin&quot;,&quot;language&quot;:&quot;kotlin&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.image {\\n\\tpublicId(\\&quot;canyons.jpg\\&quot;)\\n\\t addVariable(Variable.set(\\&quot;name\\&quot;,\\&quot;Jane Smith\\&quot;))\\n\\t resize(Resize.scale() { width(1080) })\\n\\t overlay(Overlay.source(\\n\\tSource.text(\\&quot; \\u00a9\\\\$(name) \\&quot;,TextStyle(\\&quot;Comic Sans MS\\&quot;,36)) {\\n\\t backgroundColor(Color.rgb(\\&quot;e7e5e5\\&quot;))\\n\\t transformation(Transformation {\\n\\t roundCorners(RoundCorners.byRadius(15))\\n\\t adjust(Adjust.opacity(75)) })\\n\\t }) {\\n\\t position(Position() {\\n\\t gravity(\\n\\tGravity.compass(\\n\\tCompass.southEast()))\\n offsetX(10)\\n offsetY(10) })\\n\\t }) \\n}.generate()&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image {\\n\\tpublicId(\\&quot;canyons.jpg\\&quot;)\\n\\t addVariable(Variable.set(\\&quot;name\\&quot;,\\&quot;Jane Smith\\&quot;))\\n\\t resize(Resize.scale() { width(1080) })\\n\\t overlay(Overlay.source(\\n\\tSource.text(\\&quot; \\u00a9\\\\$(name) \\&quot;,TextStyle(\\&quot;Comic Sans MS\\&quot;,36)) {\\n\\t backgroundColor(Color.rgb(\\&quot;e7e5e5\\&quot;))\\n\\t transformation(Transformation {\\n\\t roundCorners(RoundCorners.byRadius(15))\\n\\t adjust(Adjust.opacity(75)) })\\n\\t }) {\\n\\t position(Position() {\\n\\t gravity(\\n\\tGravity.compass(\\n\\tCompass.southEast()))\\n offsetX(10)\\n offsetY(10) })\\n\\t }) \\n}.generate()&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Kotlin&quot;,&quot;packageName&quot;:&quot;kotlin-url-gen&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;jquery&quot;,&quot;framework&quot;:&quot;jquery&quot;,&quot;language&quot;:&quot;jquery&quot;,&quot;rawCodeSnippet&quot;:&quot;$.cloudinary.image(\\&quot;canyons.jpg\\&quot;, {transformation: [ {variables: [[\\&quot;$name\\&quot;, \\&quot;!Jane Smith!\\&quot;]]}, {width: 1080, crop: \\&quot;scale\\&quot;}, {overlay: new cloudinary.TextLayer().fontFamily(\\&quot;MS\\&quot;).fontSize(36).text(\\&quot;%20%C2%A9%24%28name%29%20\\&quot;), gravity: \\&quot;south_east\\&quot;, x: 10, y: 10, background: \\&quot;#e7e5e5\\&quot;, opacity: 75, radius: 15} ]})&quot;,&quot;codeSnippet&quot;:&quot;$.cloudinary.image(\\&quot;canyons.jpg\\&quot;, {transformation: [\\n  {variables: [[\\&quot;$name\\&quot;, \\&quot;!Jane Smith!\\&quot;]]},\\n  {width: 1080, crop: \\&quot;scale\\&quot;},\\n  {overlay: new cloudinary.TextLayer().fontFamily(\\&quot;MS\\&quot;).fontSize(36).text(\\&quot;%20%C2%A9%24%28name%29%20\\&quot;), gravity: \\&quot;south_east\\&quot;, x: 10, y: 10, background: \\&quot;#e7e5e5\\&quot;, opacity: 75, radius: 15}\\n  ]})&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;jQuery&quot;,&quot;packageName&quot;:&quot;cloudinary-jquery&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;},{&quot;sdkId&quot;:&quot;react_native&quot;,&quot;framework&quot;:&quot;react_native&quot;,&quot;language&quot;:&quot;react_native&quot;,&quot;rawCodeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;canyons.jpg\\&quot;)\\n  .addVariable(set(\\&quot;name\\&quot;, \\&quot;Jane Smith\\&quot;))\\n  .resize(scale().width(1080))\\n  .overlay(\\n    source(\\n      text(\\&quot; \\u00a9$(name) \\&quot;, new TextStyle(\\&quot;Comic Sans MS\\&quot;, 36))\\n        .backgroundColor(\\&quot;#e7e5e5\\&quot;)\\n        .transformation(\\n          new Transformation().roundCorners(byRadius(15)).adjust(opacity(75))\\n        )\\n    ).position(\\n      new Position()\\n        .gravity(compass(\\&quot;south_east\\&quot;))\\n        .offsetX(10)\\n        .offsetY(10)\\n    )\\n  );&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;canyons.jpg\\&quot;)\\n  .addVariable(set(\\&quot;name\\&quot;, \\&quot;Jane Smith\\&quot;))\\n  .resize(scale().width(1080))\\n  .overlay(\\n    source(\\n      text(\\&quot; \\u00a9$(name) \\&quot;, new TextStyle(\\&quot;Comic Sans MS\\&quot;, 36))\\n        .backgroundColor(\\&quot;#e7e5e5\\&quot;)\\n        .transformation(\\n          new Transformation().roundCorners(byRadius(15)).adjust(opacity(75))\\n        )\\n    ).position(\\n      new Position()\\n        .gravity(compass(\\&quot;south_east\\&quot;))\\n        .offsetX(10)\\n        .offsetY(10)\\n    )\\n  );&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;React Native&quot;,&quot;packageName&quot;:&quot;cloudinary-react-native&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;}]\"\n      parsed-url=\"{&quot;url&quot;:&quot;https:\\\/\\\/res.cloudinary.com\\\/demo\\\/image\\\/upload\\\/$name_!Jane%20Smith!\\\/w_1080\\\/l_text:Comic%20Sans%20MS_36:%20%C2%A9$(name)%20,g_south_east,x_10,y_10,b_rgb:e7e5e5,o_75,r_15\\\/canyons.jpg&quot;,&quot;cloud_name&quot;:&quot;demo&quot;,&quot;host&quot;:&quot;res.cloudinary.com&quot;,&quot;type&quot;:&quot;upload&quot;,&quot;resource_type&quot;:&quot;image&quot;,&quot;transformation&quot;:[{&quot;$name&quot;:&quot;!Jane Smith!&quot;},{&quot;width&quot;:&quot;1080&quot;},{&quot;overlay&quot;:&quot;text:Comic Sans MS_36: \\u00a9$(name) &quot;,&quot;gravity&quot;:&quot;south_east&quot;,&quot;x&quot;:&quot;10&quot;,&quot;y&quot;:&quot;10&quot;,&quot;background&quot;:&quot;rgb:e7e5e5&quot;,&quot;opacity&quot;:&quot;75&quot;,&quot;radius&quot;:&quot;15&quot;}],&quot;transformation_string&quot;:&quot;$name_!Jane Smith!\\\/w_1080\\\/l_text:Comic Sans MS_36: \\u00a9$(name) ,g_south_east,x_10,y_10,b_rgb:e7e5e5,o_75,r_15&quot;,&quot;url_suffix&quot;:&quot;&quot;,&quot;version&quot;:&quot;&quot;,&quot;secure&quot;:true,&quot;public_id&quot;:&quot;canyons.jpg&quot;,&quot;extension&quot;:&quot;jpg&quot;,&quot;format&quot;:&quot;jpg&quot;,&quot;format_code&quot;:true,&quot;url_code&quot;:false,&quot;signature&quot;:&quot;&quot;,&quot;private_cdn&quot;:false,&quot;result_asset_type&quot;:&quot;image&quot;}\"\n      with-url=\"true\"\n    >\n      <span class=\"u-visually-hidden\">Loading code examples<\/span>\n    <\/cld-code-widget><a class=\"c-image-link\" href=\"https:\/\/res.cloudinary.com\/demo\/image\/upload\/$name_!Jane%20Smith!\/w_1080\/l_text:Comic%20Sans%20MS_36:%20%C2%A9$(name)%20,g_south_east,x_10,y_10,b_rgb:e7e5e5,o_75,r_15\/canyons.jpg\" target=\"_blank\"><img decoding=\"async\" src=\"https:\/\/res.cloudinary.com\/demo\/image\/upload\/$name_!Jane Smith!\/w_1080\/l_text:Comic Sans MS_36: \u00a9$(name) ,g_south_east,x_10,y_10,b_rgb:e7e5e5,o_75,r_15\/w_400\/canyons.jpg\" alt=\"Photo with photographer name as text overlay\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"400\" height=\"269\"\/><\/a><\/p>\n<p><strong>Note<\/strong>: You can substitute user-defined variables for the value of all single-value numeric transformation parameters and some of the string transformation parameters. (See the documentation for the <a href=\"https:\/\/cloudinary.com\/documentation\/image_transformations#usage_guidelines\">exact list<\/a>.)<\/p>\n<h2>Achieving full separation<\/h2>\n<p>To simplify the examples above, we demonstrated assigning variable values and using the variables within transformations, together in the same delivery URL.<\/p>\n<p>However, in most real-life scenarios, you will probably use variable transformations within a <a href=\"\/documentation\/image_transformations#named_transformations\">named transformation<\/a>. A <strong>named transformation<\/strong> is kind of like a transformation function you can \u2018call\u2019 from any transformation URL. But until now, you couldn\u2019t pass any external values to the named transformation. Now with user-defined variables you can.<\/p>\n<p>User-defined variables thus enable a complete separation of the transformation from the values used for delivery; a separation of the design and content logic from the technical logic.<\/p>\n<p>This separation takes named transformations to a whole new level, making it significantly easier to reuse common transformations for many images, even when some specific adjustments must be made to the transformation depending on the specific image, the location where the image is displayed, or other dependencies.<\/p>\n<p>For example, we\u2019ve saved a transformation similar to the one used in the canyon photo above, in a named transformation called <code>signed_photos<\/code>. The named transformation sets the font type and size, the location of the text overlay, parameters that define the semi-transparent background for the text, and also includes variables for the photographer\u2019s name and for the final width of the photo to deliver:<\/p>\n<p><strong>signed_photos transformation<\/strong>:  <code>c_scale,w_1080\/b_rgb:e7e5e5,g_south_east,l_text:Comic Sans MS_30: \u00a9 $(name)%20,o_60,r_15,x_10,y_10\/c_scale,w_$finalwidth<\/code><\/p>\n<p>Using that named transformation, you could then deliver any image by assigning the relevant photographer name and the final width you want for the resulting image, and then specifying the named transformation and any public ID:<\/p>\n<p><cld-code-widget\n      class=\" c-code-widget\"\n      snippets=\"[{&quot;sdkId&quot;:&quot;nodejs&quot;,&quot;framework&quot;:&quot;nodejs&quot;,&quot;language&quot;:&quot;nodejs&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.image(\\&quot;greece_seaport.jpg\\&quot;, {transformation: [ {variables: [[\\&quot;$name\\&quot;, \\&quot;!Jack Ross!\\&quot;], [\\&quot;$finalwidth\\&quot;, \\&quot;600\\&quot;]]}, {transformation: [\\&quot;signed_photos\\&quot;]} ]})&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image(\\&quot;greece_seaport.jpg\\&quot;, {transformation: [\\n  {variables: [[\\&quot;$name\\&quot;, \\&quot;!Jack Ross!\\&quot;], [\\&quot;$finalwidth\\&quot;, \\&quot;600\\&quot;]]},\\n  {transformation: [\\&quot;signed_photos\\&quot;]}\\n  ]})&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Node.js&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;},{&quot;sdkId&quot;:&quot;react_2&quot;,&quot;framework&quot;:&quot;react_2&quot;,&quot;language&quot;:&quot;react&quot;,&quot;rawCodeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;greece_seaport.jpg\\&quot;)\\n  .addVariable(set(\\&quot;name\\&quot;, \\&quot;Jack Ross\\&quot;))\\n  .addVariable(set(\\&quot;finalwidth\\&quot;, 600))\\n  .namedTransformation(name(\\&quot;signed_photos\\&quot;));&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;greece_seaport.jpg\\&quot;)\\n  .addVariable(set(\\&quot;name\\&quot;, \\&quot;Jack Ross\\&quot;))\\n  .addVariable(set(\\&quot;finalwidth\\&quot;, 600))\\n  .namedTransformation(name(\\&quot;signed_photos\\&quot;));&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;React&quot;,&quot;packageName&quot;:&quot;@cloudinary\\\/react&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;react&quot;,&quot;framework&quot;:&quot;react&quot;,&quot;language&quot;:&quot;react&quot;,&quot;rawCodeSnippet&quot;:&quot;&lt;Image publicId=\\&quot;greece_seaport.jpg\\&quot; &gt; &lt;Transformation variables={[[\\&quot;$name\\&quot;, \\&quot;!Jack Ross!\\&quot;], [\\&quot;$finalwidth\\&quot;, \\&quot;600\\&quot;]]} \\\/&gt; &lt;Transformation transformation={[\\&quot;signed_photos\\&quot;]} \\\/&gt; &lt;\\\/Image&gt;&quot;,&quot;codeSnippet&quot;:&quot;&lt;Image publicId=\\&quot;greece_seaport.jpg\\&quot; &gt;\\n\\t&lt;Transformation variables={[[\\&quot;$name\\&quot;, \\&quot;!Jack Ross!\\&quot;], [\\&quot;$finalwidth\\&quot;, \\&quot;600\\&quot;]]} \\\/&gt;\\n\\t&lt;Transformation transformation={[\\&quot;signed_photos\\&quot;]} \\\/&gt;\\n&lt;\\\/Image&gt;&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;React&quot;,&quot;packageName&quot;:&quot;cloudinary-react&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;vue_2&quot;,&quot;framework&quot;:&quot;vue_2&quot;,&quot;language&quot;:&quot;vue&quot;,&quot;rawCodeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;greece_seaport.jpg\\&quot;)\\n  .addVariable(set(\\&quot;name\\&quot;, \\&quot;Jack Ross\\&quot;))\\n  .addVariable(set(\\&quot;finalwidth\\&quot;, 600))\\n  .namedTransformation(name(\\&quot;signed_photos\\&quot;));&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;greece_seaport.jpg\\&quot;)\\n  .addVariable(set(\\&quot;name\\&quot;, \\&quot;Jack Ross\\&quot;))\\n  .addVariable(set(\\&quot;finalwidth\\&quot;, 600))\\n  .namedTransformation(name(\\&quot;signed_photos\\&quot;));&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Vue.js&quot;,&quot;packageName&quot;:&quot;@cloudinary\\\/vue&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;vue&quot;,&quot;framework&quot;:&quot;vue&quot;,&quot;language&quot;:&quot;vue&quot;,&quot;rawCodeSnippet&quot;:&quot;&lt;cld-image public-id=\\&quot;greece_seaport.jpg\\&quot; &gt; &lt;cld-transformation :variables=\\&quot;[[&#039;$name&#039;, &#039;!Jack Ross!&#039;], [&#039;$finalwidth&#039;, &#039;600&#039;]]\\&quot; \\\/&gt; &lt;cld-transformation transformation={[\\&quot;signed_photos\\&quot;]} \\\/&gt; &lt;\\\/cld-image&gt;&quot;,&quot;codeSnippet&quot;:&quot;&lt;cld-image public-id=\\&quot;greece_seaport.jpg\\&quot; &gt;\\n\\t&lt;cld-transformation :variables=\\&quot;[[&#039;$name&#039;, &#039;!Jack Ross!&#039;], [&#039;$finalwidth&#039;, &#039;600&#039;]]\\&quot; \\\/&gt;\\n\\t&lt;cld-transformation transformation={[\\&quot;signed_photos\\&quot;]} \\\/&gt;\\n&lt;\\\/cld-image&gt;&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Vue.js&quot;,&quot;packageName&quot;:&quot;cloudinary-vue&quot;,&quot;packageStatus&quot;:&quot;legacy&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;angular_2&quot;,&quot;framework&quot;:&quot;angular_2&quot;,&quot;language&quot;:&quot;angular&quot;,&quot;rawCodeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;greece_seaport.jpg\\&quot;)\\n  .addVariable(set(\\&quot;name\\&quot;, \\&quot;Jack Ross\\&quot;))\\n  .addVariable(set(\\&quot;finalwidth\\&quot;, 600))\\n  .namedTransformation(name(\\&quot;signed_photos\\&quot;));&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;greece_seaport.jpg\\&quot;)\\n  .addVariable(set(\\&quot;name\\&quot;, \\&quot;Jack Ross\\&quot;))\\n  .addVariable(set(\\&quot;finalwidth\\&quot;, 600))\\n  .namedTransformation(name(\\&quot;signed_photos\\&quot;));&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Angular&quot;,&quot;packageName&quot;:&quot;@cloudinary\\\/ng&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;angular&quot;,&quot;framework&quot;:&quot;angular&quot;,&quot;language&quot;:&quot;angular&quot;,&quot;rawCodeSnippet&quot;:&quot;&lt;cl-image public-id=\\&quot;greece_seaport.jpg\\&quot; &gt; &lt;cl-transformation variables=\\&quot;[[&#039;$name&#039;, &#039;!Jack Ross!&#039;], [&#039;$finalwidth&#039;, &#039;600&#039;]]\\&quot;&gt; &lt;\\\/cl-transformation&gt; &lt;cl-transformation transformation={{[\\&quot;signed_photos\\&quot;]}}&gt; &lt;\\\/cl-transformation&gt; &lt;\\\/cl-image&gt;&quot;,&quot;codeSnippet&quot;:&quot;&lt;cl-image public-id=\\&quot;greece_seaport.jpg\\&quot; &gt;\\n\\t&lt;cl-transformation variables=\\&quot;[[&#039;$name&#039;, &#039;!Jack Ross!&#039;], [&#039;$finalwidth&#039;, &#039;600&#039;]]\\&quot;&gt;\\n\\t&lt;\\\/cl-transformation&gt;\\n\\t&lt;cl-transformation transformation={{[\\&quot;signed_photos\\&quot;]}}&gt;\\n\\t&lt;\\\/cl-transformation&gt;\\n&lt;\\\/cl-image&gt;&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Angular&quot;,&quot;packageName&quot;:&quot;@cloudinary\\\/angular-5.x&quot;,&quot;packageStatus&quot;:&quot;legacy&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;js_2&quot;,&quot;framework&quot;:&quot;js_2&quot;,&quot;language&quot;:&quot;js&quot;,&quot;rawCodeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;greece_seaport.jpg\\&quot;)\\n  .addVariable(set(\\&quot;name\\&quot;, \\&quot;Jack Ross\\&quot;))\\n  .addVariable(set(\\&quot;finalwidth\\&quot;, 600))\\n  .namedTransformation(name(\\&quot;signed_photos\\&quot;));&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;greece_seaport.jpg\\&quot;)\\n  .addVariable(set(\\&quot;name\\&quot;, \\&quot;Jack Ross\\&quot;))\\n  .addVariable(set(\\&quot;finalwidth\\&quot;, 600))\\n  .namedTransformation(name(\\&quot;signed_photos\\&quot;));&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;JS&quot;,&quot;packageName&quot;:&quot;@cloudinary\\\/url-gen&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;js&quot;,&quot;framework&quot;:&quot;js&quot;,&quot;language&quot;:&quot;js&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.imageTag(&#039;greece_seaport.jpg&#039;, {transformation: [ {variables: [[\\&quot;$name\\&quot;, \\&quot;!Jack Ross!\\&quot;], [\\&quot;$finalwidth\\&quot;, \\&quot;600\\&quot;]]}, {transformation: [\\&quot;signed_photos\\&quot;]} ]}).toHtml();&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.imageTag(&#039;greece_seaport.jpg&#039;, {transformation: [\\n  {variables: [[\\&quot;$name\\&quot;, \\&quot;!Jack Ross!\\&quot;], [\\&quot;$finalwidth\\&quot;, \\&quot;600\\&quot;]]},\\n  {transformation: [\\&quot;signed_photos\\&quot;]}\\n  ]}).toHtml();&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;JS&quot;,&quot;packageName&quot;:&quot;cloudinary-core&quot;,&quot;packageStatus&quot;:&quot;legacy&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;},{&quot;sdkId&quot;:&quot;python&quot;,&quot;framework&quot;:&quot;python&quot;,&quot;language&quot;:&quot;python&quot;,&quot;rawCodeSnippet&quot;:&quot;CloudinaryImage(\\&quot;greece_seaport.jpg\\&quot;).image(transformation=[ {&#039;variables&#039;: [[\\&quot;$name\\&quot;, \\&quot;!Jack Ross!\\&quot;], [\\&quot;$finalwidth\\&quot;, \\&quot;600\\&quot;]]}, {&#039;transformation&#039;: [\\&quot;signed_photos\\&quot;]} ])&quot;,&quot;codeSnippet&quot;:&quot;CloudinaryImage(\\&quot;greece_seaport.jpg\\&quot;).image(transformation=[\\n  {&#039;variables&#039;: [[\\&quot;$name\\&quot;, \\&quot;!Jack Ross!\\&quot;], [\\&quot;$finalwidth\\&quot;, \\&quot;600\\&quot;]]},\\n  {&#039;transformation&#039;: [\\&quot;signed_photos\\&quot;]}\\n  ])&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Python&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;php_2&quot;,&quot;framework&quot;:&quot;php_2&quot;,&quot;language&quot;:&quot;php&quot;,&quot;rawCodeSnippet&quot;:&quot;(new ImageTag(&#039;greece_seaport.jpg&#039;))\\n\\t-&gt;addVariable(Variable::set(\\&quot;name\\&quot;,\\&quot;Jack Ross\\&quot;))\\n\\t-&gt;addVariable(Variable::set(\\&quot;finalwidth\\&quot;,600))\\n\\t-&gt;namedTransformation(NamedTransformation::name(\\&quot;signed_photos\\&quot;));&quot;,&quot;codeSnippet&quot;:&quot;(new ImageTag(&#039;greece_seaport.jpg&#039;))\\n\\t-&gt;addVariable(Variable::set(\\&quot;name\\&quot;,\\&quot;Jack Ross\\&quot;))\\n\\t-&gt;addVariable(Variable::set(\\&quot;finalwidth\\&quot;,600))\\n\\t-&gt;namedTransformation(NamedTransformation::name(\\&quot;signed_photos\\&quot;));&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;PHP&quot;,&quot;packageName&quot;:&quot;cloudinary_php&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;3.x&quot;},{&quot;sdkId&quot;:&quot;php&quot;,&quot;framework&quot;:&quot;php&quot;,&quot;language&quot;:&quot;php&quot;,&quot;rawCodeSnippet&quot;:&quot;cl_image_tag(\\&quot;greece_seaport.jpg\\&quot;, array(\\&quot;transformation\\&quot;=&gt;array( array(\\&quot;variables\\&quot;=&gt;array(array(\\&quot;$name\\&quot;, \\&quot;!Jack Ross!\\&quot;), array(\\&quot;$finalwidth\\&quot;, \\&quot;600\\&quot;))), array(\\&quot;transformation\\&quot;=&gt;array(\\&quot;signed_photos\\&quot;)) )))&quot;,&quot;codeSnippet&quot;:&quot;cl_image_tag(\\&quot;greece_seaport.jpg\\&quot;, array(\\&quot;transformation\\&quot;=&gt;array(\\n  array(\\&quot;variables\\&quot;=&gt;array(array(\\&quot;$name\\&quot;, \\&quot;!Jack Ross!\\&quot;), array(\\&quot;$finalwidth\\&quot;, \\&quot;600\\&quot;))),\\n  array(\\&quot;transformation\\&quot;=&gt;array(\\&quot;signed_photos\\&quot;))\\n  )))&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;PHP&quot;,&quot;packageName&quot;:&quot;cloudinary_php&quot;,&quot;packageStatus&quot;:&quot;legacy&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;java&quot;,&quot;framework&quot;:&quot;java&quot;,&quot;language&quot;:&quot;java&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.url().transformation(new Transformation().variables(variable(\\&quot;$name\\&quot;,\\&quot;!Jack Ross!\\&quot;),variable(\\&quot;$finalwidth\\&quot;,\\&quot;600\\&quot;)).chain() .named(\\&quot;signed_photos\\&quot;)).imageTag(\\&quot;greece_seaport.jpg\\&quot;);&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.url().transformation(new Transformation()\\n  .variables(variable(\\&quot;$name\\&quot;,\\&quot;!Jack Ross!\\&quot;),variable(\\&quot;$finalwidth\\&quot;,\\&quot;600\\&quot;)).chain()\\n  .named(\\&quot;signed_photos\\&quot;)).imageTag(\\&quot;greece_seaport.jpg\\&quot;);&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Java&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;},{&quot;sdkId&quot;:&quot;ruby&quot;,&quot;framework&quot;:&quot;ruby&quot;,&quot;language&quot;:&quot;ruby&quot;,&quot;rawCodeSnippet&quot;:&quot;cl_image_tag(\\&quot;greece_seaport.jpg\\&quot;, transformation: [ {variables: [[\\&quot;$name\\&quot;, \\&quot;!Jack Ross!\\&quot;], [\\&quot;$finalwidth\\&quot;, \\&quot;600\\&quot;]]}, {transformation: [\\&quot;signed_photos\\&quot;]} ])&quot;,&quot;codeSnippet&quot;:&quot;cl_image_tag(\\&quot;greece_seaport.jpg\\&quot;, transformation: [\\n  {variables: [[\\&quot;$name\\&quot;, \\&quot;!Jack Ross!\\&quot;], [\\&quot;$finalwidth\\&quot;, \\&quot;600\\&quot;]]},\\n  {transformation: [\\&quot;signed_photos\\&quot;]}\\n  ])&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Ruby&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;},{&quot;sdkId&quot;:&quot;csharp&quot;,&quot;framework&quot;:&quot;csharp&quot;,&quot;language&quot;:&quot;csharp&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.Api.UrlImgUp.Transform(new Transformation().Variables(\\&quot;$name\\&quot;, !Jack Ross!).Chain() .Named(\\&quot;signed_photos\\&quot;)).BuildImageTag(\\&quot;greece_seaport.jpg\\&quot;)&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.Api.UrlImgUp.Transform(new Transformation()\\n  .Variables(\\&quot;$name\\&quot;, !Jack Ross!).Chain()\\n  .Named(\\&quot;signed_photos\\&quot;)).BuildImageTag(\\&quot;greece_seaport.jpg\\&quot;)&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;.NET&quot;,&quot;packageName&quot;:&quot;CloudinaryDotNet&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;dart&quot;,&quot;framework&quot;:&quot;dart&quot;,&quot;language&quot;:&quot;dart&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.image(&#039;greece_seaport.jpg&#039;).transformation(Transformation()\\n\\t.addVariable(Variable.set(\\&quot;name\\&quot;,\\&quot;Jack Ross\\&quot;))\\n\\t.addVariable(Variable.set(\\&quot;finalwidth\\&quot;,600))\\n\\t.namedTransformation(NamedTransformation.name(\\&quot;signed_photos\\&quot;)));&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image(&#039;greece_seaport.jpg&#039;).transformation(Transformation()\\n\\t.addVariable(Variable.set(\\&quot;name\\&quot;,\\&quot;Jack Ross\\&quot;))\\n\\t.addVariable(Variable.set(\\&quot;finalwidth\\&quot;,600))\\n\\t.namedTransformation(NamedTransformation.name(\\&quot;signed_photos\\&quot;)));&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Dart&quot;,&quot;packageName&quot;:&quot;cloudinary_dart&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;swift&quot;,&quot;framework&quot;:&quot;swift&quot;,&quot;language&quot;:&quot;swift&quot;,&quot;rawCodeSnippet&quot;:&quot;imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().chain() .setNamed(\\&quot;signed_photos\\&quot;)).generate(\\&quot;greece_seaport.jpg\\&quot;)!, cloudinary: cloudinary)&quot;,&quot;codeSnippet&quot;:&quot;imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation()\\n  .chain()\\n  .setNamed(\\&quot;signed_photos\\&quot;)).generate(\\&quot;greece_seaport.jpg\\&quot;)!, cloudinary: cloudinary)&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;iOS&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;5.x&quot;},{&quot;sdkId&quot;:&quot;android&quot;,&quot;framework&quot;:&quot;android&quot;,&quot;language&quot;:&quot;android&quot;,&quot;rawCodeSnippet&quot;:&quot;MediaManager.get().url().transformation(new Transformation().variables(variable(\\&quot;$name\\&quot;,\\&quot;!Jack Ross!\\&quot;),variable(\\&quot;$finalwidth\\&quot;,\\&quot;600\\&quot;)).chain() .named(\\&quot;signed_photos\\&quot;)).generate(\\&quot;greece_seaport.jpg\\&quot;);&quot;,&quot;codeSnippet&quot;:&quot;MediaManager.get().url().transformation(new Transformation()\\n  .variables(variable(\\&quot;$name\\&quot;,\\&quot;!Jack Ross!\\&quot;),variable(\\&quot;$finalwidth\\&quot;,\\&quot;600\\&quot;)).chain()\\n  .named(\\&quot;signed_photos\\&quot;)).generate(\\&quot;greece_seaport.jpg\\&quot;);&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Android&quot;,&quot;packageName&quot;:&quot;cloudinary-android&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;3.x&quot;},{&quot;sdkId&quot;:&quot;flutter&quot;,&quot;framework&quot;:&quot;flutter&quot;,&quot;language&quot;:&quot;flutter&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.image(&#039;greece_seaport.jpg&#039;).transformation(Transformation()\\n\\t.addVariable(Variable.set(\\&quot;name\\&quot;,\\&quot;Jack Ross\\&quot;))\\n\\t.addVariable(Variable.set(\\&quot;finalwidth\\&quot;,600))\\n\\t.namedTransformation(NamedTransformation.name(\\&quot;signed_photos\\&quot;)));&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image(&#039;greece_seaport.jpg&#039;).transformation(Transformation()\\n\\t.addVariable(Variable.set(\\&quot;name\\&quot;,\\&quot;Jack Ross\\&quot;))\\n\\t.addVariable(Variable.set(\\&quot;finalwidth\\&quot;,600))\\n\\t.namedTransformation(NamedTransformation.name(\\&quot;signed_photos\\&quot;)));&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Flutter&quot;,&quot;packageName&quot;:&quot;cloudinary_flutter&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;kotlin&quot;,&quot;framework&quot;:&quot;kotlin&quot;,&quot;language&quot;:&quot;kotlin&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.image {\\n\\tpublicId(\\&quot;greece_seaport.jpg\\&quot;)\\n\\t addVariable(Variable.set(\\&quot;name\\&quot;,\\&quot;Jack Ross\\&quot;))\\n\\t addVariable(Variable.set(\\&quot;finalwidth\\&quot;,600))\\n\\t namedTransformation(NamedTransformation.name(\\&quot;signed_photos\\&quot;)) \\n}.generate()&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image {\\n\\tpublicId(\\&quot;greece_seaport.jpg\\&quot;)\\n\\t addVariable(Variable.set(\\&quot;name\\&quot;,\\&quot;Jack Ross\\&quot;))\\n\\t addVariable(Variable.set(\\&quot;finalwidth\\&quot;,600))\\n\\t namedTransformation(NamedTransformation.name(\\&quot;signed_photos\\&quot;)) \\n}.generate()&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Kotlin&quot;,&quot;packageName&quot;:&quot;kotlin-url-gen&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;jquery&quot;,&quot;framework&quot;:&quot;jquery&quot;,&quot;language&quot;:&quot;jquery&quot;,&quot;rawCodeSnippet&quot;:&quot;$.cloudinary.image(\\&quot;greece_seaport.jpg\\&quot;, {transformation: [ {variables: [[\\&quot;$name\\&quot;, \\&quot;!Jack Ross!\\&quot;], [\\&quot;$finalwidth\\&quot;, \\&quot;600\\&quot;]]}, {transformation: [\\&quot;signed_photos\\&quot;]} ]})&quot;,&quot;codeSnippet&quot;:&quot;$.cloudinary.image(\\&quot;greece_seaport.jpg\\&quot;, {transformation: [\\n  {variables: [[\\&quot;$name\\&quot;, \\&quot;!Jack Ross!\\&quot;], [\\&quot;$finalwidth\\&quot;, \\&quot;600\\&quot;]]},\\n  {transformation: [\\&quot;signed_photos\\&quot;]}\\n  ]})&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;jQuery&quot;,&quot;packageName&quot;:&quot;cloudinary-jquery&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;},{&quot;sdkId&quot;:&quot;react_native&quot;,&quot;framework&quot;:&quot;react_native&quot;,&quot;language&quot;:&quot;react_native&quot;,&quot;rawCodeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;greece_seaport.jpg\\&quot;)\\n  .addVariable(set(\\&quot;name\\&quot;, \\&quot;Jack Ross\\&quot;))\\n  .addVariable(set(\\&quot;finalwidth\\&quot;, 600))\\n  .namedTransformation(name(\\&quot;signed_photos\\&quot;));&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;greece_seaport.jpg\\&quot;)\\n  .addVariable(set(\\&quot;name\\&quot;, \\&quot;Jack Ross\\&quot;))\\n  .addVariable(set(\\&quot;finalwidth\\&quot;, 600))\\n  .namedTransformation(name(\\&quot;signed_photos\\&quot;));&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;React Native&quot;,&quot;packageName&quot;:&quot;cloudinary-react-native&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;}]\"\n      parsed-url=\"{&quot;url&quot;:&quot;https:\\\/\\\/res.cloudinary.com\\\/demo\\\/image\\\/upload\\\/$name_!Jack%20Ross!,$finalwidth_600\\\/t_signed_photos\\\/greece_seaport.jpg&quot;,&quot;cloud_name&quot;:&quot;demo&quot;,&quot;host&quot;:&quot;res.cloudinary.com&quot;,&quot;type&quot;:&quot;upload&quot;,&quot;resource_type&quot;:&quot;image&quot;,&quot;transformation&quot;:[{&quot;$name&quot;:&quot;!Jack Ross!&quot;,&quot;$finalwidth&quot;:&quot;600&quot;},{&quot;transformation&quot;:&quot;signed_photos&quot;}],&quot;transformation_string&quot;:&quot;$name_!Jack Ross!,$finalwidth_600\\\/t_signed_photos&quot;,&quot;url_suffix&quot;:&quot;&quot;,&quot;version&quot;:&quot;&quot;,&quot;secure&quot;:true,&quot;public_id&quot;:&quot;greece_seaport.jpg&quot;,&quot;extension&quot;:&quot;jpg&quot;,&quot;format&quot;:&quot;jpg&quot;,&quot;format_code&quot;:true,&quot;url_code&quot;:false,&quot;signature&quot;:&quot;&quot;,&quot;private_cdn&quot;:false,&quot;result_asset_type&quot;:&quot;image&quot;}\"\n      with-url=\"true\"\n    >\n      <span class=\"u-visually-hidden\">Loading code examples<\/span>\n    <\/cld-code-widget><a class=\"c-image-link\" href=\"https:\/\/res.cloudinary.com\/demo\/image\/upload\/$name_!Jack%20Ross!,$finalwidth_600\/t_signed_photos\/greece_seaport.jpg\" target=\"_blank\"><img decoding=\"async\" src=\"https:\/\/res.cloudinary.com\/demo\/image\/upload\/$name_!Jack Ross!,$finalwidth_600\/t_signed_photos\/w_400\/greece_seaport.jpg\" alt=\"photo signed using a named transformation with variables\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"400\" height=\"225\"\/><\/a><\/p>\n<h2>Getting more creative<\/h2>\n<p>Now that you\u2019ve got the idea, let\u2019s take a look at some more cool stuff you can achieve with variables.<\/p>\n<h3>Adjusting image size for art direction<\/h3>\n<p>Suppose you have a news site that always displays the two most recent news stories in the form of large square thumbnail links of 220&#215;220 pixels, with 20 pixels between each. Below those, older news stories are displayed with small <a href=\"https:\/\/cloudinary.com\/tools\/square-crop-image\">square image<\/a> links (100&#215;100), also with 20 pixels between each photo.<\/p>\n<div style=\"clear: both; margin-bottom: 20px\">\n<\/div>\n<div style=\"text-align:center;\">\n<span style=\"display:inline-block;vertical-align:top;\">\n<a href=\"https:\/\/res.cloudinary.com\/demo\/image\/upload\/$size_220\/t_news_square\/group.jpg\" target =\"_blank\"><img decoding=\"async\" src=\"https:\/\/res.cloudinary.com\/demo\/image\/upload\/$size_220\/t_news_square\/group.jpg\" alt=\"news story 123\" title=\"news story 123\" style=\"margin-right: 20px;display:block;\" \/><\/a>\n<\/span>\n<span style=\"display:inline-block;vertical-align:top;\">\n<a href=\"https:\/\/res.cloudinary.com\/demo\/image\/upload\/$size_220\/t_news_square\/basketball_shot.jpg\" target =\"_blank\"><img decoding=\"async\" src=\"https:\/\/res.cloudinary.com\/demo\/image\/upload\/$size_220\/t_news_square\/basketball_shot.jpg\" alt=\"news story 124\" title=\"news story 124\" style=\"display:block;\" \/><\/a>\n<\/span>\n<\/div>\n<div style=\"clear: both; margin-bottom: 20px\">\n<\/div>\n<div style=\"clear: both; margin-bottom: 20px\">\n<\/div>\n<div style=\"text-align:center;\">\n<span style=\"display:inline-block;vertical-align:top;\">\n<a href=\"https:\/\/res.cloudinary.com\/demo\/image\/upload\/$size_100\/t_news_square\/sheep.jpg\" target =\"_blank\"><img decoding=\"async\" src=\"https:\/\/res.cloudinary.com\/demo\/image\/upload\/$size_100\/t_news_square\/sheep.jpg\" alt=\"news story 101\" title=\"news story 101\" style=\"margin-right: 20px;display:block;\" \/><\/a>\n<\/span>\n<span style=\"display:inline-block;vertical-align:top;\">\n<a href=\"https:\/\/res.cloudinary.com\/demo\/image\/upload\/$size_100\/t_news_square\/business_man.jpg\" target =\"_blank\"><img decoding=\"async\" src=\"https:\/\/res.cloudinary.com\/demo\/image\/upload\/$size_100\/t_news_square\/business_man.jpg\" alt=\"news story 102\" title=\"news story 102\" style=\"margin-right: 20px;display:block;\" \/><\/a>\n<\/span>\n<span style=\"display:inline-block;vertical-align:top;\">\n<a href=\"https:\/\/res.cloudinary.com\/demo\/image\/upload\/$size_100\/t_news_square\/partners_table.jpg\" target =\"_blank\"><img decoding=\"async\" src=\"https:\/\/res.cloudinary.com\/demo\/image\/upload\/$size_100\/t_news_square\/partners_table.jpg\" alt=\"news story 103\" title=\"news story 103\" style=\"margin-right: 20px;display:block;\" \/><\/a>\n<\/span>\n<span style=\"display:inline-block;vertical-align:top;\">\n<a href=\"https:\/\/res.cloudinary.com\/demo\/image\/upload\/$size_100\/t_news_square\/golden_gate.jpg\" target =\"_blank\"><img decoding=\"async\" src=\"https:\/\/res.cloudinary.com\/demo\/image\/upload\/$size_100\/t_news_square\/golden_gate.jpg\" alt=\"news story 104\" title=\"news story 104\" style=\"display:block;\" \/><\/a>\n<\/span>\n<\/div>\n<div style=\"clear: both; margin-bottom: 20px\">\n<\/div>\n<p>You could create a named transformation that sets the quality, crop type, gravity, and other image improvements, and additionally sets both the width and height to a <code>$size<\/code> variable that will be defined externally. For example, the <strong>t_news_square<\/strong> named transformation might be defined as: <code>c_fill,e_improve,g_auto:faces,z_0.7,q_auto,w_$size,h_$size,<\/code><\/p>\n<p>The delivery URLs for the large image thumbnails would set the <code>$size<\/code> variable to a value of 220:<\/p>\n<p><cld-code-widget\n      class=\" c-code-widget\"\n      snippets=\"[{&quot;sdkId&quot;:&quot;nodejs&quot;,&quot;framework&quot;:&quot;nodejs&quot;,&quot;language&quot;:&quot;nodejs&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.image(\\&quot;group.jpg\\&quot;, {transformation: [ {variables: [[\\&quot;$size\\&quot;, \\&quot;220\\&quot;]]}, {transformation: [\\&quot;news_square\\&quot;]} ]})&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image(\\&quot;group.jpg\\&quot;, {transformation: [\\n  {variables: [[\\&quot;$size\\&quot;, \\&quot;220\\&quot;]]},\\n  {transformation: [\\&quot;news_square\\&quot;]}\\n  ]})&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Node.js&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;},{&quot;sdkId&quot;:&quot;react_2&quot;,&quot;framework&quot;:&quot;react_2&quot;,&quot;language&quot;:&quot;react&quot;,&quot;rawCodeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;group.jpg\\&quot;)\\n  .addVariable(set(\\&quot;size\\&quot;, 220))\\n  .namedTransformation(name(\\&quot;news_square\\&quot;));&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;group.jpg\\&quot;)\\n  .addVariable(set(\\&quot;size\\&quot;, 220))\\n  .namedTransformation(name(\\&quot;news_square\\&quot;));&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;React&quot;,&quot;packageName&quot;:&quot;@cloudinary\\\/react&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;react&quot;,&quot;framework&quot;:&quot;react&quot;,&quot;language&quot;:&quot;react&quot;,&quot;rawCodeSnippet&quot;:&quot;&lt;Image publicId=\\&quot;group.jpg\\&quot; &gt; &lt;Transformation variables={[[\\&quot;$size\\&quot;, \\&quot;220\\&quot;]]} \\\/&gt; &lt;Transformation transformation={[\\&quot;news_square\\&quot;]} \\\/&gt; &lt;\\\/Image&gt;&quot;,&quot;codeSnippet&quot;:&quot;&lt;Image publicId=\\&quot;group.jpg\\&quot; &gt;\\n\\t&lt;Transformation variables={[[\\&quot;$size\\&quot;, \\&quot;220\\&quot;]]} \\\/&gt;\\n\\t&lt;Transformation transformation={[\\&quot;news_square\\&quot;]} \\\/&gt;\\n&lt;\\\/Image&gt;&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;React&quot;,&quot;packageName&quot;:&quot;cloudinary-react&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;vue_2&quot;,&quot;framework&quot;:&quot;vue_2&quot;,&quot;language&quot;:&quot;vue&quot;,&quot;rawCodeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;group.jpg\\&quot;)\\n  .addVariable(set(\\&quot;size\\&quot;, 220))\\n  .namedTransformation(name(\\&quot;news_square\\&quot;));&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;group.jpg\\&quot;)\\n  .addVariable(set(\\&quot;size\\&quot;, 220))\\n  .namedTransformation(name(\\&quot;news_square\\&quot;));&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Vue.js&quot;,&quot;packageName&quot;:&quot;@cloudinary\\\/vue&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;vue&quot;,&quot;framework&quot;:&quot;vue&quot;,&quot;language&quot;:&quot;vue&quot;,&quot;rawCodeSnippet&quot;:&quot;&lt;cld-image public-id=\\&quot;group.jpg\\&quot; &gt; &lt;cld-transformation :variables=\\&quot;[[&#039;$size&#039;, &#039;220&#039;]]\\&quot; \\\/&gt; &lt;cld-transformation transformation={[\\&quot;news_square\\&quot;]} \\\/&gt; &lt;\\\/cld-image&gt;&quot;,&quot;codeSnippet&quot;:&quot;&lt;cld-image public-id=\\&quot;group.jpg\\&quot; &gt;\\n\\t&lt;cld-transformation :variables=\\&quot;[[&#039;$size&#039;, &#039;220&#039;]]\\&quot; \\\/&gt;\\n\\t&lt;cld-transformation transformation={[\\&quot;news_square\\&quot;]} \\\/&gt;\\n&lt;\\\/cld-image&gt;&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Vue.js&quot;,&quot;packageName&quot;:&quot;cloudinary-vue&quot;,&quot;packageStatus&quot;:&quot;legacy&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;angular_2&quot;,&quot;framework&quot;:&quot;angular_2&quot;,&quot;language&quot;:&quot;angular&quot;,&quot;rawCodeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;group.jpg\\&quot;)\\n  .addVariable(set(\\&quot;size\\&quot;, 220))\\n  .namedTransformation(name(\\&quot;news_square\\&quot;));&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;group.jpg\\&quot;)\\n  .addVariable(set(\\&quot;size\\&quot;, 220))\\n  .namedTransformation(name(\\&quot;news_square\\&quot;));&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Angular&quot;,&quot;packageName&quot;:&quot;@cloudinary\\\/ng&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;angular&quot;,&quot;framework&quot;:&quot;angular&quot;,&quot;language&quot;:&quot;angular&quot;,&quot;rawCodeSnippet&quot;:&quot;&lt;cl-image public-id=\\&quot;group.jpg\\&quot; &gt; &lt;cl-transformation variables=\\&quot;[[&#039;$size&#039;, &#039;220&#039;]]\\&quot;&gt; &lt;\\\/cl-transformation&gt; &lt;cl-transformation transformation={{[\\&quot;news_square\\&quot;]}}&gt; &lt;\\\/cl-transformation&gt; &lt;\\\/cl-image&gt;&quot;,&quot;codeSnippet&quot;:&quot;&lt;cl-image public-id=\\&quot;group.jpg\\&quot; &gt;\\n\\t&lt;cl-transformation variables=\\&quot;[[&#039;$size&#039;, &#039;220&#039;]]\\&quot;&gt;\\n\\t&lt;\\\/cl-transformation&gt;\\n\\t&lt;cl-transformation transformation={{[\\&quot;news_square\\&quot;]}}&gt;\\n\\t&lt;\\\/cl-transformation&gt;\\n&lt;\\\/cl-image&gt;&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Angular&quot;,&quot;packageName&quot;:&quot;@cloudinary\\\/angular-5.x&quot;,&quot;packageStatus&quot;:&quot;legacy&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;js_2&quot;,&quot;framework&quot;:&quot;js_2&quot;,&quot;language&quot;:&quot;js&quot;,&quot;rawCodeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;group.jpg\\&quot;)\\n  .addVariable(set(\\&quot;size\\&quot;, 220))\\n  .namedTransformation(name(\\&quot;news_square\\&quot;));&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;group.jpg\\&quot;)\\n  .addVariable(set(\\&quot;size\\&quot;, 220))\\n  .namedTransformation(name(\\&quot;news_square\\&quot;));&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;JS&quot;,&quot;packageName&quot;:&quot;@cloudinary\\\/url-gen&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;js&quot;,&quot;framework&quot;:&quot;js&quot;,&quot;language&quot;:&quot;js&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.imageTag(&#039;group.jpg&#039;, {transformation: [ {variables: [[\\&quot;$size\\&quot;, \\&quot;220\\&quot;]]}, {transformation: [\\&quot;news_square\\&quot;]} ]}).toHtml();&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.imageTag(&#039;group.jpg&#039;, {transformation: [\\n  {variables: [[\\&quot;$size\\&quot;, \\&quot;220\\&quot;]]},\\n  {transformation: [\\&quot;news_square\\&quot;]}\\n  ]}).toHtml();&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;JS&quot;,&quot;packageName&quot;:&quot;cloudinary-core&quot;,&quot;packageStatus&quot;:&quot;legacy&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;},{&quot;sdkId&quot;:&quot;python&quot;,&quot;framework&quot;:&quot;python&quot;,&quot;language&quot;:&quot;python&quot;,&quot;rawCodeSnippet&quot;:&quot;CloudinaryImage(\\&quot;group.jpg\\&quot;).image(transformation=[ {&#039;variables&#039;: [[\\&quot;$size\\&quot;, \\&quot;220\\&quot;]]}, {&#039;transformation&#039;: [\\&quot;news_square\\&quot;]} ])&quot;,&quot;codeSnippet&quot;:&quot;CloudinaryImage(\\&quot;group.jpg\\&quot;).image(transformation=[\\n  {&#039;variables&#039;: [[\\&quot;$size\\&quot;, \\&quot;220\\&quot;]]},\\n  {&#039;transformation&#039;: [\\&quot;news_square\\&quot;]}\\n  ])&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Python&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;php_2&quot;,&quot;framework&quot;:&quot;php_2&quot;,&quot;language&quot;:&quot;php&quot;,&quot;rawCodeSnippet&quot;:&quot;(new ImageTag(&#039;group.jpg&#039;))\\n\\t-&gt;addVariable(Variable::set(\\&quot;size\\&quot;,220))\\n\\t-&gt;namedTransformation(NamedTransformation::name(\\&quot;news_square\\&quot;));&quot;,&quot;codeSnippet&quot;:&quot;(new ImageTag(&#039;group.jpg&#039;))\\n\\t-&gt;addVariable(Variable::set(\\&quot;size\\&quot;,220))\\n\\t-&gt;namedTransformation(NamedTransformation::name(\\&quot;news_square\\&quot;));&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;PHP&quot;,&quot;packageName&quot;:&quot;cloudinary_php&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;3.x&quot;},{&quot;sdkId&quot;:&quot;php&quot;,&quot;framework&quot;:&quot;php&quot;,&quot;language&quot;:&quot;php&quot;,&quot;rawCodeSnippet&quot;:&quot;cl_image_tag(\\&quot;group.jpg\\&quot;, array(\\&quot;transformation\\&quot;=&gt;array( array(\\&quot;variables\\&quot;=&gt;array(array(\\&quot;$size\\&quot;, \\&quot;220\\&quot;))), array(\\&quot;transformation\\&quot;=&gt;array(\\&quot;news_square\\&quot;)) )))&quot;,&quot;codeSnippet&quot;:&quot;cl_image_tag(\\&quot;group.jpg\\&quot;, array(\\&quot;transformation\\&quot;=&gt;array(\\n  array(\\&quot;variables\\&quot;=&gt;array(array(\\&quot;$size\\&quot;, \\&quot;220\\&quot;))),\\n  array(\\&quot;transformation\\&quot;=&gt;array(\\&quot;news_square\\&quot;))\\n  )))&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;PHP&quot;,&quot;packageName&quot;:&quot;cloudinary_php&quot;,&quot;packageStatus&quot;:&quot;legacy&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;java&quot;,&quot;framework&quot;:&quot;java&quot;,&quot;language&quot;:&quot;java&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.url().transformation(new Transformation().variables(variable(\\&quot;$size\\&quot;,\\&quot;220\\&quot;)).chain() .named(\\&quot;news_square\\&quot;)).imageTag(\\&quot;group.jpg\\&quot;);&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.url().transformation(new Transformation()\\n  .variables(variable(\\&quot;$size\\&quot;,\\&quot;220\\&quot;)).chain()\\n  .named(\\&quot;news_square\\&quot;)).imageTag(\\&quot;group.jpg\\&quot;);&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Java&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;},{&quot;sdkId&quot;:&quot;ruby&quot;,&quot;framework&quot;:&quot;ruby&quot;,&quot;language&quot;:&quot;ruby&quot;,&quot;rawCodeSnippet&quot;:&quot;cl_image_tag(\\&quot;group.jpg\\&quot;, transformation: [ {variables: [[\\&quot;$size\\&quot;, \\&quot;220\\&quot;]]}, {transformation: [\\&quot;news_square\\&quot;]} ])&quot;,&quot;codeSnippet&quot;:&quot;cl_image_tag(\\&quot;group.jpg\\&quot;, transformation: [\\n  {variables: [[\\&quot;$size\\&quot;, \\&quot;220\\&quot;]]},\\n  {transformation: [\\&quot;news_square\\&quot;]}\\n  ])&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Ruby&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;},{&quot;sdkId&quot;:&quot;csharp&quot;,&quot;framework&quot;:&quot;csharp&quot;,&quot;language&quot;:&quot;csharp&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.Api.UrlImgUp.Transform(new Transformation().Variables(\\&quot;$size\\&quot;, 220).Chain() .Named(\\&quot;news_square\\&quot;)).BuildImageTag(\\&quot;group.jpg\\&quot;)&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.Api.UrlImgUp.Transform(new Transformation()\\n  .Variables(\\&quot;$size\\&quot;, 220).Chain()\\n  .Named(\\&quot;news_square\\&quot;)).BuildImageTag(\\&quot;group.jpg\\&quot;)&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;.NET&quot;,&quot;packageName&quot;:&quot;CloudinaryDotNet&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;dart&quot;,&quot;framework&quot;:&quot;dart&quot;,&quot;language&quot;:&quot;dart&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.image(&#039;group.jpg&#039;).transformation(Transformation()\\n\\t.addVariable(Variable.set(\\&quot;size\\&quot;,220))\\n\\t.namedTransformation(NamedTransformation.name(\\&quot;news_square\\&quot;)));&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image(&#039;group.jpg&#039;).transformation(Transformation()\\n\\t.addVariable(Variable.set(\\&quot;size\\&quot;,220))\\n\\t.namedTransformation(NamedTransformation.name(\\&quot;news_square\\&quot;)));&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Dart&quot;,&quot;packageName&quot;:&quot;cloudinary_dart&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;swift&quot;,&quot;framework&quot;:&quot;swift&quot;,&quot;language&quot;:&quot;swift&quot;,&quot;rawCodeSnippet&quot;:&quot;imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().chain() .setNamed(\\&quot;news_square\\&quot;)).generate(\\&quot;group.jpg\\&quot;)!, cloudinary: cloudinary)&quot;,&quot;codeSnippet&quot;:&quot;imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation()\\n  .chain()\\n  .setNamed(\\&quot;news_square\\&quot;)).generate(\\&quot;group.jpg\\&quot;)!, cloudinary: cloudinary)&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;iOS&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;5.x&quot;},{&quot;sdkId&quot;:&quot;android&quot;,&quot;framework&quot;:&quot;android&quot;,&quot;language&quot;:&quot;android&quot;,&quot;rawCodeSnippet&quot;:&quot;MediaManager.get().url().transformation(new Transformation().variables(variable(\\&quot;$size\\&quot;,\\&quot;220\\&quot;)).chain() .named(\\&quot;news_square\\&quot;)).generate(\\&quot;group.jpg\\&quot;);&quot;,&quot;codeSnippet&quot;:&quot;MediaManager.get().url().transformation(new Transformation()\\n  .variables(variable(\\&quot;$size\\&quot;,\\&quot;220\\&quot;)).chain()\\n  .named(\\&quot;news_square\\&quot;)).generate(\\&quot;group.jpg\\&quot;);&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Android&quot;,&quot;packageName&quot;:&quot;cloudinary-android&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;3.x&quot;},{&quot;sdkId&quot;:&quot;flutter&quot;,&quot;framework&quot;:&quot;flutter&quot;,&quot;language&quot;:&quot;flutter&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.image(&#039;group.jpg&#039;).transformation(Transformation()\\n\\t.addVariable(Variable.set(\\&quot;size\\&quot;,220))\\n\\t.namedTransformation(NamedTransformation.name(\\&quot;news_square\\&quot;)));&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image(&#039;group.jpg&#039;).transformation(Transformation()\\n\\t.addVariable(Variable.set(\\&quot;size\\&quot;,220))\\n\\t.namedTransformation(NamedTransformation.name(\\&quot;news_square\\&quot;)));&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Flutter&quot;,&quot;packageName&quot;:&quot;cloudinary_flutter&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;kotlin&quot;,&quot;framework&quot;:&quot;kotlin&quot;,&quot;language&quot;:&quot;kotlin&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.image {\\n\\tpublicId(\\&quot;group.jpg\\&quot;)\\n\\t addVariable(Variable.set(\\&quot;size\\&quot;,220))\\n\\t namedTransformation(NamedTransformation.name(\\&quot;news_square\\&quot;)) \\n}.generate()&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image {\\n\\tpublicId(\\&quot;group.jpg\\&quot;)\\n\\t addVariable(Variable.set(\\&quot;size\\&quot;,220))\\n\\t namedTransformation(NamedTransformation.name(\\&quot;news_square\\&quot;)) \\n}.generate()&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Kotlin&quot;,&quot;packageName&quot;:&quot;kotlin-url-gen&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;jquery&quot;,&quot;framework&quot;:&quot;jquery&quot;,&quot;language&quot;:&quot;jquery&quot;,&quot;rawCodeSnippet&quot;:&quot;$.cloudinary.image(\\&quot;group.jpg\\&quot;, {transformation: [ {variables: [[\\&quot;$size\\&quot;, \\&quot;220\\&quot;]]}, {transformation: [\\&quot;news_square\\&quot;]} ]})&quot;,&quot;codeSnippet&quot;:&quot;$.cloudinary.image(\\&quot;group.jpg\\&quot;, {transformation: [\\n  {variables: [[\\&quot;$size\\&quot;, \\&quot;220\\&quot;]]},\\n  {transformation: [\\&quot;news_square\\&quot;]}\\n  ]})&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;jQuery&quot;,&quot;packageName&quot;:&quot;cloudinary-jquery&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;},{&quot;sdkId&quot;:&quot;react_native&quot;,&quot;framework&quot;:&quot;react_native&quot;,&quot;language&quot;:&quot;react_native&quot;,&quot;rawCodeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;group.jpg\\&quot;)\\n  .addVariable(set(\\&quot;size\\&quot;, 220))\\n  .namedTransformation(name(\\&quot;news_square\\&quot;));&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;group.jpg\\&quot;)\\n  .addVariable(set(\\&quot;size\\&quot;, 220))\\n  .namedTransformation(name(\\&quot;news_square\\&quot;));&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;React Native&quot;,&quot;packageName&quot;:&quot;cloudinary-react-native&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;}]\"\n      parsed-url=\"{&quot;url&quot;:&quot;https:\\\/\\\/res.cloudinary.com\\\/demo\\\/image\\\/upload\\\/$size_220\\\/t_news_square\\\/group.jpg&quot;,&quot;cloud_name&quot;:&quot;demo&quot;,&quot;host&quot;:&quot;res.cloudinary.com&quot;,&quot;type&quot;:&quot;upload&quot;,&quot;resource_type&quot;:&quot;image&quot;,&quot;transformation&quot;:[{&quot;$size&quot;:&quot;220&quot;},{&quot;transformation&quot;:&quot;news_square&quot;}],&quot;transformation_string&quot;:&quot;$size_220\\\/t_news_square&quot;,&quot;url_suffix&quot;:&quot;&quot;,&quot;version&quot;:&quot;&quot;,&quot;secure&quot;:true,&quot;public_id&quot;:&quot;group.jpg&quot;,&quot;extension&quot;:&quot;jpg&quot;,&quot;format&quot;:&quot;jpg&quot;,&quot;format_code&quot;:true,&quot;url_code&quot;:false,&quot;signature&quot;:&quot;&quot;,&quot;private_cdn&quot;:false,&quot;result_asset_type&quot;:&quot;image&quot;}\"\n      with-url=\"true\"\n    >\n      <span class=\"u-visually-hidden\">Loading code examples<\/span>\n    <\/cld-code-widget><\/p>\n<p>The transformation for the small images would reference the same named transformation, but with a size value of 100:<\/p>\n<p><cld-code-widget\n      class=\" c-code-widget\"\n      snippets=\"[{&quot;sdkId&quot;:&quot;nodejs&quot;,&quot;framework&quot;:&quot;nodejs&quot;,&quot;language&quot;:&quot;nodejs&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.image(\\&quot;partners_table.jpg\\&quot;, {transformation: [ {variables: [[\\&quot;$size\\&quot;, \\&quot;100\\&quot;]]}, {transformation: [\\&quot;news_square\\&quot;]} ]})&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image(\\&quot;partners_table.jpg\\&quot;, {transformation: [\\n  {variables: [[\\&quot;$size\\&quot;, \\&quot;100\\&quot;]]},\\n  {transformation: [\\&quot;news_square\\&quot;]}\\n  ]})&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Node.js&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;},{&quot;sdkId&quot;:&quot;react_2&quot;,&quot;framework&quot;:&quot;react_2&quot;,&quot;language&quot;:&quot;react&quot;,&quot;rawCodeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;partners_table.jpg\\&quot;)\\n  .addVariable(set(\\&quot;size\\&quot;, 100))\\n  .namedTransformation(name(\\&quot;news_square\\&quot;));&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;partners_table.jpg\\&quot;)\\n  .addVariable(set(\\&quot;size\\&quot;, 100))\\n  .namedTransformation(name(\\&quot;news_square\\&quot;));&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;React&quot;,&quot;packageName&quot;:&quot;@cloudinary\\\/react&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;react&quot;,&quot;framework&quot;:&quot;react&quot;,&quot;language&quot;:&quot;react&quot;,&quot;rawCodeSnippet&quot;:&quot;&lt;Image publicId=\\&quot;partners_table.jpg\\&quot; &gt; &lt;Transformation variables={[[\\&quot;$size\\&quot;, \\&quot;100\\&quot;]]} \\\/&gt; &lt;Transformation transformation={[\\&quot;news_square\\&quot;]} \\\/&gt; &lt;\\\/Image&gt;&quot;,&quot;codeSnippet&quot;:&quot;&lt;Image publicId=\\&quot;partners_table.jpg\\&quot; &gt;\\n\\t&lt;Transformation variables={[[\\&quot;$size\\&quot;, \\&quot;100\\&quot;]]} \\\/&gt;\\n\\t&lt;Transformation transformation={[\\&quot;news_square\\&quot;]} \\\/&gt;\\n&lt;\\\/Image&gt;&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;React&quot;,&quot;packageName&quot;:&quot;cloudinary-react&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;vue_2&quot;,&quot;framework&quot;:&quot;vue_2&quot;,&quot;language&quot;:&quot;vue&quot;,&quot;rawCodeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;partners_table.jpg\\&quot;)\\n  .addVariable(set(\\&quot;size\\&quot;, 100))\\n  .namedTransformation(name(\\&quot;news_square\\&quot;));&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;partners_table.jpg\\&quot;)\\n  .addVariable(set(\\&quot;size\\&quot;, 100))\\n  .namedTransformation(name(\\&quot;news_square\\&quot;));&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Vue.js&quot;,&quot;packageName&quot;:&quot;@cloudinary\\\/vue&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;vue&quot;,&quot;framework&quot;:&quot;vue&quot;,&quot;language&quot;:&quot;vue&quot;,&quot;rawCodeSnippet&quot;:&quot;&lt;cld-image public-id=\\&quot;partners_table.jpg\\&quot; &gt; &lt;cld-transformation :variables=\\&quot;[[&#039;$size&#039;, &#039;100&#039;]]\\&quot; \\\/&gt; &lt;cld-transformation transformation={[\\&quot;news_square\\&quot;]} \\\/&gt; &lt;\\\/cld-image&gt;&quot;,&quot;codeSnippet&quot;:&quot;&lt;cld-image public-id=\\&quot;partners_table.jpg\\&quot; &gt;\\n\\t&lt;cld-transformation :variables=\\&quot;[[&#039;$size&#039;, &#039;100&#039;]]\\&quot; \\\/&gt;\\n\\t&lt;cld-transformation transformation={[\\&quot;news_square\\&quot;]} \\\/&gt;\\n&lt;\\\/cld-image&gt;&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Vue.js&quot;,&quot;packageName&quot;:&quot;cloudinary-vue&quot;,&quot;packageStatus&quot;:&quot;legacy&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;angular_2&quot;,&quot;framework&quot;:&quot;angular_2&quot;,&quot;language&quot;:&quot;angular&quot;,&quot;rawCodeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;partners_table.jpg\\&quot;)\\n  .addVariable(set(\\&quot;size\\&quot;, 100))\\n  .namedTransformation(name(\\&quot;news_square\\&quot;));&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;partners_table.jpg\\&quot;)\\n  .addVariable(set(\\&quot;size\\&quot;, 100))\\n  .namedTransformation(name(\\&quot;news_square\\&quot;));&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Angular&quot;,&quot;packageName&quot;:&quot;@cloudinary\\\/ng&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;angular&quot;,&quot;framework&quot;:&quot;angular&quot;,&quot;language&quot;:&quot;angular&quot;,&quot;rawCodeSnippet&quot;:&quot;&lt;cl-image public-id=\\&quot;partners_table.jpg\\&quot; &gt; &lt;cl-transformation variables=\\&quot;[[&#039;$size&#039;, &#039;100&#039;]]\\&quot;&gt; &lt;\\\/cl-transformation&gt; &lt;cl-transformation transformation={{[\\&quot;news_square\\&quot;]}}&gt; &lt;\\\/cl-transformation&gt; &lt;\\\/cl-image&gt;&quot;,&quot;codeSnippet&quot;:&quot;&lt;cl-image public-id=\\&quot;partners_table.jpg\\&quot; &gt;\\n\\t&lt;cl-transformation variables=\\&quot;[[&#039;$size&#039;, &#039;100&#039;]]\\&quot;&gt;\\n\\t&lt;\\\/cl-transformation&gt;\\n\\t&lt;cl-transformation transformation={{[\\&quot;news_square\\&quot;]}}&gt;\\n\\t&lt;\\\/cl-transformation&gt;\\n&lt;\\\/cl-image&gt;&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Angular&quot;,&quot;packageName&quot;:&quot;@cloudinary\\\/angular-5.x&quot;,&quot;packageStatus&quot;:&quot;legacy&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;js_2&quot;,&quot;framework&quot;:&quot;js_2&quot;,&quot;language&quot;:&quot;js&quot;,&quot;rawCodeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;partners_table.jpg\\&quot;)\\n  .addVariable(set(\\&quot;size\\&quot;, 100))\\n  .namedTransformation(name(\\&quot;news_square\\&quot;));&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;partners_table.jpg\\&quot;)\\n  .addVariable(set(\\&quot;size\\&quot;, 100))\\n  .namedTransformation(name(\\&quot;news_square\\&quot;));&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;JS&quot;,&quot;packageName&quot;:&quot;@cloudinary\\\/url-gen&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;js&quot;,&quot;framework&quot;:&quot;js&quot;,&quot;language&quot;:&quot;js&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.imageTag(&#039;partners_table.jpg&#039;, {transformation: [ {variables: [[\\&quot;$size\\&quot;, \\&quot;100\\&quot;]]}, {transformation: [\\&quot;news_square\\&quot;]} ]}).toHtml();&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.imageTag(&#039;partners_table.jpg&#039;, {transformation: [\\n  {variables: [[\\&quot;$size\\&quot;, \\&quot;100\\&quot;]]},\\n  {transformation: [\\&quot;news_square\\&quot;]}\\n  ]}).toHtml();&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;JS&quot;,&quot;packageName&quot;:&quot;cloudinary-core&quot;,&quot;packageStatus&quot;:&quot;legacy&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;},{&quot;sdkId&quot;:&quot;python&quot;,&quot;framework&quot;:&quot;python&quot;,&quot;language&quot;:&quot;python&quot;,&quot;rawCodeSnippet&quot;:&quot;CloudinaryImage(\\&quot;partners_table.jpg\\&quot;).image(transformation=[ {&#039;variables&#039;: [[\\&quot;$size\\&quot;, \\&quot;100\\&quot;]]}, {&#039;transformation&#039;: [\\&quot;news_square\\&quot;]} ])&quot;,&quot;codeSnippet&quot;:&quot;CloudinaryImage(\\&quot;partners_table.jpg\\&quot;).image(transformation=[\\n  {&#039;variables&#039;: [[\\&quot;$size\\&quot;, \\&quot;100\\&quot;]]},\\n  {&#039;transformation&#039;: [\\&quot;news_square\\&quot;]}\\n  ])&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Python&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;php_2&quot;,&quot;framework&quot;:&quot;php_2&quot;,&quot;language&quot;:&quot;php&quot;,&quot;rawCodeSnippet&quot;:&quot;(new ImageTag(&#039;partners_table.jpg&#039;))\\n\\t-&gt;addVariable(Variable::set(\\&quot;size\\&quot;,100))\\n\\t-&gt;namedTransformation(NamedTransformation::name(\\&quot;news_square\\&quot;));&quot;,&quot;codeSnippet&quot;:&quot;(new ImageTag(&#039;partners_table.jpg&#039;))\\n\\t-&gt;addVariable(Variable::set(\\&quot;size\\&quot;,100))\\n\\t-&gt;namedTransformation(NamedTransformation::name(\\&quot;news_square\\&quot;));&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;PHP&quot;,&quot;packageName&quot;:&quot;cloudinary_php&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;3.x&quot;},{&quot;sdkId&quot;:&quot;php&quot;,&quot;framework&quot;:&quot;php&quot;,&quot;language&quot;:&quot;php&quot;,&quot;rawCodeSnippet&quot;:&quot;cl_image_tag(\\&quot;partners_table.jpg\\&quot;, array(\\&quot;transformation\\&quot;=&gt;array( array(\\&quot;variables\\&quot;=&gt;array(array(\\&quot;$size\\&quot;, \\&quot;100\\&quot;))), array(\\&quot;transformation\\&quot;=&gt;array(\\&quot;news_square\\&quot;)) )))&quot;,&quot;codeSnippet&quot;:&quot;cl_image_tag(\\&quot;partners_table.jpg\\&quot;, array(\\&quot;transformation\\&quot;=&gt;array(\\n  array(\\&quot;variables\\&quot;=&gt;array(array(\\&quot;$size\\&quot;, \\&quot;100\\&quot;))),\\n  array(\\&quot;transformation\\&quot;=&gt;array(\\&quot;news_square\\&quot;))\\n  )))&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;PHP&quot;,&quot;packageName&quot;:&quot;cloudinary_php&quot;,&quot;packageStatus&quot;:&quot;legacy&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;java&quot;,&quot;framework&quot;:&quot;java&quot;,&quot;language&quot;:&quot;java&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.url().transformation(new Transformation().variables(variable(\\&quot;$size\\&quot;,\\&quot;100\\&quot;)).chain() .named(\\&quot;news_square\\&quot;)).imageTag(\\&quot;partners_table.jpg\\&quot;);&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.url().transformation(new Transformation()\\n  .variables(variable(\\&quot;$size\\&quot;,\\&quot;100\\&quot;)).chain()\\n  .named(\\&quot;news_square\\&quot;)).imageTag(\\&quot;partners_table.jpg\\&quot;);&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Java&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;},{&quot;sdkId&quot;:&quot;ruby&quot;,&quot;framework&quot;:&quot;ruby&quot;,&quot;language&quot;:&quot;ruby&quot;,&quot;rawCodeSnippet&quot;:&quot;cl_image_tag(\\&quot;partners_table.jpg\\&quot;, transformation: [ {variables: [[\\&quot;$size\\&quot;, \\&quot;100\\&quot;]]}, {transformation: [\\&quot;news_square\\&quot;]} ])&quot;,&quot;codeSnippet&quot;:&quot;cl_image_tag(\\&quot;partners_table.jpg\\&quot;, transformation: [\\n  {variables: [[\\&quot;$size\\&quot;, \\&quot;100\\&quot;]]},\\n  {transformation: [\\&quot;news_square\\&quot;]}\\n  ])&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Ruby&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;},{&quot;sdkId&quot;:&quot;csharp&quot;,&quot;framework&quot;:&quot;csharp&quot;,&quot;language&quot;:&quot;csharp&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.Api.UrlImgUp.Transform(new Transformation().Variables(\\&quot;$size\\&quot;, 100).Chain() .Named(\\&quot;news_square\\&quot;)).BuildImageTag(\\&quot;partners_table.jpg\\&quot;)&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.Api.UrlImgUp.Transform(new Transformation()\\n  .Variables(\\&quot;$size\\&quot;, 100).Chain()\\n  .Named(\\&quot;news_square\\&quot;)).BuildImageTag(\\&quot;partners_table.jpg\\&quot;)&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;.NET&quot;,&quot;packageName&quot;:&quot;CloudinaryDotNet&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;dart&quot;,&quot;framework&quot;:&quot;dart&quot;,&quot;language&quot;:&quot;dart&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.image(&#039;partners_table.jpg&#039;).transformation(Transformation()\\n\\t.addVariable(Variable.set(\\&quot;size\\&quot;,100))\\n\\t.namedTransformation(NamedTransformation.name(\\&quot;news_square\\&quot;)));&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image(&#039;partners_table.jpg&#039;).transformation(Transformation()\\n\\t.addVariable(Variable.set(\\&quot;size\\&quot;,100))\\n\\t.namedTransformation(NamedTransformation.name(\\&quot;news_square\\&quot;)));&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Dart&quot;,&quot;packageName&quot;:&quot;cloudinary_dart&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;swift&quot;,&quot;framework&quot;:&quot;swift&quot;,&quot;language&quot;:&quot;swift&quot;,&quot;rawCodeSnippet&quot;:&quot;imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().chain() .setNamed(\\&quot;news_square\\&quot;)).generate(\\&quot;partners_table.jpg\\&quot;)!, cloudinary: cloudinary)&quot;,&quot;codeSnippet&quot;:&quot;imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation()\\n  .chain()\\n  .setNamed(\\&quot;news_square\\&quot;)).generate(\\&quot;partners_table.jpg\\&quot;)!, cloudinary: cloudinary)&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;iOS&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;5.x&quot;},{&quot;sdkId&quot;:&quot;android&quot;,&quot;framework&quot;:&quot;android&quot;,&quot;language&quot;:&quot;android&quot;,&quot;rawCodeSnippet&quot;:&quot;MediaManager.get().url().transformation(new Transformation().variables(variable(\\&quot;$size\\&quot;,\\&quot;100\\&quot;)).chain() .named(\\&quot;news_square\\&quot;)).generate(\\&quot;partners_table.jpg\\&quot;);&quot;,&quot;codeSnippet&quot;:&quot;MediaManager.get().url().transformation(new Transformation()\\n  .variables(variable(\\&quot;$size\\&quot;,\\&quot;100\\&quot;)).chain()\\n  .named(\\&quot;news_square\\&quot;)).generate(\\&quot;partners_table.jpg\\&quot;);&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Android&quot;,&quot;packageName&quot;:&quot;cloudinary-android&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;3.x&quot;},{&quot;sdkId&quot;:&quot;flutter&quot;,&quot;framework&quot;:&quot;flutter&quot;,&quot;language&quot;:&quot;flutter&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.image(&#039;partners_table.jpg&#039;).transformation(Transformation()\\n\\t.addVariable(Variable.set(\\&quot;size\\&quot;,100))\\n\\t.namedTransformation(NamedTransformation.name(\\&quot;news_square\\&quot;)));&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image(&#039;partners_table.jpg&#039;).transformation(Transformation()\\n\\t.addVariable(Variable.set(\\&quot;size\\&quot;,100))\\n\\t.namedTransformation(NamedTransformation.name(\\&quot;news_square\\&quot;)));&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Flutter&quot;,&quot;packageName&quot;:&quot;cloudinary_flutter&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;kotlin&quot;,&quot;framework&quot;:&quot;kotlin&quot;,&quot;language&quot;:&quot;kotlin&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.image {\\n\\tpublicId(\\&quot;partners_table.jpg\\&quot;)\\n\\t addVariable(Variable.set(\\&quot;size\\&quot;,100))\\n\\t namedTransformation(NamedTransformation.name(\\&quot;news_square\\&quot;)) \\n}.generate()&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image {\\n\\tpublicId(\\&quot;partners_table.jpg\\&quot;)\\n\\t addVariable(Variable.set(\\&quot;size\\&quot;,100))\\n\\t namedTransformation(NamedTransformation.name(\\&quot;news_square\\&quot;)) \\n}.generate()&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Kotlin&quot;,&quot;packageName&quot;:&quot;kotlin-url-gen&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;jquery&quot;,&quot;framework&quot;:&quot;jquery&quot;,&quot;language&quot;:&quot;jquery&quot;,&quot;rawCodeSnippet&quot;:&quot;$.cloudinary.image(\\&quot;partners_table.jpg\\&quot;, {transformation: [ {variables: [[\\&quot;$size\\&quot;, \\&quot;100\\&quot;]]}, {transformation: [\\&quot;news_square\\&quot;]} ]})&quot;,&quot;codeSnippet&quot;:&quot;$.cloudinary.image(\\&quot;partners_table.jpg\\&quot;, {transformation: [\\n  {variables: [[\\&quot;$size\\&quot;, \\&quot;100\\&quot;]]},\\n  {transformation: [\\&quot;news_square\\&quot;]}\\n  ]})&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;jQuery&quot;,&quot;packageName&quot;:&quot;cloudinary-jquery&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;},{&quot;sdkId&quot;:&quot;react_native&quot;,&quot;framework&quot;:&quot;react_native&quot;,&quot;language&quot;:&quot;react_native&quot;,&quot;rawCodeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;partners_table.jpg\\&quot;)\\n  .addVariable(set(\\&quot;size\\&quot;, 100))\\n  .namedTransformation(name(\\&quot;news_square\\&quot;));&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;partners_table.jpg\\&quot;)\\n  .addVariable(set(\\&quot;size\\&quot;, 100))\\n  .namedTransformation(name(\\&quot;news_square\\&quot;));&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;React Native&quot;,&quot;packageName&quot;:&quot;cloudinary-react-native&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;}]\"\n      parsed-url=\"{&quot;url&quot;:&quot;https:\\\/\\\/res.cloudinary.com\\\/demo\\\/image\\\/upload\\\/$size_100\\\/t_news_square\\\/partners_table.jpg&quot;,&quot;cloud_name&quot;:&quot;demo&quot;,&quot;host&quot;:&quot;res.cloudinary.com&quot;,&quot;type&quot;:&quot;upload&quot;,&quot;resource_type&quot;:&quot;image&quot;,&quot;transformation&quot;:[{&quot;$size&quot;:&quot;100&quot;},{&quot;transformation&quot;:&quot;news_square&quot;}],&quot;transformation_string&quot;:&quot;$size_100\\\/t_news_square&quot;,&quot;url_suffix&quot;:&quot;&quot;,&quot;version&quot;:&quot;&quot;,&quot;secure&quot;:true,&quot;public_id&quot;:&quot;partners_table.jpg&quot;,&quot;extension&quot;:&quot;jpg&quot;,&quot;format&quot;:&quot;jpg&quot;,&quot;format_code&quot;:true,&quot;url_code&quot;:false,&quot;signature&quot;:&quot;&quot;,&quot;private_cdn&quot;:false,&quot;result_asset_type&quot;:&quot;image&quot;}\"\n      with-url=\"true\"\n    >\n      <span class=\"u-visually-hidden\">Loading code examples<\/span>\n    <\/cld-code-widget><\/p>\n<h3>Generating various profile pictures<\/h3>\n<p>Imagine that users upload a profile photo to your social media app and you need to display the photo on their profile page as a portrait-oriented rectangle with rounded corners, on their homepage as a square, and as a small circular chat head on the chat page. The zooming on each photo should adjust according to the size and shape of the image. And of course you know that as your site design changes in the future, these values might change.<\/p>\n<p>But regardless of the above adjustments, you always want to use the same quality, format, and face recognition settings for all photos.<\/p>\n<p>With variables, you simply create a named transformation (called <code>profile_pic<\/code> in our example) with static settings for the permanent elements, and variables for the size (aspect ratio &amp; final width) and the radius (rounding):<\/p>\n<div style=\"clear: both; margin-bottom: 20px\">\n<\/div>\n<div style=\"text-align:center;\">\n<span style=\"display:inline-block;vertical-align:top;\">\n<a href=\"https:\/\/res.cloudinary.com\/demo\/image\/upload\/$aratio_1.0,$width_200,$rounding_0\/t_profile_pic\/standing_woman.jpg\" target =\"_blank\"><img decoding=\"async\" src=\"https:\/\/res.cloudinary.com\/demo\/image\/upload\/$aratio_1.0,$width_200,$rounding_0\/t_profile_pic\/standing_woman.jpg\" alt=\"Square photo for Home page\" title=\"Square photo for Home page\" style=\"margin-right: 10px;display:block;\" \/><\/a>\n<\/span>\n<span style=\"display:inline-block;vertical-align:top;\">\n<a href=\"https:\/\/res.cloudinary.com\/demo\/image\/upload\/$aratio_0.75,$width_150,$rounding_30\/t_profile_pic\/standing_woman.jpg\" target =\"_blank\"><img decoding=\"async\" src=\"https:\/\/res.cloudinary.com\/demo\/image\/upload\/$aratio_0.75,$width_150,$rounding_30\/t_profile_pic\/standing_woman.jpg\" alt=\"Portrait-oriented round rectangle for profile page\" title=\"Portrait-oriented round rectangle for profile page\" style=\"margin-right: 10px;display:block;\" \/><\/a>\n<\/span>\n<span style=\"display:inline-block;vertical-align:top;\">\n<a href=\"https:\/\/res.cloudinary.com\/demo\/image\/upload\/$aratio_1.0,$width_75,$rounding_200\/t_profile_pic\/standing_woman.jpg\" target =\"_blank\"><img decoding=\"async\" src=\"https:\/\/res.cloudinary.com\/demo\/image\/upload\/$aratio_1.0,$width_75,$rounding_200\/t_profile_pic\/standing_woman.jpg\" alt=\"Small round headshot for chat window\" title=\"Small round headshot for chat window\" style=\"margin-right: 10px;display:block;\" \/><\/a>\n<\/span>\n<\/div>\n<div style=\"clear: both; margin-bottom: 20px\">\n<\/div>\n<p>The <strong>profile_pic<\/strong> named transformation looks like this: <br\/>\n<code>$zoom_$aratio_sub_0.4\/<\/code>\n<br\/>\n<code>ar_$aratio,c_thumb,f_auto,g_face,q_auto,r_$rounding,w_$width,z_$zoom<\/code><\/p>\n<p>This named transformation takes advantage of arithmetic operators (subtraction in this case) to achieve a zoom that changes with the aspect ratio. Thus the 1:1 images (aspect ratio = 1) end up with a closer zoom, achieving a headshot, but not too close, while portrait images (aspect ratio &lt; 1) have a smaller zoom, and thus show more of the whole body.<\/p>\n<p>The round chat head picture shown above on the right would be delivered with a value of 1.0 for <code>$aratio<\/code>, 75 for <code>$width<\/code>, and 20 for <code>$rounding<\/code>:<\/p>\n<p><cld-code-widget\n      class=\" c-code-widget\"\n      snippets=\"[{&quot;sdkId&quot;:&quot;nodejs&quot;,&quot;framework&quot;:&quot;nodejs&quot;,&quot;language&quot;:&quot;nodejs&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.image(\\&quot;standing_woman.jpg\\&quot;, {transformation: [ {variables: [[\\&quot;$aratio\\&quot;, \\&quot;1.0\\&quot;], [\\&quot;$width\\&quot;, \\&quot;75\\&quot;], [\\&quot;$rounding\\&quot;, \\&quot;200\\&quot;]]}, {transformation: [\\&quot;profile_pic\\&quot;]} ]})&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image(\\&quot;standing_woman.jpg\\&quot;, {transformation: [\\n  {variables: [[\\&quot;$aratio\\&quot;, \\&quot;1.0\\&quot;], [\\&quot;$width\\&quot;, \\&quot;75\\&quot;], [\\&quot;$rounding\\&quot;, \\&quot;200\\&quot;]]},\\n  {transformation: [\\&quot;profile_pic\\&quot;]}\\n  ]})&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Node.js&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;},{&quot;sdkId&quot;:&quot;react_2&quot;,&quot;framework&quot;:&quot;react_2&quot;,&quot;language&quot;:&quot;react&quot;,&quot;rawCodeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;standing_woman.jpg\\&quot;)\\n  .addVariable(set(\\&quot;aratio\\&quot;, \\&quot;1.0\\&quot;))\\n  .addVariable(set(\\&quot;width\\&quot;, 75))\\n  .addVariable(set(\\&quot;rounding\\&quot;, 200))\\n  .namedTransformation(name(\\&quot;profile_pic\\&quot;));&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;standing_woman.jpg\\&quot;)\\n  .addVariable(set(\\&quot;aratio\\&quot;, \\&quot;1.0\\&quot;))\\n  .addVariable(set(\\&quot;width\\&quot;, 75))\\n  .addVariable(set(\\&quot;rounding\\&quot;, 200))\\n  .namedTransformation(name(\\&quot;profile_pic\\&quot;));&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;React&quot;,&quot;packageName&quot;:&quot;@cloudinary\\\/react&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;react&quot;,&quot;framework&quot;:&quot;react&quot;,&quot;language&quot;:&quot;react&quot;,&quot;rawCodeSnippet&quot;:&quot;&lt;Image publicId=\\&quot;standing_woman.jpg\\&quot; &gt; &lt;Transformation variables={[[\\&quot;$aratio\\&quot;, \\&quot;1.0\\&quot;], [\\&quot;$width\\&quot;, \\&quot;75\\&quot;], [\\&quot;$rounding\\&quot;, \\&quot;200\\&quot;]]} \\\/&gt; &lt;Transformation transformation={[\\&quot;profile_pic\\&quot;]} \\\/&gt; &lt;\\\/Image&gt;&quot;,&quot;codeSnippet&quot;:&quot;&lt;Image publicId=\\&quot;standing_woman.jpg\\&quot; &gt;\\n\\t&lt;Transformation variables={[[\\&quot;$aratio\\&quot;, \\&quot;1.0\\&quot;], [\\&quot;$width\\&quot;, \\&quot;75\\&quot;], [\\&quot;$rounding\\&quot;, \\&quot;200\\&quot;]]} \\\/&gt;\\n\\t&lt;Transformation transformation={[\\&quot;profile_pic\\&quot;]} \\\/&gt;\\n&lt;\\\/Image&gt;&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;React&quot;,&quot;packageName&quot;:&quot;cloudinary-react&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;vue_2&quot;,&quot;framework&quot;:&quot;vue_2&quot;,&quot;language&quot;:&quot;vue&quot;,&quot;rawCodeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;standing_woman.jpg\\&quot;)\\n  .addVariable(set(\\&quot;aratio\\&quot;, \\&quot;1.0\\&quot;))\\n  .addVariable(set(\\&quot;width\\&quot;, 75))\\n  .addVariable(set(\\&quot;rounding\\&quot;, 200))\\n  .namedTransformation(name(\\&quot;profile_pic\\&quot;));&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;standing_woman.jpg\\&quot;)\\n  .addVariable(set(\\&quot;aratio\\&quot;, \\&quot;1.0\\&quot;))\\n  .addVariable(set(\\&quot;width\\&quot;, 75))\\n  .addVariable(set(\\&quot;rounding\\&quot;, 200))\\n  .namedTransformation(name(\\&quot;profile_pic\\&quot;));&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Vue.js&quot;,&quot;packageName&quot;:&quot;@cloudinary\\\/vue&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;vue&quot;,&quot;framework&quot;:&quot;vue&quot;,&quot;language&quot;:&quot;vue&quot;,&quot;rawCodeSnippet&quot;:&quot;&lt;cld-image public-id=\\&quot;standing_woman.jpg\\&quot; &gt; &lt;cld-transformation :variables=\\&quot;[[&#039;$aratio&#039;, &#039;1.0&#039;], [&#039;$width&#039;, &#039;75&#039;], [&#039;$rounding&#039;, &#039;200&#039;]]\\&quot; \\\/&gt; &lt;cld-transformation transformation={[\\&quot;profile_pic\\&quot;]} \\\/&gt; &lt;\\\/cld-image&gt;&quot;,&quot;codeSnippet&quot;:&quot;&lt;cld-image public-id=\\&quot;standing_woman.jpg\\&quot; &gt;\\n\\t&lt;cld-transformation :variables=\\&quot;[[&#039;$aratio&#039;, &#039;1.0&#039;], [&#039;$width&#039;, &#039;75&#039;], [&#039;$rounding&#039;, &#039;200&#039;]]\\&quot; \\\/&gt;\\n\\t&lt;cld-transformation transformation={[\\&quot;profile_pic\\&quot;]} \\\/&gt;\\n&lt;\\\/cld-image&gt;&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Vue.js&quot;,&quot;packageName&quot;:&quot;cloudinary-vue&quot;,&quot;packageStatus&quot;:&quot;legacy&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;angular_2&quot;,&quot;framework&quot;:&quot;angular_2&quot;,&quot;language&quot;:&quot;angular&quot;,&quot;rawCodeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;standing_woman.jpg\\&quot;)\\n  .addVariable(set(\\&quot;aratio\\&quot;, \\&quot;1.0\\&quot;))\\n  .addVariable(set(\\&quot;width\\&quot;, 75))\\n  .addVariable(set(\\&quot;rounding\\&quot;, 200))\\n  .namedTransformation(name(\\&quot;profile_pic\\&quot;));&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;standing_woman.jpg\\&quot;)\\n  .addVariable(set(\\&quot;aratio\\&quot;, \\&quot;1.0\\&quot;))\\n  .addVariable(set(\\&quot;width\\&quot;, 75))\\n  .addVariable(set(\\&quot;rounding\\&quot;, 200))\\n  .namedTransformation(name(\\&quot;profile_pic\\&quot;));&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Angular&quot;,&quot;packageName&quot;:&quot;@cloudinary\\\/ng&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;angular&quot;,&quot;framework&quot;:&quot;angular&quot;,&quot;language&quot;:&quot;angular&quot;,&quot;rawCodeSnippet&quot;:&quot;&lt;cl-image public-id=\\&quot;standing_woman.jpg\\&quot; &gt; &lt;cl-transformation variables=\\&quot;[[&#039;$aratio&#039;, &#039;1.0&#039;], [&#039;$width&#039;, &#039;75&#039;], [&#039;$rounding&#039;, &#039;200&#039;]]\\&quot;&gt; &lt;\\\/cl-transformation&gt; &lt;cl-transformation transformation={{[\\&quot;profile_pic\\&quot;]}}&gt; &lt;\\\/cl-transformation&gt; &lt;\\\/cl-image&gt;&quot;,&quot;codeSnippet&quot;:&quot;&lt;cl-image public-id=\\&quot;standing_woman.jpg\\&quot; &gt;\\n\\t&lt;cl-transformation variables=\\&quot;[[&#039;$aratio&#039;, &#039;1.0&#039;], [&#039;$width&#039;, &#039;75&#039;], [&#039;$rounding&#039;, &#039;200&#039;]]\\&quot;&gt;\\n\\t&lt;\\\/cl-transformation&gt;\\n\\t&lt;cl-transformation transformation={{[\\&quot;profile_pic\\&quot;]}}&gt;\\n\\t&lt;\\\/cl-transformation&gt;\\n&lt;\\\/cl-image&gt;&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Angular&quot;,&quot;packageName&quot;:&quot;@cloudinary\\\/angular-5.x&quot;,&quot;packageStatus&quot;:&quot;legacy&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;js_2&quot;,&quot;framework&quot;:&quot;js_2&quot;,&quot;language&quot;:&quot;js&quot;,&quot;rawCodeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;standing_woman.jpg\\&quot;)\\n  .addVariable(set(\\&quot;aratio\\&quot;, \\&quot;1.0\\&quot;))\\n  .addVariable(set(\\&quot;width\\&quot;, 75))\\n  .addVariable(set(\\&quot;rounding\\&quot;, 200))\\n  .namedTransformation(name(\\&quot;profile_pic\\&quot;));&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;standing_woman.jpg\\&quot;)\\n  .addVariable(set(\\&quot;aratio\\&quot;, \\&quot;1.0\\&quot;))\\n  .addVariable(set(\\&quot;width\\&quot;, 75))\\n  .addVariable(set(\\&quot;rounding\\&quot;, 200))\\n  .namedTransformation(name(\\&quot;profile_pic\\&quot;));&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;JS&quot;,&quot;packageName&quot;:&quot;@cloudinary\\\/url-gen&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;js&quot;,&quot;framework&quot;:&quot;js&quot;,&quot;language&quot;:&quot;js&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.imageTag(&#039;standing_woman.jpg&#039;, {transformation: [ {variables: [[\\&quot;$aratio\\&quot;, \\&quot;1.0\\&quot;], [\\&quot;$width\\&quot;, \\&quot;75\\&quot;], [\\&quot;$rounding\\&quot;, \\&quot;200\\&quot;]]}, {transformation: [\\&quot;profile_pic\\&quot;]} ]}).toHtml();&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.imageTag(&#039;standing_woman.jpg&#039;, {transformation: [\\n  {variables: [[\\&quot;$aratio\\&quot;, \\&quot;1.0\\&quot;], [\\&quot;$width\\&quot;, \\&quot;75\\&quot;], [\\&quot;$rounding\\&quot;, \\&quot;200\\&quot;]]},\\n  {transformation: [\\&quot;profile_pic\\&quot;]}\\n  ]}).toHtml();&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;JS&quot;,&quot;packageName&quot;:&quot;cloudinary-core&quot;,&quot;packageStatus&quot;:&quot;legacy&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;},{&quot;sdkId&quot;:&quot;python&quot;,&quot;framework&quot;:&quot;python&quot;,&quot;language&quot;:&quot;python&quot;,&quot;rawCodeSnippet&quot;:&quot;CloudinaryImage(\\&quot;standing_woman.jpg\\&quot;).image(transformation=[ {&#039;variables&#039;: [[\\&quot;$aratio\\&quot;, \\&quot;1.0\\&quot;], [\\&quot;$width\\&quot;, \\&quot;75\\&quot;], [\\&quot;$rounding\\&quot;, \\&quot;200\\&quot;]]}, {&#039;transformation&#039;: [\\&quot;profile_pic\\&quot;]} ])&quot;,&quot;codeSnippet&quot;:&quot;CloudinaryImage(\\&quot;standing_woman.jpg\\&quot;).image(transformation=[\\n  {&#039;variables&#039;: [[\\&quot;$aratio\\&quot;, \\&quot;1.0\\&quot;], [\\&quot;$width\\&quot;, \\&quot;75\\&quot;], [\\&quot;$rounding\\&quot;, \\&quot;200\\&quot;]]},\\n  {&#039;transformation&#039;: [\\&quot;profile_pic\\&quot;]}\\n  ])&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Python&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;php_2&quot;,&quot;framework&quot;:&quot;php_2&quot;,&quot;language&quot;:&quot;php&quot;,&quot;rawCodeSnippet&quot;:&quot;(new ImageTag(&#039;standing_woman.jpg&#039;))\\n\\t-&gt;addVariable(Variable::set(\\&quot;aratio\\&quot;,1.0))\\n\\t-&gt;addVariable(Variable::set(\\&quot;width\\&quot;,75))\\n\\t-&gt;addVariable(Variable::set(\\&quot;rounding\\&quot;,200))\\n\\t-&gt;namedTransformation(NamedTransformation::name(\\&quot;profile_pic\\&quot;));&quot;,&quot;codeSnippet&quot;:&quot;(new ImageTag(&#039;standing_woman.jpg&#039;))\\n\\t-&gt;addVariable(Variable::set(\\&quot;aratio\\&quot;,1.0))\\n\\t-&gt;addVariable(Variable::set(\\&quot;width\\&quot;,75))\\n\\t-&gt;addVariable(Variable::set(\\&quot;rounding\\&quot;,200))\\n\\t-&gt;namedTransformation(NamedTransformation::name(\\&quot;profile_pic\\&quot;));&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;PHP&quot;,&quot;packageName&quot;:&quot;cloudinary_php&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;3.x&quot;},{&quot;sdkId&quot;:&quot;php&quot;,&quot;framework&quot;:&quot;php&quot;,&quot;language&quot;:&quot;php&quot;,&quot;rawCodeSnippet&quot;:&quot;cl_image_tag(\\&quot;standing_woman.jpg\\&quot;, array(\\&quot;transformation\\&quot;=&gt;array( array(\\&quot;variables\\&quot;=&gt;array(array(\\&quot;$aratio\\&quot;, \\&quot;1.0\\&quot;), array(\\&quot;$width\\&quot;, \\&quot;75\\&quot;), array(\\&quot;$rounding\\&quot;, \\&quot;200\\&quot;))), array(\\&quot;transformation\\&quot;=&gt;array(\\&quot;profile_pic\\&quot;)) )))&quot;,&quot;codeSnippet&quot;:&quot;cl_image_tag(\\&quot;standing_woman.jpg\\&quot;, array(\\&quot;transformation\\&quot;=&gt;array(\\n  array(\\&quot;variables\\&quot;=&gt;array(array(\\&quot;$aratio\\&quot;, \\&quot;1.0\\&quot;), array(\\&quot;$width\\&quot;, \\&quot;75\\&quot;), array(\\&quot;$rounding\\&quot;, \\&quot;200\\&quot;))),\\n  array(\\&quot;transformation\\&quot;=&gt;array(\\&quot;profile_pic\\&quot;))\\n  )))&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;PHP&quot;,&quot;packageName&quot;:&quot;cloudinary_php&quot;,&quot;packageStatus&quot;:&quot;legacy&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;java&quot;,&quot;framework&quot;:&quot;java&quot;,&quot;language&quot;:&quot;java&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.url().transformation(new Transformation().variables(variable(\\&quot;$aratio\\&quot;,\\&quot;1.0\\&quot;),variable(\\&quot;$width\\&quot;,\\&quot;75\\&quot;),variable(\\&quot;$rounding\\&quot;,\\&quot;200\\&quot;)).chain() .named(\\&quot;profile_pic\\&quot;)).imageTag(\\&quot;standing_woman.jpg\\&quot;);&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.url().transformation(new Transformation()\\n  .variables(variable(\\&quot;$aratio\\&quot;,\\&quot;1.0\\&quot;),variable(\\&quot;$width\\&quot;,\\&quot;75\\&quot;),variable(\\&quot;$rounding\\&quot;,\\&quot;200\\&quot;)).chain()\\n  .named(\\&quot;profile_pic\\&quot;)).imageTag(\\&quot;standing_woman.jpg\\&quot;);&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Java&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;},{&quot;sdkId&quot;:&quot;ruby&quot;,&quot;framework&quot;:&quot;ruby&quot;,&quot;language&quot;:&quot;ruby&quot;,&quot;rawCodeSnippet&quot;:&quot;cl_image_tag(\\&quot;standing_woman.jpg\\&quot;, transformation: [ {variables: [[\\&quot;$aratio\\&quot;, \\&quot;1.0\\&quot;], [\\&quot;$width\\&quot;, \\&quot;75\\&quot;], [\\&quot;$rounding\\&quot;, \\&quot;200\\&quot;]]}, {transformation: [\\&quot;profile_pic\\&quot;]} ])&quot;,&quot;codeSnippet&quot;:&quot;cl_image_tag(\\&quot;standing_woman.jpg\\&quot;, transformation: [\\n  {variables: [[\\&quot;$aratio\\&quot;, \\&quot;1.0\\&quot;], [\\&quot;$width\\&quot;, \\&quot;75\\&quot;], [\\&quot;$rounding\\&quot;, \\&quot;200\\&quot;]]},\\n  {transformation: [\\&quot;profile_pic\\&quot;]}\\n  ])&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Ruby&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;},{&quot;sdkId&quot;:&quot;csharp&quot;,&quot;framework&quot;:&quot;csharp&quot;,&quot;language&quot;:&quot;csharp&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.Api.UrlImgUp.Transform(new Transformation().Variables(\\&quot;$aratio\\&quot;, 1.0).Chain() .Named(\\&quot;profile_pic\\&quot;)).BuildImageTag(\\&quot;standing_woman.jpg\\&quot;)&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.Api.UrlImgUp.Transform(new Transformation()\\n  .Variables(\\&quot;$aratio\\&quot;, 1.0).Chain()\\n  .Named(\\&quot;profile_pic\\&quot;)).BuildImageTag(\\&quot;standing_woman.jpg\\&quot;)&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;.NET&quot;,&quot;packageName&quot;:&quot;CloudinaryDotNet&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;dart&quot;,&quot;framework&quot;:&quot;dart&quot;,&quot;language&quot;:&quot;dart&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.image(&#039;standing_woman.jpg&#039;).transformation(Transformation()\\n\\t.addVariable(Variable.set(\\&quot;aratio\\&quot;,&#039;1.0&#039;))\\n\\t.addVariable(Variable.set(\\&quot;width\\&quot;,75))\\n\\t.addVariable(Variable.set(\\&quot;rounding\\&quot;,200))\\n\\t.namedTransformation(NamedTransformation.name(\\&quot;profile_pic\\&quot;)));&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image(&#039;standing_woman.jpg&#039;).transformation(Transformation()\\n\\t.addVariable(Variable.set(\\&quot;aratio\\&quot;,&#039;1.0&#039;))\\n\\t.addVariable(Variable.set(\\&quot;width\\&quot;,75))\\n\\t.addVariable(Variable.set(\\&quot;rounding\\&quot;,200))\\n\\t.namedTransformation(NamedTransformation.name(\\&quot;profile_pic\\&quot;)));&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Dart&quot;,&quot;packageName&quot;:&quot;cloudinary_dart&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;swift&quot;,&quot;framework&quot;:&quot;swift&quot;,&quot;language&quot;:&quot;swift&quot;,&quot;rawCodeSnippet&quot;:&quot;imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().chain() .setNamed(\\&quot;profile_pic\\&quot;)).generate(\\&quot;standing_woman.jpg\\&quot;)!, cloudinary: cloudinary)&quot;,&quot;codeSnippet&quot;:&quot;imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation()\\n  .chain()\\n  .setNamed(\\&quot;profile_pic\\&quot;)).generate(\\&quot;standing_woman.jpg\\&quot;)!, cloudinary: cloudinary)&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;iOS&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;5.x&quot;},{&quot;sdkId&quot;:&quot;android&quot;,&quot;framework&quot;:&quot;android&quot;,&quot;language&quot;:&quot;android&quot;,&quot;rawCodeSnippet&quot;:&quot;MediaManager.get().url().transformation(new Transformation().variables(variable(\\&quot;$aratio\\&quot;,\\&quot;1.0\\&quot;),variable(\\&quot;$width\\&quot;,\\&quot;75\\&quot;),variable(\\&quot;$rounding\\&quot;,\\&quot;200\\&quot;)).chain() .named(\\&quot;profile_pic\\&quot;)).generate(\\&quot;standing_woman.jpg\\&quot;);&quot;,&quot;codeSnippet&quot;:&quot;MediaManager.get().url().transformation(new Transformation()\\n  .variables(variable(\\&quot;$aratio\\&quot;,\\&quot;1.0\\&quot;),variable(\\&quot;$width\\&quot;,\\&quot;75\\&quot;),variable(\\&quot;$rounding\\&quot;,\\&quot;200\\&quot;)).chain()\\n  .named(\\&quot;profile_pic\\&quot;)).generate(\\&quot;standing_woman.jpg\\&quot;);&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Android&quot;,&quot;packageName&quot;:&quot;cloudinary-android&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;3.x&quot;},{&quot;sdkId&quot;:&quot;flutter&quot;,&quot;framework&quot;:&quot;flutter&quot;,&quot;language&quot;:&quot;flutter&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.image(&#039;standing_woman.jpg&#039;).transformation(Transformation()\\n\\t.addVariable(Variable.set(\\&quot;aratio\\&quot;,&#039;1.0&#039;))\\n\\t.addVariable(Variable.set(\\&quot;width\\&quot;,75))\\n\\t.addVariable(Variable.set(\\&quot;rounding\\&quot;,200))\\n\\t.namedTransformation(NamedTransformation.name(\\&quot;profile_pic\\&quot;)));&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image(&#039;standing_woman.jpg&#039;).transformation(Transformation()\\n\\t.addVariable(Variable.set(\\&quot;aratio\\&quot;,&#039;1.0&#039;))\\n\\t.addVariable(Variable.set(\\&quot;width\\&quot;,75))\\n\\t.addVariable(Variable.set(\\&quot;rounding\\&quot;,200))\\n\\t.namedTransformation(NamedTransformation.name(\\&quot;profile_pic\\&quot;)));&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Flutter&quot;,&quot;packageName&quot;:&quot;cloudinary_flutter&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;kotlin&quot;,&quot;framework&quot;:&quot;kotlin&quot;,&quot;language&quot;:&quot;kotlin&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.image {\\n\\tpublicId(\\&quot;standing_woman.jpg\\&quot;)\\n\\t addVariable(Variable.set(\\&quot;aratio\\&quot;,1.0F))\\n\\t addVariable(Variable.set(\\&quot;width\\&quot;,75))\\n\\t addVariable(Variable.set(\\&quot;rounding\\&quot;,200))\\n\\t namedTransformation(NamedTransformation.name(\\&quot;profile_pic\\&quot;)) \\n}.generate()&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image {\\n\\tpublicId(\\&quot;standing_woman.jpg\\&quot;)\\n\\t addVariable(Variable.set(\\&quot;aratio\\&quot;,1.0F))\\n\\t addVariable(Variable.set(\\&quot;width\\&quot;,75))\\n\\t addVariable(Variable.set(\\&quot;rounding\\&quot;,200))\\n\\t namedTransformation(NamedTransformation.name(\\&quot;profile_pic\\&quot;)) \\n}.generate()&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Kotlin&quot;,&quot;packageName&quot;:&quot;kotlin-url-gen&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;jquery&quot;,&quot;framework&quot;:&quot;jquery&quot;,&quot;language&quot;:&quot;jquery&quot;,&quot;rawCodeSnippet&quot;:&quot;$.cloudinary.image(\\&quot;standing_woman.jpg\\&quot;, {transformation: [ {variables: [[\\&quot;$aratio\\&quot;, \\&quot;1.0\\&quot;], [\\&quot;$width\\&quot;, \\&quot;75\\&quot;], [\\&quot;$rounding\\&quot;, \\&quot;200\\&quot;]]}, {transformation: [\\&quot;profile_pic\\&quot;]} ]})&quot;,&quot;codeSnippet&quot;:&quot;$.cloudinary.image(\\&quot;standing_woman.jpg\\&quot;, {transformation: [\\n  {variables: [[\\&quot;$aratio\\&quot;, \\&quot;1.0\\&quot;], [\\&quot;$width\\&quot;, \\&quot;75\\&quot;], [\\&quot;$rounding\\&quot;, \\&quot;200\\&quot;]]},\\n  {transformation: [\\&quot;profile_pic\\&quot;]}\\n  ]})&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;jQuery&quot;,&quot;packageName&quot;:&quot;cloudinary-jquery&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;},{&quot;sdkId&quot;:&quot;react_native&quot;,&quot;framework&quot;:&quot;react_native&quot;,&quot;language&quot;:&quot;react_native&quot;,&quot;rawCodeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;standing_woman.jpg\\&quot;)\\n  .addVariable(set(\\&quot;aratio\\&quot;, \\&quot;1.0\\&quot;))\\n  .addVariable(set(\\&quot;width\\&quot;, 75))\\n  .addVariable(set(\\&quot;rounding\\&quot;, 200))\\n  .namedTransformation(name(\\&quot;profile_pic\\&quot;));&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;standing_woman.jpg\\&quot;)\\n  .addVariable(set(\\&quot;aratio\\&quot;, \\&quot;1.0\\&quot;))\\n  .addVariable(set(\\&quot;width\\&quot;, 75))\\n  .addVariable(set(\\&quot;rounding\\&quot;, 200))\\n  .namedTransformation(name(\\&quot;profile_pic\\&quot;));&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;React Native&quot;,&quot;packageName&quot;:&quot;cloudinary-react-native&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;}]\"\n      parsed-url=\"{&quot;url&quot;:&quot;https:\\\/\\\/res.cloudinary.com\\\/demo\\\/image\\\/upload\\\/$aratio_1.0,$width_75,$rounding_200\\\/t_profile_pic\\\/standing_woman.jpg&quot;,&quot;cloud_name&quot;:&quot;demo&quot;,&quot;host&quot;:&quot;res.cloudinary.com&quot;,&quot;type&quot;:&quot;upload&quot;,&quot;resource_type&quot;:&quot;image&quot;,&quot;transformation&quot;:[{&quot;$aratio&quot;:&quot;1.0&quot;,&quot;$width&quot;:&quot;75&quot;,&quot;$rounding&quot;:&quot;200&quot;},{&quot;transformation&quot;:&quot;profile_pic&quot;}],&quot;transformation_string&quot;:&quot;$aratio_1.0,$width_75,$rounding_200\\\/t_profile_pic&quot;,&quot;url_suffix&quot;:&quot;&quot;,&quot;version&quot;:&quot;&quot;,&quot;secure&quot;:true,&quot;public_id&quot;:&quot;standing_woman.jpg&quot;,&quot;extension&quot;:&quot;jpg&quot;,&quot;format&quot;:&quot;jpg&quot;,&quot;format_code&quot;:true,&quot;url_code&quot;:false,&quot;signature&quot;:&quot;&quot;,&quot;private_cdn&quot;:false,&quot;result_asset_type&quot;:&quot;image&quot;}\"\n      with-url=\"true\"\n    >\n      <span class=\"u-visually-hidden\">Loading code examples<\/span>\n    <\/cld-code-widget><\/p>\n<h3>Going all out<\/h3>\n<p>Let\u2019s say you want to post the winners of a photo contest. The winning photos are delivered with a banner graphic overlay displaying the name of the winner and the place that he or she won. You want to post all photos at their original size, but both the width of the banner overlay and total width of the text (regardless of the length of the winners\u2019 names) must be relative to the size of the photo.<\/p>\n<p>For example:<\/p>\n<div style=\"clear: both; margin-bottom: 20px\">\n<\/div>\n<div style=\"text-align:center;\">\n<span style=\"display:inline-block;vertical-align:bottom;\">\n<a href=\"https:\/\/res.cloudinary.com\/demo\/image\/upload\/$name_!Laura Howard!,$award_!First!\/t_photo_contest\/yellow_flower_bugs\" target =\"_blank\"><img decoding=\"async\" src=\"https:\/\/res.cloudinary.com\/demo\/image\/upload\/$name_!Laura Howard!,$award_!First!\/t_photo_contest\/w_150\/yellow_flower_bugs\" alt=\"Second place\" title=\"Second place\" style=\"margin-right: 10px;display:block;\" \/><\/a>\n<\/span>\n<span style=\"display:inline-block;vertical-align:bottom;\">\n<a href=\"https:\/\/res.cloudinary.com\/demo\/image\/upload\/$name_!Jonathan Manchester!,$award_!Second!\/t_photo_contest\/sea_shell\" target =\"_blank\"><img decoding=\"async\" src=\"https:\/\/res.cloudinary.com\/demo\/image\/upload\/$name_!Jonathan Manchester!,$award_!Second!\/t_photo_contest\/w_250\/sea_shell\" alt=\"Second place\" title=\"Second place\" style=\"margin-right: 10px;display:block;\" \/><\/a>\n<\/span>\n<span style=\"display:inline-block;vertical-align:bottom;\">\n<a href=\"https:\/\/res.cloudinary.com\/demo\/image\/upload\/$name_!John Smith!,$award_!Third!\/t_photo_contest\/koala_square\" target =\"_blank\"><img decoding=\"async\" src=\"https:\/\/res.cloudinary.com\/demo\/image\/upload\/$name_!John Smith!,$award_!Third!\/t_photo_contest\/w_200\/koala_square.jpg\" alt=\"Third place\" title=\"Third place\" style=\"margin-right: 10px;display:block;\" \/><\/a>\n<\/span>\n<\/div>\n<div style=\"clear: both; margin-bottom: 20px\">\n<\/div>\n<p>You can accomplish this by creating user-defined variables for all the varying elements along with arithmetic operators and relative values. For example, we want the banner to be 90% of the photo\u2019s width and 15% of it\u2019s height. The text fits well on the banner when it\u2019s about 45% of the total image width, but the distance of the text from the bottom of the image has to be relative to the height of the resized banner. Of course we want the winner\u2019s name and where they placed, to be variables as well.<\/p>\n<p>The transformation that achieves all this is somewhat complex, but that\u2019s OK. We just need to work it out once and then put it into a named transformation.<\/p>\n<p>So the delivery of each winning photo is a snap!<\/p>\n<p>For example, all we have to do to deliver the first place photo is set the <code>$name<\/code> variable to \u201cJen Fine\u201d and the <code>$award<\/code> variable to \u201cFirst\u201d:\n<cld-code-widget\n      class=\" c-code-widget\"\n      snippets=\"[{&quot;sdkId&quot;:&quot;nodejs&quot;,&quot;framework&quot;:&quot;nodejs&quot;,&quot;language&quot;:&quot;nodejs&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.image(\\&quot;girl_camera.jpg\\&quot;, {transformation: [ {variables: [[\\&quot;$name\\&quot;, \\&quot;!Jen Fine!\\&quot;], [\\&quot;$award\\&quot;, \\&quot;!First!\\&quot;]]}, {transformation: [\\&quot;photo_contest\\&quot;]} ]})&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image(\\&quot;girl_camera.jpg\\&quot;, {transformation: [\\n  {variables: [[\\&quot;$name\\&quot;, \\&quot;!Jen Fine!\\&quot;], [\\&quot;$award\\&quot;, \\&quot;!First!\\&quot;]]},\\n  {transformation: [\\&quot;photo_contest\\&quot;]}\\n  ]})&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Node.js&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;},{&quot;sdkId&quot;:&quot;react_2&quot;,&quot;framework&quot;:&quot;react_2&quot;,&quot;language&quot;:&quot;react&quot;,&quot;rawCodeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;girl_camera.jpg\\&quot;)\\n  .addVariable(set(\\&quot;name\\&quot;, \\&quot;Jen Fine\\&quot;))\\n  .addVariable(set(\\&quot;award\\&quot;, \\&quot;First\\&quot;))\\n  .namedTransformation(name(\\&quot;photo_contest\\&quot;));&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;girl_camera.jpg\\&quot;)\\n  .addVariable(set(\\&quot;name\\&quot;, \\&quot;Jen Fine\\&quot;))\\n  .addVariable(set(\\&quot;award\\&quot;, \\&quot;First\\&quot;))\\n  .namedTransformation(name(\\&quot;photo_contest\\&quot;));&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;React&quot;,&quot;packageName&quot;:&quot;@cloudinary\\\/react&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;react&quot;,&quot;framework&quot;:&quot;react&quot;,&quot;language&quot;:&quot;react&quot;,&quot;rawCodeSnippet&quot;:&quot;&lt;Image publicId=\\&quot;girl_camera.jpg\\&quot; &gt; &lt;Transformation variables={[[\\&quot;$name\\&quot;, \\&quot;!Jen Fine!\\&quot;], [\\&quot;$award\\&quot;, \\&quot;!First!\\&quot;]]} \\\/&gt; &lt;Transformation transformation={[\\&quot;photo_contest\\&quot;]} \\\/&gt; &lt;\\\/Image&gt;&quot;,&quot;codeSnippet&quot;:&quot;&lt;Image publicId=\\&quot;girl_camera.jpg\\&quot; &gt;\\n\\t&lt;Transformation variables={[[\\&quot;$name\\&quot;, \\&quot;!Jen Fine!\\&quot;], [\\&quot;$award\\&quot;, \\&quot;!First!\\&quot;]]} \\\/&gt;\\n\\t&lt;Transformation transformation={[\\&quot;photo_contest\\&quot;]} \\\/&gt;\\n&lt;\\\/Image&gt;&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;React&quot;,&quot;packageName&quot;:&quot;cloudinary-react&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;vue_2&quot;,&quot;framework&quot;:&quot;vue_2&quot;,&quot;language&quot;:&quot;vue&quot;,&quot;rawCodeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;girl_camera.jpg\\&quot;)\\n  .addVariable(set(\\&quot;name\\&quot;, \\&quot;Jen Fine\\&quot;))\\n  .addVariable(set(\\&quot;award\\&quot;, \\&quot;First\\&quot;))\\n  .namedTransformation(name(\\&quot;photo_contest\\&quot;));&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;girl_camera.jpg\\&quot;)\\n  .addVariable(set(\\&quot;name\\&quot;, \\&quot;Jen Fine\\&quot;))\\n  .addVariable(set(\\&quot;award\\&quot;, \\&quot;First\\&quot;))\\n  .namedTransformation(name(\\&quot;photo_contest\\&quot;));&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Vue.js&quot;,&quot;packageName&quot;:&quot;@cloudinary\\\/vue&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;vue&quot;,&quot;framework&quot;:&quot;vue&quot;,&quot;language&quot;:&quot;vue&quot;,&quot;rawCodeSnippet&quot;:&quot;&lt;cld-image public-id=\\&quot;girl_camera.jpg\\&quot; &gt; &lt;cld-transformation :variables=\\&quot;[[&#039;$name&#039;, &#039;!Jen Fine!&#039;], [&#039;$award&#039;, &#039;!First!&#039;]]\\&quot; \\\/&gt; &lt;cld-transformation transformation={[\\&quot;photo_contest\\&quot;]} \\\/&gt; &lt;\\\/cld-image&gt;&quot;,&quot;codeSnippet&quot;:&quot;&lt;cld-image public-id=\\&quot;girl_camera.jpg\\&quot; &gt;\\n\\t&lt;cld-transformation :variables=\\&quot;[[&#039;$name&#039;, &#039;!Jen Fine!&#039;], [&#039;$award&#039;, &#039;!First!&#039;]]\\&quot; \\\/&gt;\\n\\t&lt;cld-transformation transformation={[\\&quot;photo_contest\\&quot;]} \\\/&gt;\\n&lt;\\\/cld-image&gt;&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Vue.js&quot;,&quot;packageName&quot;:&quot;cloudinary-vue&quot;,&quot;packageStatus&quot;:&quot;legacy&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;angular_2&quot;,&quot;framework&quot;:&quot;angular_2&quot;,&quot;language&quot;:&quot;angular&quot;,&quot;rawCodeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;girl_camera.jpg\\&quot;)\\n  .addVariable(set(\\&quot;name\\&quot;, \\&quot;Jen Fine\\&quot;))\\n  .addVariable(set(\\&quot;award\\&quot;, \\&quot;First\\&quot;))\\n  .namedTransformation(name(\\&quot;photo_contest\\&quot;));&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;girl_camera.jpg\\&quot;)\\n  .addVariable(set(\\&quot;name\\&quot;, \\&quot;Jen Fine\\&quot;))\\n  .addVariable(set(\\&quot;award\\&quot;, \\&quot;First\\&quot;))\\n  .namedTransformation(name(\\&quot;photo_contest\\&quot;));&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Angular&quot;,&quot;packageName&quot;:&quot;@cloudinary\\\/ng&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;angular&quot;,&quot;framework&quot;:&quot;angular&quot;,&quot;language&quot;:&quot;angular&quot;,&quot;rawCodeSnippet&quot;:&quot;&lt;cl-image public-id=\\&quot;girl_camera.jpg\\&quot; &gt; &lt;cl-transformation variables=\\&quot;[[&#039;$name&#039;, &#039;!Jen Fine!&#039;], [&#039;$award&#039;, &#039;!First!&#039;]]\\&quot;&gt; &lt;\\\/cl-transformation&gt; &lt;cl-transformation transformation={{[\\&quot;photo_contest\\&quot;]}}&gt; &lt;\\\/cl-transformation&gt; &lt;\\\/cl-image&gt;&quot;,&quot;codeSnippet&quot;:&quot;&lt;cl-image public-id=\\&quot;girl_camera.jpg\\&quot; &gt;\\n\\t&lt;cl-transformation variables=\\&quot;[[&#039;$name&#039;, &#039;!Jen Fine!&#039;], [&#039;$award&#039;, &#039;!First!&#039;]]\\&quot;&gt;\\n\\t&lt;\\\/cl-transformation&gt;\\n\\t&lt;cl-transformation transformation={{[\\&quot;photo_contest\\&quot;]}}&gt;\\n\\t&lt;\\\/cl-transformation&gt;\\n&lt;\\\/cl-image&gt;&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Angular&quot;,&quot;packageName&quot;:&quot;@cloudinary\\\/angular-5.x&quot;,&quot;packageStatus&quot;:&quot;legacy&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;js_2&quot;,&quot;framework&quot;:&quot;js_2&quot;,&quot;language&quot;:&quot;js&quot;,&quot;rawCodeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;girl_camera.jpg\\&quot;)\\n  .addVariable(set(\\&quot;name\\&quot;, \\&quot;Jen Fine\\&quot;))\\n  .addVariable(set(\\&quot;award\\&quot;, \\&quot;First\\&quot;))\\n  .namedTransformation(name(\\&quot;photo_contest\\&quot;));&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;girl_camera.jpg\\&quot;)\\n  .addVariable(set(\\&quot;name\\&quot;, \\&quot;Jen Fine\\&quot;))\\n  .addVariable(set(\\&quot;award\\&quot;, \\&quot;First\\&quot;))\\n  .namedTransformation(name(\\&quot;photo_contest\\&quot;));&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;JS&quot;,&quot;packageName&quot;:&quot;@cloudinary\\\/url-gen&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;js&quot;,&quot;framework&quot;:&quot;js&quot;,&quot;language&quot;:&quot;js&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.imageTag(&#039;girl_camera.jpg&#039;, {transformation: [ {variables: [[\\&quot;$name\\&quot;, \\&quot;!Jen Fine!\\&quot;], [\\&quot;$award\\&quot;, \\&quot;!First!\\&quot;]]}, {transformation: [\\&quot;photo_contest\\&quot;]} ]}).toHtml();&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.imageTag(&#039;girl_camera.jpg&#039;, {transformation: [\\n  {variables: [[\\&quot;$name\\&quot;, \\&quot;!Jen Fine!\\&quot;], [\\&quot;$award\\&quot;, \\&quot;!First!\\&quot;]]},\\n  {transformation: [\\&quot;photo_contest\\&quot;]}\\n  ]}).toHtml();&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;JS&quot;,&quot;packageName&quot;:&quot;cloudinary-core&quot;,&quot;packageStatus&quot;:&quot;legacy&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;},{&quot;sdkId&quot;:&quot;python&quot;,&quot;framework&quot;:&quot;python&quot;,&quot;language&quot;:&quot;python&quot;,&quot;rawCodeSnippet&quot;:&quot;CloudinaryImage(\\&quot;girl_camera.jpg\\&quot;).image(transformation=[ {&#039;variables&#039;: [[\\&quot;$name\\&quot;, \\&quot;!Jen Fine!\\&quot;], [\\&quot;$award\\&quot;, \\&quot;!First!\\&quot;]]}, {&#039;transformation&#039;: [\\&quot;photo_contest\\&quot;]} ])&quot;,&quot;codeSnippet&quot;:&quot;CloudinaryImage(\\&quot;girl_camera.jpg\\&quot;).image(transformation=[\\n  {&#039;variables&#039;: [[\\&quot;$name\\&quot;, \\&quot;!Jen Fine!\\&quot;], [\\&quot;$award\\&quot;, \\&quot;!First!\\&quot;]]},\\n  {&#039;transformation&#039;: [\\&quot;photo_contest\\&quot;]}\\n  ])&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Python&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;php_2&quot;,&quot;framework&quot;:&quot;php_2&quot;,&quot;language&quot;:&quot;php&quot;,&quot;rawCodeSnippet&quot;:&quot;(new ImageTag(&#039;girl_camera.jpg&#039;))\\n\\t-&gt;addVariable(Variable::set(\\&quot;name\\&quot;,\\&quot;Jen Fine\\&quot;))\\n\\t-&gt;addVariable(Variable::set(\\&quot;award\\&quot;,\\&quot;First\\&quot;))\\n\\t-&gt;namedTransformation(NamedTransformation::name(\\&quot;photo_contest\\&quot;));&quot;,&quot;codeSnippet&quot;:&quot;(new ImageTag(&#039;girl_camera.jpg&#039;))\\n\\t-&gt;addVariable(Variable::set(\\&quot;name\\&quot;,\\&quot;Jen Fine\\&quot;))\\n\\t-&gt;addVariable(Variable::set(\\&quot;award\\&quot;,\\&quot;First\\&quot;))\\n\\t-&gt;namedTransformation(NamedTransformation::name(\\&quot;photo_contest\\&quot;));&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;PHP&quot;,&quot;packageName&quot;:&quot;cloudinary_php&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;3.x&quot;},{&quot;sdkId&quot;:&quot;php&quot;,&quot;framework&quot;:&quot;php&quot;,&quot;language&quot;:&quot;php&quot;,&quot;rawCodeSnippet&quot;:&quot;cl_image_tag(\\&quot;girl_camera.jpg\\&quot;, array(\\&quot;transformation\\&quot;=&gt;array( array(\\&quot;variables\\&quot;=&gt;array(array(\\&quot;$name\\&quot;, \\&quot;!Jen Fine!\\&quot;), array(\\&quot;$award\\&quot;, \\&quot;!First!\\&quot;))), array(\\&quot;transformation\\&quot;=&gt;array(\\&quot;photo_contest\\&quot;)) )))&quot;,&quot;codeSnippet&quot;:&quot;cl_image_tag(\\&quot;girl_camera.jpg\\&quot;, array(\\&quot;transformation\\&quot;=&gt;array(\\n  array(\\&quot;variables\\&quot;=&gt;array(array(\\&quot;$name\\&quot;, \\&quot;!Jen Fine!\\&quot;), array(\\&quot;$award\\&quot;, \\&quot;!First!\\&quot;))),\\n  array(\\&quot;transformation\\&quot;=&gt;array(\\&quot;photo_contest\\&quot;))\\n  )))&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;PHP&quot;,&quot;packageName&quot;:&quot;cloudinary_php&quot;,&quot;packageStatus&quot;:&quot;legacy&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;java&quot;,&quot;framework&quot;:&quot;java&quot;,&quot;language&quot;:&quot;java&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.url().transformation(new Transformation().variables(variable(\\&quot;$name\\&quot;,\\&quot;!Jen Fine!\\&quot;),variable(\\&quot;$award\\&quot;,\\&quot;!First!\\&quot;)).chain() .named(\\&quot;photo_contest\\&quot;)).imageTag(\\&quot;girl_camera.jpg\\&quot;);&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.url().transformation(new Transformation()\\n  .variables(variable(\\&quot;$name\\&quot;,\\&quot;!Jen Fine!\\&quot;),variable(\\&quot;$award\\&quot;,\\&quot;!First!\\&quot;)).chain()\\n  .named(\\&quot;photo_contest\\&quot;)).imageTag(\\&quot;girl_camera.jpg\\&quot;);&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Java&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;},{&quot;sdkId&quot;:&quot;ruby&quot;,&quot;framework&quot;:&quot;ruby&quot;,&quot;language&quot;:&quot;ruby&quot;,&quot;rawCodeSnippet&quot;:&quot;cl_image_tag(\\&quot;girl_camera.jpg\\&quot;, transformation: [ {variables: [[\\&quot;$name\\&quot;, \\&quot;!Jen Fine!\\&quot;], [\\&quot;$award\\&quot;, \\&quot;!First!\\&quot;]]}, {transformation: [\\&quot;photo_contest\\&quot;]} ])&quot;,&quot;codeSnippet&quot;:&quot;cl_image_tag(\\&quot;girl_camera.jpg\\&quot;, transformation: [\\n  {variables: [[\\&quot;$name\\&quot;, \\&quot;!Jen Fine!\\&quot;], [\\&quot;$award\\&quot;, \\&quot;!First!\\&quot;]]},\\n  {transformation: [\\&quot;photo_contest\\&quot;]}\\n  ])&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Ruby&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;},{&quot;sdkId&quot;:&quot;csharp&quot;,&quot;framework&quot;:&quot;csharp&quot;,&quot;language&quot;:&quot;csharp&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.Api.UrlImgUp.Transform(new Transformation().Variables(\\&quot;$name\\&quot;, !Jen Fine!).Chain() .Named(\\&quot;photo_contest\\&quot;)).BuildImageTag(\\&quot;girl_camera.jpg\\&quot;)&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.Api.UrlImgUp.Transform(new Transformation()\\n  .Variables(\\&quot;$name\\&quot;, !Jen Fine!).Chain()\\n  .Named(\\&quot;photo_contest\\&quot;)).BuildImageTag(\\&quot;girl_camera.jpg\\&quot;)&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;.NET&quot;,&quot;packageName&quot;:&quot;CloudinaryDotNet&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;dart&quot;,&quot;framework&quot;:&quot;dart&quot;,&quot;language&quot;:&quot;dart&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.image(&#039;girl_camera.jpg&#039;).transformation(Transformation()\\n\\t.addVariable(Variable.set(\\&quot;name\\&quot;,\\&quot;Jen Fine\\&quot;))\\n\\t.addVariable(Variable.set(\\&quot;award\\&quot;,\\&quot;First\\&quot;))\\n\\t.namedTransformation(NamedTransformation.name(\\&quot;photo_contest\\&quot;)));&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image(&#039;girl_camera.jpg&#039;).transformation(Transformation()\\n\\t.addVariable(Variable.set(\\&quot;name\\&quot;,\\&quot;Jen Fine\\&quot;))\\n\\t.addVariable(Variable.set(\\&quot;award\\&quot;,\\&quot;First\\&quot;))\\n\\t.namedTransformation(NamedTransformation.name(\\&quot;photo_contest\\&quot;)));&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Dart&quot;,&quot;packageName&quot;:&quot;cloudinary_dart&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;swift&quot;,&quot;framework&quot;:&quot;swift&quot;,&quot;language&quot;:&quot;swift&quot;,&quot;rawCodeSnippet&quot;:&quot;imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().chain() .setNamed(\\&quot;photo_contest\\&quot;)).generate(\\&quot;girl_camera.jpg\\&quot;)!, cloudinary: cloudinary)&quot;,&quot;codeSnippet&quot;:&quot;imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation()\\n  .chain()\\n  .setNamed(\\&quot;photo_contest\\&quot;)).generate(\\&quot;girl_camera.jpg\\&quot;)!, cloudinary: cloudinary)&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;iOS&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;5.x&quot;},{&quot;sdkId&quot;:&quot;android&quot;,&quot;framework&quot;:&quot;android&quot;,&quot;language&quot;:&quot;android&quot;,&quot;rawCodeSnippet&quot;:&quot;MediaManager.get().url().transformation(new Transformation().variables(variable(\\&quot;$name\\&quot;,\\&quot;!Jen Fine!\\&quot;),variable(\\&quot;$award\\&quot;,\\&quot;!First!\\&quot;)).chain() .named(\\&quot;photo_contest\\&quot;)).generate(\\&quot;girl_camera.jpg\\&quot;);&quot;,&quot;codeSnippet&quot;:&quot;MediaManager.get().url().transformation(new Transformation()\\n  .variables(variable(\\&quot;$name\\&quot;,\\&quot;!Jen Fine!\\&quot;),variable(\\&quot;$award\\&quot;,\\&quot;!First!\\&quot;)).chain()\\n  .named(\\&quot;photo_contest\\&quot;)).generate(\\&quot;girl_camera.jpg\\&quot;);&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Android&quot;,&quot;packageName&quot;:&quot;cloudinary-android&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;3.x&quot;},{&quot;sdkId&quot;:&quot;flutter&quot;,&quot;framework&quot;:&quot;flutter&quot;,&quot;language&quot;:&quot;flutter&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.image(&#039;girl_camera.jpg&#039;).transformation(Transformation()\\n\\t.addVariable(Variable.set(\\&quot;name\\&quot;,\\&quot;Jen Fine\\&quot;))\\n\\t.addVariable(Variable.set(\\&quot;award\\&quot;,\\&quot;First\\&quot;))\\n\\t.namedTransformation(NamedTransformation.name(\\&quot;photo_contest\\&quot;)));&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image(&#039;girl_camera.jpg&#039;).transformation(Transformation()\\n\\t.addVariable(Variable.set(\\&quot;name\\&quot;,\\&quot;Jen Fine\\&quot;))\\n\\t.addVariable(Variable.set(\\&quot;award\\&quot;,\\&quot;First\\&quot;))\\n\\t.namedTransformation(NamedTransformation.name(\\&quot;photo_contest\\&quot;)));&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Flutter&quot;,&quot;packageName&quot;:&quot;cloudinary_flutter&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;kotlin&quot;,&quot;framework&quot;:&quot;kotlin&quot;,&quot;language&quot;:&quot;kotlin&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.image {\\n\\tpublicId(\\&quot;girl_camera.jpg\\&quot;)\\n\\t addVariable(Variable.set(\\&quot;name\\&quot;,\\&quot;Jen Fine\\&quot;))\\n\\t addVariable(Variable.set(\\&quot;award\\&quot;,\\&quot;First\\&quot;))\\n\\t namedTransformation(NamedTransformation.name(\\&quot;photo_contest\\&quot;)) \\n}.generate()&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image {\\n\\tpublicId(\\&quot;girl_camera.jpg\\&quot;)\\n\\t addVariable(Variable.set(\\&quot;name\\&quot;,\\&quot;Jen Fine\\&quot;))\\n\\t addVariable(Variable.set(\\&quot;award\\&quot;,\\&quot;First\\&quot;))\\n\\t namedTransformation(NamedTransformation.name(\\&quot;photo_contest\\&quot;)) \\n}.generate()&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Kotlin&quot;,&quot;packageName&quot;:&quot;kotlin-url-gen&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;jquery&quot;,&quot;framework&quot;:&quot;jquery&quot;,&quot;language&quot;:&quot;jquery&quot;,&quot;rawCodeSnippet&quot;:&quot;$.cloudinary.image(\\&quot;girl_camera.jpg\\&quot;, {transformation: [ {variables: [[\\&quot;$name\\&quot;, \\&quot;!Jen Fine!\\&quot;], [\\&quot;$award\\&quot;, \\&quot;!First!\\&quot;]]}, {transformation: [\\&quot;photo_contest\\&quot;]} ]})&quot;,&quot;codeSnippet&quot;:&quot;$.cloudinary.image(\\&quot;girl_camera.jpg\\&quot;, {transformation: [\\n  {variables: [[\\&quot;$name\\&quot;, \\&quot;!Jen Fine!\\&quot;], [\\&quot;$award\\&quot;, \\&quot;!First!\\&quot;]]},\\n  {transformation: [\\&quot;photo_contest\\&quot;]}\\n  ]})&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;jQuery&quot;,&quot;packageName&quot;:&quot;cloudinary-jquery&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;},{&quot;sdkId&quot;:&quot;react_native&quot;,&quot;framework&quot;:&quot;react_native&quot;,&quot;language&quot;:&quot;react_native&quot;,&quot;rawCodeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;girl_camera.jpg\\&quot;)\\n  .addVariable(set(\\&quot;name\\&quot;, \\&quot;Jen Fine\\&quot;))\\n  .addVariable(set(\\&quot;award\\&quot;, \\&quot;First\\&quot;))\\n  .namedTransformation(name(\\&quot;photo_contest\\&quot;));&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;girl_camera.jpg\\&quot;)\\n  .addVariable(set(\\&quot;name\\&quot;, \\&quot;Jen Fine\\&quot;))\\n  .addVariable(set(\\&quot;award\\&quot;, \\&quot;First\\&quot;))\\n  .namedTransformation(name(\\&quot;photo_contest\\&quot;));&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;React Native&quot;,&quot;packageName&quot;:&quot;cloudinary-react-native&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;}]\"\n      parsed-url=\"{&quot;url&quot;:&quot;https:\\\/\\\/res.cloudinary.com\\\/demo\\\/image\\\/upload\\\/$name_!Jen%20Fine!,$award_!First!\\\/t_photo_contest\\\/girl_camera.jpg&quot;,&quot;cloud_name&quot;:&quot;demo&quot;,&quot;host&quot;:&quot;res.cloudinary.com&quot;,&quot;type&quot;:&quot;upload&quot;,&quot;resource_type&quot;:&quot;image&quot;,&quot;transformation&quot;:[{&quot;$name&quot;:&quot;!Jen Fine!&quot;,&quot;$award&quot;:&quot;!First!&quot;},{&quot;transformation&quot;:&quot;photo_contest&quot;}],&quot;transformation_string&quot;:&quot;$name_!Jen Fine!,$award_!First!\\\/t_photo_contest&quot;,&quot;url_suffix&quot;:&quot;&quot;,&quot;version&quot;:&quot;&quot;,&quot;secure&quot;:true,&quot;public_id&quot;:&quot;girl_camera.jpg&quot;,&quot;extension&quot;:&quot;jpg&quot;,&quot;format&quot;:&quot;jpg&quot;,&quot;format_code&quot;:true,&quot;url_code&quot;:false,&quot;signature&quot;:&quot;&quot;,&quot;private_cdn&quot;:false,&quot;result_asset_type&quot;:&quot;image&quot;}\"\n      with-url=\"true\"\n    >\n      <span class=\"u-visually-hidden\">Loading code examples<\/span>\n    <\/cld-code-widget><a class=\"c-image-link\" href=\"https:\/\/res.cloudinary.com\/demo\/image\/upload\/$name_!Jen%20Fine!,$award_!First!\/t_photo_contest\/girl_camera.jpg\" target=\"_blank\"><img decoding=\"async\" src=\"https:\/\/res.cloudinary.com\/demo\/image\/upload\/$name_!Jen Fine!,$award_!First!\/t_photo_contest\/w_250\/girl_camera.jpg\" alt=\"First place for Jen Fine\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"250\" height=\"374\"\/><\/a><\/p>\n<h2>Change is the only constant<\/h2>\n<p>\u201cChange is the only constant.\u201d The phrase was coined by Greek philosophers over 2500 years ago, but it has never been truer than it is today. With the supersonic pace of Web technology development and non-stop improvements and new directions in UI design, having static values anywhere can be a hinderance.<\/p>\n<p>But static values no longer need to weigh down your image transformation code. Take advantage of user-defined variables in named transformations to enable quick and flexible adjustments while maximizing code reuse and consistency across a variety of media assets.<\/p>\n<p>This article demonstrated a bunch of ideas to get you started with user-defined variable transformations, but the sky\u2019s the limit. User-defined variables are supported with all Cloudinary plans, including the free one, so if you don\u2019t have a Cloudinary account yet, take a few seconds to <a href=\"https:\/\/cloudinary.com\/users\/register\/free\">get a free account now<\/a>, and show us what you\u2019ve got!<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"","protected":false},"author":41,"featured_media":21496,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_cloudinary_featured_overwrite":false,"footnotes":""},"categories":[1],"tags":[165],"class_list":["post-21495","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-image-transformation"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v25.6 (Yoast SEO v26.9) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Automating image transformations with user-defined variables<\/title>\n<meta name=\"description\" content=\"Use user-defined variables to separate image transformation definitions from parameter values, enabling reuse and added flexibility for your transformations.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/cloudinary.com\/blog\/user_defined_variables_can_transform_the_way_you_deliver_media\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"User-defined variables can transform the way you deliver media\" \/>\n<meta property=\"og:description\" content=\"Use user-defined variables to separate image transformation definitions from parameter values, enabling reuse and added flexibility for your transformations.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/cloudinary.com\/blog\/user_defined_variables_can_transform_the_way_you_deliver_media\" \/>\n<meta property=\"og:site_name\" content=\"Cloudinary Blog\" \/>\n<meta property=\"article:published_time\" content=\"2017-03-15T15:47:06+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-03-15T19:53:31+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1645220446\/website-2021\/blog\/blog_ud_variables\/blog_ud_variables.jpg?_i=AA\" \/>\n\t<meta property=\"og:image:width\" content=\"3000\" \/>\n\t<meta property=\"og:image:height\" content=\"1696\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"NewsArticle\",\"@id\":\"https:\/\/cloudinary.com\/blog\/user_defined_variables_can_transform_the_way_you_deliver_media#article\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/user_defined_variables_can_transform_the_way_you_deliver_media\"},\"author\":{\"name\":\"\",\"@id\":\"\"},\"headline\":\"User-defined variables can transform the way you deliver media\",\"datePublished\":\"2017-03-15T15:47:06+00:00\",\"dateModified\":\"2026-03-15T19:53:31+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/user_defined_variables_can_transform_the_way_you_deliver_media\"},\"wordCount\":9,\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/user_defined_variables_can_transform_the_way_you_deliver_media#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1645220446\/website-2021\/blog\/blog_ud_variables\/blog_ud_variables.jpg?_i=AA\",\"keywords\":[\"Image Transformation\"],\"inLanguage\":\"en-US\",\"copyrightYear\":\"2017\",\"copyrightHolder\":{\"@id\":\"https:\/\/cloudinary.com\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/cloudinary.com\/blog\/user_defined_variables_can_transform_the_way_you_deliver_media\",\"url\":\"https:\/\/cloudinary.com\/blog\/user_defined_variables_can_transform_the_way_you_deliver_media\",\"name\":\"Automating image transformations with user-defined variables\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/user_defined_variables_can_transform_the_way_you_deliver_media#primaryimage\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/user_defined_variables_can_transform_the_way_you_deliver_media#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1645220446\/website-2021\/blog\/blog_ud_variables\/blog_ud_variables.jpg?_i=AA\",\"datePublished\":\"2017-03-15T15:47:06+00:00\",\"dateModified\":\"2026-03-15T19:53:31+00:00\",\"description\":\"Use user-defined variables to separate image transformation definitions from parameter values, enabling reuse and added flexibility for your transformations.\",\"breadcrumb\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/user_defined_variables_can_transform_the_way_you_deliver_media#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/cloudinary.com\/blog\/user_defined_variables_can_transform_the_way_you_deliver_media\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/user_defined_variables_can_transform_the_way_you_deliver_media#primaryimage\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1645220446\/website-2021\/blog\/blog_ud_variables\/blog_ud_variables.jpg?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1645220446\/website-2021\/blog\/blog_ud_variables\/blog_ud_variables.jpg?_i=AA\",\"width\":3000,\"height\":1696},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/cloudinary.com\/blog\/user_defined_variables_can_transform_the_way_you_deliver_media#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/cloudinary.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"User-defined variables can transform the way you deliver media\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\",\"url\":\"https:\/\/cloudinary.com\/blog\/\",\"name\":\"Cloudinary Blog\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/cloudinary.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\",\"name\":\"Cloudinary Blog\",\"url\":\"https:\/\/cloudinary.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA\",\"width\":312,\"height\":60,\"caption\":\"Cloudinary Blog\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Automating image transformations with user-defined variables","description":"Use user-defined variables to separate image transformation definitions from parameter values, enabling reuse and added flexibility for your transformations.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/cloudinary.com\/blog\/user_defined_variables_can_transform_the_way_you_deliver_media","og_locale":"en_US","og_type":"article","og_title":"User-defined variables can transform the way you deliver media","og_description":"Use user-defined variables to separate image transformation definitions from parameter values, enabling reuse and added flexibility for your transformations.","og_url":"https:\/\/cloudinary.com\/blog\/user_defined_variables_can_transform_the_way_you_deliver_media","og_site_name":"Cloudinary Blog","article_published_time":"2017-03-15T15:47:06+00:00","article_modified_time":"2026-03-15T19:53:31+00:00","og_image":[{"width":3000,"height":1696,"url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1645220446\/website-2021\/blog\/blog_ud_variables\/blog_ud_variables.jpg?_i=AA","type":"image\/jpeg"}],"twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"NewsArticle","@id":"https:\/\/cloudinary.com\/blog\/user_defined_variables_can_transform_the_way_you_deliver_media#article","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/user_defined_variables_can_transform_the_way_you_deliver_media"},"author":{"name":"","@id":""},"headline":"User-defined variables can transform the way you deliver media","datePublished":"2017-03-15T15:47:06+00:00","dateModified":"2026-03-15T19:53:31+00:00","mainEntityOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/user_defined_variables_can_transform_the_way_you_deliver_media"},"wordCount":9,"publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/user_defined_variables_can_transform_the_way_you_deliver_media#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1645220446\/website-2021\/blog\/blog_ud_variables\/blog_ud_variables.jpg?_i=AA","keywords":["Image Transformation"],"inLanguage":"en-US","copyrightYear":"2017","copyrightHolder":{"@id":"https:\/\/cloudinary.com\/#organization"}},{"@type":"WebPage","@id":"https:\/\/cloudinary.com\/blog\/user_defined_variables_can_transform_the_way_you_deliver_media","url":"https:\/\/cloudinary.com\/blog\/user_defined_variables_can_transform_the_way_you_deliver_media","name":"Automating image transformations with user-defined variables","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/user_defined_variables_can_transform_the_way_you_deliver_media#primaryimage"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/user_defined_variables_can_transform_the_way_you_deliver_media#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1645220446\/website-2021\/blog\/blog_ud_variables\/blog_ud_variables.jpg?_i=AA","datePublished":"2017-03-15T15:47:06+00:00","dateModified":"2026-03-15T19:53:31+00:00","description":"Use user-defined variables to separate image transformation definitions from parameter values, enabling reuse and added flexibility for your transformations.","breadcrumb":{"@id":"https:\/\/cloudinary.com\/blog\/user_defined_variables_can_transform_the_way_you_deliver_media#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/cloudinary.com\/blog\/user_defined_variables_can_transform_the_way_you_deliver_media"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/user_defined_variables_can_transform_the_way_you_deliver_media#primaryimage","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1645220446\/website-2021\/blog\/blog_ud_variables\/blog_ud_variables.jpg?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1645220446\/website-2021\/blog\/blog_ud_variables\/blog_ud_variables.jpg?_i=AA","width":3000,"height":1696},{"@type":"BreadcrumbList","@id":"https:\/\/cloudinary.com\/blog\/user_defined_variables_can_transform_the_way_you_deliver_media#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/cloudinary.com\/blog\/"},{"@type":"ListItem","position":2,"name":"User-defined variables can transform the way you deliver media"}]},{"@type":"WebSite","@id":"https:\/\/cloudinary.com\/blog\/#website","url":"https:\/\/cloudinary.com\/blog\/","name":"Cloudinary Blog","description":"","publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/cloudinary.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/cloudinary.com\/blog\/#organization","name":"Cloudinary Blog","url":"https:\/\/cloudinary.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA","width":312,"height":60,"caption":"Cloudinary Blog"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":""}]}},"jetpack_featured_media_url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1645220446\/website-2021\/blog\/blog_ud_variables\/blog_ud_variables.jpg?_i=AA","_links":{"self":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/21495","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/users\/41"}],"replies":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/comments?post=21495"}],"version-history":[{"count":2,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/21495\/revisions"}],"predecessor-version":[{"id":39878,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/21495\/revisions\/39878"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media\/21496"}],"wp:attachment":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media?parent=21495"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/categories?post=21495"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/tags?post=21495"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}