{"id":22215,"date":"2021-07-26T22:26:57","date_gmt":"2021-07-26T22:26:57","guid":{"rendered":"http:\/\/cool_tricks_for_resizing_images_in_javascript"},"modified":"2025-02-09T14:44:18","modified_gmt":"2025-02-09T22:44:18","slug":"cool_tricks_for_resizing_images_in_javascript","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/cool_tricks_for_resizing_images_in_javascript","title":{"rendered":"Cool Tricks for Resizing Images in JavaScript"},"content":{"rendered":"<div class=\"wp-block-cloudinary-markdown \"><p>Resizing images with JavaScript (JS) creates nifty effects, many of which you cannot do in <a href=\"https:\/\/cloudinary.com\/blog\/working_with_css_images\">Cascading Style Sheets (CSS)<\/a>. However, even though you can automate a zoom effect with JS to enable users to zoom in and out of images, limitations abound.<\/p>\n<p>This article shows you how to resize images in JavaScript for a zoom effect and do the same much faster and more effectively in Cloudinary, with which you can also apply many other appealing effects. Examples are scaling with percentage values and scaling widths of up to 140 percent of the original. Be assured that you\u2019ll be impressed.<\/p>\n<p>Here are the topics:<\/p>\n<ul>\n<li>\n<a href=\"#resize\">Resizing images for a zoom effort with JS<\/a>\n<\/li>\n<li>\n<a href=\"#automate\">Automating resizing with JS during image uploads<\/a>\n<\/li>\n<li>\n<a href=\"#rescale\">Resizing and rescaling images effectively and speedily with Cloudinary<\/a>\n<\/li>\n<li>\n<a href=\"#cloudinary\">Learning more about Cloudinary<\/a>\n<\/li>\n<li>\n<a href=\"#css\">Checking out the details of CSS image transformations<\/a>\n<\/li>\n<\/ul>\n<h2 id=\"resize\">Resizing Images for a Zoom Effect With JS<\/h2>\n<p>Resizing images with JS is particularly useful for creating online product galleries, in which users can zoom in or out of images according to the maximum settings you specify with only one click.<\/p>\n<p>The resizing task takes two functions, which you can either insert directly into your HTML source with <code>&lt;script&gt;<\/code> tags or into a standalone JS file. Those functions work for any <code>&lt;img&gt;<\/code> tag that you label with the ID <code>zoom_img<\/code>. See this <a href=\"https:\/\/www.tutorialrepublic.com\/codelab.php?topic=faq&amp;file=javascript-increasing-and-decreasing-image-size\">full demo<\/a> of the code.<\/p>\n<p>The two functions are as follows:<\/p>\n<ul>\n<li>\n<p><code>zoomin()<\/code>, which creates a zoom-in action for scaling up the image size by 100 pixels until the maximum defined size (1000 px.) is reached.<\/p>\n<pre class=\"js-syntax-highlighted\"><code>function zoomin(){\n    var myImg = document.getElementById(&quot;zoom_img&quot;);\n    var currWidth = myImg.clientWidth;\n    if(currWidth &gt;= 1000){\n        alert(&quot;You\u2019re fully zoomed in!&quot;);\n    } else{\n        myImg.style.width = (currWidth + 100) + &quot;px&quot;;\n    } \n}\n<\/code><\/pre>\n<\/li>\n<li>\n<p><code>zoomout()<\/code>, which creates a zoom-out action for scaling down the image by 100 pixels until the minimum defined size (50 px.) is reached.<\/p>\n<pre class=\"js-syntax-highlighted\"><code>function zoomout(){\n    var myImg = document.getElementById(&quot;zoom_img&quot;);\n    var currWidth = myImg.clientWidth;\n    if(currWidth &gt;= 50){\n        alert(&quot;That\u2019s as small as it gets.&quot;);\n    } else{\n        myImg.style.width = (currWidth - 100) + &quot;px&quot;;\n    }\n}\n<\/code><\/pre>\n<\/li>\n<\/ul>\n<p>To enable users to call those functions, create an interface (see below) with buttons for the image. Add them above or below the image element in your HTML file.<\/p>\n<pre class=\"js-syntax-highlighted\"><code>&lt;button type=&quot;button&quot; onclick=&quot;zoomin()&quot;&gt;&lt;img src=&quot;\/examples\/images\/zoom-in.png&quot;&gt; Zoom In&lt;\/button&gt;\n\n&lt;button type=&quot;button&quot; onclick=&quot;zoomout()&quot;&gt;&lt;img src=&quot;\/examples\/images\/zoom-out.png&quot;&gt; Zoom Out&lt;\/button&gt;\n<\/code><\/pre>\n<p>For more details on resizing images with CSS, see <a href=\"https:\/\/cloudinary.com\/blog\/image_resizing_manually_with_css_and_automatically_with_cloudinary\"><em>Image Resizing: Manually With CSS and Automatically With Cloudinary<\/em><\/a>.<\/p>\n<h2 id=\"automate\">Automating Resizing With JS During Image Uploads<\/h2>\n<p>Automating the resizing task is ideal for enabling users to resize images in JavaScript or for resizing them with a built-in mechanism before being stored away. An <a href=\"https:\/\/codepen.io\/tuanitpro\/pen\/wJZJbp\">example<\/a> of the code in this section is on CodePen.<\/p>\n<p>To start, build the HTML framework into which to load, preview, and transform your images. The following code creates an input to accept images, a button to enable resizing, and two placeholders for your original and resized images.<\/p>\n<pre class=\"js-syntax-highlighted\"><code>&lt;input id=&quot;imageFile&quot; name=&quot;imageFile&quot; type=&quot;file&quot; class=&quot;imageFile&quot; accept=&quot;image\/*&quot;\/&gt; \n&lt;input type=&quot;button&quot; value=&quot;Resize Image&quot; \nonclick=&quot;resizeImage()&quot;\/&gt; \n&lt;br\/&gt;\n&lt;img src=&quot;&quot; id=&quot;preview&quot;&gt;\n&lt;img src=&quot;&quot; id=&quot;output&quot;&gt;\n<\/code><\/pre>\n<p>Next, create a function to accept the images:<\/p>\n<div class='c-callout  c-callout--inline-title c-callout--note'><strong class='c-callout__title'>Note:<\/strong> <p>The code below is in jQuery. Be sure to link or refer to the jQuery library.<\/p><\/div>\n<pre class=\"js-syntax-highlighted\"><code>$(document).ready(function() {\n  $(&quot;#imageFile&quot;).change(function(event) {\n    var files = event.target.files;\n    var file = files[0];\n\n    if (file) {\n      var reader = new FileReader();\n      reader.onload = function(e) {\n        document.getElementById(&quot;preview&quot;).src = e.target.result;\n      };\n      reader.readAsDataURL(file);\n    }\n  });\n});\n<\/code><\/pre>\n<p>Finally, create a resizing function (see below) within which to load the image into the file reader, set the image to be resized, create a canvas for resizing, and output the resized image. Note the boldfaced comments for each of the steps.<\/p>\n<pre class=\"js-syntax-highlighted\"><code>function resizeImage() {\n var filesToUploads = document.getElementById(&quot;imageFile&quot;).files;\n  var file = filesToUploads[0];\n    if (file) {\n      var reader = new FileReader();\n      \n\/\/ Set the image for the FileReader\n      reader.onload = function (e) {\n        var img = document.createElement(&quot;img&quot;);\n        img.src = e.target.result;\n\n\/\/ Create your canvas\n        var canvas = document.createElement(&quot;canvas&quot;);\n        var ctx = canvas.getContext(&quot;2d&quot;);\n        ctx.drawImage(img, 0, 0);\n\n        var MAX_WIDTH = 500;\n        var MAX_HEIGHT = 500;\n        var width = img.width;\n        var height = img.height;\n\n\/\/ Add the resizing logic\n        if (width &gt; height) {\n          if (width &gt; MAX_WIDTH) {\n            height *= MAX_WIDTH \/ width;\n            width = MAX_WIDTH;\n          }\n        } else {\n          if (height &gt; MAX_HEIGHT) {\n            width *= MAX_HEIGHT \/ height;\n            height = MAX_HEIGHT;\n          }\n        }\n\n\/\/Specify the resizing result\n        canvas.width = width;\n        canvas.height = height;\n        var ctx = canvas.getContext(&quot;2d&quot;);\n        ctx.drawImage(img, 0, 0, width, height);\n\n        dataurl = canvas.toDataURL(file.type);\n        document.getElementById(&quot;output&quot;).src = dataurl;\n      };\n      reader.readAsDataURL(file);\n    }\n  } \n<\/code><\/pre>\n<h2 id=\"rescale\">Resizing and Rescaling Images Effectively and Speedily With Cloudinary<\/h2>\n<p>A cloud-based service for managing images and videos, Cloudinary offers a generous <a href=\"https:\/\/cloudinary.com\/pricing\">free-forever subscription plan<\/a>. While on that platform, you can upload your images, apply built-in effects, filters, and modifications, including automated image rotations that are difficult or impossible to produce with CSS and JS.<\/p>\n<p>Also with Cloudinary, you can easily transform images programmatically with <a href=\"https:\/\/cloudinary.com\/documentation\">SDKs<\/a> or URL parameters. Cloudinary applies changes dynamically, leaving your original images intact. That means you can modify images on the fly as your site design evolves and as you support more devices and screen sizes\u2014a huge convenience and time saver.<\/p>\n<p>Below are three faster and easier ways in which to resize images in JavaScript with Cloudinary. All you need to do is add parameters to the URL.<\/p>\n<h3>Automating Smart Cropping<\/h3>\n<p>With Cloudinary, you can <a href=\"https:\/\/support.cloudinary.com\/hc\/en-us\/articles\/360024950012-How-to-Apply-Gravity-Based-Crops-on-Images-with-Cloudinary\">automatically crop images<\/a> to the right size through content-aware AI. During the process, you can automatically select faces, individual features, or areas of interest by applying the <code>gravity<\/code> filter (<code>g<\/code>).<\/p>\n<video controls=\"controls\" muted poster=\"https:\/\/res.cloudinary.com\/demo\/video\/upload\/w_700,c_fill,f_auto,q_auto,dpr_2.0\/gravity-cropping-tutorial-final_ryy8i5.png\" src=\"https:\/\/res.cloudinary.com\/demo\/video\/upload\/vc_auto\/gravity-cropping-tutorial-final_ryy8i5.webm\">\n<\/video>\n<p>The <code>g_auto<\/code> settings in this example automatically crop the most interesting area, as determined by AI:<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/image\/upload\/w_700,c_fill,f_auto,q_auto,dpr_2.0\/Web_Assets\/blog\/g_auto-skater-before-after.png\" alt=\"auto gravity\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"1400\" height=\"568\"\/><\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-1\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\">cloudinary.imageTag(<span class=\"hljs-string\">'veducate\/skater_2_-_800.jpg'<\/span>, {<span class=\"hljs-attr\">width<\/span>: <span class=\"hljs-number\">300<\/span>, <span class=\"hljs-attr\">height<\/span>: <span class=\"hljs-number\">300<\/span>, <span class=\"hljs-attr\">gravity<\/span>: <span class=\"hljs-string\">\"auto\"<\/span>, <span class=\"hljs-attr\">crop<\/span>: <span class=\"hljs-string\">\"crop\"<\/span>}).toHtml();\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-1\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<p>You can also specify areas to preserve with smart cropping. A use case is to ensure that the model doesn\u2019t take center stage in product images. This example specifies the backpack as the area of focus:<\/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;veducate\\\/spencer-backman-482079-unsplash.jpg\\&quot;, {gravity: \\&quot;auto:classic\\&quot;, height: 175, width: 175, crop: \\&quot;thumb\\&quot;})&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image(\\&quot;veducate\\\/spencer-backman-482079-unsplash.jpg\\&quot;, {gravity: \\&quot;auto:classic\\&quot;, height: 175, width: 175, crop: \\&quot;thumb\\&quot;})&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;veducate\\\/spencer-backman-482079-unsplash.jpg\\&quot;)\\n  .resize(\\n    thumbnail()\\n      .width(175)\\n      .height(175)\\n      .gravity(autoGravity().autoFocus(focusOn(\\&quot;classic\\&quot;)))\\n  )\\n  .setVersion(1551428220);&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;veducate\\\/spencer-backman-482079-unsplash.jpg\\&quot;)\\n  .resize(\\n    thumbnail()\\n      .width(175)\\n      .height(175)\\n      .gravity(autoGravity().autoFocus(focusOn(\\&quot;classic\\&quot;)))\\n  )\\n  .setVersion(1551428220);&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;veducate\\\/spencer-backman-482079-unsplash.jpg\\&quot; &gt; &lt;Transformation gravity=\\&quot;auto:classic\\&quot; height=\\&quot;175\\&quot; width=\\&quot;175\\&quot; crop=\\&quot;thumb\\&quot; \\\/&gt; &lt;\\\/Image&gt;&quot;,&quot;codeSnippet&quot;:&quot;&lt;Image publicId=\\&quot;veducate\\\/spencer-backman-482079-unsplash.jpg\\&quot; &gt;\\n\\t&lt;Transformation gravity=\\&quot;auto:classic\\&quot; height=\\&quot;175\\&quot; width=\\&quot;175\\&quot; crop=\\&quot;thumb\\&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;veducate\\\/spencer-backman-482079-unsplash.jpg\\&quot;)\\n  .resize(\\n    thumbnail()\\n      .width(175)\\n      .height(175)\\n      .gravity(autoGravity().autoFocus(focusOn(\\&quot;classic\\&quot;)))\\n  )\\n  .setVersion(1551428220);&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;veducate\\\/spencer-backman-482079-unsplash.jpg\\&quot;)\\n  .resize(\\n    thumbnail()\\n      .width(175)\\n      .height(175)\\n      .gravity(autoGravity().autoFocus(focusOn(\\&quot;classic\\&quot;)))\\n  )\\n  .setVersion(1551428220);&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;veducate\\\/spencer-backman-482079-unsplash.jpg\\&quot; &gt; &lt;cld-transformation gravity=\\&quot;auto:classic\\&quot; height=\\&quot;175\\&quot; width=\\&quot;175\\&quot; crop=\\&quot;thumb\\&quot; \\\/&gt; &lt;\\\/cld-image&gt;&quot;,&quot;codeSnippet&quot;:&quot;&lt;cld-image public-id=\\&quot;veducate\\\/spencer-backman-482079-unsplash.jpg\\&quot; &gt;\\n\\t&lt;cld-transformation gravity=\\&quot;auto:classic\\&quot; height=\\&quot;175\\&quot; width=\\&quot;175\\&quot; crop=\\&quot;thumb\\&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;veducate\\\/spencer-backman-482079-unsplash.jpg\\&quot;)\\n  .resize(\\n    thumbnail()\\n      .width(175)\\n      .height(175)\\n      .gravity(autoGravity().autoFocus(focusOn(\\&quot;classic\\&quot;)))\\n  )\\n  .setVersion(1551428220);&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;veducate\\\/spencer-backman-482079-unsplash.jpg\\&quot;)\\n  .resize(\\n    thumbnail()\\n      .width(175)\\n      .height(175)\\n      .gravity(autoGravity().autoFocus(focusOn(\\&quot;classic\\&quot;)))\\n  )\\n  .setVersion(1551428220);&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;veducate\\\/spencer-backman-482079-unsplash.jpg\\&quot; &gt; &lt;cl-transformation gravity=\\&quot;auto:classic\\&quot; height=\\&quot;175\\&quot; width=\\&quot;175\\&quot; crop=\\&quot;thumb\\&quot;&gt; &lt;\\\/cl-transformation&gt; &lt;\\\/cl-image&gt;&quot;,&quot;codeSnippet&quot;:&quot;&lt;cl-image public-id=\\&quot;veducate\\\/spencer-backman-482079-unsplash.jpg\\&quot; &gt;\\n\\t&lt;cl-transformation gravity=\\&quot;auto:classic\\&quot; height=\\&quot;175\\&quot; width=\\&quot;175\\&quot; crop=\\&quot;thumb\\&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;veducate\\\/spencer-backman-482079-unsplash.jpg\\&quot;)\\n  .resize(\\n    thumbnail()\\n      .width(175)\\n      .height(175)\\n      .gravity(autoGravity().autoFocus(focusOn(\\&quot;classic\\&quot;)))\\n  )\\n  .setVersion(1551428220);&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;veducate\\\/spencer-backman-482079-unsplash.jpg\\&quot;)\\n  .resize(\\n    thumbnail()\\n      .width(175)\\n      .height(175)\\n      .gravity(autoGravity().autoFocus(focusOn(\\&quot;classic\\&quot;)))\\n  )\\n  .setVersion(1551428220);&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;veducate\\\/spencer-backman-482079-unsplash.jpg&#039;, {gravity: \\&quot;auto:classic\\&quot;, height: 175, width: 175, crop: \\&quot;thumb\\&quot;}).toHtml();&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.imageTag(&#039;veducate\\\/spencer-backman-482079-unsplash.jpg&#039;, {gravity: \\&quot;auto:classic\\&quot;, height: 175, width: 175, crop: \\&quot;thumb\\&quot;}).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;veducate\\\/spencer-backman-482079-unsplash.jpg\\&quot;).image(gravity=\\&quot;auto:classic\\&quot;, height=175, width=175, crop=\\&quot;thumb\\&quot;)&quot;,&quot;codeSnippet&quot;:&quot;CloudinaryImage(\\&quot;veducate\\\/spencer-backman-482079-unsplash.jpg\\&quot;).image(gravity=\\&quot;auto:classic\\&quot;, height=175, width=175, crop=\\&quot;thumb\\&quot;)&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;veducate\\\/spencer-backman-482079-unsplash.jpg&#039;))\\n\\t-&gt;resize(Resize::thumbnail()-&gt;width(175)\\n-&gt;height(175)\\n\\t-&gt;gravity(\\n\\tGravity::autoGravity()\\n\\t-&gt;autoFocus(\\n\\tAutoFocus::focusOn(\\&quot;classic\\&quot;))\\n\\t)\\n\\t)\\n\\t-&gt;version(1551428220);&quot;,&quot;codeSnippet&quot;:&quot;(new ImageTag(&#039;veducate\\\/spencer-backman-482079-unsplash.jpg&#039;))\\n\\t-&gt;resize(Resize::thumbnail()-&gt;width(175)\\n-&gt;height(175)\\n\\t-&gt;gravity(\\n\\tGravity::autoGravity()\\n\\t-&gt;autoFocus(\\n\\tAutoFocus::focusOn(\\&quot;classic\\&quot;))\\n\\t)\\n\\t)\\n\\t-&gt;version(1551428220);&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;veducate\\\/spencer-backman-482079-unsplash.jpg\\&quot;, array(\\&quot;gravity\\&quot;=&gt;\\&quot;auto:classic\\&quot;, \\&quot;height\\&quot;=&gt;175, \\&quot;width\\&quot;=&gt;175, \\&quot;crop\\&quot;=&gt;\\&quot;thumb\\&quot;))&quot;,&quot;codeSnippet&quot;:&quot;cl_image_tag(\\&quot;veducate\\\/spencer-backman-482079-unsplash.jpg\\&quot;, array(\\&quot;gravity\\&quot;=&gt;\\&quot;auto:classic\\&quot;, \\&quot;height\\&quot;=&gt;175, \\&quot;width\\&quot;=&gt;175, \\&quot;crop\\&quot;=&gt;\\&quot;thumb\\&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;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().gravity(\\&quot;auto:classic\\&quot;).height(175).width(175).crop(\\&quot;thumb\\&quot;)).imageTag(\\&quot;veducate\\\/spencer-backman-482079-unsplash.jpg\\&quot;);&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.url().transformation(new Transformation().gravity(\\&quot;auto:classic\\&quot;).height(175).width(175).crop(\\&quot;thumb\\&quot;)).imageTag(\\&quot;veducate\\\/spencer-backman-482079-unsplash.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;veducate\\\/spencer-backman-482079-unsplash.jpg\\&quot;, gravity: \\&quot;auto:classic\\&quot;, height: 175, width: 175, crop: \\&quot;thumb\\&quot;)&quot;,&quot;codeSnippet&quot;:&quot;cl_image_tag(\\&quot;veducate\\\/spencer-backman-482079-unsplash.jpg\\&quot;, gravity: \\&quot;auto:classic\\&quot;, height: 175, width: 175, crop: \\&quot;thumb\\&quot;)&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().Gravity(\\&quot;auto:classic\\&quot;).Height(175).Width(175).Crop(\\&quot;thumb\\&quot;)).BuildImageTag(\\&quot;veducate\\\/spencer-backman-482079-unsplash.jpg\\&quot;)&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.Api.UrlImgUp.Transform(new Transformation().Gravity(\\&quot;auto:classic\\&quot;).Height(175).Width(175).Crop(\\&quot;thumb\\&quot;)).BuildImageTag(\\&quot;veducate\\\/spencer-backman-482079-unsplash.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;veducate\\\/spencer-backman-482079-unsplash.jpg&#039;).transformation(Transformation()\\n\\t.resize(Resize.thumbnail().width(175)\\n.height(175)\\n\\t.gravity(\\n\\tGravity.autoGravity()\\n\\t.autoFocus(\\n\\tAutoFocus.focusOn(\\&quot;classic\\&quot;))\\n\\t)\\n\\t)\\n\\t.version(1551428220));&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image(&#039;veducate\\\/spencer-backman-482079-unsplash.jpg&#039;).transformation(Transformation()\\n\\t.resize(Resize.thumbnail().width(175)\\n.height(175)\\n\\t.gravity(\\n\\tGravity.autoGravity()\\n\\t.autoFocus(\\n\\tAutoFocus.focusOn(\\&quot;classic\\&quot;))\\n\\t)\\n\\t)\\n\\t.version(1551428220));&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().setGravity(\\&quot;auto:classic\\&quot;).setHeight(175).setWidth(175).setCrop(\\&quot;thumb\\&quot;)).generate(\\&quot;veducate\\\/spencer-backman-482079-unsplash.jpg\\&quot;)!, cloudinary: cloudinary)&quot;,&quot;codeSnippet&quot;:&quot;imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setGravity(\\&quot;auto:classic\\&quot;).setHeight(175).setWidth(175).setCrop(\\&quot;thumb\\&quot;)).generate(\\&quot;veducate\\\/spencer-backman-482079-unsplash.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().gravity(\\&quot;auto:classic\\&quot;).height(175).width(175).crop(\\&quot;thumb\\&quot;)).generate(\\&quot;veducate\\\/spencer-backman-482079-unsplash.jpg\\&quot;);&quot;,&quot;codeSnippet&quot;:&quot;MediaManager.get().url().transformation(new Transformation().gravity(\\&quot;auto:classic\\&quot;).height(175).width(175).crop(\\&quot;thumb\\&quot;)).generate(\\&quot;veducate\\\/spencer-backman-482079-unsplash.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;veducate\\\/spencer-backman-482079-unsplash.jpg&#039;).transformation(Transformation()\\n\\t.resize(Resize.thumbnail().width(175)\\n.height(175)\\n\\t.gravity(\\n\\tGravity.autoGravity()\\n\\t.autoFocus(\\n\\tAutoFocus.focusOn(\\&quot;classic\\&quot;))\\n\\t)\\n\\t)\\n\\t.version(1551428220));&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image(&#039;veducate\\\/spencer-backman-482079-unsplash.jpg&#039;).transformation(Transformation()\\n\\t.resize(Resize.thumbnail().width(175)\\n.height(175)\\n\\t.gravity(\\n\\tGravity.autoGravity()\\n\\t.autoFocus(\\n\\tAutoFocus.focusOn(\\&quot;classic\\&quot;))\\n\\t)\\n\\t)\\n\\t.version(1551428220));&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;veducate\\\/spencer-backman-482079-unsplash.jpg\\&quot;)\\n\\t resize(Resize.thumbnail() { width(175)\\n height(175)\\n\\t gravity(\\n\\tGravity.autoGravity() {\\n\\t autoFocus(\\n\\tAutoFocus.focusOn(\\&quot;classic\\&quot;))\\n\\t })\\n\\t })\\n\\t version(1551428220) \\n}.generate()&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image {\\n\\tpublicId(\\&quot;veducate\\\/spencer-backman-482079-unsplash.jpg\\&quot;)\\n\\t resize(Resize.thumbnail() { width(175)\\n height(175)\\n\\t gravity(\\n\\tGravity.autoGravity() {\\n\\t autoFocus(\\n\\tAutoFocus.focusOn(\\&quot;classic\\&quot;))\\n\\t })\\n\\t })\\n\\t version(1551428220) \\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;veducate\\\/spencer-backman-482079-unsplash.jpg\\&quot;, {gravity: \\&quot;auto:classic\\&quot;, height: 175, width: 175, crop: \\&quot;thumb\\&quot;})&quot;,&quot;codeSnippet&quot;:&quot;$.cloudinary.image(\\&quot;veducate\\\/spencer-backman-482079-unsplash.jpg\\&quot;, {gravity: \\&quot;auto:classic\\&quot;, height: 175, width: 175, crop: \\&quot;thumb\\&quot;})&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;veducate\\\/spencer-backman-482079-unsplash.jpg\\&quot;)\\n  .resize(\\n    thumbnail()\\n      .width(175)\\n      .height(175)\\n      .gravity(autoGravity().autoFocus(focusOn(\\&quot;classic\\&quot;)))\\n  )\\n  .setVersion(1551428220);&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;veducate\\\/spencer-backman-482079-unsplash.jpg\\&quot;)\\n  .resize(\\n    thumbnail()\\n      .width(175)\\n      .height(175)\\n      .gravity(autoGravity().autoFocus(focusOn(\\&quot;classic\\&quot;)))\\n  )\\n  .setVersion(1551428220);&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\\\/c_thumb,g_auto:classic,h_175,w_175\\\/v1551428220\\\/veducate\\\/spencer-backman-482079-unsplash.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;crop_mode&quot;:&quot;thumb&quot;,&quot;gravity&quot;:&quot;auto:classic&quot;,&quot;height&quot;:&quot;175&quot;,&quot;width&quot;:&quot;175&quot;}],&quot;transformation_string&quot;:&quot;c_thumb,g_auto:classic,h_175,w_175&quot;,&quot;url_suffix&quot;:&quot;&quot;,&quot;version&quot;:&quot;1551428220&quot;,&quot;secure&quot;:true,&quot;public_id&quot;:&quot;veducate\\\/spencer-backman-482079-unsplash.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\/c_thumb,g_auto:classic,h_175,w_175\/v1551428220\/veducate\/spencer-backman-482079-unsplash.jpg\" target=\"_blank\"><img decoding=\"async\" src=\"https:\/\/res.cloudinary.com\/demo\/image\/upload\/c_thumb,g_auto:classic,h_175,w_175\/v1551428220\/veducate\/spencer-backman-482079-unsplash.jpg\" alt=\"g_auto:classic Transformation Applied to It\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"175\" height=\"175\"\/><\/a>\n<em>g_auto:classic<\/em>\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;veducate\\\/spencer-backman-482079-unsplash.jpg\\&quot;, {gravity: \\&quot;auto:backpack\\&quot;, height: 175, width: 175, crop: \\&quot;thumb\\&quot;})&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image(\\&quot;veducate\\\/spencer-backman-482079-unsplash.jpg\\&quot;, {gravity: \\&quot;auto:backpack\\&quot;, height: 175, width: 175, crop: \\&quot;thumb\\&quot;})&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;veducate\\\/spencer-backman-482079-unsplash.jpg\\&quot;)\\n  .resize(\\n    thumbnail()\\n      .width(175)\\n      .height(175)\\n      .gravity(autoGravity().autoFocus(focusOn(\\&quot;backpack\\&quot;)))\\n  )\\n  .setVersion(1551428220);&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;veducate\\\/spencer-backman-482079-unsplash.jpg\\&quot;)\\n  .resize(\\n    thumbnail()\\n      .width(175)\\n      .height(175)\\n      .gravity(autoGravity().autoFocus(focusOn(\\&quot;backpack\\&quot;)))\\n  )\\n  .setVersion(1551428220);&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;veducate\\\/spencer-backman-482079-unsplash.jpg\\&quot; &gt; &lt;Transformation gravity=\\&quot;auto:backpack\\&quot; height=\\&quot;175\\&quot; width=\\&quot;175\\&quot; crop=\\&quot;thumb\\&quot; \\\/&gt; &lt;\\\/Image&gt;&quot;,&quot;codeSnippet&quot;:&quot;&lt;Image publicId=\\&quot;veducate\\\/spencer-backman-482079-unsplash.jpg\\&quot; &gt;\\n\\t&lt;Transformation gravity=\\&quot;auto:backpack\\&quot; height=\\&quot;175\\&quot; width=\\&quot;175\\&quot; crop=\\&quot;thumb\\&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;veducate\\\/spencer-backman-482079-unsplash.jpg\\&quot;)\\n  .resize(\\n    thumbnail()\\n      .width(175)\\n      .height(175)\\n      .gravity(autoGravity().autoFocus(focusOn(\\&quot;backpack\\&quot;)))\\n  )\\n  .setVersion(1551428220);&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;veducate\\\/spencer-backman-482079-unsplash.jpg\\&quot;)\\n  .resize(\\n    thumbnail()\\n      .width(175)\\n      .height(175)\\n      .gravity(autoGravity().autoFocus(focusOn(\\&quot;backpack\\&quot;)))\\n  )\\n  .setVersion(1551428220);&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;veducate\\\/spencer-backman-482079-unsplash.jpg\\&quot; &gt; &lt;cld-transformation gravity=\\&quot;auto:backpack\\&quot; height=\\&quot;175\\&quot; width=\\&quot;175\\&quot; crop=\\&quot;thumb\\&quot; \\\/&gt; &lt;\\\/cld-image&gt;&quot;,&quot;codeSnippet&quot;:&quot;&lt;cld-image public-id=\\&quot;veducate\\\/spencer-backman-482079-unsplash.jpg\\&quot; &gt;\\n\\t&lt;cld-transformation gravity=\\&quot;auto:backpack\\&quot; height=\\&quot;175\\&quot; width=\\&quot;175\\&quot; crop=\\&quot;thumb\\&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;veducate\\\/spencer-backman-482079-unsplash.jpg\\&quot;)\\n  .resize(\\n    thumbnail()\\n      .width(175)\\n      .height(175)\\n      .gravity(autoGravity().autoFocus(focusOn(\\&quot;backpack\\&quot;)))\\n  )\\n  .setVersion(1551428220);&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;veducate\\\/spencer-backman-482079-unsplash.jpg\\&quot;)\\n  .resize(\\n    thumbnail()\\n      .width(175)\\n      .height(175)\\n      .gravity(autoGravity().autoFocus(focusOn(\\&quot;backpack\\&quot;)))\\n  )\\n  .setVersion(1551428220);&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;veducate\\\/spencer-backman-482079-unsplash.jpg\\&quot; &gt; &lt;cl-transformation gravity=\\&quot;auto:backpack\\&quot; height=\\&quot;175\\&quot; width=\\&quot;175\\&quot; crop=\\&quot;thumb\\&quot;&gt; &lt;\\\/cl-transformation&gt; &lt;\\\/cl-image&gt;&quot;,&quot;codeSnippet&quot;:&quot;&lt;cl-image public-id=\\&quot;veducate\\\/spencer-backman-482079-unsplash.jpg\\&quot; &gt;\\n\\t&lt;cl-transformation gravity=\\&quot;auto:backpack\\&quot; height=\\&quot;175\\&quot; width=\\&quot;175\\&quot; crop=\\&quot;thumb\\&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;veducate\\\/spencer-backman-482079-unsplash.jpg\\&quot;)\\n  .resize(\\n    thumbnail()\\n      .width(175)\\n      .height(175)\\n      .gravity(autoGravity().autoFocus(focusOn(\\&quot;backpack\\&quot;)))\\n  )\\n  .setVersion(1551428220);&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;veducate\\\/spencer-backman-482079-unsplash.jpg\\&quot;)\\n  .resize(\\n    thumbnail()\\n      .width(175)\\n      .height(175)\\n      .gravity(autoGravity().autoFocus(focusOn(\\&quot;backpack\\&quot;)))\\n  )\\n  .setVersion(1551428220);&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;veducate\\\/spencer-backman-482079-unsplash.jpg&#039;, {gravity: \\&quot;auto:backpack\\&quot;, height: 175, width: 175, crop: \\&quot;thumb\\&quot;}).toHtml();&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.imageTag(&#039;veducate\\\/spencer-backman-482079-unsplash.jpg&#039;, {gravity: \\&quot;auto:backpack\\&quot;, height: 175, width: 175, crop: \\&quot;thumb\\&quot;}).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;veducate\\\/spencer-backman-482079-unsplash.jpg\\&quot;).image(gravity=\\&quot;auto:backpack\\&quot;, height=175, width=175, crop=\\&quot;thumb\\&quot;)&quot;,&quot;codeSnippet&quot;:&quot;CloudinaryImage(\\&quot;veducate\\\/spencer-backman-482079-unsplash.jpg\\&quot;).image(gravity=\\&quot;auto:backpack\\&quot;, height=175, width=175, crop=\\&quot;thumb\\&quot;)&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;veducate\\\/spencer-backman-482079-unsplash.jpg&#039;))\\n\\t-&gt;resize(Resize::thumbnail()-&gt;width(175)\\n-&gt;height(175)\\n\\t-&gt;gravity(\\n\\tGravity::autoGravity()\\n\\t-&gt;autoFocus(\\n\\tAutoFocus::focusOn(\\&quot;backpack\\&quot;))\\n\\t)\\n\\t)\\n\\t-&gt;version(1551428220);&quot;,&quot;codeSnippet&quot;:&quot;(new ImageTag(&#039;veducate\\\/spencer-backman-482079-unsplash.jpg&#039;))\\n\\t-&gt;resize(Resize::thumbnail()-&gt;width(175)\\n-&gt;height(175)\\n\\t-&gt;gravity(\\n\\tGravity::autoGravity()\\n\\t-&gt;autoFocus(\\n\\tAutoFocus::focusOn(\\&quot;backpack\\&quot;))\\n\\t)\\n\\t)\\n\\t-&gt;version(1551428220);&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;veducate\\\/spencer-backman-482079-unsplash.jpg\\&quot;, array(\\&quot;gravity\\&quot;=&gt;\\&quot;auto:backpack\\&quot;, \\&quot;height\\&quot;=&gt;175, \\&quot;width\\&quot;=&gt;175, \\&quot;crop\\&quot;=&gt;\\&quot;thumb\\&quot;))&quot;,&quot;codeSnippet&quot;:&quot;cl_image_tag(\\&quot;veducate\\\/spencer-backman-482079-unsplash.jpg\\&quot;, array(\\&quot;gravity\\&quot;=&gt;\\&quot;auto:backpack\\&quot;, \\&quot;height\\&quot;=&gt;175, \\&quot;width\\&quot;=&gt;175, \\&quot;crop\\&quot;=&gt;\\&quot;thumb\\&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;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().gravity(\\&quot;auto:backpack\\&quot;).height(175).width(175).crop(\\&quot;thumb\\&quot;)).imageTag(\\&quot;veducate\\\/spencer-backman-482079-unsplash.jpg\\&quot;);&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.url().transformation(new Transformation().gravity(\\&quot;auto:backpack\\&quot;).height(175).width(175).crop(\\&quot;thumb\\&quot;)).imageTag(\\&quot;veducate\\\/spencer-backman-482079-unsplash.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;veducate\\\/spencer-backman-482079-unsplash.jpg\\&quot;, gravity: \\&quot;auto:backpack\\&quot;, height: 175, width: 175, crop: \\&quot;thumb\\&quot;)&quot;,&quot;codeSnippet&quot;:&quot;cl_image_tag(\\&quot;veducate\\\/spencer-backman-482079-unsplash.jpg\\&quot;, gravity: \\&quot;auto:backpack\\&quot;, height: 175, width: 175, crop: \\&quot;thumb\\&quot;)&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().Gravity(\\&quot;auto:backpack\\&quot;).Height(175).Width(175).Crop(\\&quot;thumb\\&quot;)).BuildImageTag(\\&quot;veducate\\\/spencer-backman-482079-unsplash.jpg\\&quot;)&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.Api.UrlImgUp.Transform(new Transformation().Gravity(\\&quot;auto:backpack\\&quot;).Height(175).Width(175).Crop(\\&quot;thumb\\&quot;)).BuildImageTag(\\&quot;veducate\\\/spencer-backman-482079-unsplash.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;veducate\\\/spencer-backman-482079-unsplash.jpg&#039;).transformation(Transformation()\\n\\t.resize(Resize.thumbnail().width(175)\\n.height(175)\\n\\t.gravity(\\n\\tGravity.autoGravity()\\n\\t.autoFocus(\\n\\tAutoFocus.focusOn(\\&quot;backpack\\&quot;))\\n\\t)\\n\\t)\\n\\t.version(1551428220));&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image(&#039;veducate\\\/spencer-backman-482079-unsplash.jpg&#039;).transformation(Transformation()\\n\\t.resize(Resize.thumbnail().width(175)\\n.height(175)\\n\\t.gravity(\\n\\tGravity.autoGravity()\\n\\t.autoFocus(\\n\\tAutoFocus.focusOn(\\&quot;backpack\\&quot;))\\n\\t)\\n\\t)\\n\\t.version(1551428220));&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().setGravity(\\&quot;auto:backpack\\&quot;).setHeight(175).setWidth(175).setCrop(\\&quot;thumb\\&quot;)).generate(\\&quot;veducate\\\/spencer-backman-482079-unsplash.jpg\\&quot;)!, cloudinary: cloudinary)&quot;,&quot;codeSnippet&quot;:&quot;imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setGravity(\\&quot;auto:backpack\\&quot;).setHeight(175).setWidth(175).setCrop(\\&quot;thumb\\&quot;)).generate(\\&quot;veducate\\\/spencer-backman-482079-unsplash.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().gravity(\\&quot;auto:backpack\\&quot;).height(175).width(175).crop(\\&quot;thumb\\&quot;)).generate(\\&quot;veducate\\\/spencer-backman-482079-unsplash.jpg\\&quot;);&quot;,&quot;codeSnippet&quot;:&quot;MediaManager.get().url().transformation(new Transformation().gravity(\\&quot;auto:backpack\\&quot;).height(175).width(175).crop(\\&quot;thumb\\&quot;)).generate(\\&quot;veducate\\\/spencer-backman-482079-unsplash.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;veducate\\\/spencer-backman-482079-unsplash.jpg&#039;).transformation(Transformation()\\n\\t.resize(Resize.thumbnail().width(175)\\n.height(175)\\n\\t.gravity(\\n\\tGravity.autoGravity()\\n\\t.autoFocus(\\n\\tAutoFocus.focusOn(\\&quot;backpack\\&quot;))\\n\\t)\\n\\t)\\n\\t.version(1551428220));&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image(&#039;veducate\\\/spencer-backman-482079-unsplash.jpg&#039;).transformation(Transformation()\\n\\t.resize(Resize.thumbnail().width(175)\\n.height(175)\\n\\t.gravity(\\n\\tGravity.autoGravity()\\n\\t.autoFocus(\\n\\tAutoFocus.focusOn(\\&quot;backpack\\&quot;))\\n\\t)\\n\\t)\\n\\t.version(1551428220));&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;veducate\\\/spencer-backman-482079-unsplash.jpg\\&quot;)\\n\\t resize(Resize.thumbnail() { width(175)\\n height(175)\\n\\t gravity(\\n\\tGravity.autoGravity() {\\n\\t autoFocus(\\n\\tAutoFocus.focusOn(\\&quot;backpack\\&quot;))\\n\\t })\\n\\t })\\n\\t version(1551428220) \\n}.generate()&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image {\\n\\tpublicId(\\&quot;veducate\\\/spencer-backman-482079-unsplash.jpg\\&quot;)\\n\\t resize(Resize.thumbnail() { width(175)\\n height(175)\\n\\t gravity(\\n\\tGravity.autoGravity() {\\n\\t autoFocus(\\n\\tAutoFocus.focusOn(\\&quot;backpack\\&quot;))\\n\\t })\\n\\t })\\n\\t version(1551428220) \\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;veducate\\\/spencer-backman-482079-unsplash.jpg\\&quot;, {gravity: \\&quot;auto:backpack\\&quot;, height: 175, width: 175, crop: \\&quot;thumb\\&quot;})&quot;,&quot;codeSnippet&quot;:&quot;$.cloudinary.image(\\&quot;veducate\\\/spencer-backman-482079-unsplash.jpg\\&quot;, {gravity: \\&quot;auto:backpack\\&quot;, height: 175, width: 175, crop: \\&quot;thumb\\&quot;})&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;veducate\\\/spencer-backman-482079-unsplash.jpg\\&quot;)\\n  .resize(\\n    thumbnail()\\n      .width(175)\\n      .height(175)\\n      .gravity(autoGravity().autoFocus(focusOn(\\&quot;backpack\\&quot;)))\\n  )\\n  .setVersion(1551428220);&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;veducate\\\/spencer-backman-482079-unsplash.jpg\\&quot;)\\n  .resize(\\n    thumbnail()\\n      .width(175)\\n      .height(175)\\n      .gravity(autoGravity().autoFocus(focusOn(\\&quot;backpack\\&quot;)))\\n  )\\n  .setVersion(1551428220);&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\\\/c_thumb,g_auto:backpack,h_175,w_175\\\/v1551428220\\\/veducate\\\/spencer-backman-482079-unsplash.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;crop_mode&quot;:&quot;thumb&quot;,&quot;gravity&quot;:&quot;auto:backpack&quot;,&quot;height&quot;:&quot;175&quot;,&quot;width&quot;:&quot;175&quot;}],&quot;transformation_string&quot;:&quot;c_thumb,g_auto:backpack,h_175,w_175&quot;,&quot;url_suffix&quot;:&quot;&quot;,&quot;version&quot;:&quot;1551428220&quot;,&quot;secure&quot;:true,&quot;public_id&quot;:&quot;veducate\\\/spencer-backman-482079-unsplash.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\/c_thumb,g_auto:backpack,h_175,w_175\/v1551428220\/veducate\/spencer-backman-482079-unsplash.jpg\" target=\"_blank\"><img decoding=\"async\" src=\"https:\/\/res.cloudinary.com\/demo\/image\/upload\/c_thumb,g_auto:backpack,h_175,w_175\/v1551428220\/veducate\/spencer-backman-482079-unsplash.jpg\" alt=\"backback\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"175\" height=\"175\"\/><\/a>\n<em>g_auto:backpack<\/em><\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-2\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\">cloudinary.imageTag(<span class=\"hljs-string\">'veducate\/spencer-backman-482079-unsplash.jpg'<\/span>, {<span class=\"hljs-attr\">width<\/span>: <span class=\"hljs-number\">175<\/span>, <span class=\"hljs-attr\">height<\/span>: <span class=\"hljs-number\">175<\/span>, <span class=\"hljs-attr\">gravity<\/span>: <span class=\"hljs-string\">\"auto:backpack\"<\/span>, <span class=\"hljs-attr\">crop<\/span>: <span class=\"hljs-string\">\"thumb\"<\/span>}).toHtml();\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-2\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<h3>Creating Photo Collages<\/h3>\n<p>Photo collages are fun. By combining the <code>overlay (o)<\/code> and <code>crop (c)<\/code> parameters, you can collect images in any order and embellish them with text or filters.<\/p>\n<p>The example below adds images to the collage with the desired size (<code>w<\/code> and <code>h<\/code> attributes), position (<code>x<\/code> and <code>y<\/code> attributes), crop mode (<code>c<\/code> attribute), and angle of rotation (`av attribute).<\/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;yellow_tulip.jpg\\&quot;, {transformation: [ {width: 220, height: 140, crop: \\&quot;fill\\&quot;}, {overlay: \\&quot;brown_sheep\\&quot;, width: 220, height: 140, x: 220, crop: \\&quot;fill\\&quot;}, {overlay: \\&quot;horses\\&quot;, width: 220, height: 140, y: 140, x: -110, crop: \\&quot;fill\\&quot;}, {overlay: \\&quot;white_chicken\\&quot;, width: 220, height: 140, y: 70, x: 110, crop: \\&quot;fill\\&quot;}, {overlay: \\&quot;butterfly.png\\&quot;, height: 200, x: -10, angle: 10} ]})&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image(\\&quot;yellow_tulip.jpg\\&quot;, {transformation: [\\n  {width: 220, height: 140, crop: \\&quot;fill\\&quot;},\\n  {overlay: \\&quot;brown_sheep\\&quot;, width: 220, height: 140, x: 220, crop: \\&quot;fill\\&quot;},\\n  {overlay: \\&quot;horses\\&quot;, width: 220, height: 140, y: 140, x: -110, crop: \\&quot;fill\\&quot;},\\n  {overlay: \\&quot;white_chicken\\&quot;, width: 220, height: 140, y: 70, x: 110, crop: \\&quot;fill\\&quot;},\\n  {overlay: \\&quot;butterfly.png\\&quot;, height: 200, x: -10, angle: 10}\\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;yellow_tulip.jpg\\&quot;)\\n  .resize(fill().width(220).height(140))\\n  .overlay(\\n    source(\\n      image(\\&quot;brown_sheep\\&quot;).transformation(\\n        new Transformation().resize(fill().width(220).height(140))\\n      )\\n    ).position(new Position().offsetX(220))\\n  )\\n  .overlay(\\n    source(\\n      image(\\&quot;horses\\&quot;).transformation(\\n        new Transformation().resize(fill().width(220).height(140))\\n      )\\n    ).position(new Position().offsetX(-110).offsetY(140))\\n  )\\n  .overlay(\\n    source(\\n      image(\\&quot;white_chicken\\&quot;).transformation(\\n        new Transformation().resize(fill().width(220).height(140))\\n      )\\n    ).position(new Position().offsetX(110).offsetY(70))\\n  )\\n  .overlay(\\n    source(\\n      image(\\&quot;butterfly.png\\&quot;).transformation(\\n        new Transformation().rotate(byAngle(10)).resize(scale().height(200))\\n      )\\n    ).position(new Position().offsetX(-10))\\n  );&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;yellow_tulip.jpg\\&quot;)\\n  .resize(fill().width(220).height(140))\\n  .overlay(\\n    source(\\n      image(\\&quot;brown_sheep\\&quot;).transformation(\\n        new Transformation().resize(fill().width(220).height(140))\\n      )\\n    ).position(new Position().offsetX(220))\\n  )\\n  .overlay(\\n    source(\\n      image(\\&quot;horses\\&quot;).transformation(\\n        new Transformation().resize(fill().width(220).height(140))\\n      )\\n    ).position(new Position().offsetX(-110).offsetY(140))\\n  )\\n  .overlay(\\n    source(\\n      image(\\&quot;white_chicken\\&quot;).transformation(\\n        new Transformation().resize(fill().width(220).height(140))\\n      )\\n    ).position(new Position().offsetX(110).offsetY(70))\\n  )\\n  .overlay(\\n    source(\\n      image(\\&quot;butterfly.png\\&quot;).transformation(\\n        new Transformation().rotate(byAngle(10)).resize(scale().height(200))\\n      )\\n    ).position(new Position().offsetX(-10))\\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;yellow_tulip.jpg\\&quot; &gt; &lt;Transformation width=\\&quot;220\\&quot; height=\\&quot;140\\&quot; crop=\\&quot;fill\\&quot; \\\/&gt; &lt;Transformation overlay=\\&quot;brown_sheep\\&quot; width=\\&quot;220\\&quot; height=\\&quot;140\\&quot; x=\\&quot;220\\&quot; crop=\\&quot;fill\\&quot; \\\/&gt; &lt;Transformation overlay=\\&quot;horses\\&quot; width=\\&quot;220\\&quot; height=\\&quot;140\\&quot; y=\\&quot;140\\&quot; x=\\&quot;-110\\&quot; crop=\\&quot;fill\\&quot; \\\/&gt; &lt;Transformation overlay=\\&quot;white_chicken\\&quot; width=\\&quot;220\\&quot; height=\\&quot;140\\&quot; y=\\&quot;70\\&quot; x=\\&quot;110\\&quot; crop=\\&quot;fill\\&quot; \\\/&gt; &lt;Transformation overlay=\\&quot;butterfly.png\\&quot; height=\\&quot;200\\&quot; x=\\&quot;-10\\&quot; angle=\\&quot;10\\&quot; \\\/&gt; &lt;\\\/Image&gt;&quot;,&quot;codeSnippet&quot;:&quot;&lt;Image publicId=\\&quot;yellow_tulip.jpg\\&quot; &gt;\\n\\t&lt;Transformation width=\\&quot;220\\&quot; height=\\&quot;140\\&quot; crop=\\&quot;fill\\&quot; \\\/&gt;\\n\\t&lt;Transformation overlay=\\&quot;brown_sheep\\&quot; width=\\&quot;220\\&quot; height=\\&quot;140\\&quot; x=\\&quot;220\\&quot; crop=\\&quot;fill\\&quot; \\\/&gt;\\n\\t&lt;Transformation overlay=\\&quot;horses\\&quot; width=\\&quot;220\\&quot; height=\\&quot;140\\&quot; y=\\&quot;140\\&quot; x=\\&quot;-110\\&quot; crop=\\&quot;fill\\&quot; \\\/&gt;\\n\\t&lt;Transformation overlay=\\&quot;white_chicken\\&quot; width=\\&quot;220\\&quot; height=\\&quot;140\\&quot; y=\\&quot;70\\&quot; x=\\&quot;110\\&quot; crop=\\&quot;fill\\&quot; \\\/&gt;\\n\\t&lt;Transformation overlay=\\&quot;butterfly.png\\&quot; height=\\&quot;200\\&quot; x=\\&quot;-10\\&quot; angle=\\&quot;10\\&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;yellow_tulip.jpg\\&quot;)\\n  .resize(fill().width(220).height(140))\\n  .overlay(\\n    source(\\n      image(\\&quot;brown_sheep\\&quot;).transformation(\\n        new Transformation().resize(fill().width(220).height(140))\\n      )\\n    ).position(new Position().offsetX(220))\\n  )\\n  .overlay(\\n    source(\\n      image(\\&quot;horses\\&quot;).transformation(\\n        new Transformation().resize(fill().width(220).height(140))\\n      )\\n    ).position(new Position().offsetX(-110).offsetY(140))\\n  )\\n  .overlay(\\n    source(\\n      image(\\&quot;white_chicken\\&quot;).transformation(\\n        new Transformation().resize(fill().width(220).height(140))\\n      )\\n    ).position(new Position().offsetX(110).offsetY(70))\\n  )\\n  .overlay(\\n    source(\\n      image(\\&quot;butterfly.png\\&quot;).transformation(\\n        new Transformation().rotate(byAngle(10)).resize(scale().height(200))\\n      )\\n    ).position(new Position().offsetX(-10))\\n  );&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;yellow_tulip.jpg\\&quot;)\\n  .resize(fill().width(220).height(140))\\n  .overlay(\\n    source(\\n      image(\\&quot;brown_sheep\\&quot;).transformation(\\n        new Transformation().resize(fill().width(220).height(140))\\n      )\\n    ).position(new Position().offsetX(220))\\n  )\\n  .overlay(\\n    source(\\n      image(\\&quot;horses\\&quot;).transformation(\\n        new Transformation().resize(fill().width(220).height(140))\\n      )\\n    ).position(new Position().offsetX(-110).offsetY(140))\\n  )\\n  .overlay(\\n    source(\\n      image(\\&quot;white_chicken\\&quot;).transformation(\\n        new Transformation().resize(fill().width(220).height(140))\\n      )\\n    ).position(new Position().offsetX(110).offsetY(70))\\n  )\\n  .overlay(\\n    source(\\n      image(\\&quot;butterfly.png\\&quot;).transformation(\\n        new Transformation().rotate(byAngle(10)).resize(scale().height(200))\\n      )\\n    ).position(new Position().offsetX(-10))\\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;yellow_tulip.jpg\\&quot; &gt; &lt;cld-transformation width=\\&quot;220\\&quot; height=\\&quot;140\\&quot; crop=\\&quot;fill\\&quot; \\\/&gt; &lt;cld-transformation :overlay=\\&quot;brown_sheep\\&quot; width=\\&quot;220\\&quot; height=\\&quot;140\\&quot; x=\\&quot;220\\&quot; crop=\\&quot;fill\\&quot; \\\/&gt; &lt;cld-transformation :overlay=\\&quot;horses\\&quot; width=\\&quot;220\\&quot; height=\\&quot;140\\&quot; y=\\&quot;140\\&quot; x=\\&quot;-110\\&quot; crop=\\&quot;fill\\&quot; \\\/&gt; &lt;cld-transformation :overlay=\\&quot;white_chicken\\&quot; width=\\&quot;220\\&quot; height=\\&quot;140\\&quot; y=\\&quot;70\\&quot; x=\\&quot;110\\&quot; crop=\\&quot;fill\\&quot; \\\/&gt; &lt;cld-transformation :overlay=\\&quot;butterfly.png\\&quot; height=\\&quot;200\\&quot; x=\\&quot;-10\\&quot; angle=\\&quot;10\\&quot; \\\/&gt; &lt;\\\/cld-image&gt;&quot;,&quot;codeSnippet&quot;:&quot;&lt;cld-image public-id=\\&quot;yellow_tulip.jpg\\&quot; &gt;\\n\\t&lt;cld-transformation width=\\&quot;220\\&quot; height=\\&quot;140\\&quot; crop=\\&quot;fill\\&quot; \\\/&gt;\\n\\t&lt;cld-transformation :overlay=\\&quot;brown_sheep\\&quot; width=\\&quot;220\\&quot; height=\\&quot;140\\&quot; x=\\&quot;220\\&quot; crop=\\&quot;fill\\&quot; \\\/&gt;\\n\\t&lt;cld-transformation :overlay=\\&quot;horses\\&quot; width=\\&quot;220\\&quot; height=\\&quot;140\\&quot; y=\\&quot;140\\&quot; x=\\&quot;-110\\&quot; crop=\\&quot;fill\\&quot; \\\/&gt;\\n\\t&lt;cld-transformation :overlay=\\&quot;white_chicken\\&quot; width=\\&quot;220\\&quot; height=\\&quot;140\\&quot; y=\\&quot;70\\&quot; x=\\&quot;110\\&quot; crop=\\&quot;fill\\&quot; \\\/&gt;\\n\\t&lt;cld-transformation :overlay=\\&quot;butterfly.png\\&quot; height=\\&quot;200\\&quot; x=\\&quot;-10\\&quot; angle=\\&quot;10\\&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;yellow_tulip.jpg\\&quot;)\\n  .resize(fill().width(220).height(140))\\n  .overlay(\\n    source(\\n      image(\\&quot;brown_sheep\\&quot;).transformation(\\n        new Transformation().resize(fill().width(220).height(140))\\n      )\\n    ).position(new Position().offsetX(220))\\n  )\\n  .overlay(\\n    source(\\n      image(\\&quot;horses\\&quot;).transformation(\\n        new Transformation().resize(fill().width(220).height(140))\\n      )\\n    ).position(new Position().offsetX(-110).offsetY(140))\\n  )\\n  .overlay(\\n    source(\\n      image(\\&quot;white_chicken\\&quot;).transformation(\\n        new Transformation().resize(fill().width(220).height(140))\\n      )\\n    ).position(new Position().offsetX(110).offsetY(70))\\n  )\\n  .overlay(\\n    source(\\n      image(\\&quot;butterfly.png\\&quot;).transformation(\\n        new Transformation().rotate(byAngle(10)).resize(scale().height(200))\\n      )\\n    ).position(new Position().offsetX(-10))\\n  );&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;yellow_tulip.jpg\\&quot;)\\n  .resize(fill().width(220).height(140))\\n  .overlay(\\n    source(\\n      image(\\&quot;brown_sheep\\&quot;).transformation(\\n        new Transformation().resize(fill().width(220).height(140))\\n      )\\n    ).position(new Position().offsetX(220))\\n  )\\n  .overlay(\\n    source(\\n      image(\\&quot;horses\\&quot;).transformation(\\n        new Transformation().resize(fill().width(220).height(140))\\n      )\\n    ).position(new Position().offsetX(-110).offsetY(140))\\n  )\\n  .overlay(\\n    source(\\n      image(\\&quot;white_chicken\\&quot;).transformation(\\n        new Transformation().resize(fill().width(220).height(140))\\n      )\\n    ).position(new Position().offsetX(110).offsetY(70))\\n  )\\n  .overlay(\\n    source(\\n      image(\\&quot;butterfly.png\\&quot;).transformation(\\n        new Transformation().rotate(byAngle(10)).resize(scale().height(200))\\n      )\\n    ).position(new Position().offsetX(-10))\\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;yellow_tulip.jpg\\&quot; &gt; &lt;cl-transformation width=\\&quot;220\\&quot; height=\\&quot;140\\&quot; crop=\\&quot;fill\\&quot;&gt; &lt;\\\/cl-transformation&gt; &lt;cl-transformation overlay=\\&quot;brown_sheep\\&quot; width=\\&quot;220\\&quot; height=\\&quot;140\\&quot; x=\\&quot;220\\&quot; crop=\\&quot;fill\\&quot;&gt; &lt;\\\/cl-transformation&gt; &lt;cl-transformation overlay=\\&quot;horses\\&quot; width=\\&quot;220\\&quot; height=\\&quot;140\\&quot; y=\\&quot;140\\&quot; x=\\&quot;-110\\&quot; crop=\\&quot;fill\\&quot;&gt; &lt;\\\/cl-transformation&gt; &lt;cl-transformation overlay=\\&quot;white_chicken\\&quot; width=\\&quot;220\\&quot; height=\\&quot;140\\&quot; y=\\&quot;70\\&quot; x=\\&quot;110\\&quot; crop=\\&quot;fill\\&quot;&gt; &lt;\\\/cl-transformation&gt; &lt;cl-transformation overlay=\\&quot;butterfly.png\\&quot; height=\\&quot;200\\&quot; x=\\&quot;-10\\&quot; angle=\\&quot;10\\&quot;&gt; &lt;\\\/cl-transformation&gt; &lt;\\\/cl-image&gt;&quot;,&quot;codeSnippet&quot;:&quot;&lt;cl-image public-id=\\&quot;yellow_tulip.jpg\\&quot; &gt;\\n\\t&lt;cl-transformation width=\\&quot;220\\&quot; height=\\&quot;140\\&quot; crop=\\&quot;fill\\&quot;&gt;\\n\\t&lt;\\\/cl-transformation&gt;\\n\\t&lt;cl-transformation overlay=\\&quot;brown_sheep\\&quot; width=\\&quot;220\\&quot; height=\\&quot;140\\&quot; x=\\&quot;220\\&quot; crop=\\&quot;fill\\&quot;&gt;\\n\\t&lt;\\\/cl-transformation&gt;\\n\\t&lt;cl-transformation overlay=\\&quot;horses\\&quot; width=\\&quot;220\\&quot; height=\\&quot;140\\&quot; y=\\&quot;140\\&quot; x=\\&quot;-110\\&quot; crop=\\&quot;fill\\&quot;&gt;\\n\\t&lt;\\\/cl-transformation&gt;\\n\\t&lt;cl-transformation overlay=\\&quot;white_chicken\\&quot; width=\\&quot;220\\&quot; height=\\&quot;140\\&quot; y=\\&quot;70\\&quot; x=\\&quot;110\\&quot; crop=\\&quot;fill\\&quot;&gt;\\n\\t&lt;\\\/cl-transformation&gt;\\n\\t&lt;cl-transformation overlay=\\&quot;butterfly.png\\&quot; height=\\&quot;200\\&quot; x=\\&quot;-10\\&quot; angle=\\&quot;10\\&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;yellow_tulip.jpg\\&quot;)\\n  .resize(fill().width(220).height(140))\\n  .overlay(\\n    source(\\n      image(\\&quot;brown_sheep\\&quot;).transformation(\\n        new Transformation().resize(fill().width(220).height(140))\\n      )\\n    ).position(new Position().offsetX(220))\\n  )\\n  .overlay(\\n    source(\\n      image(\\&quot;horses\\&quot;).transformation(\\n        new Transformation().resize(fill().width(220).height(140))\\n      )\\n    ).position(new Position().offsetX(-110).offsetY(140))\\n  )\\n  .overlay(\\n    source(\\n      image(\\&quot;white_chicken\\&quot;).transformation(\\n        new Transformation().resize(fill().width(220).height(140))\\n      )\\n    ).position(new Position().offsetX(110).offsetY(70))\\n  )\\n  .overlay(\\n    source(\\n      image(\\&quot;butterfly.png\\&quot;).transformation(\\n        new Transformation().rotate(byAngle(10)).resize(scale().height(200))\\n      )\\n    ).position(new Position().offsetX(-10))\\n  );&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;yellow_tulip.jpg\\&quot;)\\n  .resize(fill().width(220).height(140))\\n  .overlay(\\n    source(\\n      image(\\&quot;brown_sheep\\&quot;).transformation(\\n        new Transformation().resize(fill().width(220).height(140))\\n      )\\n    ).position(new Position().offsetX(220))\\n  )\\n  .overlay(\\n    source(\\n      image(\\&quot;horses\\&quot;).transformation(\\n        new Transformation().resize(fill().width(220).height(140))\\n      )\\n    ).position(new Position().offsetX(-110).offsetY(140))\\n  )\\n  .overlay(\\n    source(\\n      image(\\&quot;white_chicken\\&quot;).transformation(\\n        new Transformation().resize(fill().width(220).height(140))\\n      )\\n    ).position(new Position().offsetX(110).offsetY(70))\\n  )\\n  .overlay(\\n    source(\\n      image(\\&quot;butterfly.png\\&quot;).transformation(\\n        new Transformation().rotate(byAngle(10)).resize(scale().height(200))\\n      )\\n    ).position(new Position().offsetX(-10))\\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;yellow_tulip.jpg&#039;, {transformation: [ {width: 220, height: 140, crop: \\&quot;fill\\&quot;}, {overlay: new cloudinary.Layer().publicId(\\&quot;brown_sheep\\&quot;), width: 220, height: 140, x: 220, crop: \\&quot;fill\\&quot;}, {overlay: new cloudinary.Layer().publicId(\\&quot;horses\\&quot;), width: 220, height: 140, y: 140, x: -110, crop: \\&quot;fill\\&quot;}, {overlay: new cloudinary.Layer().publicId(\\&quot;white_chicken\\&quot;), width: 220, height: 140, y: 70, x: 110, crop: \\&quot;fill\\&quot;}, {overlay: new cloudinary.Layer().publicId(\\&quot;butterfly.png\\&quot;), height: 200, x: -10, angle: 10} ]}).toHtml();&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.imageTag(&#039;yellow_tulip.jpg&#039;, {transformation: [\\n  {width: 220, height: 140, crop: \\&quot;fill\\&quot;},\\n  {overlay: new cloudinary.Layer().publicId(\\&quot;brown_sheep\\&quot;), width: 220, height: 140, x: 220, crop: \\&quot;fill\\&quot;},\\n  {overlay: new cloudinary.Layer().publicId(\\&quot;horses\\&quot;), width: 220, height: 140, y: 140, x: -110, crop: \\&quot;fill\\&quot;},\\n  {overlay: new cloudinary.Layer().publicId(\\&quot;white_chicken\\&quot;), width: 220, height: 140, y: 70, x: 110, crop: \\&quot;fill\\&quot;},\\n  {overlay: new cloudinary.Layer().publicId(\\&quot;butterfly.png\\&quot;), height: 200, x: -10, angle: 10}\\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;yellow_tulip.jpg\\&quot;).image(transformation=[ {&#039;width&#039;: 220, &#039;height&#039;: 140, &#039;crop&#039;: \\&quot;fill\\&quot;}, {&#039;overlay&#039;: \\&quot;brown_sheep\\&quot;, &#039;width&#039;: 220, &#039;height&#039;: 140, &#039;x&#039;: 220, &#039;crop&#039;: \\&quot;fill\\&quot;}, {&#039;overlay&#039;: \\&quot;horses\\&quot;, &#039;width&#039;: 220, &#039;height&#039;: 140, &#039;y&#039;: 140, &#039;x&#039;: -110, &#039;crop&#039;: \\&quot;fill\\&quot;}, {&#039;overlay&#039;: \\&quot;white_chicken\\&quot;, &#039;width&#039;: 220, &#039;height&#039;: 140, &#039;y&#039;: 70, &#039;x&#039;: 110, &#039;crop&#039;: \\&quot;fill\\&quot;}, {&#039;overlay&#039;: \\&quot;butterfly.png\\&quot;, &#039;height&#039;: 200, &#039;x&#039;: -10, &#039;angle&#039;: 10} ])&quot;,&quot;codeSnippet&quot;:&quot;CloudinaryImage(\\&quot;yellow_tulip.jpg\\&quot;).image(transformation=[\\n  {&#039;width&#039;: 220, &#039;height&#039;: 140, &#039;crop&#039;: \\&quot;fill\\&quot;},\\n  {&#039;overlay&#039;: \\&quot;brown_sheep\\&quot;, &#039;width&#039;: 220, &#039;height&#039;: 140, &#039;x&#039;: 220, &#039;crop&#039;: \\&quot;fill\\&quot;},\\n  {&#039;overlay&#039;: \\&quot;horses\\&quot;, &#039;width&#039;: 220, &#039;height&#039;: 140, &#039;y&#039;: 140, &#039;x&#039;: -110, &#039;crop&#039;: \\&quot;fill\\&quot;},\\n  {&#039;overlay&#039;: \\&quot;white_chicken\\&quot;, &#039;width&#039;: 220, &#039;height&#039;: 140, &#039;y&#039;: 70, &#039;x&#039;: 110, &#039;crop&#039;: \\&quot;fill\\&quot;},\\n  {&#039;overlay&#039;: \\&quot;butterfly.png\\&quot;, &#039;height&#039;: 200, &#039;x&#039;: -10, &#039;angle&#039;: 10}\\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;yellow_tulip.jpg&#039;))\\n\\t-&gt;resize(Resize::fill()-&gt;width(220)\\n-&gt;height(140))\\n\\t-&gt;overlay(Overlay::source(\\n\\tSource::image(\\&quot;brown_sheep\\&quot;)\\n\\t-&gt;transformation((new Transformation())\\n\\t-&gt;resize(Resize::fill()-&gt;width(220)\\n-&gt;height(140)))\\n\\t)\\n\\t-&gt;position((new Position())-&gt;offsetX(220))\\n\\t)\\n\\t-&gt;overlay(Overlay::source(\\n\\tSource::image(\\&quot;horses\\&quot;)\\n\\t-&gt;transformation((new Transformation())\\n\\t-&gt;resize(Resize::fill()-&gt;width(220)\\n-&gt;height(140)))\\n\\t)\\n\\t-&gt;position((new Position())-&gt;offsetX(-110)\\n-&gt;offsetY(140))\\n\\t)\\n\\t-&gt;overlay(Overlay::source(\\n\\tSource::image(\\&quot;white_chicken\\&quot;)\\n\\t-&gt;transformation((new Transformation())\\n\\t-&gt;resize(Resize::fill()-&gt;width(220)\\n-&gt;height(140)))\\n\\t)\\n\\t-&gt;position((new Position())-&gt;offsetX(110)\\n-&gt;offsetY(70))\\n\\t)\\n\\t-&gt;overlay(Overlay::source(\\n\\tSource::image(\\&quot;butterfly.png\\&quot;)\\n\\t-&gt;transformation((new Transformation())\\n\\t-&gt;rotate(Rotate::byAngle(10))\\n\\t-&gt;resize(Resize::scale()-&gt;height(200)))\\n\\t)\\n\\t-&gt;position((new Position())-&gt;offsetX(-10))\\n\\t);&quot;,&quot;codeSnippet&quot;:&quot;(new ImageTag(&#039;yellow_tulip.jpg&#039;))\\n\\t-&gt;resize(Resize::fill()-&gt;width(220)\\n-&gt;height(140))\\n\\t-&gt;overlay(Overlay::source(\\n\\tSource::image(\\&quot;brown_sheep\\&quot;)\\n\\t-&gt;transformation((new Transformation())\\n\\t-&gt;resize(Resize::fill()-&gt;width(220)\\n-&gt;height(140)))\\n\\t)\\n\\t-&gt;position((new Position())-&gt;offsetX(220))\\n\\t)\\n\\t-&gt;overlay(Overlay::source(\\n\\tSource::image(\\&quot;horses\\&quot;)\\n\\t-&gt;transformation((new Transformation())\\n\\t-&gt;resize(Resize::fill()-&gt;width(220)\\n-&gt;height(140)))\\n\\t)\\n\\t-&gt;position((new Position())-&gt;offsetX(-110)\\n-&gt;offsetY(140))\\n\\t)\\n\\t-&gt;overlay(Overlay::source(\\n\\tSource::image(\\&quot;white_chicken\\&quot;)\\n\\t-&gt;transformation((new Transformation())\\n\\t-&gt;resize(Resize::fill()-&gt;width(220)\\n-&gt;height(140)))\\n\\t)\\n\\t-&gt;position((new Position())-&gt;offsetX(110)\\n-&gt;offsetY(70))\\n\\t)\\n\\t-&gt;overlay(Overlay::source(\\n\\tSource::image(\\&quot;butterfly.png\\&quot;)\\n\\t-&gt;transformation((new Transformation())\\n\\t-&gt;rotate(Rotate::byAngle(10))\\n\\t-&gt;resize(Resize::scale()-&gt;height(200)))\\n\\t)\\n\\t-&gt;position((new Position())-&gt;offsetX(-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;yellow_tulip.jpg\\&quot;, array(\\&quot;transformation\\&quot;=&gt;array( array(\\&quot;width\\&quot;=&gt;220, \\&quot;height\\&quot;=&gt;140, \\&quot;crop\\&quot;=&gt;\\&quot;fill\\&quot;), array(\\&quot;overlay\\&quot;=&gt;\\&quot;brown_sheep\\&quot;, \\&quot;width\\&quot;=&gt;220, \\&quot;height\\&quot;=&gt;140, \\&quot;x\\&quot;=&gt;220, \\&quot;crop\\&quot;=&gt;\\&quot;fill\\&quot;), array(\\&quot;overlay\\&quot;=&gt;\\&quot;horses\\&quot;, \\&quot;width\\&quot;=&gt;220, \\&quot;height\\&quot;=&gt;140, \\&quot;y\\&quot;=&gt;140, \\&quot;x\\&quot;=&gt;-110, \\&quot;crop\\&quot;=&gt;\\&quot;fill\\&quot;), array(\\&quot;overlay\\&quot;=&gt;\\&quot;white_chicken\\&quot;, \\&quot;width\\&quot;=&gt;220, \\&quot;height\\&quot;=&gt;140, \\&quot;y\\&quot;=&gt;70, \\&quot;x\\&quot;=&gt;110, \\&quot;crop\\&quot;=&gt;\\&quot;fill\\&quot;), array(\\&quot;overlay\\&quot;=&gt;\\&quot;butterfly.png\\&quot;, \\&quot;height\\&quot;=&gt;200, \\&quot;x\\&quot;=&gt;-10, \\&quot;angle\\&quot;=&gt;10) )))&quot;,&quot;codeSnippet&quot;:&quot;cl_image_tag(\\&quot;yellow_tulip.jpg\\&quot;, array(\\&quot;transformation\\&quot;=&gt;array(\\n  array(\\&quot;width\\&quot;=&gt;220, \\&quot;height\\&quot;=&gt;140, \\&quot;crop\\&quot;=&gt;\\&quot;fill\\&quot;),\\n  array(\\&quot;overlay\\&quot;=&gt;\\&quot;brown_sheep\\&quot;, \\&quot;width\\&quot;=&gt;220, \\&quot;height\\&quot;=&gt;140, \\&quot;x\\&quot;=&gt;220, \\&quot;crop\\&quot;=&gt;\\&quot;fill\\&quot;),\\n  array(\\&quot;overlay\\&quot;=&gt;\\&quot;horses\\&quot;, \\&quot;width\\&quot;=&gt;220, \\&quot;height\\&quot;=&gt;140, \\&quot;y\\&quot;=&gt;140, \\&quot;x\\&quot;=&gt;-110, \\&quot;crop\\&quot;=&gt;\\&quot;fill\\&quot;),\\n  array(\\&quot;overlay\\&quot;=&gt;\\&quot;white_chicken\\&quot;, \\&quot;width\\&quot;=&gt;220, \\&quot;height\\&quot;=&gt;140, \\&quot;y\\&quot;=&gt;70, \\&quot;x\\&quot;=&gt;110, \\&quot;crop\\&quot;=&gt;\\&quot;fill\\&quot;),\\n  array(\\&quot;overlay\\&quot;=&gt;\\&quot;butterfly.png\\&quot;, \\&quot;height\\&quot;=&gt;200, \\&quot;x\\&quot;=&gt;-10, \\&quot;angle\\&quot;=&gt;10)\\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().width(220).height(140).crop(\\&quot;fill\\&quot;).chain() .overlay(new Layer().publicId(\\&quot;brown_sheep\\&quot;)).width(220).height(140).x(220).crop(\\&quot;fill\\&quot;).chain() .overlay(new Layer().publicId(\\&quot;horses\\&quot;)).width(220).height(140).y(140).x(-110).crop(\\&quot;fill\\&quot;).chain() .overlay(new Layer().publicId(\\&quot;white_chicken\\&quot;)).width(220).height(140).y(70).x(110).crop(\\&quot;fill\\&quot;).chain() .overlay(new Layer().publicId(\\&quot;butterfly.png\\&quot;)).height(200).x(-10).angle(10)).imageTag(\\&quot;yellow_tulip.jpg\\&quot;);&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.url().transformation(new Transformation()\\n  .width(220).height(140).crop(\\&quot;fill\\&quot;).chain()\\n  .overlay(new Layer().publicId(\\&quot;brown_sheep\\&quot;)).width(220).height(140).x(220).crop(\\&quot;fill\\&quot;).chain()\\n  .overlay(new Layer().publicId(\\&quot;horses\\&quot;)).width(220).height(140).y(140).x(-110).crop(\\&quot;fill\\&quot;).chain()\\n  .overlay(new Layer().publicId(\\&quot;white_chicken\\&quot;)).width(220).height(140).y(70).x(110).crop(\\&quot;fill\\&quot;).chain()\\n  .overlay(new Layer().publicId(\\&quot;butterfly.png\\&quot;)).height(200).x(-10).angle(10)).imageTag(\\&quot;yellow_tulip.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;yellow_tulip.jpg\\&quot;, transformation: [ {width: 220, height: 140, crop: \\&quot;fill\\&quot;}, {overlay: \\&quot;brown_sheep\\&quot;, width: 220, height: 140, x: 220, crop: \\&quot;fill\\&quot;}, {overlay: \\&quot;horses\\&quot;, width: 220, height: 140, y: 140, x: -110, crop: \\&quot;fill\\&quot;}, {overlay: \\&quot;white_chicken\\&quot;, width: 220, height: 140, y: 70, x: 110, crop: \\&quot;fill\\&quot;}, {overlay: \\&quot;butterfly.png\\&quot;, height: 200, x: -10, angle: 10} ])&quot;,&quot;codeSnippet&quot;:&quot;cl_image_tag(\\&quot;yellow_tulip.jpg\\&quot;, transformation: [\\n  {width: 220, height: 140, crop: \\&quot;fill\\&quot;},\\n  {overlay: \\&quot;brown_sheep\\&quot;, width: 220, height: 140, x: 220, crop: \\&quot;fill\\&quot;},\\n  {overlay: \\&quot;horses\\&quot;, width: 220, height: 140, y: 140, x: -110, crop: \\&quot;fill\\&quot;},\\n  {overlay: \\&quot;white_chicken\\&quot;, width: 220, height: 140, y: 70, x: 110, crop: \\&quot;fill\\&quot;},\\n  {overlay: \\&quot;butterfly.png\\&quot;, height: 200, x: -10, angle: 10}\\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().Width(220).Height(140).Crop(\\&quot;fill\\&quot;).Chain() .Overlay(new Layer().PublicId(\\&quot;brown_sheep\\&quot;)).Width(220).Height(140).X(220).Crop(\\&quot;fill\\&quot;).Chain() .Overlay(new Layer().PublicId(\\&quot;horses\\&quot;)).Width(220).Height(140).Y(140).X(-110).Crop(\\&quot;fill\\&quot;).Chain() .Overlay(new Layer().PublicId(\\&quot;white_chicken\\&quot;)).Width(220).Height(140).Y(70).X(110).Crop(\\&quot;fill\\&quot;).Chain() .Overlay(new Layer().PublicId(\\&quot;butterfly.png\\&quot;)).Height(200).X(-10).Angle(10)).BuildImageTag(\\&quot;yellow_tulip.jpg\\&quot;)&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.Api.UrlImgUp.Transform(new Transformation()\\n  .Width(220).Height(140).Crop(\\&quot;fill\\&quot;).Chain()\\n  .Overlay(new Layer().PublicId(\\&quot;brown_sheep\\&quot;)).Width(220).Height(140).X(220).Crop(\\&quot;fill\\&quot;).Chain()\\n  .Overlay(new Layer().PublicId(\\&quot;horses\\&quot;)).Width(220).Height(140).Y(140).X(-110).Crop(\\&quot;fill\\&quot;).Chain()\\n  .Overlay(new Layer().PublicId(\\&quot;white_chicken\\&quot;)).Width(220).Height(140).Y(70).X(110).Crop(\\&quot;fill\\&quot;).Chain()\\n  .Overlay(new Layer().PublicId(\\&quot;butterfly.png\\&quot;)).Height(200).X(-10).Angle(10)).BuildImageTag(\\&quot;yellow_tulip.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;yellow_tulip.jpg&#039;).transformation(Transformation()\\n\\t.resize(Resize.fill().width(220)\\n.height(140))\\n\\t.overlay(Overlay.source(\\n\\tSource.image(\\&quot;brown_sheep\\&quot;)\\n\\t.transformation(new Transformation()\\n\\t.resize(Resize.fill().width(220)\\n.height(140)))\\n\\t)\\n\\t.position(Position().offsetX(220))\\n\\t)\\n\\t.overlay(Overlay.source(\\n\\tSource.image(\\&quot;horses\\&quot;)\\n\\t.transformation(new Transformation()\\n\\t.resize(Resize.fill().width(220)\\n.height(140)))\\n\\t)\\n\\t.position(Position().offsetX(-110)\\n.offsetY(140))\\n\\t)\\n\\t.overlay(Overlay.source(\\n\\tSource.image(\\&quot;white_chicken\\&quot;)\\n\\t.transformation(new Transformation()\\n\\t.resize(Resize.fill().width(220)\\n.height(140)))\\n\\t)\\n\\t.position(Position().offsetX(110)\\n.offsetY(70))\\n\\t)\\n\\t.overlay(Overlay.source(\\n\\tSource.image(\\&quot;butterfly.png\\&quot;)\\n\\t.transformation(new Transformation()\\n\\t.rotate(Rotate.byAngle(10))\\n\\t.resize(Resize.scale().height(200)))\\n\\t)\\n\\t.position(Position().offsetX(-10))\\n\\t));&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image(&#039;yellow_tulip.jpg&#039;).transformation(Transformation()\\n\\t.resize(Resize.fill().width(220)\\n.height(140))\\n\\t.overlay(Overlay.source(\\n\\tSource.image(\\&quot;brown_sheep\\&quot;)\\n\\t.transformation(new Transformation()\\n\\t.resize(Resize.fill().width(220)\\n.height(140)))\\n\\t)\\n\\t.position(Position().offsetX(220))\\n\\t)\\n\\t.overlay(Overlay.source(\\n\\tSource.image(\\&quot;horses\\&quot;)\\n\\t.transformation(new Transformation()\\n\\t.resize(Resize.fill().width(220)\\n.height(140)))\\n\\t)\\n\\t.position(Position().offsetX(-110)\\n.offsetY(140))\\n\\t)\\n\\t.overlay(Overlay.source(\\n\\tSource.image(\\&quot;white_chicken\\&quot;)\\n\\t.transformation(new Transformation()\\n\\t.resize(Resize.fill().width(220)\\n.height(140)))\\n\\t)\\n\\t.position(Position().offsetX(110)\\n.offsetY(70))\\n\\t)\\n\\t.overlay(Overlay.source(\\n\\tSource.image(\\&quot;butterfly.png\\&quot;)\\n\\t.transformation(new Transformation()\\n\\t.rotate(Rotate.byAngle(10))\\n\\t.resize(Resize.scale().height(200)))\\n\\t)\\n\\t.position(Position().offsetX(-10))\\n\\t));&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().setWidth(220).setHeight(140).setCrop(\\&quot;fill\\&quot;).chain() .setOverlay(\\&quot;brown_sheep\\&quot;).setWidth(220).setHeight(140).setX(220).setCrop(\\&quot;fill\\&quot;).chain() .setOverlay(\\&quot;horses\\&quot;).setWidth(220).setHeight(140).setY(140).setX(-110).setCrop(\\&quot;fill\\&quot;).chain() .setOverlay(\\&quot;white_chicken\\&quot;).setWidth(220).setHeight(140).setY(70).setX(110).setCrop(\\&quot;fill\\&quot;).chain() .setOverlay(\\&quot;butterfly.png\\&quot;).setHeight(200).setX(-10).setAngle(10)).generate(\\&quot;yellow_tulip.jpg\\&quot;)!, cloudinary: cloudinary)&quot;,&quot;codeSnippet&quot;:&quot;imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation()\\n  .setWidth(220).setHeight(140).setCrop(\\&quot;fill\\&quot;).chain()\\n  .setOverlay(\\&quot;brown_sheep\\&quot;).setWidth(220).setHeight(140).setX(220).setCrop(\\&quot;fill\\&quot;).chain()\\n  .setOverlay(\\&quot;horses\\&quot;).setWidth(220).setHeight(140).setY(140).setX(-110).setCrop(\\&quot;fill\\&quot;).chain()\\n  .setOverlay(\\&quot;white_chicken\\&quot;).setWidth(220).setHeight(140).setY(70).setX(110).setCrop(\\&quot;fill\\&quot;).chain()\\n  .setOverlay(\\&quot;butterfly.png\\&quot;).setHeight(200).setX(-10).setAngle(10)).generate(\\&quot;yellow_tulip.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().width(220).height(140).crop(\\&quot;fill\\&quot;).chain() .overlay(new Layer().publicId(\\&quot;brown_sheep\\&quot;)).width(220).height(140).x(220).crop(\\&quot;fill\\&quot;).chain() .overlay(new Layer().publicId(\\&quot;horses\\&quot;)).width(220).height(140).y(140).x(-110).crop(\\&quot;fill\\&quot;).chain() .overlay(new Layer().publicId(\\&quot;white_chicken\\&quot;)).width(220).height(140).y(70).x(110).crop(\\&quot;fill\\&quot;).chain() .overlay(new Layer().publicId(\\&quot;butterfly.png\\&quot;)).height(200).x(-10).angle(10)).generate(\\&quot;yellow_tulip.jpg\\&quot;);&quot;,&quot;codeSnippet&quot;:&quot;MediaManager.get().url().transformation(new Transformation()\\n  .width(220).height(140).crop(\\&quot;fill\\&quot;).chain()\\n  .overlay(new Layer().publicId(\\&quot;brown_sheep\\&quot;)).width(220).height(140).x(220).crop(\\&quot;fill\\&quot;).chain()\\n  .overlay(new Layer().publicId(\\&quot;horses\\&quot;)).width(220).height(140).y(140).x(-110).crop(\\&quot;fill\\&quot;).chain()\\n  .overlay(new Layer().publicId(\\&quot;white_chicken\\&quot;)).width(220).height(140).y(70).x(110).crop(\\&quot;fill\\&quot;).chain()\\n  .overlay(new Layer().publicId(\\&quot;butterfly.png\\&quot;)).height(200).x(-10).angle(10)).generate(\\&quot;yellow_tulip.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;yellow_tulip.jpg&#039;).transformation(Transformation()\\n\\t.resize(Resize.fill().width(220)\\n.height(140))\\n\\t.overlay(Overlay.source(\\n\\tSource.image(\\&quot;brown_sheep\\&quot;)\\n\\t.transformation(new Transformation()\\n\\t.resize(Resize.fill().width(220)\\n.height(140)))\\n\\t)\\n\\t.position(Position().offsetX(220))\\n\\t)\\n\\t.overlay(Overlay.source(\\n\\tSource.image(\\&quot;horses\\&quot;)\\n\\t.transformation(new Transformation()\\n\\t.resize(Resize.fill().width(220)\\n.height(140)))\\n\\t)\\n\\t.position(Position().offsetX(-110)\\n.offsetY(140))\\n\\t)\\n\\t.overlay(Overlay.source(\\n\\tSource.image(\\&quot;white_chicken\\&quot;)\\n\\t.transformation(new Transformation()\\n\\t.resize(Resize.fill().width(220)\\n.height(140)))\\n\\t)\\n\\t.position(Position().offsetX(110)\\n.offsetY(70))\\n\\t)\\n\\t.overlay(Overlay.source(\\n\\tSource.image(\\&quot;butterfly.png\\&quot;)\\n\\t.transformation(new Transformation()\\n\\t.rotate(Rotate.byAngle(10))\\n\\t.resize(Resize.scale().height(200)))\\n\\t)\\n\\t.position(Position().offsetX(-10))\\n\\t));&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image(&#039;yellow_tulip.jpg&#039;).transformation(Transformation()\\n\\t.resize(Resize.fill().width(220)\\n.height(140))\\n\\t.overlay(Overlay.source(\\n\\tSource.image(\\&quot;brown_sheep\\&quot;)\\n\\t.transformation(new Transformation()\\n\\t.resize(Resize.fill().width(220)\\n.height(140)))\\n\\t)\\n\\t.position(Position().offsetX(220))\\n\\t)\\n\\t.overlay(Overlay.source(\\n\\tSource.image(\\&quot;horses\\&quot;)\\n\\t.transformation(new Transformation()\\n\\t.resize(Resize.fill().width(220)\\n.height(140)))\\n\\t)\\n\\t.position(Position().offsetX(-110)\\n.offsetY(140))\\n\\t)\\n\\t.overlay(Overlay.source(\\n\\tSource.image(\\&quot;white_chicken\\&quot;)\\n\\t.transformation(new Transformation()\\n\\t.resize(Resize.fill().width(220)\\n.height(140)))\\n\\t)\\n\\t.position(Position().offsetX(110)\\n.offsetY(70))\\n\\t)\\n\\t.overlay(Overlay.source(\\n\\tSource.image(\\&quot;butterfly.png\\&quot;)\\n\\t.transformation(new Transformation()\\n\\t.rotate(Rotate.byAngle(10))\\n\\t.resize(Resize.scale().height(200)))\\n\\t)\\n\\t.position(Position().offsetX(-10))\\n\\t));&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;yellow_tulip.jpg\\&quot;)\\n\\t resize(Resize.fill() { width(220)\\n height(140) })\\n\\t overlay(Overlay.source(\\n\\tSource.image(\\&quot;brown_sheep\\&quot;) {\\n\\t transformation(Transformation {\\n\\t resize(Resize.fill() { width(220)\\n height(140) }) })\\n\\t }) {\\n\\t position(Position() { offsetX(220) })\\n\\t })\\n\\t overlay(Overlay.source(\\n\\tSource.image(\\&quot;horses\\&quot;) {\\n\\t transformation(Transformation {\\n\\t resize(Resize.fill() { width(220)\\n height(140) }) })\\n\\t }) {\\n\\t position(Position() { offsetX(-110)\\n offsetY(140) })\\n\\t })\\n\\t overlay(Overlay.source(\\n\\tSource.image(\\&quot;white_chicken\\&quot;) {\\n\\t transformation(Transformation {\\n\\t resize(Resize.fill() { width(220)\\n height(140) }) })\\n\\t }) {\\n\\t position(Position() { offsetX(110)\\n offsetY(70) })\\n\\t })\\n\\t overlay(Overlay.source(\\n\\tSource.image(\\&quot;butterfly.png\\&quot;) {\\n\\t transformation(Transformation {\\n\\t rotate(Rotate.byAngle(10))\\n\\t resize(Resize.scale() { height(200) }) })\\n\\t }) {\\n\\t position(Position() { offsetX(-10) })\\n\\t }) \\n}.generate()&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image {\\n\\tpublicId(\\&quot;yellow_tulip.jpg\\&quot;)\\n\\t resize(Resize.fill() { width(220)\\n height(140) })\\n\\t overlay(Overlay.source(\\n\\tSource.image(\\&quot;brown_sheep\\&quot;) {\\n\\t transformation(Transformation {\\n\\t resize(Resize.fill() { width(220)\\n height(140) }) })\\n\\t }) {\\n\\t position(Position() { offsetX(220) })\\n\\t })\\n\\t overlay(Overlay.source(\\n\\tSource.image(\\&quot;horses\\&quot;) {\\n\\t transformation(Transformation {\\n\\t resize(Resize.fill() { width(220)\\n height(140) }) })\\n\\t }) {\\n\\t position(Position() { offsetX(-110)\\n offsetY(140) })\\n\\t })\\n\\t overlay(Overlay.source(\\n\\tSource.image(\\&quot;white_chicken\\&quot;) {\\n\\t transformation(Transformation {\\n\\t resize(Resize.fill() { width(220)\\n height(140) }) })\\n\\t }) {\\n\\t position(Position() { offsetX(110)\\n offsetY(70) })\\n\\t })\\n\\t overlay(Overlay.source(\\n\\tSource.image(\\&quot;butterfly.png\\&quot;) {\\n\\t transformation(Transformation {\\n\\t rotate(Rotate.byAngle(10))\\n\\t resize(Resize.scale() { height(200) }) })\\n\\t }) {\\n\\t position(Position() { offsetX(-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;yellow_tulip.jpg\\&quot;, {transformation: [ {width: 220, height: 140, crop: \\&quot;fill\\&quot;}, {overlay: new cloudinary.Layer().publicId(\\&quot;brown_sheep\\&quot;), width: 220, height: 140, x: 220, crop: \\&quot;fill\\&quot;}, {overlay: new cloudinary.Layer().publicId(\\&quot;horses\\&quot;), width: 220, height: 140, y: 140, x: -110, crop: \\&quot;fill\\&quot;}, {overlay: new cloudinary.Layer().publicId(\\&quot;white_chicken\\&quot;), width: 220, height: 140, y: 70, x: 110, crop: \\&quot;fill\\&quot;}, {overlay: new cloudinary.Layer().publicId(\\&quot;butterfly.png\\&quot;), height: 200, x: -10, angle: 10} ]})&quot;,&quot;codeSnippet&quot;:&quot;$.cloudinary.image(\\&quot;yellow_tulip.jpg\\&quot;, {transformation: [\\n  {width: 220, height: 140, crop: \\&quot;fill\\&quot;},\\n  {overlay: new cloudinary.Layer().publicId(\\&quot;brown_sheep\\&quot;), width: 220, height: 140, x: 220, crop: \\&quot;fill\\&quot;},\\n  {overlay: new cloudinary.Layer().publicId(\\&quot;horses\\&quot;), width: 220, height: 140, y: 140, x: -110, crop: \\&quot;fill\\&quot;},\\n  {overlay: new cloudinary.Layer().publicId(\\&quot;white_chicken\\&quot;), width: 220, height: 140, y: 70, x: 110, crop: \\&quot;fill\\&quot;},\\n  {overlay: new cloudinary.Layer().publicId(\\&quot;butterfly.png\\&quot;), height: 200, x: -10, angle: 10}\\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;yellow_tulip.jpg\\&quot;)\\n  .resize(fill().width(220).height(140))\\n  .overlay(\\n    source(\\n      image(\\&quot;brown_sheep\\&quot;).transformation(\\n        new Transformation().resize(fill().width(220).height(140))\\n      )\\n    ).position(new Position().offsetX(220))\\n  )\\n  .overlay(\\n    source(\\n      image(\\&quot;horses\\&quot;).transformation(\\n        new Transformation().resize(fill().width(220).height(140))\\n      )\\n    ).position(new Position().offsetX(-110).offsetY(140))\\n  )\\n  .overlay(\\n    source(\\n      image(\\&quot;white_chicken\\&quot;).transformation(\\n        new Transformation().resize(fill().width(220).height(140))\\n      )\\n    ).position(new Position().offsetX(110).offsetY(70))\\n  )\\n  .overlay(\\n    source(\\n      image(\\&quot;butterfly.png\\&quot;).transformation(\\n        new Transformation().rotate(byAngle(10)).resize(scale().height(200))\\n      )\\n    ).position(new Position().offsetX(-10))\\n  );&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;yellow_tulip.jpg\\&quot;)\\n  .resize(fill().width(220).height(140))\\n  .overlay(\\n    source(\\n      image(\\&quot;brown_sheep\\&quot;).transformation(\\n        new Transformation().resize(fill().width(220).height(140))\\n      )\\n    ).position(new Position().offsetX(220))\\n  )\\n  .overlay(\\n    source(\\n      image(\\&quot;horses\\&quot;).transformation(\\n        new Transformation().resize(fill().width(220).height(140))\\n      )\\n    ).position(new Position().offsetX(-110).offsetY(140))\\n  )\\n  .overlay(\\n    source(\\n      image(\\&quot;white_chicken\\&quot;).transformation(\\n        new Transformation().resize(fill().width(220).height(140))\\n      )\\n    ).position(new Position().offsetX(110).offsetY(70))\\n  )\\n  .overlay(\\n    source(\\n      image(\\&quot;butterfly.png\\&quot;).transformation(\\n        new Transformation().rotate(byAngle(10)).resize(scale().height(200))\\n      )\\n    ).position(new Position().offsetX(-10))\\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\\\/w_220,h_140,c_fill\\\/l_brown_sheep,w_220,h_140,c_fill,x_220\\\/l_horses,w_220,h_140,c_fill,y_140,x_-110\\\/l_white_chicken,w_220,h_140,c_fill,y_70,x_110\\\/l_butterfly.png,h_200,x_-10,a_10\\\/yellow_tulip.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;220&quot;,&quot;height&quot;:&quot;140&quot;,&quot;crop_mode&quot;:&quot;fill&quot;},{&quot;overlay&quot;:&quot;brown_sheep&quot;,&quot;width&quot;:&quot;220&quot;,&quot;height&quot;:&quot;140&quot;,&quot;crop_mode&quot;:&quot;fill&quot;,&quot;x&quot;:&quot;220&quot;},{&quot;overlay&quot;:&quot;horses&quot;,&quot;width&quot;:&quot;220&quot;,&quot;height&quot;:&quot;140&quot;,&quot;crop_mode&quot;:&quot;fill&quot;,&quot;y&quot;:&quot;140&quot;,&quot;x&quot;:&quot;-110&quot;},{&quot;overlay&quot;:&quot;white_chicken&quot;,&quot;width&quot;:&quot;220&quot;,&quot;height&quot;:&quot;140&quot;,&quot;crop_mode&quot;:&quot;fill&quot;,&quot;y&quot;:&quot;70&quot;,&quot;x&quot;:&quot;110&quot;},{&quot;overlay&quot;:&quot;butterfly.png&quot;,&quot;height&quot;:&quot;200&quot;,&quot;x&quot;:&quot;-10&quot;,&quot;angle&quot;:&quot;10&quot;}],&quot;transformation_string&quot;:&quot;w_220,h_140,c_fill\\\/l_brown_sheep,w_220,h_140,c_fill,x_220\\\/l_horses,w_220,h_140,c_fill,y_140,x_-110\\\/l_white_chicken,w_220,h_140,c_fill,y_70,x_110\\\/l_butterfly.png,h_200,x_-10,a_10&quot;,&quot;url_suffix&quot;:&quot;&quot;,&quot;version&quot;:&quot;&quot;,&quot;secure&quot;:true,&quot;public_id&quot;:&quot;yellow_tulip.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\/w_220,h_140,c_fill\/l_brown_sheep,w_220,h_140,c_fill,x_220\/l_horses,w_220,h_140,c_fill,y_140,x_-110\/l_white_chicken,w_220,h_140,c_fill,y_70,x_110\/l_butterfly.png,h_200,x_-10,a_10\/yellow_tulip.jpg\" target=\"_blank\"><img decoding=\"async\" src=\"https:\/\/res.cloudinary.com\/demo\/image\/upload\/w_220,h_140,c_fill\/l_brown_sheep,w_220,h_140,c_fill,x_220\/l_horses,w_220,h_140,c_fill,y_140,x_-110\/l_white_chicken,w_220,h_140,c_fill,y_70,x_110\/l_butterfly.png,h_200,x_-10,a_10\/yellow_tulip.jpg\" alt=\"collage\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"440\" height=\"280\"\/><\/a><\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-3\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\">cloudinary.imageTag(<span class=\"hljs-string\">'yellow_tulip.jpg'<\/span>, {<span class=\"hljs-attr\">transformation<\/span>: &#91;\n  {<span class=\"hljs-attr\">width<\/span>: <span class=\"hljs-number\">220<\/span>, <span class=\"hljs-attr\">height<\/span>: <span class=\"hljs-number\">140<\/span>, <span class=\"hljs-attr\">crop<\/span>: <span class=\"hljs-string\">\"fill\"<\/span>},\n  {<span class=\"hljs-attr\">overlay<\/span>: <span class=\"hljs-keyword\">new<\/span> cloudinary.Layer().publicId(<span class=\"hljs-string\">\"brown_sheep\"<\/span>), <span class=\"hljs-attr\">width<\/span>: <span class=\"hljs-number\">220<\/span>, <span class=\"hljs-attr\">height<\/span>: <span class=\"hljs-number\">140<\/span>, <span class=\"hljs-attr\">crop<\/span>: <span class=\"hljs-string\">\"fill\"<\/span>, <span class=\"hljs-attr\">x<\/span>: <span class=\"hljs-number\">220<\/span>},\n  {<span class=\"hljs-attr\">overlay<\/span>: <span class=\"hljs-keyword\">new<\/span> cloudinary.Layer().publicId(<span class=\"hljs-string\">\"horses\"<\/span>), <span class=\"hljs-attr\">width<\/span>: <span class=\"hljs-number\">220<\/span>, <span class=\"hljs-attr\">height<\/span>: <span class=\"hljs-number\">140<\/span>, <span class=\"hljs-attr\">crop<\/span>: <span class=\"hljs-string\">\"fill\"<\/span>, <span class=\"hljs-attr\">y<\/span>: <span class=\"hljs-number\">140<\/span>, <span class=\"hljs-attr\">x<\/span>: <span class=\"hljs-number\">-110<\/span>},\n  {<span class=\"hljs-attr\">overlay<\/span>: <span class=\"hljs-keyword\">new<\/span> cloudinary.Layer().publicId(<span class=\"hljs-string\">\"white_chicken\"<\/span>), <span class=\"hljs-attr\">width<\/span>: <span class=\"hljs-number\">220<\/span>, <span class=\"hljs-attr\">height<\/span>: <span class=\"hljs-number\">140<\/span>, <span class=\"hljs-attr\">crop<\/span>: <span class=\"hljs-string\">\"fill\"<\/span>, <span class=\"hljs-attr\">y<\/span>: <span class=\"hljs-number\">70<\/span>, <span class=\"hljs-attr\">x<\/span>: <span class=\"hljs-number\">110<\/span>},\n  {<span class=\"hljs-attr\">overlay<\/span>: <span class=\"hljs-keyword\">new<\/span> cloudinary.Layer().publicId(<span class=\"hljs-string\">\"butterfly\"<\/span>), <span class=\"hljs-attr\">height<\/span>: <span class=\"hljs-number\">200<\/span>, <span class=\"hljs-attr\">x<\/span>: <span class=\"hljs-number\">-10<\/span>, <span class=\"hljs-attr\">angle<\/span>: <span class=\"hljs-number\">10<\/span>}\n  ]}).toHtml();\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-3\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<h3>Cropping With Custom Shapes<\/h3>\n<p>By cropping images into <a href=\"https:\/\/cloudinary.com\/cookbook\/custom_shapes_cropping\">custom shapes<\/a>, you can fit them in any space. Simply apply the <code>overlay<\/code> parameter as a mask and the <code>flag<\/code> (f in the URL) parameter.<\/p>\n<p>To set things up, specify the final image size, define the mask and the related function, and specify the source image, like this:<\/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;pasta.png\\&quot;, {transformation: [ {width: 173, height: 200, crop: \\&quot;fill\\&quot;}, {overlay: \\&quot;hexagon_sample\\&quot;, flags: \\&quot;cutter\\&quot;} ]})&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image(\\&quot;pasta.png\\&quot;, {transformation: [\\n  {width: 173, height: 200, crop: \\&quot;fill\\&quot;},\\n  {overlay: \\&quot;hexagon_sample\\&quot;, flags: \\&quot;cutter\\&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;pasta.png\\&quot;)\\n  .resize(fill().width(173).height(200))\\n  .reshape(cutByImage(image(\\&quot;hexagon_sample\\&quot;)));&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;pasta.png\\&quot;)\\n  .resize(fill().width(173).height(200))\\n  .reshape(cutByImage(image(\\&quot;hexagon_sample\\&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;pasta.png\\&quot; &gt; &lt;Transformation width=\\&quot;173\\&quot; height=\\&quot;200\\&quot; crop=\\&quot;fill\\&quot; \\\/&gt; &lt;Transformation overlay=\\&quot;hexagon_sample\\&quot; flags=\\&quot;cutter\\&quot; \\\/&gt; &lt;\\\/Image&gt;&quot;,&quot;codeSnippet&quot;:&quot;&lt;Image publicId=\\&quot;pasta.png\\&quot; &gt;\\n\\t&lt;Transformation width=\\&quot;173\\&quot; height=\\&quot;200\\&quot; crop=\\&quot;fill\\&quot; \\\/&gt;\\n\\t&lt;Transformation overlay=\\&quot;hexagon_sample\\&quot; flags=\\&quot;cutter\\&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;pasta.png\\&quot;)\\n  .resize(fill().width(173).height(200))\\n  .reshape(cutByImage(image(\\&quot;hexagon_sample\\&quot;)));&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;pasta.png\\&quot;)\\n  .resize(fill().width(173).height(200))\\n  .reshape(cutByImage(image(\\&quot;hexagon_sample\\&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;pasta.png\\&quot; &gt; &lt;cld-transformation width=\\&quot;173\\&quot; height=\\&quot;200\\&quot; crop=\\&quot;fill\\&quot; \\\/&gt; &lt;cld-transformation :overlay=\\&quot;hexagon_sample\\&quot; flags=\\&quot;cutter\\&quot; \\\/&gt; &lt;\\\/cld-image&gt;&quot;,&quot;codeSnippet&quot;:&quot;&lt;cld-image public-id=\\&quot;pasta.png\\&quot; &gt;\\n\\t&lt;cld-transformation width=\\&quot;173\\&quot; height=\\&quot;200\\&quot; crop=\\&quot;fill\\&quot; \\\/&gt;\\n\\t&lt;cld-transformation :overlay=\\&quot;hexagon_sample\\&quot; flags=\\&quot;cutter\\&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;pasta.png\\&quot;)\\n  .resize(fill().width(173).height(200))\\n  .reshape(cutByImage(image(\\&quot;hexagon_sample\\&quot;)));&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;pasta.png\\&quot;)\\n  .resize(fill().width(173).height(200))\\n  .reshape(cutByImage(image(\\&quot;hexagon_sample\\&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;pasta.png\\&quot; &gt; &lt;cl-transformation width=\\&quot;173\\&quot; height=\\&quot;200\\&quot; crop=\\&quot;fill\\&quot;&gt; &lt;\\\/cl-transformation&gt; &lt;cl-transformation overlay=\\&quot;hexagon_sample\\&quot; flags=\\&quot;cutter\\&quot;&gt; &lt;\\\/cl-transformation&gt; &lt;\\\/cl-image&gt;&quot;,&quot;codeSnippet&quot;:&quot;&lt;cl-image public-id=\\&quot;pasta.png\\&quot; &gt;\\n\\t&lt;cl-transformation width=\\&quot;173\\&quot; height=\\&quot;200\\&quot; crop=\\&quot;fill\\&quot;&gt;\\n\\t&lt;\\\/cl-transformation&gt;\\n\\t&lt;cl-transformation overlay=\\&quot;hexagon_sample\\&quot; flags=\\&quot;cutter\\&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;pasta.png\\&quot;)\\n  .resize(fill().width(173).height(200))\\n  .reshape(cutByImage(image(\\&quot;hexagon_sample\\&quot;)));&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;pasta.png\\&quot;)\\n  .resize(fill().width(173).height(200))\\n  .reshape(cutByImage(image(\\&quot;hexagon_sample\\&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;pasta.png&#039;, {transformation: [ {width: 173, height: 200, crop: \\&quot;fill\\&quot;}, {overlay: new cloudinary.Layer().publicId(\\&quot;hexagon_sample\\&quot;), flags: \\&quot;cutter\\&quot;} ]}).toHtml();&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.imageTag(&#039;pasta.png&#039;, {transformation: [\\n  {width: 173, height: 200, crop: \\&quot;fill\\&quot;},\\n  {overlay: new cloudinary.Layer().publicId(\\&quot;hexagon_sample\\&quot;), flags: \\&quot;cutter\\&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;pasta.png\\&quot;).image(transformation=[ {&#039;width&#039;: 173, &#039;height&#039;: 200, &#039;crop&#039;: \\&quot;fill\\&quot;}, {&#039;overlay&#039;: \\&quot;hexagon_sample\\&quot;, &#039;flags&#039;: \\&quot;cutter\\&quot;} ])&quot;,&quot;codeSnippet&quot;:&quot;CloudinaryImage(\\&quot;pasta.png\\&quot;).image(transformation=[\\n  {&#039;width&#039;: 173, &#039;height&#039;: 200, &#039;crop&#039;: \\&quot;fill\\&quot;},\\n  {&#039;overlay&#039;: \\&quot;hexagon_sample\\&quot;, &#039;flags&#039;: \\&quot;cutter\\&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;pasta.png&#039;))\\n\\t-&gt;resize(Resize::fill()-&gt;width(173)\\n-&gt;height(200))\\n\\t-&gt;reshape(Reshape::cutByImage(\\n\\tSource::image(\\&quot;hexagon_sample\\&quot;)));&quot;,&quot;codeSnippet&quot;:&quot;(new ImageTag(&#039;pasta.png&#039;))\\n\\t-&gt;resize(Resize::fill()-&gt;width(173)\\n-&gt;height(200))\\n\\t-&gt;reshape(Reshape::cutByImage(\\n\\tSource::image(\\&quot;hexagon_sample\\&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;pasta.png\\&quot;, array(\\&quot;transformation\\&quot;=&gt;array( array(\\&quot;width\\&quot;=&gt;173, \\&quot;height\\&quot;=&gt;200, \\&quot;crop\\&quot;=&gt;\\&quot;fill\\&quot;), array(\\&quot;overlay\\&quot;=&gt;\\&quot;hexagon_sample\\&quot;, \\&quot;flags\\&quot;=&gt;\\&quot;cutter\\&quot;) )))&quot;,&quot;codeSnippet&quot;:&quot;cl_image_tag(\\&quot;pasta.png\\&quot;, array(\\&quot;transformation\\&quot;=&gt;array(\\n  array(\\&quot;width\\&quot;=&gt;173, \\&quot;height\\&quot;=&gt;200, \\&quot;crop\\&quot;=&gt;\\&quot;fill\\&quot;),\\n  array(\\&quot;overlay\\&quot;=&gt;\\&quot;hexagon_sample\\&quot;, \\&quot;flags\\&quot;=&gt;\\&quot;cutter\\&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().width(173).height(200).crop(\\&quot;fill\\&quot;).chain() .overlay(new Layer().publicId(\\&quot;hexagon_sample\\&quot;)).flags(\\&quot;cutter\\&quot;)).imageTag(\\&quot;pasta.png\\&quot;);&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.url().transformation(new Transformation()\\n  .width(173).height(200).crop(\\&quot;fill\\&quot;).chain()\\n  .overlay(new Layer().publicId(\\&quot;hexagon_sample\\&quot;)).flags(\\&quot;cutter\\&quot;)).imageTag(\\&quot;pasta.png\\&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;pasta.png\\&quot;, transformation: [ {width: 173, height: 200, crop: \\&quot;fill\\&quot;}, {overlay: \\&quot;hexagon_sample\\&quot;, flags: \\&quot;cutter\\&quot;} ])&quot;,&quot;codeSnippet&quot;:&quot;cl_image_tag(\\&quot;pasta.png\\&quot;, transformation: [\\n  {width: 173, height: 200, crop: \\&quot;fill\\&quot;},\\n  {overlay: \\&quot;hexagon_sample\\&quot;, flags: \\&quot;cutter\\&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().Width(173).Height(200).Crop(\\&quot;fill\\&quot;).Chain() .Overlay(new Layer().PublicId(\\&quot;hexagon_sample\\&quot;)).Flags(\\&quot;cutter\\&quot;)).BuildImageTag(\\&quot;pasta.png\\&quot;)&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.Api.UrlImgUp.Transform(new Transformation()\\n  .Width(173).Height(200).Crop(\\&quot;fill\\&quot;).Chain()\\n  .Overlay(new Layer().PublicId(\\&quot;hexagon_sample\\&quot;)).Flags(\\&quot;cutter\\&quot;)).BuildImageTag(\\&quot;pasta.png\\&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;pasta.png&#039;).transformation(Transformation()\\n\\t.resize(Resize.fill().width(173)\\n.height(200))\\n\\t.reshape(Reshape.cutByImage(\\n\\tSource.image(\\&quot;hexagon_sample\\&quot;))));&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image(&#039;pasta.png&#039;).transformation(Transformation()\\n\\t.resize(Resize.fill().width(173)\\n.height(200))\\n\\t.reshape(Reshape.cutByImage(\\n\\tSource.image(\\&quot;hexagon_sample\\&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().setWidth(173).setHeight(200).setCrop(\\&quot;fill\\&quot;).chain() .setOverlay(\\&quot;hexagon_sample\\&quot;).setFlags(\\&quot;cutter\\&quot;)).generate(\\&quot;pasta.png\\&quot;)!, cloudinary: cloudinary)&quot;,&quot;codeSnippet&quot;:&quot;imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation()\\n  .setWidth(173).setHeight(200).setCrop(\\&quot;fill\\&quot;).chain()\\n  .setOverlay(\\&quot;hexagon_sample\\&quot;).setFlags(\\&quot;cutter\\&quot;)).generate(\\&quot;pasta.png\\&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().width(173).height(200).crop(\\&quot;fill\\&quot;).chain() .overlay(new Layer().publicId(\\&quot;hexagon_sample\\&quot;)).flags(\\&quot;cutter\\&quot;)).generate(\\&quot;pasta.png\\&quot;);&quot;,&quot;codeSnippet&quot;:&quot;MediaManager.get().url().transformation(new Transformation()\\n  .width(173).height(200).crop(\\&quot;fill\\&quot;).chain()\\n  .overlay(new Layer().publicId(\\&quot;hexagon_sample\\&quot;)).flags(\\&quot;cutter\\&quot;)).generate(\\&quot;pasta.png\\&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;pasta.png&#039;).transformation(Transformation()\\n\\t.resize(Resize.fill().width(173)\\n.height(200))\\n\\t.reshape(Reshape.cutByImage(\\n\\tSource.image(\\&quot;hexagon_sample\\&quot;))));&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image(&#039;pasta.png&#039;).transformation(Transformation()\\n\\t.resize(Resize.fill().width(173)\\n.height(200))\\n\\t.reshape(Reshape.cutByImage(\\n\\tSource.image(\\&quot;hexagon_sample\\&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;pasta.png\\&quot;)\\n\\t resize(Resize.fill() { width(173)\\n height(200) })\\n\\t reshape(Reshape.cutByImage(\\n\\tSource.image(\\&quot;hexagon_sample\\&quot;))) \\n}.generate()&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image {\\n\\tpublicId(\\&quot;pasta.png\\&quot;)\\n\\t resize(Resize.fill() { width(173)\\n height(200) })\\n\\t reshape(Reshape.cutByImage(\\n\\tSource.image(\\&quot;hexagon_sample\\&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;pasta.png\\&quot;, {transformation: [ {width: 173, height: 200, crop: \\&quot;fill\\&quot;}, {overlay: new cloudinary.Layer().publicId(\\&quot;hexagon_sample\\&quot;), flags: \\&quot;cutter\\&quot;} ]})&quot;,&quot;codeSnippet&quot;:&quot;$.cloudinary.image(\\&quot;pasta.png\\&quot;, {transformation: [\\n  {width: 173, height: 200, crop: \\&quot;fill\\&quot;},\\n  {overlay: new cloudinary.Layer().publicId(\\&quot;hexagon_sample\\&quot;), flags: \\&quot;cutter\\&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;pasta.png\\&quot;)\\n  .resize(fill().width(173).height(200))\\n  .reshape(cutByImage(image(\\&quot;hexagon_sample\\&quot;)));&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;pasta.png\\&quot;)\\n  .resize(fill().width(173).height(200))\\n  .reshape(cutByImage(image(\\&quot;hexagon_sample\\&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\\\/w_173,h_200,c_fill\\\/l_hexagon_sample,fl_cutter\\\/pasta.png&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;173&quot;,&quot;height&quot;:&quot;200&quot;,&quot;crop_mode&quot;:&quot;fill&quot;},{&quot;overlay&quot;:&quot;hexagon_sample&quot;,&quot;flags&quot;:&quot;cutter&quot;}],&quot;transformation_string&quot;:&quot;w_173,h_200,c_fill\\\/l_hexagon_sample,fl_cutter&quot;,&quot;url_suffix&quot;:&quot;&quot;,&quot;version&quot;:&quot;&quot;,&quot;secure&quot;:true,&quot;public_id&quot;:&quot;pasta.png&quot;,&quot;extension&quot;:&quot;png&quot;,&quot;format&quot;:&quot;png&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\/w_173,h_200,c_fill\/l_hexagon_sample,fl_cutter\/pasta.png\" target=\"_blank\"><img decoding=\"async\" src=\"https:\/\/res.cloudinary.com\/demo\/image\/upload\/w_173,h_200,c_fill\/l_hexagon_sample,fl_cutter\/pasta.png\" alt=\"hexagon\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"173\" height=\"200\"\/><\/a><\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-4\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\">cloudinary.imageTag(<span class=\"hljs-string\">'pasta.png'<\/span>, {<span class=\"hljs-attr\">transformation<\/span>: &#91;\n  {<span class=\"hljs-attr\">width<\/span>: <span class=\"hljs-number\">173<\/span>, <span class=\"hljs-attr\">height<\/span>: <span class=\"hljs-string\">\"200\"<\/span>, <span class=\"hljs-attr\">crop<\/span>: \u201cfill\u201d},\n  {<span class=\"hljs-attr\">overlay<\/span>: <span class=\"hljs-keyword\">new<\/span> cloudinary.Layer().publicId(<span class=\"hljs-string\">\"hexagon_sample\"<\/span>), <span class=\"hljs-attr\">flags<\/span>: \u201ccutter\u201d},\n  ]}).toHtml();\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-4\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<p>Adding the <code>relative<\/code> parameter matches the mask to the proportions you desire, as in this example:<\/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;pasta.png\\&quot;, {overlay: \\&quot;hexagon_sample\\&quot;, flags: [\\&quot;cutter\\&quot;, \\&quot;relative\\&quot;], width: \\&quot;1.0\\&quot;, height: \\&quot;1.0\\&quot;})&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image(\\&quot;pasta.png\\&quot;, {overlay: \\&quot;hexagon_sample\\&quot;, flags: [\\&quot;cutter\\&quot;, \\&quot;relative\\&quot;], width: \\&quot;1.0\\&quot;, height: \\&quot;1.0\\&quot;})&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;pasta.png\\&quot;).reshape(\\n  cutByImage(\\n    image(\\&quot;hexagon_sample\\&quot;).transformation(\\n      new Transformation().resize(scale().width(\\&quot;1.0\\&quot;).height(\\&quot;1.0\\&quot;).relative())\\n    )\\n  )\\n);&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;pasta.png\\&quot;).reshape(\\n  cutByImage(\\n    image(\\&quot;hexagon_sample\\&quot;).transformation(\\n      new Transformation().resize(scale().width(\\&quot;1.0\\&quot;).height(\\&quot;1.0\\&quot;).relative())\\n    )\\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;pasta.png\\&quot; &gt; &lt;Transformation overlay=\\&quot;hexagon_sample\\&quot; flags={[\\&quot;cutter\\&quot;, \\&quot;relative\\&quot;]} width=\\&quot;1.0\\&quot; height=\\&quot;1.0\\&quot; \\\/&gt; &lt;\\\/Image&gt;&quot;,&quot;codeSnippet&quot;:&quot;&lt;Image publicId=\\&quot;pasta.png\\&quot; &gt;\\n\\t&lt;Transformation overlay=\\&quot;hexagon_sample\\&quot; flags={[\\&quot;cutter\\&quot;, \\&quot;relative\\&quot;]} width=\\&quot;1.0\\&quot; height=\\&quot;1.0\\&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;pasta.png\\&quot;).reshape(\\n  cutByImage(\\n    image(\\&quot;hexagon_sample\\&quot;).transformation(\\n      new Transformation().resize(scale().width(\\&quot;1.0\\&quot;).height(\\&quot;1.0\\&quot;).relative())\\n    )\\n  )\\n);&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;pasta.png\\&quot;).reshape(\\n  cutByImage(\\n    image(\\&quot;hexagon_sample\\&quot;).transformation(\\n      new Transformation().resize(scale().width(\\&quot;1.0\\&quot;).height(\\&quot;1.0\\&quot;).relative())\\n    )\\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;pasta.png\\&quot; &gt; &lt;cld-transformation :overlay=\\&quot;hexagon_sample\\&quot; flags={[\\&quot;cutter\\&quot;, \\&quot;relative\\&quot;]} width=\\&quot;1.0\\&quot; height=\\&quot;1.0\\&quot; \\\/&gt; &lt;\\\/cld-image&gt;&quot;,&quot;codeSnippet&quot;:&quot;&lt;cld-image public-id=\\&quot;pasta.png\\&quot; &gt;\\n\\t&lt;cld-transformation :overlay=\\&quot;hexagon_sample\\&quot; flags={[\\&quot;cutter\\&quot;, \\&quot;relative\\&quot;]} width=\\&quot;1.0\\&quot; height=\\&quot;1.0\\&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;pasta.png\\&quot;).reshape(\\n  cutByImage(\\n    image(\\&quot;hexagon_sample\\&quot;).transformation(\\n      new Transformation().resize(scale().width(\\&quot;1.0\\&quot;).height(\\&quot;1.0\\&quot;).relative())\\n    )\\n  )\\n);&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;pasta.png\\&quot;).reshape(\\n  cutByImage(\\n    image(\\&quot;hexagon_sample\\&quot;).transformation(\\n      new Transformation().resize(scale().width(\\&quot;1.0\\&quot;).height(\\&quot;1.0\\&quot;).relative())\\n    )\\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;pasta.png\\&quot; &gt; &lt;cl-transformation overlay=\\&quot;hexagon_sample\\&quot; flags={{[\\&quot;cutter\\&quot;, \\&quot;relative\\&quot;]}} width=\\&quot;1.0\\&quot; height=\\&quot;1.0\\&quot;&gt; &lt;\\\/cl-transformation&gt; &lt;\\\/cl-image&gt;&quot;,&quot;codeSnippet&quot;:&quot;&lt;cl-image public-id=\\&quot;pasta.png\\&quot; &gt;\\n\\t&lt;cl-transformation overlay=\\&quot;hexagon_sample\\&quot; flags={{[\\&quot;cutter\\&quot;, \\&quot;relative\\&quot;]}} width=\\&quot;1.0\\&quot; height=\\&quot;1.0\\&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;pasta.png\\&quot;).reshape(\\n  cutByImage(\\n    image(\\&quot;hexagon_sample\\&quot;).transformation(\\n      new Transformation().resize(scale().width(\\&quot;1.0\\&quot;).height(\\&quot;1.0\\&quot;).relative())\\n    )\\n  )\\n);&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;pasta.png\\&quot;).reshape(\\n  cutByImage(\\n    image(\\&quot;hexagon_sample\\&quot;).transformation(\\n      new Transformation().resize(scale().width(\\&quot;1.0\\&quot;).height(\\&quot;1.0\\&quot;).relative())\\n    )\\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;pasta.png&#039;, {overlay: new cloudinary.Layer().publicId(\\&quot;hexagon_sample\\&quot;), flags: [\\&quot;cutter\\&quot;, \\&quot;relative\\&quot;], width: \\&quot;1.0\\&quot;, height: \\&quot;1.0\\&quot;}).toHtml();&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.imageTag(&#039;pasta.png&#039;, {overlay: new cloudinary.Layer().publicId(\\&quot;hexagon_sample\\&quot;), flags: [\\&quot;cutter\\&quot;, \\&quot;relative\\&quot;], width: \\&quot;1.0\\&quot;, height: \\&quot;1.0\\&quot;}).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;pasta.png\\&quot;).image(overlay=\\&quot;hexagon_sample\\&quot;, flags=[\\&quot;cutter\\&quot;, \\&quot;relative\\&quot;], width=\\&quot;1.0\\&quot;, height=\\&quot;1.0\\&quot;)&quot;,&quot;codeSnippet&quot;:&quot;CloudinaryImage(\\&quot;pasta.png\\&quot;).image(overlay=\\&quot;hexagon_sample\\&quot;, flags=[\\&quot;cutter\\&quot;, \\&quot;relative\\&quot;], width=\\&quot;1.0\\&quot;, height=\\&quot;1.0\\&quot;)&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;pasta.png&#039;))\\n\\t-&gt;reshape(Reshape::cutByImage(\\n\\tSource::image(\\&quot;hexagon_sample\\&quot;)\\n\\t-&gt;transformation((new Transformation())\\n\\t-&gt;resize(Resize::scale()-&gt;width(1.0)\\n-&gt;height(1.0)\\n\\t-&gt;relative()\\n\\t))\\n\\t));&quot;,&quot;codeSnippet&quot;:&quot;(new ImageTag(&#039;pasta.png&#039;))\\n\\t-&gt;reshape(Reshape::cutByImage(\\n\\tSource::image(\\&quot;hexagon_sample\\&quot;)\\n\\t-&gt;transformation((new Transformation())\\n\\t-&gt;resize(Resize::scale()-&gt;width(1.0)\\n-&gt;height(1.0)\\n\\t-&gt;relative()\\n\\t))\\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;pasta.png\\&quot;, array(\\&quot;overlay\\&quot;=&gt;\\&quot;hexagon_sample\\&quot;, \\&quot;flags\\&quot;=&gt;array(\\&quot;cutter\\&quot;, \\&quot;relative\\&quot;), \\&quot;width\\&quot;=&gt;\\&quot;1.0\\&quot;, \\&quot;height\\&quot;=&gt;\\&quot;1.0\\&quot;))&quot;,&quot;codeSnippet&quot;:&quot;cl_image_tag(\\&quot;pasta.png\\&quot;, array(\\&quot;overlay\\&quot;=&gt;\\&quot;hexagon_sample\\&quot;, \\&quot;flags\\&quot;=&gt;array(\\&quot;cutter\\&quot;, \\&quot;relative\\&quot;), \\&quot;width\\&quot;=&gt;\\&quot;1.0\\&quot;, \\&quot;height\\&quot;=&gt;\\&quot;1.0\\&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;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().overlay(new Layer().publicId(\\&quot;hexagon_sample\\&quot;)).flags(\\&quot;cutter\\&quot;, \\&quot;relative\\&quot;).width(1.0).height(1.0)).imageTag(\\&quot;pasta.png\\&quot;);&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.url().transformation(new Transformation().overlay(new Layer().publicId(\\&quot;hexagon_sample\\&quot;)).flags(\\&quot;cutter\\&quot;, \\&quot;relative\\&quot;).width(1.0).height(1.0)).imageTag(\\&quot;pasta.png\\&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;pasta.png\\&quot;, overlay: \\&quot;hexagon_sample\\&quot;, flags: [\\&quot;cutter\\&quot;, \\&quot;relative\\&quot;], width: 1.0, height: 1.0)&quot;,&quot;codeSnippet&quot;:&quot;cl_image_tag(\\&quot;pasta.png\\&quot;, overlay: \\&quot;hexagon_sample\\&quot;, flags: [\\&quot;cutter\\&quot;, \\&quot;relative\\&quot;], width: 1.0, height: 1.0)&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().Overlay(new Layer().PublicId(\\&quot;hexagon_sample\\&quot;)).Flags(\\&quot;cutter\\&quot;, \\&quot;relative\\&quot;).Width(1.0).Height(1.0)).BuildImageTag(\\&quot;pasta.png\\&quot;)&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.Api.UrlImgUp.Transform(new Transformation().Overlay(new Layer().PublicId(\\&quot;hexagon_sample\\&quot;)).Flags(\\&quot;cutter\\&quot;, \\&quot;relative\\&quot;).Width(1.0).Height(1.0)).BuildImageTag(\\&quot;pasta.png\\&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;pasta.png&#039;).transformation(Transformation()\\n\\t.reshape(Reshape.cutByImage(\\n\\tSource.image(\\&quot;hexagon_sample\\&quot;)\\n\\t.transformation(new Transformation()\\n\\t.resize(Resize.scale().width(&#039;1.0&#039;)\\n.height(&#039;1.0&#039;)\\n\\t.relative()\\n\\t))\\n\\t)));&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image(&#039;pasta.png&#039;).transformation(Transformation()\\n\\t.reshape(Reshape.cutByImage(\\n\\tSource.image(\\&quot;hexagon_sample\\&quot;)\\n\\t.transformation(new Transformation()\\n\\t.resize(Resize.scale().width(&#039;1.0&#039;)\\n.height(&#039;1.0&#039;)\\n\\t.relative()\\n\\t))\\n\\t)));&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().setOverlay(\\&quot;hexagon_sample\\&quot;).setFlags(\\&quot;cutter\\&quot;, \\&quot;relative\\&quot;).setWidth(1.0).setHeight(1.0)).generate(\\&quot;pasta.png\\&quot;)!, cloudinary: cloudinary)&quot;,&quot;codeSnippet&quot;:&quot;imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setOverlay(\\&quot;hexagon_sample\\&quot;).setFlags(\\&quot;cutter\\&quot;, \\&quot;relative\\&quot;).setWidth(1.0).setHeight(1.0)).generate(\\&quot;pasta.png\\&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().overlay(new Layer().publicId(\\&quot;hexagon_sample\\&quot;)).flags(\\&quot;cutter\\&quot;, \\&quot;relative\\&quot;).width(1.0).height(1.0)).generate(\\&quot;pasta.png\\&quot;);&quot;,&quot;codeSnippet&quot;:&quot;MediaManager.get().url().transformation(new Transformation().overlay(new Layer().publicId(\\&quot;hexagon_sample\\&quot;)).flags(\\&quot;cutter\\&quot;, \\&quot;relative\\&quot;).width(1.0).height(1.0)).generate(\\&quot;pasta.png\\&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;pasta.png&#039;).transformation(Transformation()\\n\\t.reshape(Reshape.cutByImage(\\n\\tSource.image(\\&quot;hexagon_sample\\&quot;)\\n\\t.transformation(new Transformation()\\n\\t.resize(Resize.scale().width(&#039;1.0&#039;)\\n.height(&#039;1.0&#039;)\\n\\t.relative()\\n\\t))\\n\\t)));&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image(&#039;pasta.png&#039;).transformation(Transformation()\\n\\t.reshape(Reshape.cutByImage(\\n\\tSource.image(\\&quot;hexagon_sample\\&quot;)\\n\\t.transformation(new Transformation()\\n\\t.resize(Resize.scale().width(&#039;1.0&#039;)\\n.height(&#039;1.0&#039;)\\n\\t.relative()\\n\\t))\\n\\t)));&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;pasta.png\\&quot;)\\n\\t reshape(Reshape.cutByImage(\\n\\tSource.image(\\&quot;hexagon_sample\\&quot;) {\\n\\t transformation(Transformation {\\n\\t resize(Resize.scale() { width(1.0F)\\n height(1.0F)\\n\\t relative()\\n\\t }) })\\n\\t })) \\n}.generate()&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image {\\n\\tpublicId(\\&quot;pasta.png\\&quot;)\\n\\t reshape(Reshape.cutByImage(\\n\\tSource.image(\\&quot;hexagon_sample\\&quot;) {\\n\\t transformation(Transformation {\\n\\t resize(Resize.scale() { width(1.0F)\\n height(1.0F)\\n\\t relative()\\n\\t }) })\\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;pasta.png\\&quot;, {overlay: new cloudinary.Layer().publicId(\\&quot;hexagon_sample\\&quot;), flags: [\\&quot;cutter\\&quot;, \\&quot;relative\\&quot;], width: \\&quot;1.0\\&quot;, height: \\&quot;1.0\\&quot;})&quot;,&quot;codeSnippet&quot;:&quot;$.cloudinary.image(\\&quot;pasta.png\\&quot;, {overlay: new cloudinary.Layer().publicId(\\&quot;hexagon_sample\\&quot;), flags: [\\&quot;cutter\\&quot;, \\&quot;relative\\&quot;], width: \\&quot;1.0\\&quot;, height: \\&quot;1.0\\&quot;})&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;pasta.png\\&quot;).reshape(\\n  cutByImage(\\n    image(\\&quot;hexagon_sample\\&quot;).transformation(\\n      new Transformation().resize(scale().width(\\&quot;1.0\\&quot;).height(\\&quot;1.0\\&quot;).relative())\\n    )\\n  )\\n);&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;pasta.png\\&quot;).reshape(\\n  cutByImage(\\n    image(\\&quot;hexagon_sample\\&quot;).transformation(\\n      new Transformation().resize(scale().width(\\&quot;1.0\\&quot;).height(\\&quot;1.0\\&quot;).relative())\\n    )\\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\\\/l_hexagon_sample,fl_cutter.relative,w_1.0,h_1.0\\\/pasta.png&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;overlay&quot;:&quot;hexagon_sample&quot;,&quot;flags&quot;:&quot;cutter.relative&quot;,&quot;width&quot;:&quot;1.0&quot;,&quot;height&quot;:&quot;1.0&quot;}],&quot;transformation_string&quot;:&quot;l_hexagon_sample,fl_cutter.relative,w_1.0,h_1.0&quot;,&quot;url_suffix&quot;:&quot;&quot;,&quot;version&quot;:&quot;&quot;,&quot;secure&quot;:true,&quot;public_id&quot;:&quot;pasta.png&quot;,&quot;extension&quot;:&quot;png&quot;,&quot;format&quot;:&quot;png&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\/l_hexagon_sample,fl_cutter.relative,w_1.0,h_1.0\/pasta.png\" target=\"_blank\"><img decoding=\"async\" src=\"https:\/\/res.cloudinary.com\/demo\/image\/upload\/l_hexagon_sample,fl_cutter.relative,w_1.0,h_1.0\/pasta.png\" alt=\"relative\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"849\" height=\"565\"\/><\/a><\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-5\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\">cloudinary.imageTag(<span class=\"hljs-string\">'pasta.png'<\/span>, {<span class=\"hljs-attr\">transformation<\/span>: &#91;\n  {<span class=\"hljs-attr\">overlay<\/span>: <span class=\"hljs-keyword\">new<\/span> cloudinary.Layer().publicId(<span class=\"hljs-string\">\"hexagon_sample\"<\/span>), <span class=\"hljs-attr\">flags<\/span>: \u201ccutter:relative\u201d, <span class=\"hljs-attr\">width<\/span>: <span class=\"hljs-number\">1.0<\/span>, <span class=\"hljs-attr\">height<\/span>: <span class=\"hljs-number\">1.0<\/span>}\n  ]}).toHtml();\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-5\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<h2 id=\"cloudinary\">Learning More About Cloudinary<\/h2>\n<p>Besides the capability for image resizing, Cloudinary offers a multitude of robust tools for web developers, including the following:<\/p>\n<ul>\n<li>\n<strong>Automated image uploads.<\/strong> You can upload images at scale anywhere from a browser, mobile app, or application back-end directly to the cloud.<\/li>\n<li>\n<strong>Generous image storage.<\/strong> Cloudinary accords you up to 25 GB free managed, secure, and cloud-based storage space with multiregion backup, revision history, and disaster recovery.<\/li>\n<li>\n<strong>Seamless asset management.<\/strong> You can efficiently manage your image library on Cloudinary by performing tasks like searching, organizing, and tagging files; controlling access; and monitoring usage and performance.<\/li>\n<li>\n<strong>Effective image transformation.<\/strong> You can transform, enhance, transcode, crop, scale, and enhance images with a URL-based API or with SDKs that support all popular programming languages.<\/li>\n<li>\n<strong>Automated image optimization.<\/strong> Cloudinary automatically selects the optimal quality and encoding settings for images, adapts the settings to any resolution or pixel density, and scales or crops images to focus on the important regions.<\/li>\n<li>\n<strong>Responsive images.<\/strong> Cloudinary automatically scales images in an art-directed manner, cropping them to fit different resolutions and viewports.<\/li>\n<li>\n<strong>Reliable and fast image delivery.<\/strong> Cloudinary delivers images through Content Delivery Networks (CDNs)\u2014Akamai, Fastly, and CloudFront\u2014with no integration or management on your part.<\/li>\n<\/ul>\n<p>Do give Cloudinary a try. To start, <a href=\"https:\/\/cloudinary.com\/pricing\">sign up<\/a> for a free account.<\/p>\n<h2 id=\"css\">Checking Out the Details of CSS Image Transformations<\/h2> \n<p>Want to learn more about CSS image transformations? These articles are an excellent resource:<\/p>\n<ul>\n<li>\n<a href=\"https:\/\/cloudinary.com\/blog\/working_with_css_images\">Working With CSS Images<\/a>\n<\/li>\n<li>\n<a href=\"https:\/\/cloudinary.com\/blog\/css_image_overlay_overlaying_text_and_images_for_visual_effect\">CSS Image Overlay: Overlaying Text and Images for Visual Effect<\/a>\n<\/li>\n<li>\n<a href=\"https:\/\/cloudinary.com\/blog\/image_resizing_manually_with_css_and_automatically_with_cloudinary\">Image Resizing: Manually With CSS and Automatically With Cloudinary<\/a>\n<\/li>\n<li>\n<a href=\"https:\/\/cloudinary.com\/blog\/css_image_effects_five_simple_examples_and_a_quick_animation_guide\">CSS Image Effects: Five Simple Examples and a Quick Animation Guide<\/a>\n<\/li>\n<li>\n<a href=\"https:\/\/cloudinary.com\/blog\/creating_image_filter_effects_with_css_and_riveting_transformations\">Creating Image-Filter Effects With CSS and Riveting Transformations<\/a>\n<\/li>\n<li>\n<a href=\"https:\/\/cloudinary.com\/blog\/rotating_images_in_javascript_three_quick_tutorials\">Rotating Images in JavaScript: Three Quick Tutorials<\/a>\n<\/li>\n<li>\n<a href=\"https:\/\/cloudinary.com\/blog\/cool_tricks_for_resizing_images_in_javascript\">Cool Tricks for Resizing Images in JavaScript<\/a>\n<\/li>\n<\/ul>\n<\/div>","protected":false},"excerpt":{"rendered":"","protected":false},"author":41,"featured_media":22216,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_cloudinary_featured_overwrite":false,"footnotes":""},"categories":[1],"tags":[25,177,227],"class_list":["post-22215","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-asset-management","tag-javascript","tag-performance-optimization"],"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>Cool Tricks for Resizing Images in JavaScript<\/title>\n<meta name=\"description\" content=\"Create a zoom effect by resizing images and automating the task during images uploads in JavaScript, and more effectively and faster in Cloudinary.\" \/>\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\/cool_tricks_for_resizing_images_in_javascript\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Cool Tricks for Resizing Images in JavaScript\" \/>\n<meta property=\"og:description\" content=\"Create a zoom effect by resizing images and automating the task during images uploads in JavaScript, and more effectively and faster in Cloudinary.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/cloudinary.com\/blog\/cool_tricks_for_resizing_images_in_javascript\" \/>\n<meta property=\"og:site_name\" content=\"Cloudinary Blog\" \/>\n<meta property=\"article:published_time\" content=\"2021-07-26T22:26:57+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-02-09T22:44:18+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/v1649718899\/Web_Assets\/blog\/resize_js_2221629ed7\/resize_js_2221629ed7-jpg?_i=AA\" \/>\n\t<meta property=\"og:image:width\" content=\"1540\" \/>\n\t<meta property=\"og:image:height\" content=\"847\" \/>\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\/cool_tricks_for_resizing_images_in_javascript#article\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/cool_tricks_for_resizing_images_in_javascript\"},\"author\":{\"name\":\"\",\"@id\":\"\"},\"headline\":\"Cool Tricks for Resizing Images in JavaScript\",\"datePublished\":\"2021-07-26T22:26:57+00:00\",\"dateModified\":\"2025-02-09T22:44:18+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/cool_tricks_for_resizing_images_in_javascript\"},\"wordCount\":7,\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/cool_tricks_for_resizing_images_in_javascript#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718899\/Web_Assets\/blog\/resize_js_2221629ed7\/resize_js_2221629ed7.jpg?_i=AA\",\"keywords\":[\"Asset Management\",\"Javascript\",\"Performance Optimization\"],\"inLanguage\":\"en-US\",\"copyrightYear\":\"2021\",\"copyrightHolder\":{\"@id\":\"https:\/\/cloudinary.com\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/cloudinary.com\/blog\/cool_tricks_for_resizing_images_in_javascript\",\"url\":\"https:\/\/cloudinary.com\/blog\/cool_tricks_for_resizing_images_in_javascript\",\"name\":\"Cool Tricks for Resizing Images in JavaScript\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/cool_tricks_for_resizing_images_in_javascript#primaryimage\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/cool_tricks_for_resizing_images_in_javascript#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718899\/Web_Assets\/blog\/resize_js_2221629ed7\/resize_js_2221629ed7.jpg?_i=AA\",\"datePublished\":\"2021-07-26T22:26:57+00:00\",\"dateModified\":\"2025-02-09T22:44:18+00:00\",\"description\":\"Create a zoom effect by resizing images and automating the task during images uploads in JavaScript, and more effectively and faster in Cloudinary.\",\"breadcrumb\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/cool_tricks_for_resizing_images_in_javascript#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/cloudinary.com\/blog\/cool_tricks_for_resizing_images_in_javascript\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/cool_tricks_for_resizing_images_in_javascript#primaryimage\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718899\/Web_Assets\/blog\/resize_js_2221629ed7\/resize_js_2221629ed7.jpg?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718899\/Web_Assets\/blog\/resize_js_2221629ed7\/resize_js_2221629ed7.jpg?_i=AA\",\"width\":1540,\"height\":847},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/cloudinary.com\/blog\/cool_tricks_for_resizing_images_in_javascript#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/cloudinary.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Cool Tricks for Resizing Images in JavaScript\"}]},{\"@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":"Cool Tricks for Resizing Images in JavaScript","description":"Create a zoom effect by resizing images and automating the task during images uploads in JavaScript, and more effectively and faster in Cloudinary.","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\/cool_tricks_for_resizing_images_in_javascript","og_locale":"en_US","og_type":"article","og_title":"Cool Tricks for Resizing Images in JavaScript","og_description":"Create a zoom effect by resizing images and automating the task during images uploads in JavaScript, and more effectively and faster in Cloudinary.","og_url":"https:\/\/cloudinary.com\/blog\/cool_tricks_for_resizing_images_in_javascript","og_site_name":"Cloudinary Blog","article_published_time":"2021-07-26T22:26:57+00:00","article_modified_time":"2025-02-09T22:44:18+00:00","og_image":[{"width":1540,"height":847,"url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/v1649718899\/Web_Assets\/blog\/resize_js_2221629ed7\/resize_js_2221629ed7-jpg?_i=AA","type":"image\/jpeg"}],"twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"NewsArticle","@id":"https:\/\/cloudinary.com\/blog\/cool_tricks_for_resizing_images_in_javascript#article","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/cool_tricks_for_resizing_images_in_javascript"},"author":{"name":"","@id":""},"headline":"Cool Tricks for Resizing Images in JavaScript","datePublished":"2021-07-26T22:26:57+00:00","dateModified":"2025-02-09T22:44:18+00:00","mainEntityOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/cool_tricks_for_resizing_images_in_javascript"},"wordCount":7,"publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/cool_tricks_for_resizing_images_in_javascript#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718899\/Web_Assets\/blog\/resize_js_2221629ed7\/resize_js_2221629ed7.jpg?_i=AA","keywords":["Asset Management","Javascript","Performance Optimization"],"inLanguage":"en-US","copyrightYear":"2021","copyrightHolder":{"@id":"https:\/\/cloudinary.com\/#organization"}},{"@type":"WebPage","@id":"https:\/\/cloudinary.com\/blog\/cool_tricks_for_resizing_images_in_javascript","url":"https:\/\/cloudinary.com\/blog\/cool_tricks_for_resizing_images_in_javascript","name":"Cool Tricks for Resizing Images in JavaScript","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/cool_tricks_for_resizing_images_in_javascript#primaryimage"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/cool_tricks_for_resizing_images_in_javascript#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718899\/Web_Assets\/blog\/resize_js_2221629ed7\/resize_js_2221629ed7.jpg?_i=AA","datePublished":"2021-07-26T22:26:57+00:00","dateModified":"2025-02-09T22:44:18+00:00","description":"Create a zoom effect by resizing images and automating the task during images uploads in JavaScript, and more effectively and faster in Cloudinary.","breadcrumb":{"@id":"https:\/\/cloudinary.com\/blog\/cool_tricks_for_resizing_images_in_javascript#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/cloudinary.com\/blog\/cool_tricks_for_resizing_images_in_javascript"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/cool_tricks_for_resizing_images_in_javascript#primaryimage","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718899\/Web_Assets\/blog\/resize_js_2221629ed7\/resize_js_2221629ed7.jpg?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718899\/Web_Assets\/blog\/resize_js_2221629ed7\/resize_js_2221629ed7.jpg?_i=AA","width":1540,"height":847},{"@type":"BreadcrumbList","@id":"https:\/\/cloudinary.com\/blog\/cool_tricks_for_resizing_images_in_javascript#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/cloudinary.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Cool Tricks for Resizing Images in JavaScript"}]},{"@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\/v1649718899\/Web_Assets\/blog\/resize_js_2221629ed7\/resize_js_2221629ed7.jpg?_i=AA","_links":{"self":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/22215","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=22215"}],"version-history":[{"count":1,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/22215\/revisions"}],"predecessor-version":[{"id":36787,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/22215\/revisions\/36787"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media\/22216"}],"wp:attachment":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media?parent=22215"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/categories?post=22215"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/tags?post=22215"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}