{"id":22141,"date":"2021-07-26T20:23:17","date_gmt":"2021-07-26T20:23:17","guid":{"rendered":"http:\/\/css_image_overlay_overlaying_text_and_images_for_visual_effect"},"modified":"2025-02-08T18:15:20","modified_gmt":"2025-02-09T02:15:20","slug":"css_image_overlay_overlaying_text_and_images_for_visual_effect","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/css_image_overlay_overlaying_text_and_images_for_visual_effect","title":{"rendered":"CSS Image Overlay: Overlaying Text and Images for Visual Effect"},"content":{"rendered":"<div class=\"wp-block-cloudinary-markdown \"><p><a href=\"https:\/\/cloudinary.com\/blog\/working_with_css_images\">CSS image overlays<\/a> are a common technique for transposing text or images over each other. For example, you can combine images and text on a website when captioning an image, or place a live text element over a button.<\/p>\n<p>CSS image overlays can be a solid color, a gradient, a color block with transparency, or a blur.<\/p>\n<p>This post explains how to overlay images with CSS and how to create seven cool overlay effects with only one codeline in Cloudinary, which is tough to do in CSS.<\/p>\n<p>Here are the topics:<\/p>\n<ul>\n<li>\n<a href=\"#overlay-text\">Overlaying text on images in CSS<\/a>\n<\/li>\n<li>\n<a href=\"#rendering-text\">Rendering text on images readable<\/a>\n<\/li>\n<li>\n<a href=\"#transparent-overlay\">Adding transparent overlays to images<\/a>\n<\/li>\n<li>\n<a href=\"#cloudinary-overlay\">Creating image-overlay effects in Cloudinary<\/a>\n<ul>\n<li>\n<a href=\"#cloudinary-gravity\">Text overlay with gravity<\/a>\n<\/li>\n<li>\n<a href=\"#face-recognition\">Text overlay with face recognition<\/a>\n<\/li>\n<li>\n<a href=\"#responsive-overlay\">Text overlay with responsiveness<\/a>\n<\/li>\n<li>\n<a href=\"#stacked-overlays\">Stacked image overlays<\/a>\n<\/li>\n<li>\n<a href=\"#automated-overlays\">Image overlays with automated positioning and face detection<\/a>\n<\/li>\n<li>\n<a href=\"#custom-fonts\">Custom fonts<\/a>\n<\/li>\n<li>\n<a href=\"#multiple-effects\">Overlays with multiple images and effects<\/a>\n<\/li>\n<\/ul>\n<\/li>\n<li>\n<a href=\"#cloudinary\">Cloudinary: Much More than Image Overlays<\/a>\n<\/li>\n<li>\n<a href=\"#css\">Want to learn more about CSS images?<\/a>\n<\/li>\n<\/ul>\n<h2 id=\"overlay-text\">Overlaying Text on Images in CSS<\/h2> \n<p>To combine image and interactive text elements, for example, menus and buttons, in your website, dynamically overlay text on images in CSS. Note an important caveat, however: the image delivered to the site does <strong>not<\/strong> include the overlaid text. Even though the text is visible in their browser, if users download and share the image, the text disappears. Therefore, do not, for example, add your brand to images by means of CSS overlays for watermarks. Instead, turn to Cloudinary for that task. See the details below.<\/p>\n<p>The following example demonstrates the HTML and CSS code that produces and customizes a text overlay in color. Note that you can apply any text properties. Most important of all, align your elements. Generally, set your container element to be <code>position: relative<\/code> and your text elements to be <code>position: absolute<\/code>.<\/p>\n<p>See the Pen <a href=\"https:\/\/codepen.io\/Nic_Sevic\/pen\/qBOGygN\">\nText Overlay on Image<\/a> by Nic-Sevic (<a href=\"https:\/\/codepen.io\/Nic_Sevic\">@Nic_Sevic<\/a>)\non <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/p>\n<h2 id=\"rendering-text\">Rendering Text on Images Readable<\/h2> \n<p>To ensure that the text in your overlays is readable, adopt one of these techniques:<\/p>\n<ul>\n<li>\n<strong>Color overlays<\/strong>, which apply a single color or shade over an image, ideal for muting details and colors. That makes your text sharp since it competes with only one color family.<\/li>\n<li>\n<strong>Gradient overlays<\/strong>, which apply a gradient of colors or shades over an image for more visual appeal. Depending on your value settings, these overlays can reduce the number of competing colors behind the text.<\/li>\n<li>An <strong>image blur<\/strong>, which reduces the details by adding a background for the text without competing edges, making it easier to see where the letters begin and end regardless of color.<\/li>\n<li>\n<strong>Background color<\/strong>, which applies a small block of pigment behind the text, leaving the rest of the image unchanged. Use this trick for captions or text on images that remain sharp if certain areas are obscure.<\/li>\n<\/ul>\n<h2 id=\"transparent-overlay\">Adding Transparent Overlays to Images<\/h2> \n<p>You can also add <a href=\"https:\/\/cloudinary.com\/blog\/creating_image_filter_effects_with_css_and_riveting_transformations\">color filters<\/a> or backgrounds behind text to improve readability (as described above) or to spruce up visuals. Such overlays offer the added benefit of access-to-hover events, enabling you to make images interactive or to change settings to grab attention.<\/p>\n<p>To create transparent or translucent CSS image overlays, configure the <code>opacity<\/code> property with a value between <code>0<\/code> (translucent) and <code>1<\/code> (opaque). We recommend that you define RGBA values for <code>opacity<\/code> so that you can transform child elements separately.<\/p>\n<p>See this example of a standard <code>opacity<\/code> application (with a 50-percent transparency) for the parent only (also with a 50-percent transparency):<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-1\" data-shcb-language-name=\"CSS\" data-shcb-language-slug=\"css\"><span><code class=\"hljs language-css shcb-wrap-lines\"><span class=\"hljs-selector-class\">.overlay<\/span> {<span class=\"hljs-attribute\">opacity<\/span>: <span class=\"hljs-number\">0.5<\/span>;}\n\n<span class=\"hljs-selector-class\">.overlay<\/span> {<span class=\"hljs-attribute\">background<\/span>: <span class=\"hljs-built_in\">rgba<\/span>(<span class=\"hljs-number\">76<\/span>, <span class=\"hljs-number\">175<\/span>, <span class=\"hljs-number\">80<\/span>, <span class=\"hljs-number\">0.5<\/span>);}\n\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-1\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">CSS<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">css<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<p>To tweak the transparency level, add the <code>hover<\/code> selector to the element in question. The changes you apply are live on a cursor hover of that element. Here\u2019s an example that changes the opacity and color of a sheer-color layer on top of an image:<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-2\" data-shcb-language-name=\"CSS\" data-shcb-language-slug=\"css\"><span><code class=\"hljs language-css shcb-wrap-lines\"><span class=\"hljs-selector-class\">.overlay<\/span> {\n  <span class=\"hljs-attribute\">opacity<\/span>: <span class=\"hljs-number\">0<\/span>;\n}\n\n<span class=\"hljs-selector-class\">.overlay<\/span><span class=\"hljs-selector-pseudo\">:hover<\/span>  { \n  <span class=\"hljs-attribute\">opacity<\/span>: <span class=\"hljs-number\">0.25<\/span>;\n  <span class=\"hljs-attribute\">background-color<\/span>: yellow;\n}\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-2\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">CSS<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">css<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<p>This example makes use of translucent overlays, hover effects, and text overlays:<\/p>\n<pre class=\"js-syntax-highlighted\"><span><code class=\"hljs shcb-wrap-lines\">\n<\/code><\/span><\/pre>\n<p>To learn more, check out these articles on <a href=\"https:\/\/cloudinary.com\/blog\/css_image_effects_five_simple_examples_and_a_quick_animation_guide\">CSS image effects<\/a> and <a href=\"https:\/\/cloudinary.com\/blog\/image_resizing_manually_with_css_and_automatically_with_cloudinary\">resizing<\/a>.<\/p>\n<h2 id=\"cloudinary-overlay\">Creating Image-Overlay Effects in Cloudinary<\/h2> \n<p>A cloud-based service for managing images and videos, Cloudinary offers a generous <a href=\"https:\/\/cloudinary.com\/pricing\">free plan<\/a>. While on that platform, you can intuitively upload images, apply complex overlays, and automatically position and organize them for images. Cloudinary does all that dynamically without modifying the original images.<\/p>\n<p>Applying filters and effects to images on Cloudinary takes only one line of code, which would be a major challenge in CSS. You do that either with changes to the related URLs or through <a href=\"https:\/\/cloudinary.com\/documentation\">convenient SDKs<\/a>, tailored for all popular programming languages.<\/p>\n<p>The list below describes seven overlay effects you can apply to images with Cloudinary. Each of the items links to a resource that contains more details of the effect.<\/p>\n<h3 id=\"cloudinary-gravity\">Text overlay with gravity<\/h3> \n<p>You can display text over an image, automatically positioning the text in different areas. For example, to position the text Hello World at the bottom of the image, code its URL this way:<\/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;face_center.jpg\\&quot;, {overlay: {font_family: \\&quot;Arial\\&quot;, font_size: 45, font_weight: \\&quot;bold\\&quot;, text: \\&quot;Hello%20World\\&quot;}, gravity: \\&quot;south\\&quot;})&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image(\\&quot;face_center.jpg\\&quot;, {overlay: {font_family: \\&quot;Arial\\&quot;, font_size: 45, font_weight: \\&quot;bold\\&quot;, text: \\&quot;Hello%20World\\&quot;}, gravity: \\&quot;south\\&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;face_center.jpg\\&quot;).overlay(\\n  source(\\n    text(\\&quot;Hello World\\&quot;, new TextStyle(\\&quot;Arial\\&quot;, 45).fontWeight(\\&quot;bold\\&quot;))\\n  ).position(new Position().gravity(compass(\\&quot;south\\&quot;)))\\n);&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;face_center.jpg\\&quot;).overlay(\\n  source(\\n    text(\\&quot;Hello World\\&quot;, new TextStyle(\\&quot;Arial\\&quot;, 45).fontWeight(\\&quot;bold\\&quot;))\\n  ).position(new Position().gravity(compass(\\&quot;south\\&quot;)))\\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;face_center.jpg\\&quot; &gt; &lt;Transformation overlay={{fontFamily: \\&quot;Arial\\&quot;, fontSize: 45, fontWeight: \\&quot;bold\\&quot;, text: \\&quot;Hello%20World\\&quot;}} gravity=\\&quot;south\\&quot; \\\/&gt; &lt;\\\/Image&gt;&quot;,&quot;codeSnippet&quot;:&quot;&lt;Image publicId=\\&quot;face_center.jpg\\&quot; &gt;\\n\\t&lt;Transformation overlay={{fontFamily: \\&quot;Arial\\&quot;, fontSize: 45, fontWeight: \\&quot;bold\\&quot;, text: \\&quot;Hello%20World\\&quot;}} gravity=\\&quot;south\\&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;face_center.jpg\\&quot;).overlay(\\n  source(\\n    text(\\&quot;Hello World\\&quot;, new TextStyle(\\&quot;Arial\\&quot;, 45).fontWeight(\\&quot;bold\\&quot;))\\n  ).position(new Position().gravity(compass(\\&quot;south\\&quot;)))\\n);&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;face_center.jpg\\&quot;).overlay(\\n  source(\\n    text(\\&quot;Hello World\\&quot;, new TextStyle(\\&quot;Arial\\&quot;, 45).fontWeight(\\&quot;bold\\&quot;))\\n  ).position(new Position().gravity(compass(\\&quot;south\\&quot;)))\\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;face_center.jpg\\&quot; &gt; &lt;cld-transformation :overlay=\\&quot;{fontFamily: &#039;Arial&#039;, fontSize: 45, fontWeight: &#039;bold&#039;, text: &#039;Hello%20World&#039;}\\&quot; gravity=\\&quot;south\\&quot; \\\/&gt; &lt;\\\/cld-image&gt;&quot;,&quot;codeSnippet&quot;:&quot;&lt;cld-image public-id=\\&quot;face_center.jpg\\&quot; &gt;\\n\\t&lt;cld-transformation :overlay=\\&quot;{fontFamily: &#039;Arial&#039;, fontSize: 45, fontWeight: &#039;bold&#039;, text: &#039;Hello%20World&#039;}\\&quot; gravity=\\&quot;south\\&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;face_center.jpg\\&quot;).overlay(\\n  source(\\n    text(\\&quot;Hello World\\&quot;, new TextStyle(\\&quot;Arial\\&quot;, 45).fontWeight(\\&quot;bold\\&quot;))\\n  ).position(new Position().gravity(compass(\\&quot;south\\&quot;)))\\n);&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;face_center.jpg\\&quot;).overlay(\\n  source(\\n    text(\\&quot;Hello World\\&quot;, new TextStyle(\\&quot;Arial\\&quot;, 45).fontWeight(\\&quot;bold\\&quot;))\\n  ).position(new Position().gravity(compass(\\&quot;south\\&quot;)))\\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;face_center.jpg\\&quot; &gt; &lt;cl-transformation overlay=\\&quot;text:Arial_45_bold:Hello%20World\\&quot; gravity=\\&quot;south\\&quot;&gt; &lt;\\\/cl-transformation&gt; &lt;\\\/cl-image&gt;&quot;,&quot;codeSnippet&quot;:&quot;&lt;cl-image public-id=\\&quot;face_center.jpg\\&quot; &gt;\\n\\t&lt;cl-transformation overlay=\\&quot;text:Arial_45_bold:Hello%20World\\&quot; gravity=\\&quot;south\\&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;face_center.jpg\\&quot;).overlay(\\n  source(\\n    text(\\&quot;Hello World\\&quot;, new TextStyle(\\&quot;Arial\\&quot;, 45).fontWeight(\\&quot;bold\\&quot;))\\n  ).position(new Position().gravity(compass(\\&quot;south\\&quot;)))\\n);&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;face_center.jpg\\&quot;).overlay(\\n  source(\\n    text(\\&quot;Hello World\\&quot;, new TextStyle(\\&quot;Arial\\&quot;, 45).fontWeight(\\&quot;bold\\&quot;))\\n  ).position(new Position().gravity(compass(\\&quot;south\\&quot;)))\\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;face_center.jpg&#039;, {overlay: new cloudinary.TextLayer().fontFamily(\\&quot;Arial\\&quot;).fontSize(45).fontWeight(\\&quot;bold\\&quot;).text(\\&quot;Hello%20World\\&quot;), gravity: \\&quot;south\\&quot;}).toHtml();&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.imageTag(&#039;face_center.jpg&#039;, {overlay: new cloudinary.TextLayer().fontFamily(\\&quot;Arial\\&quot;).fontSize(45).fontWeight(\\&quot;bold\\&quot;).text(\\&quot;Hello%20World\\&quot;), gravity: \\&quot;south\\&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;face_center.jpg\\&quot;).image(overlay={&#039;font_family&#039;: \\&quot;Arial\\&quot;, &#039;font_size&#039;: 45, &#039;font_weight&#039;: \\&quot;bold\\&quot;, &#039;text&#039;: \\&quot;Hello%20World\\&quot;}, gravity=\\&quot;south\\&quot;)&quot;,&quot;codeSnippet&quot;:&quot;CloudinaryImage(\\&quot;face_center.jpg\\&quot;).image(overlay={&#039;font_family&#039;: \\&quot;Arial\\&quot;, &#039;font_size&#039;: 45, &#039;font_weight&#039;: \\&quot;bold\\&quot;, &#039;text&#039;: \\&quot;Hello%20World\\&quot;}, gravity=\\&quot;south\\&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;face_center.jpg&#039;))\\n\\t-&gt;overlay(Overlay::source(\\n\\tSource::text(\\&quot;Hello World\\&quot;,(new TextStyle(\\&quot;Arial\\&quot;,45))\\n\\t-&gt;fontWeight(\\n\\tFontWeight::bold())\\n\\t))\\n\\t-&gt;position((new Position())\\n\\t-&gt;gravity(\\n\\tGravity::compass(\\n\\tCompass::south()))\\n\\t)\\n\\t);&quot;,&quot;codeSnippet&quot;:&quot;(new ImageTag(&#039;face_center.jpg&#039;))\\n\\t-&gt;overlay(Overlay::source(\\n\\tSource::text(\\&quot;Hello World\\&quot;,(new TextStyle(\\&quot;Arial\\&quot;,45))\\n\\t-&gt;fontWeight(\\n\\tFontWeight::bold())\\n\\t))\\n\\t-&gt;position((new Position())\\n\\t-&gt;gravity(\\n\\tGravity::compass(\\n\\tCompass::south()))\\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;face_center.jpg\\&quot;, array(\\&quot;overlay\\&quot;=&gt;array(\\&quot;font_family\\&quot;=&gt;\\&quot;Arial\\&quot;, \\&quot;font_size\\&quot;=&gt;45, \\&quot;font_weight\\&quot;=&gt;\\&quot;bold\\&quot;, \\&quot;text\\&quot;=&gt;\\&quot;Hello%20World\\&quot;), \\&quot;gravity\\&quot;=&gt;\\&quot;south\\&quot;))&quot;,&quot;codeSnippet&quot;:&quot;cl_image_tag(\\&quot;face_center.jpg\\&quot;, array(\\&quot;overlay\\&quot;=&gt;array(\\&quot;font_family\\&quot;=&gt;\\&quot;Arial\\&quot;, \\&quot;font_size\\&quot;=&gt;45, \\&quot;font_weight\\&quot;=&gt;\\&quot;bold\\&quot;, \\&quot;text\\&quot;=&gt;\\&quot;Hello%20World\\&quot;), \\&quot;gravity\\&quot;=&gt;\\&quot;south\\&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 TextLayer().fontFamily(\\&quot;Arial\\&quot;).fontSize(45).fontWeight(\\&quot;bold\\&quot;).text(\\&quot;Hello%20World\\&quot;)).gravity(\\&quot;south\\&quot;)).imageTag(\\&quot;face_center.jpg\\&quot;);&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.url().transformation(new Transformation().overlay(new TextLayer().fontFamily(\\&quot;Arial\\&quot;).fontSize(45).fontWeight(\\&quot;bold\\&quot;).text(\\&quot;Hello%20World\\&quot;)).gravity(\\&quot;south\\&quot;)).imageTag(\\&quot;face_center.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;face_center.jpg\\&quot;, overlay: {font_family: \\&quot;Arial\\&quot;, font_size: 45, font_weight: \\&quot;bold\\&quot;, text: \\&quot;Hello%20World\\&quot;}, gravity: \\&quot;south\\&quot;)&quot;,&quot;codeSnippet&quot;:&quot;cl_image_tag(\\&quot;face_center.jpg\\&quot;, overlay: {font_family: \\&quot;Arial\\&quot;, font_size: 45, font_weight: \\&quot;bold\\&quot;, text: \\&quot;Hello%20World\\&quot;}, gravity: \\&quot;south\\&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().Overlay(new TextLayer().FontFamily(\\&quot;Arial\\&quot;).FontSize(45).FontWeight(\\&quot;bold\\&quot;).Text(\\&quot;Hello%20World\\&quot;)).Gravity(\\&quot;south\\&quot;)).BuildImageTag(\\&quot;face_center.jpg\\&quot;)&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.Api.UrlImgUp.Transform(new Transformation().Overlay(new TextLayer().FontFamily(\\&quot;Arial\\&quot;).FontSize(45).FontWeight(\\&quot;bold\\&quot;).Text(\\&quot;Hello%20World\\&quot;)).Gravity(\\&quot;south\\&quot;)).BuildImageTag(\\&quot;face_center.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;face_center.jpg&#039;).transformation(Transformation()\\n\\t.addTransformation(\\&quot;l_text:Arial_45_bold:Hello World,g_south\\&quot;));&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image(&#039;face_center.jpg&#039;).transformation(Transformation()\\n\\t.addTransformation(\\&quot;l_text:Arial_45_bold:Hello World,g_south\\&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().setOverlay(\\&quot;text:Arial_45_bold:Hello%20World\\&quot;).setGravity(\\&quot;south\\&quot;)).generate(\\&quot;face_center.jpg\\&quot;)!, cloudinary: cloudinary)&quot;,&quot;codeSnippet&quot;:&quot;imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setOverlay(\\&quot;text:Arial_45_bold:Hello%20World\\&quot;).setGravity(\\&quot;south\\&quot;)).generate(\\&quot;face_center.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().overlay(new TextLayer().fontFamily(\\&quot;Arial\\&quot;).fontSize(45).fontWeight(\\&quot;bold\\&quot;).text(\\&quot;Hello%20World\\&quot;)).gravity(\\&quot;south\\&quot;)).generate(\\&quot;face_center.jpg\\&quot;);&quot;,&quot;codeSnippet&quot;:&quot;MediaManager.get().url().transformation(new Transformation().overlay(new TextLayer().fontFamily(\\&quot;Arial\\&quot;).fontSize(45).fontWeight(\\&quot;bold\\&quot;).text(\\&quot;Hello%20World\\&quot;)).gravity(\\&quot;south\\&quot;)).generate(\\&quot;face_center.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;face_center.jpg&#039;).transformation(Transformation()\\n\\t.addTransformation(\\&quot;l_text:Arial_45_bold:Hello World,g_south\\&quot;));&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image(&#039;face_center.jpg&#039;).transformation(Transformation()\\n\\t.addTransformation(\\&quot;l_text:Arial_45_bold:Hello World,g_south\\&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;face_center.jpg\\&quot;)\\n\\t overlay(Overlay.source(\\n\\tSource.text(\\&quot;Hello World\\&quot;,TextStyle(\\&quot;Arial\\&quot;,45) {\\n\\t fontWeight(\\n\\tFontWeight.bold())\\n\\t })) {\\n\\t position(Position() {\\n\\t gravity(\\n\\tGravity.compass(\\n\\tCompass.south()))\\n\\t })\\n\\t }) \\n}.generate()&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image {\\n\\tpublicId(\\&quot;face_center.jpg\\&quot;)\\n\\t overlay(Overlay.source(\\n\\tSource.text(\\&quot;Hello World\\&quot;,TextStyle(\\&quot;Arial\\&quot;,45) {\\n\\t fontWeight(\\n\\tFontWeight.bold())\\n\\t })) {\\n\\t position(Position() {\\n\\t gravity(\\n\\tGravity.compass(\\n\\tCompass.south()))\\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;face_center.jpg\\&quot;, {overlay: new cloudinary.TextLayer().fontFamily(\\&quot;Arial\\&quot;).fontSize(45).fontWeight(\\&quot;bold\\&quot;).text(\\&quot;Hello%20World\\&quot;), gravity: \\&quot;south\\&quot;})&quot;,&quot;codeSnippet&quot;:&quot;$.cloudinary.image(\\&quot;face_center.jpg\\&quot;, {overlay: new cloudinary.TextLayer().fontFamily(\\&quot;Arial\\&quot;).fontSize(45).fontWeight(\\&quot;bold\\&quot;).text(\\&quot;Hello%20World\\&quot;), gravity: \\&quot;south\\&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;face_center.jpg\\&quot;).overlay(\\n  source(\\n    text(\\&quot;Hello World\\&quot;, new TextStyle(\\&quot;Arial\\&quot;, 45).fontWeight(\\&quot;bold\\&quot;))\\n  ).position(new Position().gravity(compass(\\&quot;south\\&quot;)))\\n);&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;face_center.jpg\\&quot;).overlay(\\n  source(\\n    text(\\&quot;Hello World\\&quot;, new TextStyle(\\&quot;Arial\\&quot;, 45).fontWeight(\\&quot;bold\\&quot;))\\n  ).position(new Position().gravity(compass(\\&quot;south\\&quot;)))\\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_text:Arial_45_bold:Hello%20World,g_south\\\/face_center.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;overlay&quot;:&quot;text:Arial_45_bold:Hello World&quot;,&quot;gravity&quot;:&quot;south&quot;}],&quot;transformation_string&quot;:&quot;l_text:Arial_45_bold:Hello World,g_south&quot;,&quot;url_suffix&quot;:&quot;&quot;,&quot;version&quot;:&quot;&quot;,&quot;secure&quot;:true,&quot;public_id&quot;:&quot;face_center.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\/l_text:Arial_45_bold:Hello%20World,g_south\/face_center.jpg\" target=\"_blank\"><img decoding=\"async\" src=\"https:\/\/res.cloudinary.com\/demo\/image\/upload\/l_text:Arial_45_bold:Hello%20World,g_south\/face_center.jpg\" alt=\"Text Overlay\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"283\" height=\"424\"\/><\/a><\/p>\n<p>To make the positioning more accurate, add the <code>x<\/code>and <code>y<\/code> offsets. For example, to position the text northwest of the image with an offset, code the URL 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;face_center.jpg\\&quot;, {overlay: {font_family: \\&quot;Arial\\&quot;, font_size: 45, font_weight: \\&quot;bold\\&quot;, text: \\&quot;Hello%20World\\&quot;}, gravity: \\&quot;north_west\\&quot;, x: 20, y: 20})&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image(\\&quot;face_center.jpg\\&quot;, {overlay: {font_family: \\&quot;Arial\\&quot;, font_size: 45, font_weight: \\&quot;bold\\&quot;, text: \\&quot;Hello%20World\\&quot;}, gravity: \\&quot;north_west\\&quot;, x: 20, y: 20})&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;face_center.jpg\\&quot;).overlay(\\n  source(\\n    text(\\&quot;Hello World\\&quot;, new TextStyle(\\&quot;Arial\\&quot;, 45).fontWeight(\\&quot;bold\\&quot;))\\n  ).position(\\n    new Position()\\n      .gravity(compass(\\&quot;north_west\\&quot;))\\n      .offsetX(20)\\n      .offsetY(20)\\n  )\\n);&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;face_center.jpg\\&quot;).overlay(\\n  source(\\n    text(\\&quot;Hello World\\&quot;, new TextStyle(\\&quot;Arial\\&quot;, 45).fontWeight(\\&quot;bold\\&quot;))\\n  ).position(\\n    new Position()\\n      .gravity(compass(\\&quot;north_west\\&quot;))\\n      .offsetX(20)\\n      .offsetY(20)\\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;face_center.jpg\\&quot; &gt; &lt;Transformation overlay={{fontFamily: \\&quot;Arial\\&quot;, fontSize: 45, fontWeight: \\&quot;bold\\&quot;, text: \\&quot;Hello%20World\\&quot;}} gravity=\\&quot;north_west\\&quot; x=\\&quot;20\\&quot; y=\\&quot;20\\&quot; \\\/&gt; &lt;\\\/Image&gt;&quot;,&quot;codeSnippet&quot;:&quot;&lt;Image publicId=\\&quot;face_center.jpg\\&quot; &gt;\\n\\t&lt;Transformation overlay={{fontFamily: \\&quot;Arial\\&quot;, fontSize: 45, fontWeight: \\&quot;bold\\&quot;, text: \\&quot;Hello%20World\\&quot;}} gravity=\\&quot;north_west\\&quot; x=\\&quot;20\\&quot; y=\\&quot;20\\&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;face_center.jpg\\&quot;).overlay(\\n  source(\\n    text(\\&quot;Hello World\\&quot;, new TextStyle(\\&quot;Arial\\&quot;, 45).fontWeight(\\&quot;bold\\&quot;))\\n  ).position(\\n    new Position()\\n      .gravity(compass(\\&quot;north_west\\&quot;))\\n      .offsetX(20)\\n      .offsetY(20)\\n  )\\n);&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;face_center.jpg\\&quot;).overlay(\\n  source(\\n    text(\\&quot;Hello World\\&quot;, new TextStyle(\\&quot;Arial\\&quot;, 45).fontWeight(\\&quot;bold\\&quot;))\\n  ).position(\\n    new Position()\\n      .gravity(compass(\\&quot;north_west\\&quot;))\\n      .offsetX(20)\\n      .offsetY(20)\\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;face_center.jpg\\&quot; &gt; &lt;cld-transformation :overlay=\\&quot;{fontFamily: &#039;Arial&#039;, fontSize: 45, fontWeight: &#039;bold&#039;, text: &#039;Hello%20World&#039;}\\&quot; gravity=\\&quot;north_west\\&quot; x=\\&quot;20\\&quot; y=\\&quot;20\\&quot; \\\/&gt; &lt;\\\/cld-image&gt;&quot;,&quot;codeSnippet&quot;:&quot;&lt;cld-image public-id=\\&quot;face_center.jpg\\&quot; &gt;\\n\\t&lt;cld-transformation :overlay=\\&quot;{fontFamily: &#039;Arial&#039;, fontSize: 45, fontWeight: &#039;bold&#039;, text: &#039;Hello%20World&#039;}\\&quot; gravity=\\&quot;north_west\\&quot; x=\\&quot;20\\&quot; y=\\&quot;20\\&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;face_center.jpg\\&quot;).overlay(\\n  source(\\n    text(\\&quot;Hello World\\&quot;, new TextStyle(\\&quot;Arial\\&quot;, 45).fontWeight(\\&quot;bold\\&quot;))\\n  ).position(\\n    new Position()\\n      .gravity(compass(\\&quot;north_west\\&quot;))\\n      .offsetX(20)\\n      .offsetY(20)\\n  )\\n);&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;face_center.jpg\\&quot;).overlay(\\n  source(\\n    text(\\&quot;Hello World\\&quot;, new TextStyle(\\&quot;Arial\\&quot;, 45).fontWeight(\\&quot;bold\\&quot;))\\n  ).position(\\n    new Position()\\n      .gravity(compass(\\&quot;north_west\\&quot;))\\n      .offsetX(20)\\n      .offsetY(20)\\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;face_center.jpg\\&quot; &gt; &lt;cl-transformation overlay=\\&quot;text:Arial_45_bold:Hello%20World\\&quot; gravity=\\&quot;north_west\\&quot; x=\\&quot;20\\&quot; y=\\&quot;20\\&quot;&gt; &lt;\\\/cl-transformation&gt; &lt;\\\/cl-image&gt;&quot;,&quot;codeSnippet&quot;:&quot;&lt;cl-image public-id=\\&quot;face_center.jpg\\&quot; &gt;\\n\\t&lt;cl-transformation overlay=\\&quot;text:Arial_45_bold:Hello%20World\\&quot; gravity=\\&quot;north_west\\&quot; x=\\&quot;20\\&quot; y=\\&quot;20\\&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;face_center.jpg\\&quot;).overlay(\\n  source(\\n    text(\\&quot;Hello World\\&quot;, new TextStyle(\\&quot;Arial\\&quot;, 45).fontWeight(\\&quot;bold\\&quot;))\\n  ).position(\\n    new Position()\\n      .gravity(compass(\\&quot;north_west\\&quot;))\\n      .offsetX(20)\\n      .offsetY(20)\\n  )\\n);&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;face_center.jpg\\&quot;).overlay(\\n  source(\\n    text(\\&quot;Hello World\\&quot;, new TextStyle(\\&quot;Arial\\&quot;, 45).fontWeight(\\&quot;bold\\&quot;))\\n  ).position(\\n    new Position()\\n      .gravity(compass(\\&quot;north_west\\&quot;))\\n      .offsetX(20)\\n      .offsetY(20)\\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;face_center.jpg&#039;, {overlay: new cloudinary.TextLayer().fontFamily(\\&quot;Arial\\&quot;).fontSize(45).fontWeight(\\&quot;bold\\&quot;).text(\\&quot;Hello%20World\\&quot;), gravity: \\&quot;north_west\\&quot;, x: 20, y: 20}).toHtml();&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.imageTag(&#039;face_center.jpg&#039;, {overlay: new cloudinary.TextLayer().fontFamily(\\&quot;Arial\\&quot;).fontSize(45).fontWeight(\\&quot;bold\\&quot;).text(\\&quot;Hello%20World\\&quot;), gravity: \\&quot;north_west\\&quot;, x: 20, y: 20}).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;face_center.jpg\\&quot;).image(overlay={&#039;font_family&#039;: \\&quot;Arial\\&quot;, &#039;font_size&#039;: 45, &#039;font_weight&#039;: \\&quot;bold\\&quot;, &#039;text&#039;: \\&quot;Hello%20World\\&quot;}, gravity=\\&quot;north_west\\&quot;, x=20, y=20)&quot;,&quot;codeSnippet&quot;:&quot;CloudinaryImage(\\&quot;face_center.jpg\\&quot;).image(overlay={&#039;font_family&#039;: \\&quot;Arial\\&quot;, &#039;font_size&#039;: 45, &#039;font_weight&#039;: \\&quot;bold\\&quot;, &#039;text&#039;: \\&quot;Hello%20World\\&quot;}, gravity=\\&quot;north_west\\&quot;, x=20, y=20)&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;face_center.jpg&#039;))\\n\\t-&gt;overlay(Overlay::source(\\n\\tSource::text(\\&quot;Hello World\\&quot;,(new TextStyle(\\&quot;Arial\\&quot;,45))\\n\\t-&gt;fontWeight(\\n\\tFontWeight::bold())\\n\\t))\\n\\t-&gt;position((new Position())\\n\\t-&gt;gravity(\\n\\tGravity::compass(\\n\\tCompass::northWest()))\\n-&gt;offsetX(20)\\n-&gt;offsetY(20))\\n\\t);&quot;,&quot;codeSnippet&quot;:&quot;(new ImageTag(&#039;face_center.jpg&#039;))\\n\\t-&gt;overlay(Overlay::source(\\n\\tSource::text(\\&quot;Hello World\\&quot;,(new TextStyle(\\&quot;Arial\\&quot;,45))\\n\\t-&gt;fontWeight(\\n\\tFontWeight::bold())\\n\\t))\\n\\t-&gt;position((new Position())\\n\\t-&gt;gravity(\\n\\tGravity::compass(\\n\\tCompass::northWest()))\\n-&gt;offsetX(20)\\n-&gt;offsetY(20))\\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;face_center.jpg\\&quot;, array(\\&quot;overlay\\&quot;=&gt;array(\\&quot;font_family\\&quot;=&gt;\\&quot;Arial\\&quot;, \\&quot;font_size\\&quot;=&gt;45, \\&quot;font_weight\\&quot;=&gt;\\&quot;bold\\&quot;, \\&quot;text\\&quot;=&gt;\\&quot;Hello%20World\\&quot;), \\&quot;gravity\\&quot;=&gt;\\&quot;north_west\\&quot;, \\&quot;x\\&quot;=&gt;20, \\&quot;y\\&quot;=&gt;20))&quot;,&quot;codeSnippet&quot;:&quot;cl_image_tag(\\&quot;face_center.jpg\\&quot;, array(\\&quot;overlay\\&quot;=&gt;array(\\&quot;font_family\\&quot;=&gt;\\&quot;Arial\\&quot;, \\&quot;font_size\\&quot;=&gt;45, \\&quot;font_weight\\&quot;=&gt;\\&quot;bold\\&quot;, \\&quot;text\\&quot;=&gt;\\&quot;Hello%20World\\&quot;), \\&quot;gravity\\&quot;=&gt;\\&quot;north_west\\&quot;, \\&quot;x\\&quot;=&gt;20, \\&quot;y\\&quot;=&gt;20))&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 TextLayer().fontFamily(\\&quot;Arial\\&quot;).fontSize(45).fontWeight(\\&quot;bold\\&quot;).text(\\&quot;Hello%20World\\&quot;)).gravity(\\&quot;north_west\\&quot;).x(20).y(20)).imageTag(\\&quot;face_center.jpg\\&quot;);&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.url().transformation(new Transformation().overlay(new TextLayer().fontFamily(\\&quot;Arial\\&quot;).fontSize(45).fontWeight(\\&quot;bold\\&quot;).text(\\&quot;Hello%20World\\&quot;)).gravity(\\&quot;north_west\\&quot;).x(20).y(20)).imageTag(\\&quot;face_center.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;face_center.jpg\\&quot;, overlay: {font_family: \\&quot;Arial\\&quot;, font_size: 45, font_weight: \\&quot;bold\\&quot;, text: \\&quot;Hello%20World\\&quot;}, gravity: \\&quot;north_west\\&quot;, x: 20, y: 20)&quot;,&quot;codeSnippet&quot;:&quot;cl_image_tag(\\&quot;face_center.jpg\\&quot;, overlay: {font_family: \\&quot;Arial\\&quot;, font_size: 45, font_weight: \\&quot;bold\\&quot;, text: \\&quot;Hello%20World\\&quot;}, gravity: \\&quot;north_west\\&quot;, x: 20, y: 20)&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 TextLayer().FontFamily(\\&quot;Arial\\&quot;).FontSize(45).FontWeight(\\&quot;bold\\&quot;).Text(\\&quot;Hello%20World\\&quot;)).Gravity(\\&quot;north_west\\&quot;).X(20).Y(20)).BuildImageTag(\\&quot;face_center.jpg\\&quot;)&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.Api.UrlImgUp.Transform(new Transformation().Overlay(new TextLayer().FontFamily(\\&quot;Arial\\&quot;).FontSize(45).FontWeight(\\&quot;bold\\&quot;).Text(\\&quot;Hello%20World\\&quot;)).Gravity(\\&quot;north_west\\&quot;).X(20).Y(20)).BuildImageTag(\\&quot;face_center.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;face_center.jpg&#039;).transformation(Transformation()\\n\\t.addTransformation(\\&quot;l_text:Arial_45_bold:Hello World,g_north_west,x_20,y_20\\&quot;));&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image(&#039;face_center.jpg&#039;).transformation(Transformation()\\n\\t.addTransformation(\\&quot;l_text:Arial_45_bold:Hello World,g_north_west,x_20,y_20\\&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().setOverlay(\\&quot;text:Arial_45_bold:Hello%20World\\&quot;).setGravity(\\&quot;north_west\\&quot;).setX(20).setY(20)).generate(\\&quot;face_center.jpg\\&quot;)!, cloudinary: cloudinary)&quot;,&quot;codeSnippet&quot;:&quot;imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setOverlay(\\&quot;text:Arial_45_bold:Hello%20World\\&quot;).setGravity(\\&quot;north_west\\&quot;).setX(20).setY(20)).generate(\\&quot;face_center.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().overlay(new TextLayer().fontFamily(\\&quot;Arial\\&quot;).fontSize(45).fontWeight(\\&quot;bold\\&quot;).text(\\&quot;Hello%20World\\&quot;)).gravity(\\&quot;north_west\\&quot;).x(20).y(20)).generate(\\&quot;face_center.jpg\\&quot;);&quot;,&quot;codeSnippet&quot;:&quot;MediaManager.get().url().transformation(new Transformation().overlay(new TextLayer().fontFamily(\\&quot;Arial\\&quot;).fontSize(45).fontWeight(\\&quot;bold\\&quot;).text(\\&quot;Hello%20World\\&quot;)).gravity(\\&quot;north_west\\&quot;).x(20).y(20)).generate(\\&quot;face_center.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;face_center.jpg&#039;).transformation(Transformation()\\n\\t.addTransformation(\\&quot;l_text:Arial_45_bold:Hello World,g_north_west,x_20,y_20\\&quot;));&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image(&#039;face_center.jpg&#039;).transformation(Transformation()\\n\\t.addTransformation(\\&quot;l_text:Arial_45_bold:Hello World,g_north_west,x_20,y_20\\&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;face_center.jpg\\&quot;)\\n\\t overlay(Overlay.source(\\n\\tSource.text(\\&quot;Hello World\\&quot;,TextStyle(\\&quot;Arial\\&quot;,45) {\\n\\t fontWeight(\\n\\tFontWeight.bold())\\n\\t })) {\\n\\t position(Position() {\\n\\t gravity(\\n\\tGravity.compass(\\n\\tCompass.northWest()))\\n offsetX(20)\\n offsetY(20) })\\n\\t }) \\n}.generate()&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image {\\n\\tpublicId(\\&quot;face_center.jpg\\&quot;)\\n\\t overlay(Overlay.source(\\n\\tSource.text(\\&quot;Hello World\\&quot;,TextStyle(\\&quot;Arial\\&quot;,45) {\\n\\t fontWeight(\\n\\tFontWeight.bold())\\n\\t })) {\\n\\t position(Position() {\\n\\t gravity(\\n\\tGravity.compass(\\n\\tCompass.northWest()))\\n offsetX(20)\\n offsetY(20) })\\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;face_center.jpg\\&quot;, {overlay: new cloudinary.TextLayer().fontFamily(\\&quot;Arial\\&quot;).fontSize(45).fontWeight(\\&quot;bold\\&quot;).text(\\&quot;Hello%20World\\&quot;), gravity: \\&quot;north_west\\&quot;, x: 20, y: 20})&quot;,&quot;codeSnippet&quot;:&quot;$.cloudinary.image(\\&quot;face_center.jpg\\&quot;, {overlay: new cloudinary.TextLayer().fontFamily(\\&quot;Arial\\&quot;).fontSize(45).fontWeight(\\&quot;bold\\&quot;).text(\\&quot;Hello%20World\\&quot;), gravity: \\&quot;north_west\\&quot;, x: 20, y: 20})&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;face_center.jpg\\&quot;).overlay(\\n  source(\\n    text(\\&quot;Hello World\\&quot;, new TextStyle(\\&quot;Arial\\&quot;, 45).fontWeight(\\&quot;bold\\&quot;))\\n  ).position(\\n    new Position()\\n      .gravity(compass(\\&quot;north_west\\&quot;))\\n      .offsetX(20)\\n      .offsetY(20)\\n  )\\n);&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;face_center.jpg\\&quot;).overlay(\\n  source(\\n    text(\\&quot;Hello World\\&quot;, new TextStyle(\\&quot;Arial\\&quot;, 45).fontWeight(\\&quot;bold\\&quot;))\\n  ).position(\\n    new Position()\\n      .gravity(compass(\\&quot;north_west\\&quot;))\\n      .offsetX(20)\\n      .offsetY(20)\\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_text:Arial_45_bold:Hello%20World,g_north_west,x_20,y_20\\\/face_center.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;overlay&quot;:&quot;text:Arial_45_bold:Hello World&quot;,&quot;gravity&quot;:&quot;north_west&quot;,&quot;x&quot;:&quot;20&quot;,&quot;y&quot;:&quot;20&quot;}],&quot;transformation_string&quot;:&quot;l_text:Arial_45_bold:Hello World,g_north_west,x_20,y_20&quot;,&quot;url_suffix&quot;:&quot;&quot;,&quot;version&quot;:&quot;&quot;,&quot;secure&quot;:true,&quot;public_id&quot;:&quot;face_center.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\/l_text:Arial_45_bold:Hello%20World,g_north_west,x_20,y_20\/face_center.jpg\" target=\"_blank\"><img decoding=\"async\" src=\"https:\/\/res.cloudinary.com\/demo\/image\/upload\/l_text:Arial_45_bold:Hello%20World,g_north_west,x_20,y_20\/face_center.jpg\" alt=\"gravity\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"283\" height=\"424\"\/><\/a><\/p>\n<h3 id=\"face-recognition\">Text overlay with face recognition<\/h3> \n<p>To position the same image on an automatically detected face there, rotate it and fit the text size to 50 percent of the detected face. Code the URL this way:<\/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;face_center.jpg\\&quot;, {overlay: {font_family: \\&quot;Arial\\&quot;, font_size: 45, font_weight: \\&quot;bold\\&quot;, text: \\&quot;Hello%20World\\&quot;}, gravity: \\&quot;face\\&quot;, angle: 19, flags: \\&quot;region_relative\\&quot;, width: \\&quot;0.5\\&quot;})&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image(\\&quot;face_center.jpg\\&quot;, {overlay: {font_family: \\&quot;Arial\\&quot;, font_size: 45, font_weight: \\&quot;bold\\&quot;, text: \\&quot;Hello%20World\\&quot;}, gravity: \\&quot;face\\&quot;, angle: 19, flags: \\&quot;region_relative\\&quot;, width: \\&quot;0.5\\&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;face_center.jpg\\&quot;).overlay(\\n  source(\\n    text(\\n      \\&quot;Hello World\\&quot;,\\n      new TextStyle(\\&quot;Arial\\&quot;, 45).fontWeight(\\&quot;bold\\&quot;)\\n    ).transformation(\\n      new Transformation()\\n        .rotate(byAngle(19))\\n        .resize(scale().width(0.5).regionRelative())\\n    )\\n  ).position(new Position().gravity(focusOn(face())))\\n);&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;face_center.jpg\\&quot;).overlay(\\n  source(\\n    text(\\n      \\&quot;Hello World\\&quot;,\\n      new TextStyle(\\&quot;Arial\\&quot;, 45).fontWeight(\\&quot;bold\\&quot;)\\n    ).transformation(\\n      new Transformation()\\n        .rotate(byAngle(19))\\n        .resize(scale().width(0.5).regionRelative())\\n    )\\n  ).position(new Position().gravity(focusOn(face())))\\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;face_center.jpg\\&quot; &gt; &lt;Transformation overlay={{fontFamily: \\&quot;Arial\\&quot;, fontSize: 45, fontWeight: \\&quot;bold\\&quot;, text: \\&quot;Hello%20World\\&quot;}} gravity=\\&quot;face\\&quot; angle=\\&quot;19\\&quot; flags=\\&quot;region_relative\\&quot; width=\\&quot;0.5\\&quot; \\\/&gt; &lt;\\\/Image&gt;&quot;,&quot;codeSnippet&quot;:&quot;&lt;Image publicId=\\&quot;face_center.jpg\\&quot; &gt;\\n\\t&lt;Transformation overlay={{fontFamily: \\&quot;Arial\\&quot;, fontSize: 45, fontWeight: \\&quot;bold\\&quot;, text: \\&quot;Hello%20World\\&quot;}} gravity=\\&quot;face\\&quot; angle=\\&quot;19\\&quot; flags=\\&quot;region_relative\\&quot; width=\\&quot;0.5\\&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;face_center.jpg\\&quot;).overlay(\\n  source(\\n    text(\\n      \\&quot;Hello World\\&quot;,\\n      new TextStyle(\\&quot;Arial\\&quot;, 45).fontWeight(\\&quot;bold\\&quot;)\\n    ).transformation(\\n      new Transformation()\\n        .rotate(byAngle(19))\\n        .resize(scale().width(0.5).regionRelative())\\n    )\\n  ).position(new Position().gravity(focusOn(face())))\\n);&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;face_center.jpg\\&quot;).overlay(\\n  source(\\n    text(\\n      \\&quot;Hello World\\&quot;,\\n      new TextStyle(\\&quot;Arial\\&quot;, 45).fontWeight(\\&quot;bold\\&quot;)\\n    ).transformation(\\n      new Transformation()\\n        .rotate(byAngle(19))\\n        .resize(scale().width(0.5).regionRelative())\\n    )\\n  ).position(new Position().gravity(focusOn(face())))\\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;face_center.jpg\\&quot; &gt; &lt;cld-transformation :overlay=\\&quot;{fontFamily: &#039;Arial&#039;, fontSize: 45, fontWeight: &#039;bold&#039;, text: &#039;Hello%20World&#039;}\\&quot; gravity=\\&quot;face\\&quot; angle=\\&quot;19\\&quot; flags=\\&quot;region_relative\\&quot; width=\\&quot;0.5\\&quot; \\\/&gt; &lt;\\\/cld-image&gt;&quot;,&quot;codeSnippet&quot;:&quot;&lt;cld-image public-id=\\&quot;face_center.jpg\\&quot; &gt;\\n\\t&lt;cld-transformation :overlay=\\&quot;{fontFamily: &#039;Arial&#039;, fontSize: 45, fontWeight: &#039;bold&#039;, text: &#039;Hello%20World&#039;}\\&quot; gravity=\\&quot;face\\&quot; angle=\\&quot;19\\&quot; flags=\\&quot;region_relative\\&quot; width=\\&quot;0.5\\&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;face_center.jpg\\&quot;).overlay(\\n  source(\\n    text(\\n      \\&quot;Hello World\\&quot;,\\n      new TextStyle(\\&quot;Arial\\&quot;, 45).fontWeight(\\&quot;bold\\&quot;)\\n    ).transformation(\\n      new Transformation()\\n        .rotate(byAngle(19))\\n        .resize(scale().width(0.5).regionRelative())\\n    )\\n  ).position(new Position().gravity(focusOn(face())))\\n);&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;face_center.jpg\\&quot;).overlay(\\n  source(\\n    text(\\n      \\&quot;Hello World\\&quot;,\\n      new TextStyle(\\&quot;Arial\\&quot;, 45).fontWeight(\\&quot;bold\\&quot;)\\n    ).transformation(\\n      new Transformation()\\n        .rotate(byAngle(19))\\n        .resize(scale().width(0.5).regionRelative())\\n    )\\n  ).position(new Position().gravity(focusOn(face())))\\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;face_center.jpg\\&quot; &gt; &lt;cl-transformation overlay=\\&quot;text:Arial_45_bold:Hello%20World\\&quot; gravity=\\&quot;face\\&quot; angle=\\&quot;19\\&quot; flags=\\&quot;region_relative\\&quot; width=\\&quot;0.5\\&quot;&gt; &lt;\\\/cl-transformation&gt; &lt;\\\/cl-image&gt;&quot;,&quot;codeSnippet&quot;:&quot;&lt;cl-image public-id=\\&quot;face_center.jpg\\&quot; &gt;\\n\\t&lt;cl-transformation overlay=\\&quot;text:Arial_45_bold:Hello%20World\\&quot; gravity=\\&quot;face\\&quot; angle=\\&quot;19\\&quot; flags=\\&quot;region_relative\\&quot; width=\\&quot;0.5\\&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;face_center.jpg\\&quot;).overlay(\\n  source(\\n    text(\\n      \\&quot;Hello World\\&quot;,\\n      new TextStyle(\\&quot;Arial\\&quot;, 45).fontWeight(\\&quot;bold\\&quot;)\\n    ).transformation(\\n      new Transformation()\\n        .rotate(byAngle(19))\\n        .resize(scale().width(0.5).regionRelative())\\n    )\\n  ).position(new Position().gravity(focusOn(face())))\\n);&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;face_center.jpg\\&quot;).overlay(\\n  source(\\n    text(\\n      \\&quot;Hello World\\&quot;,\\n      new TextStyle(\\&quot;Arial\\&quot;, 45).fontWeight(\\&quot;bold\\&quot;)\\n    ).transformation(\\n      new Transformation()\\n        .rotate(byAngle(19))\\n        .resize(scale().width(0.5).regionRelative())\\n    )\\n  ).position(new Position().gravity(focusOn(face())))\\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;face_center.jpg&#039;, {overlay: new cloudinary.TextLayer().fontFamily(\\&quot;Arial\\&quot;).fontSize(45).fontWeight(\\&quot;bold\\&quot;).text(\\&quot;Hello%20World\\&quot;), gravity: \\&quot;face\\&quot;, angle: 19, flags: \\&quot;region_relative\\&quot;, width: \\&quot;0.5\\&quot;}).toHtml();&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.imageTag(&#039;face_center.jpg&#039;, {overlay: new cloudinary.TextLayer().fontFamily(\\&quot;Arial\\&quot;).fontSize(45).fontWeight(\\&quot;bold\\&quot;).text(\\&quot;Hello%20World\\&quot;), gravity: \\&quot;face\\&quot;, angle: 19, flags: \\&quot;region_relative\\&quot;, width: \\&quot;0.5\\&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;face_center.jpg\\&quot;).image(overlay={&#039;font_family&#039;: \\&quot;Arial\\&quot;, &#039;font_size&#039;: 45, &#039;font_weight&#039;: \\&quot;bold\\&quot;, &#039;text&#039;: \\&quot;Hello%20World\\&quot;}, gravity=\\&quot;face\\&quot;, angle=19, flags=\\&quot;region_relative\\&quot;, width=\\&quot;0.5\\&quot;)&quot;,&quot;codeSnippet&quot;:&quot;CloudinaryImage(\\&quot;face_center.jpg\\&quot;).image(overlay={&#039;font_family&#039;: \\&quot;Arial\\&quot;, &#039;font_size&#039;: 45, &#039;font_weight&#039;: \\&quot;bold\\&quot;, &#039;text&#039;: \\&quot;Hello%20World\\&quot;}, gravity=\\&quot;face\\&quot;, angle=19, flags=\\&quot;region_relative\\&quot;, width=\\&quot;0.5\\&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;face_center.jpg&#039;))\\n\\t-&gt;overlay(Overlay::source(\\n\\tSource::text(\\&quot;Hello World\\&quot;,(new TextStyle(\\&quot;Arial\\&quot;,45))\\n\\t-&gt;fontWeight(\\n\\tFontWeight::bold())\\n\\t)\\n\\t-&gt;transformation((new Transformation())\\n\\t-&gt;rotate(Rotate::byAngle(19))\\n\\t-&gt;resize(Resize::scale()-&gt;width(0.5)\\n\\t-&gt;regionRelative()\\n\\t))\\n\\t)\\n\\t-&gt;position((new Position())\\n\\t-&gt;gravity(\\n\\tGravity::focusOn(\\n\\tFocusOn::face()))\\n\\t)\\n\\t);&quot;,&quot;codeSnippet&quot;:&quot;(new ImageTag(&#039;face_center.jpg&#039;))\\n\\t-&gt;overlay(Overlay::source(\\n\\tSource::text(\\&quot;Hello World\\&quot;,(new TextStyle(\\&quot;Arial\\&quot;,45))\\n\\t-&gt;fontWeight(\\n\\tFontWeight::bold())\\n\\t)\\n\\t-&gt;transformation((new Transformation())\\n\\t-&gt;rotate(Rotate::byAngle(19))\\n\\t-&gt;resize(Resize::scale()-&gt;width(0.5)\\n\\t-&gt;regionRelative()\\n\\t))\\n\\t)\\n\\t-&gt;position((new Position())\\n\\t-&gt;gravity(\\n\\tGravity::focusOn(\\n\\tFocusOn::face()))\\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;face_center.jpg\\&quot;, array(\\&quot;overlay\\&quot;=&gt;array(\\&quot;font_family\\&quot;=&gt;\\&quot;Arial\\&quot;, \\&quot;font_size\\&quot;=&gt;45, \\&quot;font_weight\\&quot;=&gt;\\&quot;bold\\&quot;, \\&quot;text\\&quot;=&gt;\\&quot;Hello%20World\\&quot;), \\&quot;gravity\\&quot;=&gt;\\&quot;face\\&quot;, \\&quot;angle\\&quot;=&gt;19, \\&quot;flags\\&quot;=&gt;\\&quot;region_relative\\&quot;, \\&quot;width\\&quot;=&gt;\\&quot;0.5\\&quot;))&quot;,&quot;codeSnippet&quot;:&quot;cl_image_tag(\\&quot;face_center.jpg\\&quot;, array(\\&quot;overlay\\&quot;=&gt;array(\\&quot;font_family\\&quot;=&gt;\\&quot;Arial\\&quot;, \\&quot;font_size\\&quot;=&gt;45, \\&quot;font_weight\\&quot;=&gt;\\&quot;bold\\&quot;, \\&quot;text\\&quot;=&gt;\\&quot;Hello%20World\\&quot;), \\&quot;gravity\\&quot;=&gt;\\&quot;face\\&quot;, \\&quot;angle\\&quot;=&gt;19, \\&quot;flags\\&quot;=&gt;\\&quot;region_relative\\&quot;, \\&quot;width\\&quot;=&gt;\\&quot;0.5\\&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 TextLayer().fontFamily(\\&quot;Arial\\&quot;).fontSize(45).fontWeight(\\&quot;bold\\&quot;).text(\\&quot;Hello%20World\\&quot;)).gravity(\\&quot;face\\&quot;).angle(19).flags(\\&quot;region_relative\\&quot;).width(0.5)).imageTag(\\&quot;face_center.jpg\\&quot;);&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.url().transformation(new Transformation().overlay(new TextLayer().fontFamily(\\&quot;Arial\\&quot;).fontSize(45).fontWeight(\\&quot;bold\\&quot;).text(\\&quot;Hello%20World\\&quot;)).gravity(\\&quot;face\\&quot;).angle(19).flags(\\&quot;region_relative\\&quot;).width(0.5)).imageTag(\\&quot;face_center.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;face_center.jpg\\&quot;, overlay: {font_family: \\&quot;Arial\\&quot;, font_size: 45, font_weight: \\&quot;bold\\&quot;, text: \\&quot;Hello%20World\\&quot;}, gravity: \\&quot;face\\&quot;, angle: 19, flags: \\&quot;region_relative\\&quot;, width: 0.5)&quot;,&quot;codeSnippet&quot;:&quot;cl_image_tag(\\&quot;face_center.jpg\\&quot;, overlay: {font_family: \\&quot;Arial\\&quot;, font_size: 45, font_weight: \\&quot;bold\\&quot;, text: \\&quot;Hello%20World\\&quot;}, gravity: \\&quot;face\\&quot;, angle: 19, flags: \\&quot;region_relative\\&quot;, width: 0.5)&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 TextLayer().FontFamily(\\&quot;Arial\\&quot;).FontSize(45).FontWeight(\\&quot;bold\\&quot;).Text(\\&quot;Hello%20World\\&quot;)).Gravity(\\&quot;face\\&quot;).Angle(19).Flags(\\&quot;region_relative\\&quot;).Width(0.5)).BuildImageTag(\\&quot;face_center.jpg\\&quot;)&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.Api.UrlImgUp.Transform(new Transformation().Overlay(new TextLayer().FontFamily(\\&quot;Arial\\&quot;).FontSize(45).FontWeight(\\&quot;bold\\&quot;).Text(\\&quot;Hello%20World\\&quot;)).Gravity(\\&quot;face\\&quot;).Angle(19).Flags(\\&quot;region_relative\\&quot;).Width(0.5)).BuildImageTag(\\&quot;face_center.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;face_center.jpg&#039;).transformation(Transformation()\\n\\t.addTransformation(\\&quot;l_text:Arial_45_bold:Hello World,g_face,a_19,fl_region_relative,w_0.5\\&quot;));&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image(&#039;face_center.jpg&#039;).transformation(Transformation()\\n\\t.addTransformation(\\&quot;l_text:Arial_45_bold:Hello World,g_face,a_19,fl_region_relative,w_0.5\\&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().setOverlay(\\&quot;text:Arial_45_bold:Hello%20World\\&quot;).setGravity(\\&quot;face\\&quot;).setAngle(19).setFlags(\\&quot;region_relative\\&quot;).setWidth(0.5)).generate(\\&quot;face_center.jpg\\&quot;)!, cloudinary: cloudinary)&quot;,&quot;codeSnippet&quot;:&quot;imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setOverlay(\\&quot;text:Arial_45_bold:Hello%20World\\&quot;).setGravity(\\&quot;face\\&quot;).setAngle(19).setFlags(\\&quot;region_relative\\&quot;).setWidth(0.5)).generate(\\&quot;face_center.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().overlay(new TextLayer().fontFamily(\\&quot;Arial\\&quot;).fontSize(45).fontWeight(\\&quot;bold\\&quot;).text(\\&quot;Hello%20World\\&quot;)).gravity(\\&quot;face\\&quot;).angle(19).flags(\\&quot;region_relative\\&quot;).width(0.5)).generate(\\&quot;face_center.jpg\\&quot;);&quot;,&quot;codeSnippet&quot;:&quot;MediaManager.get().url().transformation(new Transformation().overlay(new TextLayer().fontFamily(\\&quot;Arial\\&quot;).fontSize(45).fontWeight(\\&quot;bold\\&quot;).text(\\&quot;Hello%20World\\&quot;)).gravity(\\&quot;face\\&quot;).angle(19).flags(\\&quot;region_relative\\&quot;).width(0.5)).generate(\\&quot;face_center.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;face_center.jpg&#039;).transformation(Transformation()\\n\\t.addTransformation(\\&quot;l_text:Arial_45_bold:Hello World,g_face,a_19,fl_region_relative,w_0.5\\&quot;));&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image(&#039;face_center.jpg&#039;).transformation(Transformation()\\n\\t.addTransformation(\\&quot;l_text:Arial_45_bold:Hello World,g_face,a_19,fl_region_relative,w_0.5\\&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;face_center.jpg\\&quot;)\\n\\t overlay(Overlay.source(\\n\\tSource.text(\\&quot;Hello World\\&quot;,TextStyle(\\&quot;Arial\\&quot;,45) {\\n\\t fontWeight(\\n\\tFontWeight.bold())\\n\\t }) {\\n\\t transformation(Transformation {\\n\\t rotate(Rotate.byAngle(19))\\n\\t resize(Resize.scale() { width(0.5F)\\n\\t regionRelative()\\n\\t }) })\\n\\t }) {\\n\\t position(Position() {\\n\\t gravity(\\n\\tGravity.focusOn(\\n\\tFocusOn.face()))\\n\\t })\\n\\t }) \\n}.generate()&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image {\\n\\tpublicId(\\&quot;face_center.jpg\\&quot;)\\n\\t overlay(Overlay.source(\\n\\tSource.text(\\&quot;Hello World\\&quot;,TextStyle(\\&quot;Arial\\&quot;,45) {\\n\\t fontWeight(\\n\\tFontWeight.bold())\\n\\t }) {\\n\\t transformation(Transformation {\\n\\t rotate(Rotate.byAngle(19))\\n\\t resize(Resize.scale() { width(0.5F)\\n\\t regionRelative()\\n\\t }) })\\n\\t }) {\\n\\t position(Position() {\\n\\t gravity(\\n\\tGravity.focusOn(\\n\\tFocusOn.face()))\\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;face_center.jpg\\&quot;, {overlay: new cloudinary.TextLayer().fontFamily(\\&quot;Arial\\&quot;).fontSize(45).fontWeight(\\&quot;bold\\&quot;).text(\\&quot;Hello%20World\\&quot;), gravity: \\&quot;face\\&quot;, angle: 19, flags: \\&quot;region_relative\\&quot;, width: \\&quot;0.5\\&quot;})&quot;,&quot;codeSnippet&quot;:&quot;$.cloudinary.image(\\&quot;face_center.jpg\\&quot;, {overlay: new cloudinary.TextLayer().fontFamily(\\&quot;Arial\\&quot;).fontSize(45).fontWeight(\\&quot;bold\\&quot;).text(\\&quot;Hello%20World\\&quot;), gravity: \\&quot;face\\&quot;, angle: 19, flags: \\&quot;region_relative\\&quot;, width: \\&quot;0.5\\&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;face_center.jpg\\&quot;).overlay(\\n  source(\\n    text(\\n      \\&quot;Hello World\\&quot;,\\n      new TextStyle(\\&quot;Arial\\&quot;, 45).fontWeight(\\&quot;bold\\&quot;)\\n    ).transformation(\\n      new Transformation()\\n        .rotate(byAngle(19))\\n        .resize(scale().width(0.5).regionRelative())\\n    )\\n  ).position(new Position().gravity(focusOn(face())))\\n);&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;face_center.jpg\\&quot;).overlay(\\n  source(\\n    text(\\n      \\&quot;Hello World\\&quot;,\\n      new TextStyle(\\&quot;Arial\\&quot;, 45).fontWeight(\\&quot;bold\\&quot;)\\n    ).transformation(\\n      new Transformation()\\n        .rotate(byAngle(19))\\n        .resize(scale().width(0.5).regionRelative())\\n    )\\n  ).position(new Position().gravity(focusOn(face())))\\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_text:Arial_45_bold:Hello%20World,g_face,a_19,fl_region_relative,w_0.5\\\/face_center.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;overlay&quot;:&quot;text:Arial_45_bold:Hello World&quot;,&quot;gravity&quot;:&quot;face&quot;,&quot;angle&quot;:&quot;19&quot;,&quot;flags&quot;:&quot;region_relative&quot;,&quot;width&quot;:&quot;0.5&quot;}],&quot;transformation_string&quot;:&quot;l_text:Arial_45_bold:Hello World,g_face,a_19,fl_region_relative,w_0.5&quot;,&quot;url_suffix&quot;:&quot;&quot;,&quot;version&quot;:&quot;&quot;,&quot;secure&quot;:true,&quot;public_id&quot;:&quot;face_center.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\/l_text:Arial_45_bold:Hello%20World,g_face,a_19,fl_region_relative,w_0.5\/face_center.jpg\" target=\"_blank\"><img decoding=\"async\" src=\"https:\/\/res.cloudinary.com\/demo\/image\/upload\/l_text:Arial_45_bold:Hello%20World,g_face,a_19,fl_region_relative,w_0.5\/face_center.jpg\" alt=\"facial recognition\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"283\" height=\"424\"\/><\/a><\/p>\n<h3 id=\"responsive-overlay\">Text overlay with responsiveness<\/h3> \n<p>To overlay text on an image with a nice transparent background and ensure that the bar is relative to the image width, code the URL this way:<\/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;lupine.jpg\\&quot;, {transformation: [ {overlay: \\&quot;black_bar\\&quot;, width: \\&quot;1.0\\&quot;, height: \\&quot;0.1\\&quot;, flags: \\&quot;relative\\&quot;, opacity: 60}, {overlay: {font_family: \\&quot;Arial\\&quot;, font_size: 150, font_weight: \\&quot;bold\\&quot;, text: \\&quot;Cloudinary\\&quot;}, color: \\&quot;white\\&quot;} ]})&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image(\\&quot;lupine.jpg\\&quot;, {transformation: [\\n  {overlay: \\&quot;black_bar\\&quot;, width: \\&quot;1.0\\&quot;, height: \\&quot;0.1\\&quot;, flags: \\&quot;relative\\&quot;, opacity: 60},\\n  {overlay: {font_family: \\&quot;Arial\\&quot;, font_size: 150, font_weight: \\&quot;bold\\&quot;, text: \\&quot;Cloudinary\\&quot;}, color: \\&quot;white\\&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;lupine.jpg\\&quot;)\\n  .overlay(\\n    source(\\n      image(\\&quot;black_bar\\&quot;).transformation(\\n        new Transformation()\\n          .resize(scale().width(\\&quot;1.0\\&quot;).height(0.1).relative())\\n          .adjust(opacity(60))\\n      )\\n    )\\n  )\\n  .overlay(\\n    source(\\n      text(\\n        \\&quot;Cloudinary\\&quot;,\\n        new TextStyle(\\&quot;Arial\\&quot;, 150).fontWeight(\\&quot;bold\\&quot;)\\n      ).textColor(\\&quot;white\\&quot;)\\n    )\\n  );&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;lupine.jpg\\&quot;)\\n  .overlay(\\n    source(\\n      image(\\&quot;black_bar\\&quot;).transformation(\\n        new Transformation()\\n          .resize(scale().width(\\&quot;1.0\\&quot;).height(0.1).relative())\\n          .adjust(opacity(60))\\n      )\\n    )\\n  )\\n  .overlay(\\n    source(\\n      text(\\n        \\&quot;Cloudinary\\&quot;,\\n        new TextStyle(\\&quot;Arial\\&quot;, 150).fontWeight(\\&quot;bold\\&quot;)\\n      ).textColor(\\&quot;white\\&quot;)\\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;lupine.jpg\\&quot; &gt; &lt;Transformation overlay=\\&quot;black_bar\\&quot; width=\\&quot;1.0\\&quot; height=\\&quot;0.1\\&quot; flags=\\&quot;relative\\&quot; opacity=\\&quot;60\\&quot; \\\/&gt; &lt;Transformation overlay={{fontFamily: \\&quot;Arial\\&quot;, fontSize: 150, fontWeight: \\&quot;bold\\&quot;, text: \\&quot;Cloudinary\\&quot;}} color=\\&quot;white\\&quot; \\\/&gt; &lt;\\\/Image&gt;&quot;,&quot;codeSnippet&quot;:&quot;&lt;Image publicId=\\&quot;lupine.jpg\\&quot; &gt;\\n\\t&lt;Transformation overlay=\\&quot;black_bar\\&quot; width=\\&quot;1.0\\&quot; height=\\&quot;0.1\\&quot; flags=\\&quot;relative\\&quot; opacity=\\&quot;60\\&quot; \\\/&gt;\\n\\t&lt;Transformation overlay={{fontFamily: \\&quot;Arial\\&quot;, fontSize: 150, fontWeight: \\&quot;bold\\&quot;, text: \\&quot;Cloudinary\\&quot;}} color=\\&quot;white\\&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;lupine.jpg\\&quot;)\\n  .overlay(\\n    source(\\n      image(\\&quot;black_bar\\&quot;).transformation(\\n        new Transformation()\\n          .resize(scale().width(\\&quot;1.0\\&quot;).height(0.1).relative())\\n          .adjust(opacity(60))\\n      )\\n    )\\n  )\\n  .overlay(\\n    source(\\n      text(\\n        \\&quot;Cloudinary\\&quot;,\\n        new TextStyle(\\&quot;Arial\\&quot;, 150).fontWeight(\\&quot;bold\\&quot;)\\n      ).textColor(\\&quot;white\\&quot;)\\n    )\\n  );&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;lupine.jpg\\&quot;)\\n  .overlay(\\n    source(\\n      image(\\&quot;black_bar\\&quot;).transformation(\\n        new Transformation()\\n          .resize(scale().width(\\&quot;1.0\\&quot;).height(0.1).relative())\\n          .adjust(opacity(60))\\n      )\\n    )\\n  )\\n  .overlay(\\n    source(\\n      text(\\n        \\&quot;Cloudinary\\&quot;,\\n        new TextStyle(\\&quot;Arial\\&quot;, 150).fontWeight(\\&quot;bold\\&quot;)\\n      ).textColor(\\&quot;white\\&quot;)\\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;lupine.jpg\\&quot; &gt; &lt;cld-transformation :overlay=\\&quot;black_bar\\&quot; width=\\&quot;1.0\\&quot; height=\\&quot;0.1\\&quot; flags=\\&quot;relative\\&quot; opacity=\\&quot;60\\&quot; \\\/&gt; &lt;cld-transformation :overlay=\\&quot;{fontFamily: &#039;Arial&#039;, fontSize: 150, fontWeight: &#039;bold&#039;, text: &#039;Cloudinary&#039;}\\&quot; color=\\&quot;white\\&quot; \\\/&gt; &lt;\\\/cld-image&gt;&quot;,&quot;codeSnippet&quot;:&quot;&lt;cld-image public-id=\\&quot;lupine.jpg\\&quot; &gt;\\n\\t&lt;cld-transformation :overlay=\\&quot;black_bar\\&quot; width=\\&quot;1.0\\&quot; height=\\&quot;0.1\\&quot; flags=\\&quot;relative\\&quot; opacity=\\&quot;60\\&quot; \\\/&gt;\\n\\t&lt;cld-transformation :overlay=\\&quot;{fontFamily: &#039;Arial&#039;, fontSize: 150, fontWeight: &#039;bold&#039;, text: &#039;Cloudinary&#039;}\\&quot; color=\\&quot;white\\&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;lupine.jpg\\&quot;)\\n  .overlay(\\n    source(\\n      image(\\&quot;black_bar\\&quot;).transformation(\\n        new Transformation()\\n          .resize(scale().width(\\&quot;1.0\\&quot;).height(0.1).relative())\\n          .adjust(opacity(60))\\n      )\\n    )\\n  )\\n  .overlay(\\n    source(\\n      text(\\n        \\&quot;Cloudinary\\&quot;,\\n        new TextStyle(\\&quot;Arial\\&quot;, 150).fontWeight(\\&quot;bold\\&quot;)\\n      ).textColor(\\&quot;white\\&quot;)\\n    )\\n  );&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;lupine.jpg\\&quot;)\\n  .overlay(\\n    source(\\n      image(\\&quot;black_bar\\&quot;).transformation(\\n        new Transformation()\\n          .resize(scale().width(\\&quot;1.0\\&quot;).height(0.1).relative())\\n          .adjust(opacity(60))\\n      )\\n    )\\n  )\\n  .overlay(\\n    source(\\n      text(\\n        \\&quot;Cloudinary\\&quot;,\\n        new TextStyle(\\&quot;Arial\\&quot;, 150).fontWeight(\\&quot;bold\\&quot;)\\n      ).textColor(\\&quot;white\\&quot;)\\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;lupine.jpg\\&quot; &gt; &lt;cl-transformation overlay=\\&quot;black_bar\\&quot; width=\\&quot;1.0\\&quot; height=\\&quot;0.1\\&quot; flags=\\&quot;relative\\&quot; opacity=\\&quot;60\\&quot;&gt; &lt;\\\/cl-transformation&gt; &lt;cl-transformation overlay=\\&quot;text:Arial_150_bold:Cloudinary\\&quot; color=\\&quot;white\\&quot;&gt; &lt;\\\/cl-transformation&gt; &lt;\\\/cl-image&gt;&quot;,&quot;codeSnippet&quot;:&quot;&lt;cl-image public-id=\\&quot;lupine.jpg\\&quot; &gt;\\n\\t&lt;cl-transformation overlay=\\&quot;black_bar\\&quot; width=\\&quot;1.0\\&quot; height=\\&quot;0.1\\&quot; flags=\\&quot;relative\\&quot; opacity=\\&quot;60\\&quot;&gt;\\n\\t&lt;\\\/cl-transformation&gt;\\n\\t&lt;cl-transformation overlay=\\&quot;text:Arial_150_bold:Cloudinary\\&quot; color=\\&quot;white\\&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;lupine.jpg\\&quot;)\\n  .overlay(\\n    source(\\n      image(\\&quot;black_bar\\&quot;).transformation(\\n        new Transformation()\\n          .resize(scale().width(\\&quot;1.0\\&quot;).height(0.1).relative())\\n          .adjust(opacity(60))\\n      )\\n    )\\n  )\\n  .overlay(\\n    source(\\n      text(\\n        \\&quot;Cloudinary\\&quot;,\\n        new TextStyle(\\&quot;Arial\\&quot;, 150).fontWeight(\\&quot;bold\\&quot;)\\n      ).textColor(\\&quot;white\\&quot;)\\n    )\\n  );&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;lupine.jpg\\&quot;)\\n  .overlay(\\n    source(\\n      image(\\&quot;black_bar\\&quot;).transformation(\\n        new Transformation()\\n          .resize(scale().width(\\&quot;1.0\\&quot;).height(0.1).relative())\\n          .adjust(opacity(60))\\n      )\\n    )\\n  )\\n  .overlay(\\n    source(\\n      text(\\n        \\&quot;Cloudinary\\&quot;,\\n        new TextStyle(\\&quot;Arial\\&quot;, 150).fontWeight(\\&quot;bold\\&quot;)\\n      ).textColor(\\&quot;white\\&quot;)\\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;lupine.jpg&#039;, {transformation: [ {overlay: new cloudinary.Layer().publicId(\\&quot;black_bar\\&quot;), width: \\&quot;1.0\\&quot;, height: \\&quot;0.1\\&quot;, flags: \\&quot;relative\\&quot;, opacity: 60}, {overlay: new cloudinary.TextLayer().fontFamily(\\&quot;Arial\\&quot;).fontSize(150).fontWeight(\\&quot;bold\\&quot;).text(\\&quot;Cloudinary\\&quot;), color: \\&quot;white\\&quot;} ]}).toHtml();&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.imageTag(&#039;lupine.jpg&#039;, {transformation: [\\n  {overlay: new cloudinary.Layer().publicId(\\&quot;black_bar\\&quot;), width: \\&quot;1.0\\&quot;, height: \\&quot;0.1\\&quot;, flags: \\&quot;relative\\&quot;, opacity: 60},\\n  {overlay: new cloudinary.TextLayer().fontFamily(\\&quot;Arial\\&quot;).fontSize(150).fontWeight(\\&quot;bold\\&quot;).text(\\&quot;Cloudinary\\&quot;), color: \\&quot;white\\&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;lupine.jpg\\&quot;).image(transformation=[ {&#039;overlay&#039;: \\&quot;black_bar\\&quot;, &#039;width&#039;: \\&quot;1.0\\&quot;, &#039;height&#039;: \\&quot;0.1\\&quot;, &#039;flags&#039;: \\&quot;relative\\&quot;, &#039;opacity&#039;: 60}, {&#039;overlay&#039;: {&#039;font_family&#039;: \\&quot;Arial\\&quot;, &#039;font_size&#039;: 150, &#039;font_weight&#039;: \\&quot;bold\\&quot;, &#039;text&#039;: \\&quot;Cloudinary\\&quot;}, &#039;color&#039;: \\&quot;white\\&quot;} ])&quot;,&quot;codeSnippet&quot;:&quot;CloudinaryImage(\\&quot;lupine.jpg\\&quot;).image(transformation=[\\n  {&#039;overlay&#039;: \\&quot;black_bar\\&quot;, &#039;width&#039;: \\&quot;1.0\\&quot;, &#039;height&#039;: \\&quot;0.1\\&quot;, &#039;flags&#039;: \\&quot;relative\\&quot;, &#039;opacity&#039;: 60},\\n  {&#039;overlay&#039;: {&#039;font_family&#039;: \\&quot;Arial\\&quot;, &#039;font_size&#039;: 150, &#039;font_weight&#039;: \\&quot;bold\\&quot;, &#039;text&#039;: \\&quot;Cloudinary\\&quot;}, &#039;color&#039;: \\&quot;white\\&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;lupine.jpg&#039;))\\n\\t-&gt;overlay(Overlay::source(\\n\\tSource::image(\\&quot;black_bar\\&quot;)\\n\\t-&gt;transformation((new Transformation())\\n\\t-&gt;resize(Resize::scale()-&gt;width(1.0)\\n-&gt;height(0.1)\\n\\t-&gt;relative()\\n\\t)\\n\\t-&gt;adjust(Adjust::opacity(60)))\\n\\t))\\n\\t-&gt;overlay(Overlay::source(\\n\\tSource::text(\\&quot;Cloudinary\\&quot;,(new TextStyle(\\&quot;Arial\\&quot;,150))\\n\\t-&gt;fontWeight(\\n\\tFontWeight::bold())\\n\\t)\\n\\t-&gt;textColor(Color::WHITE)\\n\\t));&quot;,&quot;codeSnippet&quot;:&quot;(new ImageTag(&#039;lupine.jpg&#039;))\\n\\t-&gt;overlay(Overlay::source(\\n\\tSource::image(\\&quot;black_bar\\&quot;)\\n\\t-&gt;transformation((new Transformation())\\n\\t-&gt;resize(Resize::scale()-&gt;width(1.0)\\n-&gt;height(0.1)\\n\\t-&gt;relative()\\n\\t)\\n\\t-&gt;adjust(Adjust::opacity(60)))\\n\\t))\\n\\t-&gt;overlay(Overlay::source(\\n\\tSource::text(\\&quot;Cloudinary\\&quot;,(new TextStyle(\\&quot;Arial\\&quot;,150))\\n\\t-&gt;fontWeight(\\n\\tFontWeight::bold())\\n\\t)\\n\\t-&gt;textColor(Color::WHITE)\\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;lupine.jpg\\&quot;, array(\\&quot;transformation\\&quot;=&gt;array( array(\\&quot;overlay\\&quot;=&gt;\\&quot;black_bar\\&quot;, \\&quot;width\\&quot;=&gt;\\&quot;1.0\\&quot;, \\&quot;height\\&quot;=&gt;\\&quot;0.1\\&quot;, \\&quot;flags\\&quot;=&gt;\\&quot;relative\\&quot;, \\&quot;opacity\\&quot;=&gt;60), array(\\&quot;overlay\\&quot;=&gt;array(\\&quot;font_family\\&quot;=&gt;\\&quot;Arial\\&quot;, \\&quot;font_size\\&quot;=&gt;150, \\&quot;font_weight\\&quot;=&gt;\\&quot;bold\\&quot;, \\&quot;text\\&quot;=&gt;\\&quot;Cloudinary\\&quot;), \\&quot;color\\&quot;=&gt;\\&quot;white\\&quot;) )))&quot;,&quot;codeSnippet&quot;:&quot;cl_image_tag(\\&quot;lupine.jpg\\&quot;, array(\\&quot;transformation\\&quot;=&gt;array(\\n  array(\\&quot;overlay\\&quot;=&gt;\\&quot;black_bar\\&quot;, \\&quot;width\\&quot;=&gt;\\&quot;1.0\\&quot;, \\&quot;height\\&quot;=&gt;\\&quot;0.1\\&quot;, \\&quot;flags\\&quot;=&gt;\\&quot;relative\\&quot;, \\&quot;opacity\\&quot;=&gt;60),\\n  array(\\&quot;overlay\\&quot;=&gt;array(\\&quot;font_family\\&quot;=&gt;\\&quot;Arial\\&quot;, \\&quot;font_size\\&quot;=&gt;150, \\&quot;font_weight\\&quot;=&gt;\\&quot;bold\\&quot;, \\&quot;text\\&quot;=&gt;\\&quot;Cloudinary\\&quot;), \\&quot;color\\&quot;=&gt;\\&quot;white\\&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().overlay(new Layer().publicId(\\&quot;black_bar\\&quot;)).width(1.0).height(0.1).flags(\\&quot;relative\\&quot;).opacity(60).chain() .overlay(new TextLayer().fontFamily(\\&quot;Arial\\&quot;).fontSize(150).fontWeight(\\&quot;bold\\&quot;).text(\\&quot;Cloudinary\\&quot;)).color(\\&quot;white\\&quot;)).imageTag(\\&quot;lupine.jpg\\&quot;);&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.url().transformation(new Transformation()\\n  .overlay(new Layer().publicId(\\&quot;black_bar\\&quot;)).width(1.0).height(0.1).flags(\\&quot;relative\\&quot;).opacity(60).chain()\\n  .overlay(new TextLayer().fontFamily(\\&quot;Arial\\&quot;).fontSize(150).fontWeight(\\&quot;bold\\&quot;).text(\\&quot;Cloudinary\\&quot;)).color(\\&quot;white\\&quot;)).imageTag(\\&quot;lupine.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;lupine.jpg\\&quot;, transformation: [ {overlay: \\&quot;black_bar\\&quot;, width: 1.0, height: 0.1, flags: \\&quot;relative\\&quot;, opacity: 60}, {overlay: {font_family: \\&quot;Arial\\&quot;, font_size: 150, font_weight: \\&quot;bold\\&quot;, text: \\&quot;Cloudinary\\&quot;}, color: \\&quot;white\\&quot;} ])&quot;,&quot;codeSnippet&quot;:&quot;cl_image_tag(\\&quot;lupine.jpg\\&quot;, transformation: [\\n  {overlay: \\&quot;black_bar\\&quot;, width: 1.0, height: 0.1, flags: \\&quot;relative\\&quot;, opacity: 60},\\n  {overlay: {font_family: \\&quot;Arial\\&quot;, font_size: 150, font_weight: \\&quot;bold\\&quot;, text: \\&quot;Cloudinary\\&quot;}, color: \\&quot;white\\&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().Overlay(new Layer().PublicId(\\&quot;black_bar\\&quot;)).Width(1.0).Height(0.1).Flags(\\&quot;relative\\&quot;).Opacity(60).Chain() .Overlay(new TextLayer().FontFamily(\\&quot;Arial\\&quot;).FontSize(150).FontWeight(\\&quot;bold\\&quot;).Text(\\&quot;Cloudinary\\&quot;)).Color(\\&quot;white\\&quot;)).BuildImageTag(\\&quot;lupine.jpg\\&quot;)&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.Api.UrlImgUp.Transform(new Transformation()\\n  .Overlay(new Layer().PublicId(\\&quot;black_bar\\&quot;)).Width(1.0).Height(0.1).Flags(\\&quot;relative\\&quot;).Opacity(60).Chain()\\n  .Overlay(new TextLayer().FontFamily(\\&quot;Arial\\&quot;).FontSize(150).FontWeight(\\&quot;bold\\&quot;).Text(\\&quot;Cloudinary\\&quot;)).Color(\\&quot;white\\&quot;)).BuildImageTag(\\&quot;lupine.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;lupine.jpg&#039;).transformation(Transformation()\\n\\t.addTransformation(\\&quot;l_black_bar,w_1.0,h_0.1,fl_relative,o_60\\\/l_text:Arial_150_bold:Cloudinary,co_white\\&quot;));&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image(&#039;lupine.jpg&#039;).transformation(Transformation()\\n\\t.addTransformation(\\&quot;l_black_bar,w_1.0,h_0.1,fl_relative,o_60\\\/l_text:Arial_150_bold:Cloudinary,co_white\\&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().setOverlay(\\&quot;black_bar\\&quot;).setWidth(1.0).setHeight(0.1).setFlags(\\&quot;relative\\&quot;).setOpacity(60).chain() .setOverlay(\\&quot;text:Arial_150_bold:Cloudinary\\&quot;).setColor(\\&quot;white\\&quot;)).generate(\\&quot;lupine.jpg\\&quot;)!, cloudinary: cloudinary)&quot;,&quot;codeSnippet&quot;:&quot;imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation()\\n  .setOverlay(\\&quot;black_bar\\&quot;).setWidth(1.0).setHeight(0.1).setFlags(\\&quot;relative\\&quot;).setOpacity(60).chain()\\n  .setOverlay(\\&quot;text:Arial_150_bold:Cloudinary\\&quot;).setColor(\\&quot;white\\&quot;)).generate(\\&quot;lupine.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().overlay(new Layer().publicId(\\&quot;black_bar\\&quot;)).width(1.0).height(0.1).flags(\\&quot;relative\\&quot;).opacity(60).chain() .overlay(new TextLayer().fontFamily(\\&quot;Arial\\&quot;).fontSize(150).fontWeight(\\&quot;bold\\&quot;).text(\\&quot;Cloudinary\\&quot;)).color(\\&quot;white\\&quot;)).generate(\\&quot;lupine.jpg\\&quot;);&quot;,&quot;codeSnippet&quot;:&quot;MediaManager.get().url().transformation(new Transformation()\\n  .overlay(new Layer().publicId(\\&quot;black_bar\\&quot;)).width(1.0).height(0.1).flags(\\&quot;relative\\&quot;).opacity(60).chain()\\n  .overlay(new TextLayer().fontFamily(\\&quot;Arial\\&quot;).fontSize(150).fontWeight(\\&quot;bold\\&quot;).text(\\&quot;Cloudinary\\&quot;)).color(\\&quot;white\\&quot;)).generate(\\&quot;lupine.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;lupine.jpg&#039;).transformation(Transformation()\\n\\t.addTransformation(\\&quot;l_black_bar,w_1.0,h_0.1,fl_relative,o_60\\\/l_text:Arial_150_bold:Cloudinary,co_white\\&quot;));&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image(&#039;lupine.jpg&#039;).transformation(Transformation()\\n\\t.addTransformation(\\&quot;l_black_bar,w_1.0,h_0.1,fl_relative,o_60\\\/l_text:Arial_150_bold:Cloudinary,co_white\\&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;lupine.jpg\\&quot;)\\n\\t overlay(Overlay.source(\\n\\tSource.image(\\&quot;black_bar\\&quot;) {\\n\\t transformation(Transformation {\\n\\t resize(Resize.scale() { width(1.0F)\\n height(0.1F)\\n\\t relative()\\n\\t })\\n\\t adjust(Adjust.opacity(60)) })\\n\\t }))\\n\\t overlay(Overlay.source(\\n\\tSource.text(\\&quot;Cloudinary\\&quot;,TextStyle(\\&quot;Arial\\&quot;,150) {\\n\\t fontWeight(\\n\\tFontWeight.bold())\\n\\t }) {\\n\\t textColor(Color.WHITE)\\n\\t })) \\n}.generate()&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image {\\n\\tpublicId(\\&quot;lupine.jpg\\&quot;)\\n\\t overlay(Overlay.source(\\n\\tSource.image(\\&quot;black_bar\\&quot;) {\\n\\t transformation(Transformation {\\n\\t resize(Resize.scale() { width(1.0F)\\n height(0.1F)\\n\\t relative()\\n\\t })\\n\\t adjust(Adjust.opacity(60)) })\\n\\t }))\\n\\t overlay(Overlay.source(\\n\\tSource.text(\\&quot;Cloudinary\\&quot;,TextStyle(\\&quot;Arial\\&quot;,150) {\\n\\t fontWeight(\\n\\tFontWeight.bold())\\n\\t }) {\\n\\t textColor(Color.WHITE)\\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;lupine.jpg\\&quot;, {transformation: [ {overlay: new cloudinary.Layer().publicId(\\&quot;black_bar\\&quot;), width: \\&quot;1.0\\&quot;, height: \\&quot;0.1\\&quot;, flags: \\&quot;relative\\&quot;, opacity: 60}, {overlay: new cloudinary.TextLayer().fontFamily(\\&quot;Arial\\&quot;).fontSize(150).fontWeight(\\&quot;bold\\&quot;).text(\\&quot;Cloudinary\\&quot;), color: \\&quot;white\\&quot;} ]})&quot;,&quot;codeSnippet&quot;:&quot;$.cloudinary.image(\\&quot;lupine.jpg\\&quot;, {transformation: [\\n  {overlay: new cloudinary.Layer().publicId(\\&quot;black_bar\\&quot;), width: \\&quot;1.0\\&quot;, height: \\&quot;0.1\\&quot;, flags: \\&quot;relative\\&quot;, opacity: 60},\\n  {overlay: new cloudinary.TextLayer().fontFamily(\\&quot;Arial\\&quot;).fontSize(150).fontWeight(\\&quot;bold\\&quot;).text(\\&quot;Cloudinary\\&quot;), color: \\&quot;white\\&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;lupine.jpg\\&quot;)\\n  .overlay(\\n    source(\\n      image(\\&quot;black_bar\\&quot;).transformation(\\n        new Transformation()\\n          .resize(scale().width(\\&quot;1.0\\&quot;).height(0.1).relative())\\n          .adjust(opacity(60))\\n      )\\n    )\\n  )\\n  .overlay(\\n    source(\\n      text(\\n        \\&quot;Cloudinary\\&quot;,\\n        new TextStyle(\\&quot;Arial\\&quot;, 150).fontWeight(\\&quot;bold\\&quot;)\\n      ).textColor(\\&quot;white\\&quot;)\\n    )\\n  );&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;lupine.jpg\\&quot;)\\n  .overlay(\\n    source(\\n      image(\\&quot;black_bar\\&quot;).transformation(\\n        new Transformation()\\n          .resize(scale().width(\\&quot;1.0\\&quot;).height(0.1).relative())\\n          .adjust(opacity(60))\\n      )\\n    )\\n  )\\n  .overlay(\\n    source(\\n      text(\\n        \\&quot;Cloudinary\\&quot;,\\n        new TextStyle(\\&quot;Arial\\&quot;, 150).fontWeight(\\&quot;bold\\&quot;)\\n      ).textColor(\\&quot;white\\&quot;)\\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_black_bar,w_1.0,h_0.1,fl_relative,o_60\\\/l_text:Arial_150_bold:Cloudinary,co_white\\\/lupine.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;overlay&quot;:&quot;black_bar&quot;,&quot;width&quot;:&quot;1.0&quot;,&quot;height&quot;:&quot;0.1&quot;,&quot;flags&quot;:&quot;relative&quot;,&quot;opacity&quot;:&quot;60&quot;},{&quot;overlay&quot;:&quot;text:Arial_150_bold:Cloudinary&quot;,&quot;color&quot;:&quot;white&quot;}],&quot;transformation_string&quot;:&quot;l_black_bar,w_1.0,h_0.1,fl_relative,o_60\\\/l_text:Arial_150_bold:Cloudinary,co_white&quot;,&quot;url_suffix&quot;:&quot;&quot;,&quot;version&quot;:&quot;&quot;,&quot;secure&quot;:true,&quot;public_id&quot;:&quot;lupine.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\/l_black_bar,w_1.0,h_0.1,fl_relative,o_60\/l_text:Arial_150_bold:Cloudinary,co_white\/lupine.jpg\" target=\"_blank\"><img decoding=\"async\" src=\"https:\/\/res.cloudinary.com\/demo\/image\/upload\/l_black_bar,w_1.0,h_0.1,fl_relative,o_60\/l_text:Arial_150_bold:Cloudinary,co_white\/lupine.jpg\" alt=\"responsive overlay\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"1067\" height=\"1600\"\/><\/a><\/p>\n<h3 id=\"stacked-overlays\">Stacked image overlays<\/h3> \n<p>To add an image overlay with opacity (e.g., one called <code>sample_watermark<\/code>) to another one (e.g., one called <code>brown_sheep<\/code>) with Cloudinary\u2019s overlay command (<code>1<\/code>), code the URL this way:<\/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;brown_sheep.jpg\\&quot;, {overlay: \\&quot;cloudinary_icon\\&quot;, opacity: 50, width: 300, effect: \\&quot;brightness:200\\&quot;})&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image(\\&quot;brown_sheep.jpg\\&quot;, {overlay: \\&quot;cloudinary_icon\\&quot;, opacity: 50, width: 300, effect: \\&quot;brightness:200\\&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;brown_sheep.jpg\\&quot;).overlay(\\n  source(\\n    image(\\&quot;cloudinary_icon\\&quot;).transformation(\\n      new Transformation()\\n        .resize(scale().width(300))\\n        .adjust(opacity(50))\\n        .adjust(brightness().level(200))\\n    )\\n  )\\n);&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;brown_sheep.jpg\\&quot;).overlay(\\n  source(\\n    image(\\&quot;cloudinary_icon\\&quot;).transformation(\\n      new Transformation()\\n        .resize(scale().width(300))\\n        .adjust(opacity(50))\\n        .adjust(brightness().level(200))\\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;brown_sheep.jpg\\&quot; &gt; &lt;Transformation overlay=\\&quot;cloudinary_icon\\&quot; opacity=\\&quot;50\\&quot; width=\\&quot;300\\&quot; effect=\\&quot;brightness:200\\&quot; \\\/&gt; &lt;\\\/Image&gt;&quot;,&quot;codeSnippet&quot;:&quot;&lt;Image publicId=\\&quot;brown_sheep.jpg\\&quot; &gt;\\n\\t&lt;Transformation overlay=\\&quot;cloudinary_icon\\&quot; opacity=\\&quot;50\\&quot; width=\\&quot;300\\&quot; effect=\\&quot;brightness:200\\&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;brown_sheep.jpg\\&quot;).overlay(\\n  source(\\n    image(\\&quot;cloudinary_icon\\&quot;).transformation(\\n      new Transformation()\\n        .resize(scale().width(300))\\n        .adjust(opacity(50))\\n        .adjust(brightness().level(200))\\n    )\\n  )\\n);&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;brown_sheep.jpg\\&quot;).overlay(\\n  source(\\n    image(\\&quot;cloudinary_icon\\&quot;).transformation(\\n      new Transformation()\\n        .resize(scale().width(300))\\n        .adjust(opacity(50))\\n        .adjust(brightness().level(200))\\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;brown_sheep.jpg\\&quot; &gt; &lt;cld-transformation :overlay=\\&quot;cloudinary_icon\\&quot; opacity=\\&quot;50\\&quot; width=\\&quot;300\\&quot; effect=\\&quot;brightness:200\\&quot; \\\/&gt; &lt;\\\/cld-image&gt;&quot;,&quot;codeSnippet&quot;:&quot;&lt;cld-image public-id=\\&quot;brown_sheep.jpg\\&quot; &gt;\\n\\t&lt;cld-transformation :overlay=\\&quot;cloudinary_icon\\&quot; opacity=\\&quot;50\\&quot; width=\\&quot;300\\&quot; effect=\\&quot;brightness:200\\&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;brown_sheep.jpg\\&quot;).overlay(\\n  source(\\n    image(\\&quot;cloudinary_icon\\&quot;).transformation(\\n      new Transformation()\\n        .resize(scale().width(300))\\n        .adjust(opacity(50))\\n        .adjust(brightness().level(200))\\n    )\\n  )\\n);&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;brown_sheep.jpg\\&quot;).overlay(\\n  source(\\n    image(\\&quot;cloudinary_icon\\&quot;).transformation(\\n      new Transformation()\\n        .resize(scale().width(300))\\n        .adjust(opacity(50))\\n        .adjust(brightness().level(200))\\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;brown_sheep.jpg\\&quot; &gt; &lt;cl-transformation overlay=\\&quot;cloudinary_icon\\&quot; opacity=\\&quot;50\\&quot; width=\\&quot;300\\&quot; effect=\\&quot;brightness:200\\&quot;&gt; &lt;\\\/cl-transformation&gt; &lt;\\\/cl-image&gt;&quot;,&quot;codeSnippet&quot;:&quot;&lt;cl-image public-id=\\&quot;brown_sheep.jpg\\&quot; &gt;\\n\\t&lt;cl-transformation overlay=\\&quot;cloudinary_icon\\&quot; opacity=\\&quot;50\\&quot; width=\\&quot;300\\&quot; effect=\\&quot;brightness:200\\&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;brown_sheep.jpg\\&quot;).overlay(\\n  source(\\n    image(\\&quot;cloudinary_icon\\&quot;).transformation(\\n      new Transformation()\\n        .resize(scale().width(300))\\n        .adjust(opacity(50))\\n        .adjust(brightness().level(200))\\n    )\\n  )\\n);&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;brown_sheep.jpg\\&quot;).overlay(\\n  source(\\n    image(\\&quot;cloudinary_icon\\&quot;).transformation(\\n      new Transformation()\\n        .resize(scale().width(300))\\n        .adjust(opacity(50))\\n        .adjust(brightness().level(200))\\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;brown_sheep.jpg&#039;, {overlay: new cloudinary.Layer().publicId(\\&quot;cloudinary_icon\\&quot;), opacity: 50, width: 300, effect: \\&quot;brightness:200\\&quot;}).toHtml();&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.imageTag(&#039;brown_sheep.jpg&#039;, {overlay: new cloudinary.Layer().publicId(\\&quot;cloudinary_icon\\&quot;), opacity: 50, width: 300, effect: \\&quot;brightness:200\\&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;brown_sheep.jpg\\&quot;).image(overlay=\\&quot;cloudinary_icon\\&quot;, opacity=50, width=300, effect=\\&quot;brightness:200\\&quot;)&quot;,&quot;codeSnippet&quot;:&quot;CloudinaryImage(\\&quot;brown_sheep.jpg\\&quot;).image(overlay=\\&quot;cloudinary_icon\\&quot;, opacity=50, width=300, effect=\\&quot;brightness:200\\&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;brown_sheep.jpg&#039;))\\n\\t-&gt;overlay(Overlay::source(\\n\\tSource::image(\\&quot;cloudinary_icon\\&quot;)\\n\\t-&gt;transformation((new Transformation())\\n\\t-&gt;resize(Resize::scale()-&gt;width(300))\\n\\t-&gt;adjust(Adjust::opacity(50))\\n\\t-&gt;adjust(Adjust::brightness()-&gt;level(200)))\\n\\t));&quot;,&quot;codeSnippet&quot;:&quot;(new ImageTag(&#039;brown_sheep.jpg&#039;))\\n\\t-&gt;overlay(Overlay::source(\\n\\tSource::image(\\&quot;cloudinary_icon\\&quot;)\\n\\t-&gt;transformation((new Transformation())\\n\\t-&gt;resize(Resize::scale()-&gt;width(300))\\n\\t-&gt;adjust(Adjust::opacity(50))\\n\\t-&gt;adjust(Adjust::brightness()-&gt;level(200)))\\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;brown_sheep.jpg\\&quot;, array(\\&quot;overlay\\&quot;=&gt;\\&quot;cloudinary_icon\\&quot;, \\&quot;opacity\\&quot;=&gt;50, \\&quot;width\\&quot;=&gt;300, \\&quot;effect\\&quot;=&gt;\\&quot;brightness:200\\&quot;))&quot;,&quot;codeSnippet&quot;:&quot;cl_image_tag(\\&quot;brown_sheep.jpg\\&quot;, array(\\&quot;overlay\\&quot;=&gt;\\&quot;cloudinary_icon\\&quot;, \\&quot;opacity\\&quot;=&gt;50, \\&quot;width\\&quot;=&gt;300, \\&quot;effect\\&quot;=&gt;\\&quot;brightness:200\\&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;cloudinary_icon\\&quot;)).opacity(50).width(300).effect(\\&quot;brightness:200\\&quot;)).imageTag(\\&quot;brown_sheep.jpg\\&quot;);&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.url().transformation(new Transformation().overlay(new Layer().publicId(\\&quot;cloudinary_icon\\&quot;)).opacity(50).width(300).effect(\\&quot;brightness:200\\&quot;)).imageTag(\\&quot;brown_sheep.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;brown_sheep.jpg\\&quot;, overlay: \\&quot;cloudinary_icon\\&quot;, opacity: 50, width: 300, effect: \\&quot;brightness:200\\&quot;)&quot;,&quot;codeSnippet&quot;:&quot;cl_image_tag(\\&quot;brown_sheep.jpg\\&quot;, overlay: \\&quot;cloudinary_icon\\&quot;, opacity: 50, width: 300, effect: \\&quot;brightness:200\\&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().Overlay(new Layer().PublicId(\\&quot;cloudinary_icon\\&quot;)).Opacity(50).Width(300).Effect(\\&quot;brightness:200\\&quot;)).BuildImageTag(\\&quot;brown_sheep.jpg\\&quot;)&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.Api.UrlImgUp.Transform(new Transformation().Overlay(new Layer().PublicId(\\&quot;cloudinary_icon\\&quot;)).Opacity(50).Width(300).Effect(\\&quot;brightness:200\\&quot;)).BuildImageTag(\\&quot;brown_sheep.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;brown_sheep.jpg&#039;).transformation(Transformation()\\n\\t.overlay(Overlay.source(\\n\\tSource.image(\\&quot;cloudinary_icon\\&quot;)\\n\\t.transformation(new Transformation()\\n\\t.resize(Resize.scale().width(300))\\n\\t.adjust(Adjust.opacity(50))\\n\\t.adjust(Adjust.brightness().level(200)))\\n\\t)));&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image(&#039;brown_sheep.jpg&#039;).transformation(Transformation()\\n\\t.overlay(Overlay.source(\\n\\tSource.image(\\&quot;cloudinary_icon\\&quot;)\\n\\t.transformation(new Transformation()\\n\\t.resize(Resize.scale().width(300))\\n\\t.adjust(Adjust.opacity(50))\\n\\t.adjust(Adjust.brightness().level(200)))\\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;cloudinary_icon\\&quot;).setOpacity(50).setWidth(300).setEffect(\\&quot;brightness:200\\&quot;)).generate(\\&quot;brown_sheep.jpg\\&quot;)!, cloudinary: cloudinary)&quot;,&quot;codeSnippet&quot;:&quot;imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setOverlay(\\&quot;cloudinary_icon\\&quot;).setOpacity(50).setWidth(300).setEffect(\\&quot;brightness:200\\&quot;)).generate(\\&quot;brown_sheep.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().overlay(new Layer().publicId(\\&quot;cloudinary_icon\\&quot;)).opacity(50).width(300).effect(\\&quot;brightness:200\\&quot;)).generate(\\&quot;brown_sheep.jpg\\&quot;);&quot;,&quot;codeSnippet&quot;:&quot;MediaManager.get().url().transformation(new Transformation().overlay(new Layer().publicId(\\&quot;cloudinary_icon\\&quot;)).opacity(50).width(300).effect(\\&quot;brightness:200\\&quot;)).generate(\\&quot;brown_sheep.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;brown_sheep.jpg&#039;).transformation(Transformation()\\n\\t.overlay(Overlay.source(\\n\\tSource.image(\\&quot;cloudinary_icon\\&quot;)\\n\\t.transformation(new Transformation()\\n\\t.resize(Resize.scale().width(300))\\n\\t.adjust(Adjust.opacity(50))\\n\\t.adjust(Adjust.brightness().level(200)))\\n\\t)));&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image(&#039;brown_sheep.jpg&#039;).transformation(Transformation()\\n\\t.overlay(Overlay.source(\\n\\tSource.image(\\&quot;cloudinary_icon\\&quot;)\\n\\t.transformation(new Transformation()\\n\\t.resize(Resize.scale().width(300))\\n\\t.adjust(Adjust.opacity(50))\\n\\t.adjust(Adjust.brightness().level(200)))\\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;brown_sheep.jpg\\&quot;)\\n\\t overlay(Overlay.source(\\n\\tSource.image(\\&quot;cloudinary_icon\\&quot;) {\\n\\t transformation(Transformation {\\n\\t resize(Resize.scale() { width(300) })\\n\\t adjust(Adjust.opacity(50))\\n\\t adjust(Adjust.brightness() { level(200) }) })\\n\\t })) \\n}.generate()&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image {\\n\\tpublicId(\\&quot;brown_sheep.jpg\\&quot;)\\n\\t overlay(Overlay.source(\\n\\tSource.image(\\&quot;cloudinary_icon\\&quot;) {\\n\\t transformation(Transformation {\\n\\t resize(Resize.scale() { width(300) })\\n\\t adjust(Adjust.opacity(50))\\n\\t adjust(Adjust.brightness() { level(200) }) })\\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;brown_sheep.jpg\\&quot;, {overlay: new cloudinary.Layer().publicId(\\&quot;cloudinary_icon\\&quot;), opacity: 50, width: 300, effect: \\&quot;brightness:200\\&quot;})&quot;,&quot;codeSnippet&quot;:&quot;$.cloudinary.image(\\&quot;brown_sheep.jpg\\&quot;, {overlay: new cloudinary.Layer().publicId(\\&quot;cloudinary_icon\\&quot;), opacity: 50, width: 300, effect: \\&quot;brightness:200\\&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;brown_sheep.jpg\\&quot;).overlay(\\n  source(\\n    image(\\&quot;cloudinary_icon\\&quot;).transformation(\\n      new Transformation()\\n        .resize(scale().width(300))\\n        .adjust(opacity(50))\\n        .adjust(brightness().level(200))\\n    )\\n  )\\n);&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;brown_sheep.jpg\\&quot;).overlay(\\n  source(\\n    image(\\&quot;cloudinary_icon\\&quot;).transformation(\\n      new Transformation()\\n        .resize(scale().width(300))\\n        .adjust(opacity(50))\\n        .adjust(brightness().level(200))\\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_cloudinary_icon,o_50,w_300,e_brightness:200\\\/brown_sheep.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;overlay&quot;:&quot;cloudinary_icon&quot;,&quot;opacity&quot;:&quot;50&quot;,&quot;width&quot;:&quot;300&quot;,&quot;effect&quot;:&quot;brightness:200&quot;}],&quot;transformation_string&quot;:&quot;l_cloudinary_icon,o_50,w_300,e_brightness:200&quot;,&quot;url_suffix&quot;:&quot;&quot;,&quot;version&quot;:&quot;&quot;,&quot;secure&quot;:true,&quot;public_id&quot;:&quot;brown_sheep.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\/l_cloudinary_icon,o_50,w_300,e_brightness:200\/brown_sheep.jpg\" target=\"_blank\"><img decoding=\"async\" src=\"https:\/\/res.cloudinary.com\/demo\/image\/upload\/l_cloudinary_icon,o_50,w_300,e_brightness:200\/brown_sheep.jpg\" alt=\"Stacked image overlay\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"1024\" height=\"683\"\/><\/a><\/p>\n<h3 id=\"automated-overlays\">Image overlay with automated positioning and face detection<\/h3> \n<p>To shrink a watermark and position it arbitrarily with the \u2018gravity\u2019, \u2018x\u2019, and \u2018y\u2019 transformation commands, see the example URL below, which adds an 80-pixel-wide watermark five pixels from the bottom-right corner of an image that is resized to fill a 300&#215;200-pixel rectangle based on face detection:<\/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;face_center.jpg\\&quot;, {transformation: [ {width: 300, height: 200, gravity: \\&quot;face\\&quot;, crop: \\&quot;fill\\&quot;}, {width: 80, gravity: \\&quot;south_east\\&quot;, x: 5, y: 5, overlay: \\&quot;cloudinary_icon\\&quot;, opacity: 50, effect: \\&quot;brightness:200\\&quot;} ]})&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image(\\&quot;face_center.jpg\\&quot;, {transformation: [\\n  {width: 300, height: 200, gravity: \\&quot;face\\&quot;, crop: \\&quot;fill\\&quot;},\\n  {width: 80, gravity: \\&quot;south_east\\&quot;, x: 5, y: 5, overlay: \\&quot;cloudinary_icon\\&quot;, opacity: 50, effect: \\&quot;brightness:200\\&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;face_center.jpg\\&quot;)\\n  .resize(\\n    fill()\\n      .width(300)\\n      .height(200)\\n      .gravity(focusOn(face()))\\n  )\\n  .overlay(\\n    source(\\n      image(\\&quot;cloudinary_icon\\&quot;).transformation(\\n        new Transformation()\\n          .resize(scale().width(80))\\n          .adjust(opacity(50))\\n          .adjust(brightness().level(200))\\n      )\\n    ).position(\\n      new Position()\\n        .gravity(compass(\\&quot;south_east\\&quot;))\\n        .offsetX(5)\\n        .offsetY(5)\\n    )\\n  );&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;face_center.jpg\\&quot;)\\n  .resize(\\n    fill()\\n      .width(300)\\n      .height(200)\\n      .gravity(focusOn(face()))\\n  )\\n  .overlay(\\n    source(\\n      image(\\&quot;cloudinary_icon\\&quot;).transformation(\\n        new Transformation()\\n          .resize(scale().width(80))\\n          .adjust(opacity(50))\\n          .adjust(brightness().level(200))\\n      )\\n    ).position(\\n      new Position()\\n        .gravity(compass(\\&quot;south_east\\&quot;))\\n        .offsetX(5)\\n        .offsetY(5)\\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;face_center.jpg\\&quot; &gt; &lt;Transformation width=\\&quot;300\\&quot; height=\\&quot;200\\&quot; gravity=\\&quot;face\\&quot; crop=\\&quot;fill\\&quot; \\\/&gt; &lt;Transformation width=\\&quot;80\\&quot; gravity=\\&quot;south_east\\&quot; x=\\&quot;5\\&quot; y=\\&quot;5\\&quot; overlay=\\&quot;cloudinary_icon\\&quot; opacity=\\&quot;50\\&quot; effect=\\&quot;brightness:200\\&quot; \\\/&gt; &lt;\\\/Image&gt;&quot;,&quot;codeSnippet&quot;:&quot;&lt;Image publicId=\\&quot;face_center.jpg\\&quot; &gt;\\n\\t&lt;Transformation width=\\&quot;300\\&quot; height=\\&quot;200\\&quot; gravity=\\&quot;face\\&quot; crop=\\&quot;fill\\&quot; \\\/&gt;\\n\\t&lt;Transformation width=\\&quot;80\\&quot; gravity=\\&quot;south_east\\&quot; x=\\&quot;5\\&quot; y=\\&quot;5\\&quot; overlay=\\&quot;cloudinary_icon\\&quot; opacity=\\&quot;50\\&quot; effect=\\&quot;brightness:200\\&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;face_center.jpg\\&quot;)\\n  .resize(\\n    fill()\\n      .width(300)\\n      .height(200)\\n      .gravity(focusOn(face()))\\n  )\\n  .overlay(\\n    source(\\n      image(\\&quot;cloudinary_icon\\&quot;).transformation(\\n        new Transformation()\\n          .resize(scale().width(80))\\n          .adjust(opacity(50))\\n          .adjust(brightness().level(200))\\n      )\\n    ).position(\\n      new Position()\\n        .gravity(compass(\\&quot;south_east\\&quot;))\\n        .offsetX(5)\\n        .offsetY(5)\\n    )\\n  );&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;face_center.jpg\\&quot;)\\n  .resize(\\n    fill()\\n      .width(300)\\n      .height(200)\\n      .gravity(focusOn(face()))\\n  )\\n  .overlay(\\n    source(\\n      image(\\&quot;cloudinary_icon\\&quot;).transformation(\\n        new Transformation()\\n          .resize(scale().width(80))\\n          .adjust(opacity(50))\\n          .adjust(brightness().level(200))\\n      )\\n    ).position(\\n      new Position()\\n        .gravity(compass(\\&quot;south_east\\&quot;))\\n        .offsetX(5)\\n        .offsetY(5)\\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;face_center.jpg\\&quot; &gt; &lt;cld-transformation width=\\&quot;300\\&quot; height=\\&quot;200\\&quot; gravity=\\&quot;face\\&quot; crop=\\&quot;fill\\&quot; \\\/&gt; &lt;cld-transformation width=\\&quot;80\\&quot; gravity=\\&quot;south_east\\&quot; x=\\&quot;5\\&quot; y=\\&quot;5\\&quot; :overlay=\\&quot;cloudinary_icon\\&quot; opacity=\\&quot;50\\&quot; effect=\\&quot;brightness:200\\&quot; \\\/&gt; &lt;\\\/cld-image&gt;&quot;,&quot;codeSnippet&quot;:&quot;&lt;cld-image public-id=\\&quot;face_center.jpg\\&quot; &gt;\\n\\t&lt;cld-transformation width=\\&quot;300\\&quot; height=\\&quot;200\\&quot; gravity=\\&quot;face\\&quot; crop=\\&quot;fill\\&quot; \\\/&gt;\\n\\t&lt;cld-transformation width=\\&quot;80\\&quot; gravity=\\&quot;south_east\\&quot; x=\\&quot;5\\&quot; y=\\&quot;5\\&quot; :overlay=\\&quot;cloudinary_icon\\&quot; opacity=\\&quot;50\\&quot; effect=\\&quot;brightness:200\\&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;face_center.jpg\\&quot;)\\n  .resize(\\n    fill()\\n      .width(300)\\n      .height(200)\\n      .gravity(focusOn(face()))\\n  )\\n  .overlay(\\n    source(\\n      image(\\&quot;cloudinary_icon\\&quot;).transformation(\\n        new Transformation()\\n          .resize(scale().width(80))\\n          .adjust(opacity(50))\\n          .adjust(brightness().level(200))\\n      )\\n    ).position(\\n      new Position()\\n        .gravity(compass(\\&quot;south_east\\&quot;))\\n        .offsetX(5)\\n        .offsetY(5)\\n    )\\n  );&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;face_center.jpg\\&quot;)\\n  .resize(\\n    fill()\\n      .width(300)\\n      .height(200)\\n      .gravity(focusOn(face()))\\n  )\\n  .overlay(\\n    source(\\n      image(\\&quot;cloudinary_icon\\&quot;).transformation(\\n        new Transformation()\\n          .resize(scale().width(80))\\n          .adjust(opacity(50))\\n          .adjust(brightness().level(200))\\n      )\\n    ).position(\\n      new Position()\\n        .gravity(compass(\\&quot;south_east\\&quot;))\\n        .offsetX(5)\\n        .offsetY(5)\\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;face_center.jpg\\&quot; &gt; &lt;cl-transformation width=\\&quot;300\\&quot; height=\\&quot;200\\&quot; gravity=\\&quot;face\\&quot; crop=\\&quot;fill\\&quot;&gt; &lt;\\\/cl-transformation&gt; &lt;cl-transformation width=\\&quot;80\\&quot; gravity=\\&quot;south_east\\&quot; x=\\&quot;5\\&quot; y=\\&quot;5\\&quot; overlay=\\&quot;cloudinary_icon\\&quot; opacity=\\&quot;50\\&quot; effect=\\&quot;brightness:200\\&quot;&gt; &lt;\\\/cl-transformation&gt; &lt;\\\/cl-image&gt;&quot;,&quot;codeSnippet&quot;:&quot;&lt;cl-image public-id=\\&quot;face_center.jpg\\&quot; &gt;\\n\\t&lt;cl-transformation width=\\&quot;300\\&quot; height=\\&quot;200\\&quot; gravity=\\&quot;face\\&quot; crop=\\&quot;fill\\&quot;&gt;\\n\\t&lt;\\\/cl-transformation&gt;\\n\\t&lt;cl-transformation width=\\&quot;80\\&quot; gravity=\\&quot;south_east\\&quot; x=\\&quot;5\\&quot; y=\\&quot;5\\&quot; overlay=\\&quot;cloudinary_icon\\&quot; opacity=\\&quot;50\\&quot; effect=\\&quot;brightness:200\\&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;face_center.jpg\\&quot;)\\n  .resize(\\n    fill()\\n      .width(300)\\n      .height(200)\\n      .gravity(focusOn(face()))\\n  )\\n  .overlay(\\n    source(\\n      image(\\&quot;cloudinary_icon\\&quot;).transformation(\\n        new Transformation()\\n          .resize(scale().width(80))\\n          .adjust(opacity(50))\\n          .adjust(brightness().level(200))\\n      )\\n    ).position(\\n      new Position()\\n        .gravity(compass(\\&quot;south_east\\&quot;))\\n        .offsetX(5)\\n        .offsetY(5)\\n    )\\n  );&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;face_center.jpg\\&quot;)\\n  .resize(\\n    fill()\\n      .width(300)\\n      .height(200)\\n      .gravity(focusOn(face()))\\n  )\\n  .overlay(\\n    source(\\n      image(\\&quot;cloudinary_icon\\&quot;).transformation(\\n        new Transformation()\\n          .resize(scale().width(80))\\n          .adjust(opacity(50))\\n          .adjust(brightness().level(200))\\n      )\\n    ).position(\\n      new Position()\\n        .gravity(compass(\\&quot;south_east\\&quot;))\\n        .offsetX(5)\\n        .offsetY(5)\\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;face_center.jpg&#039;, {transformation: [ {width: 300, height: 200, gravity: \\&quot;face\\&quot;, crop: \\&quot;fill\\&quot;}, {width: 80, gravity: \\&quot;south_east\\&quot;, x: 5, y: 5, overlay: new cloudinary.Layer().publicId(\\&quot;cloudinary_icon\\&quot;), opacity: 50, effect: \\&quot;brightness:200\\&quot;} ]}).toHtml();&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.imageTag(&#039;face_center.jpg&#039;, {transformation: [\\n  {width: 300, height: 200, gravity: \\&quot;face\\&quot;, crop: \\&quot;fill\\&quot;},\\n  {width: 80, gravity: \\&quot;south_east\\&quot;, x: 5, y: 5, overlay: new cloudinary.Layer().publicId(\\&quot;cloudinary_icon\\&quot;), opacity: 50, effect: \\&quot;brightness:200\\&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;face_center.jpg\\&quot;).image(transformation=[ {&#039;width&#039;: 300, &#039;height&#039;: 200, &#039;gravity&#039;: \\&quot;face\\&quot;, &#039;crop&#039;: \\&quot;fill\\&quot;}, {&#039;width&#039;: 80, &#039;gravity&#039;: \\&quot;south_east\\&quot;, &#039;x&#039;: 5, &#039;y&#039;: 5, &#039;overlay&#039;: \\&quot;cloudinary_icon\\&quot;, &#039;opacity&#039;: 50, &#039;effect&#039;: \\&quot;brightness:200\\&quot;} ])&quot;,&quot;codeSnippet&quot;:&quot;CloudinaryImage(\\&quot;face_center.jpg\\&quot;).image(transformation=[\\n  {&#039;width&#039;: 300, &#039;height&#039;: 200, &#039;gravity&#039;: \\&quot;face\\&quot;, &#039;crop&#039;: \\&quot;fill\\&quot;},\\n  {&#039;width&#039;: 80, &#039;gravity&#039;: \\&quot;south_east\\&quot;, &#039;x&#039;: 5, &#039;y&#039;: 5, &#039;overlay&#039;: \\&quot;cloudinary_icon\\&quot;, &#039;opacity&#039;: 50, &#039;effect&#039;: \\&quot;brightness:200\\&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;face_center.jpg&#039;))\\n\\t-&gt;resize(Resize::fill()-&gt;width(300)\\n-&gt;height(200)\\n\\t-&gt;gravity(\\n\\tGravity::focusOn(\\n\\tFocusOn::face()))\\n\\t)\\n\\t-&gt;overlay(Overlay::source(\\n\\tSource::image(\\&quot;cloudinary_icon\\&quot;)\\n\\t-&gt;transformation((new Transformation())\\n\\t-&gt;resize(Resize::scale()-&gt;width(80))\\n\\t-&gt;adjust(Adjust::opacity(50))\\n\\t-&gt;adjust(Adjust::brightness()-&gt;level(200)))\\n\\t)\\n\\t-&gt;position((new Position())\\n\\t-&gt;gravity(\\n\\tGravity::compass(\\n\\tCompass::southEast()))\\n-&gt;offsetX(5)\\n-&gt;offsetY(5))\\n\\t);&quot;,&quot;codeSnippet&quot;:&quot;(new ImageTag(&#039;face_center.jpg&#039;))\\n\\t-&gt;resize(Resize::fill()-&gt;width(300)\\n-&gt;height(200)\\n\\t-&gt;gravity(\\n\\tGravity::focusOn(\\n\\tFocusOn::face()))\\n\\t)\\n\\t-&gt;overlay(Overlay::source(\\n\\tSource::image(\\&quot;cloudinary_icon\\&quot;)\\n\\t-&gt;transformation((new Transformation())\\n\\t-&gt;resize(Resize::scale()-&gt;width(80))\\n\\t-&gt;adjust(Adjust::opacity(50))\\n\\t-&gt;adjust(Adjust::brightness()-&gt;level(200)))\\n\\t)\\n\\t-&gt;position((new Position())\\n\\t-&gt;gravity(\\n\\tGravity::compass(\\n\\tCompass::southEast()))\\n-&gt;offsetX(5)\\n-&gt;offsetY(5))\\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;face_center.jpg\\&quot;, array(\\&quot;transformation\\&quot;=&gt;array( array(\\&quot;width\\&quot;=&gt;300, \\&quot;height\\&quot;=&gt;200, \\&quot;gravity\\&quot;=&gt;\\&quot;face\\&quot;, \\&quot;crop\\&quot;=&gt;\\&quot;fill\\&quot;), array(\\&quot;width\\&quot;=&gt;80, \\&quot;gravity\\&quot;=&gt;\\&quot;south_east\\&quot;, \\&quot;x\\&quot;=&gt;5, \\&quot;y\\&quot;=&gt;5, \\&quot;overlay\\&quot;=&gt;\\&quot;cloudinary_icon\\&quot;, \\&quot;opacity\\&quot;=&gt;50, \\&quot;effect\\&quot;=&gt;\\&quot;brightness:200\\&quot;) )))&quot;,&quot;codeSnippet&quot;:&quot;cl_image_tag(\\&quot;face_center.jpg\\&quot;, array(\\&quot;transformation\\&quot;=&gt;array(\\n  array(\\&quot;width\\&quot;=&gt;300, \\&quot;height\\&quot;=&gt;200, \\&quot;gravity\\&quot;=&gt;\\&quot;face\\&quot;, \\&quot;crop\\&quot;=&gt;\\&quot;fill\\&quot;),\\n  array(\\&quot;width\\&quot;=&gt;80, \\&quot;gravity\\&quot;=&gt;\\&quot;south_east\\&quot;, \\&quot;x\\&quot;=&gt;5, \\&quot;y\\&quot;=&gt;5, \\&quot;overlay\\&quot;=&gt;\\&quot;cloudinary_icon\\&quot;, \\&quot;opacity\\&quot;=&gt;50, \\&quot;effect\\&quot;=&gt;\\&quot;brightness:200\\&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(300).height(200).gravity(\\&quot;face\\&quot;).crop(\\&quot;fill\\&quot;).chain() .width(80).gravity(\\&quot;south_east\\&quot;).x(5).y(5).overlay(new Layer().publicId(\\&quot;cloudinary_icon\\&quot;)).opacity(50).effect(\\&quot;brightness:200\\&quot;)).imageTag(\\&quot;face_center.jpg\\&quot;);&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.url().transformation(new Transformation()\\n  .width(300).height(200).gravity(\\&quot;face\\&quot;).crop(\\&quot;fill\\&quot;).chain()\\n  .width(80).gravity(\\&quot;south_east\\&quot;).x(5).y(5).overlay(new Layer().publicId(\\&quot;cloudinary_icon\\&quot;)).opacity(50).effect(\\&quot;brightness:200\\&quot;)).imageTag(\\&quot;face_center.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;face_center.jpg\\&quot;, transformation: [ {width: 300, height: 200, gravity: \\&quot;face\\&quot;, crop: \\&quot;fill\\&quot;}, {width: 80, gravity: \\&quot;south_east\\&quot;, x: 5, y: 5, overlay: \\&quot;cloudinary_icon\\&quot;, opacity: 50, effect: \\&quot;brightness:200\\&quot;} ])&quot;,&quot;codeSnippet&quot;:&quot;cl_image_tag(\\&quot;face_center.jpg\\&quot;, transformation: [\\n  {width: 300, height: 200, gravity: \\&quot;face\\&quot;, crop: \\&quot;fill\\&quot;},\\n  {width: 80, gravity: \\&quot;south_east\\&quot;, x: 5, y: 5, overlay: \\&quot;cloudinary_icon\\&quot;, opacity: 50, effect: \\&quot;brightness:200\\&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(300).Height(200).Gravity(\\&quot;face\\&quot;).Crop(\\&quot;fill\\&quot;).Chain() .Width(80).Gravity(\\&quot;south_east\\&quot;).X(5).Y(5).Overlay(new Layer().PublicId(\\&quot;cloudinary_icon\\&quot;)).Opacity(50).Effect(\\&quot;brightness:200\\&quot;)).BuildImageTag(\\&quot;face_center.jpg\\&quot;)&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.Api.UrlImgUp.Transform(new Transformation()\\n  .Width(300).Height(200).Gravity(\\&quot;face\\&quot;).Crop(\\&quot;fill\\&quot;).Chain()\\n  .Width(80).Gravity(\\&quot;south_east\\&quot;).X(5).Y(5).Overlay(new Layer().PublicId(\\&quot;cloudinary_icon\\&quot;)).Opacity(50).Effect(\\&quot;brightness:200\\&quot;)).BuildImageTag(\\&quot;face_center.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;face_center.jpg&#039;).transformation(Transformation()\\n\\t.resize(Resize.fill().width(300)\\n.height(200)\\n\\t.gravity(\\n\\tGravity.focusOn(\\n\\tFocusOn.face()))\\n\\t)\\n\\t.overlay(Overlay.source(\\n\\tSource.image(\\&quot;cloudinary_icon\\&quot;)\\n\\t.transformation(new Transformation()\\n\\t.resize(Resize.scale().width(80))\\n\\t.adjust(Adjust.opacity(50))\\n\\t.adjust(Adjust.brightness().level(200)))\\n\\t)\\n\\t.position(Position()\\n\\t.gravity(\\n\\tGravity.compass(\\n\\tCompass.southEast()))\\n.offsetX(5)\\n.offsetY(5))\\n\\t));&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image(&#039;face_center.jpg&#039;).transformation(Transformation()\\n\\t.resize(Resize.fill().width(300)\\n.height(200)\\n\\t.gravity(\\n\\tGravity.focusOn(\\n\\tFocusOn.face()))\\n\\t)\\n\\t.overlay(Overlay.source(\\n\\tSource.image(\\&quot;cloudinary_icon\\&quot;)\\n\\t.transformation(new Transformation()\\n\\t.resize(Resize.scale().width(80))\\n\\t.adjust(Adjust.opacity(50))\\n\\t.adjust(Adjust.brightness().level(200)))\\n\\t)\\n\\t.position(Position()\\n\\t.gravity(\\n\\tGravity.compass(\\n\\tCompass.southEast()))\\n.offsetX(5)\\n.offsetY(5))\\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(300).setHeight(200).setGravity(\\&quot;face\\&quot;).setCrop(\\&quot;fill\\&quot;).chain() .setWidth(80).setGravity(\\&quot;south_east\\&quot;).setX(5).setY(5).setOverlay(\\&quot;cloudinary_icon\\&quot;).setOpacity(50).setEffect(\\&quot;brightness:200\\&quot;)).generate(\\&quot;face_center.jpg\\&quot;)!, cloudinary: cloudinary)&quot;,&quot;codeSnippet&quot;:&quot;imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation()\\n  .setWidth(300).setHeight(200).setGravity(\\&quot;face\\&quot;).setCrop(\\&quot;fill\\&quot;).chain()\\n  .setWidth(80).setGravity(\\&quot;south_east\\&quot;).setX(5).setY(5).setOverlay(\\&quot;cloudinary_icon\\&quot;).setOpacity(50).setEffect(\\&quot;brightness:200\\&quot;)).generate(\\&quot;face_center.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(300).height(200).gravity(\\&quot;face\\&quot;).crop(\\&quot;fill\\&quot;).chain() .width(80).gravity(\\&quot;south_east\\&quot;).x(5).y(5).overlay(new Layer().publicId(\\&quot;cloudinary_icon\\&quot;)).opacity(50).effect(\\&quot;brightness:200\\&quot;)).generate(\\&quot;face_center.jpg\\&quot;);&quot;,&quot;codeSnippet&quot;:&quot;MediaManager.get().url().transformation(new Transformation()\\n  .width(300).height(200).gravity(\\&quot;face\\&quot;).crop(\\&quot;fill\\&quot;).chain()\\n  .width(80).gravity(\\&quot;south_east\\&quot;).x(5).y(5).overlay(new Layer().publicId(\\&quot;cloudinary_icon\\&quot;)).opacity(50).effect(\\&quot;brightness:200\\&quot;)).generate(\\&quot;face_center.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;face_center.jpg&#039;).transformation(Transformation()\\n\\t.resize(Resize.fill().width(300)\\n.height(200)\\n\\t.gravity(\\n\\tGravity.focusOn(\\n\\tFocusOn.face()))\\n\\t)\\n\\t.overlay(Overlay.source(\\n\\tSource.image(\\&quot;cloudinary_icon\\&quot;)\\n\\t.transformation(new Transformation()\\n\\t.resize(Resize.scale().width(80))\\n\\t.adjust(Adjust.opacity(50))\\n\\t.adjust(Adjust.brightness().level(200)))\\n\\t)\\n\\t.position(Position()\\n\\t.gravity(\\n\\tGravity.compass(\\n\\tCompass.southEast()))\\n.offsetX(5)\\n.offsetY(5))\\n\\t));&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image(&#039;face_center.jpg&#039;).transformation(Transformation()\\n\\t.resize(Resize.fill().width(300)\\n.height(200)\\n\\t.gravity(\\n\\tGravity.focusOn(\\n\\tFocusOn.face()))\\n\\t)\\n\\t.overlay(Overlay.source(\\n\\tSource.image(\\&quot;cloudinary_icon\\&quot;)\\n\\t.transformation(new Transformation()\\n\\t.resize(Resize.scale().width(80))\\n\\t.adjust(Adjust.opacity(50))\\n\\t.adjust(Adjust.brightness().level(200)))\\n\\t)\\n\\t.position(Position()\\n\\t.gravity(\\n\\tGravity.compass(\\n\\tCompass.southEast()))\\n.offsetX(5)\\n.offsetY(5))\\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;face_center.jpg\\&quot;)\\n\\t resize(Resize.fill() { width(300)\\n height(200)\\n\\t gravity(\\n\\tGravity.focusOn(\\n\\tFocusOn.face()))\\n\\t })\\n\\t overlay(Overlay.source(\\n\\tSource.image(\\&quot;cloudinary_icon\\&quot;) {\\n\\t transformation(Transformation {\\n\\t resize(Resize.scale() { width(80) })\\n\\t adjust(Adjust.opacity(50))\\n\\t adjust(Adjust.brightness() { level(200) }) })\\n\\t }) {\\n\\t position(Position() {\\n\\t gravity(\\n\\tGravity.compass(\\n\\tCompass.southEast()))\\n offsetX(5)\\n offsetY(5) })\\n\\t }) \\n}.generate()&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image {\\n\\tpublicId(\\&quot;face_center.jpg\\&quot;)\\n\\t resize(Resize.fill() { width(300)\\n height(200)\\n\\t gravity(\\n\\tGravity.focusOn(\\n\\tFocusOn.face()))\\n\\t })\\n\\t overlay(Overlay.source(\\n\\tSource.image(\\&quot;cloudinary_icon\\&quot;) {\\n\\t transformation(Transformation {\\n\\t resize(Resize.scale() { width(80) })\\n\\t adjust(Adjust.opacity(50))\\n\\t adjust(Adjust.brightness() { level(200) }) })\\n\\t }) {\\n\\t position(Position() {\\n\\t gravity(\\n\\tGravity.compass(\\n\\tCompass.southEast()))\\n offsetX(5)\\n offsetY(5) })\\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;face_center.jpg\\&quot;, {transformation: [ {width: 300, height: 200, gravity: \\&quot;face\\&quot;, crop: \\&quot;fill\\&quot;}, {width: 80, gravity: \\&quot;south_east\\&quot;, x: 5, y: 5, overlay: new cloudinary.Layer().publicId(\\&quot;cloudinary_icon\\&quot;), opacity: 50, effect: \\&quot;brightness:200\\&quot;} ]})&quot;,&quot;codeSnippet&quot;:&quot;$.cloudinary.image(\\&quot;face_center.jpg\\&quot;, {transformation: [\\n  {width: 300, height: 200, gravity: \\&quot;face\\&quot;, crop: \\&quot;fill\\&quot;},\\n  {width: 80, gravity: \\&quot;south_east\\&quot;, x: 5, y: 5, overlay: new cloudinary.Layer().publicId(\\&quot;cloudinary_icon\\&quot;), opacity: 50, effect: \\&quot;brightness:200\\&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;face_center.jpg\\&quot;)\\n  .resize(\\n    fill()\\n      .width(300)\\n      .height(200)\\n      .gravity(focusOn(face()))\\n  )\\n  .overlay(\\n    source(\\n      image(\\&quot;cloudinary_icon\\&quot;).transformation(\\n        new Transformation()\\n          .resize(scale().width(80))\\n          .adjust(opacity(50))\\n          .adjust(brightness().level(200))\\n      )\\n    ).position(\\n      new Position()\\n        .gravity(compass(\\&quot;south_east\\&quot;))\\n        .offsetX(5)\\n        .offsetY(5)\\n    )\\n  );&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;face_center.jpg\\&quot;)\\n  .resize(\\n    fill()\\n      .width(300)\\n      .height(200)\\n      .gravity(focusOn(face()))\\n  )\\n  .overlay(\\n    source(\\n      image(\\&quot;cloudinary_icon\\&quot;).transformation(\\n        new Transformation()\\n          .resize(scale().width(80))\\n          .adjust(opacity(50))\\n          .adjust(brightness().level(200))\\n      )\\n    ).position(\\n      new Position()\\n        .gravity(compass(\\&quot;south_east\\&quot;))\\n        .offsetX(5)\\n        .offsetY(5)\\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\\\/w_300,h_200,g_face,c_fill\\\/w_80,g_south_east,x_5,y_5,l_cloudinary_icon,o_50,e_brightness:200\\\/face_center.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;300&quot;,&quot;height&quot;:&quot;200&quot;,&quot;gravity&quot;:&quot;face&quot;,&quot;crop_mode&quot;:&quot;fill&quot;},{&quot;width&quot;:&quot;80&quot;,&quot;gravity&quot;:&quot;south_east&quot;,&quot;x&quot;:&quot;5&quot;,&quot;y&quot;:&quot;5&quot;,&quot;overlay&quot;:&quot;cloudinary_icon&quot;,&quot;opacity&quot;:&quot;50&quot;,&quot;effect&quot;:&quot;brightness:200&quot;}],&quot;transformation_string&quot;:&quot;w_300,h_200,g_face,c_fill\\\/w_80,g_south_east,x_5,y_5,l_cloudinary_icon,o_50,e_brightness:200&quot;,&quot;url_suffix&quot;:&quot;&quot;,&quot;version&quot;:&quot;&quot;,&quot;secure&quot;:true,&quot;public_id&quot;:&quot;face_center.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_300,h_200,g_face,c_fill\/w_80,g_south_east,x_5,y_5,l_cloudinary_icon,o_50,e_brightness:200\/face_center.jpg\" target=\"_blank\"><img decoding=\"async\" src=\"https:\/\/res.cloudinary.com\/demo\/image\/upload\/w_300,h_200,g_face,c_fill\/w_80,g_south_east,x_5,y_5,l_cloudinary_icon,o_50,e_brightness:200\/face_center.jpg\" alt=\"automated overlay\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"300\" height=\"200\"\/><\/a><\/p>\n<h3 id=\"custom-fonts\">Custom fonts<\/h3> \n<p>You can upload your own custom fonts to Cloudinary for use as overlay text on images (see the procedures in the documentation). Afterwards, this code overlays text over an image with the uploaded font:<\/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;fireworks.jpg\\&quot;, {overlay: {font_family: \\&quot;ttf\\&quot;, font_size: 100, text: \\&quot;Happy%20New%20Year%202021\\&quot;}, color: \\&quot;white\\&quot;, gravity: \\&quot;north_west\\&quot;, x: 30, y: 30})&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image(\\&quot;fireworks.jpg\\&quot;, {overlay: {font_family: \\&quot;ttf\\&quot;, font_size: 100, text: \\&quot;Happy%20New%20Year%202021\\&quot;}, color: \\&quot;white\\&quot;, gravity: \\&quot;north_west\\&quot;, x: 30, y: 30})&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;fireworks.jpg\\&quot;).overlay(\\n  source(\\n    text(\\n      \\&quot;Happy New Year 2021\\&quot;,\\n      new TextStyle(\\&quot;AlexBrush-Regular.ttf\\&quot;, 100)\\n    ).textColor(\\&quot;white\\&quot;)\\n  ).position(\\n    new Position()\\n      .gravity(compass(\\&quot;north_west\\&quot;))\\n      .offsetX(30)\\n      .offsetY(30)\\n  )\\n);&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;fireworks.jpg\\&quot;).overlay(\\n  source(\\n    text(\\n      \\&quot;Happy New Year 2021\\&quot;,\\n      new TextStyle(\\&quot;AlexBrush-Regular.ttf\\&quot;, 100)\\n    ).textColor(\\&quot;white\\&quot;)\\n  ).position(\\n    new Position()\\n      .gravity(compass(\\&quot;north_west\\&quot;))\\n      .offsetX(30)\\n      .offsetY(30)\\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;fireworks.jpg\\&quot; &gt; &lt;Transformation overlay={{fontFamily: \\&quot;ttf\\&quot;, fontSize: 100, text: \\&quot;Happy%20New%20Year%202021\\&quot;}} color=\\&quot;white\\&quot; gravity=\\&quot;north_west\\&quot; x=\\&quot;30\\&quot; y=\\&quot;30\\&quot; \\\/&gt; &lt;\\\/Image&gt;&quot;,&quot;codeSnippet&quot;:&quot;&lt;Image publicId=\\&quot;fireworks.jpg\\&quot; &gt;\\n\\t&lt;Transformation overlay={{fontFamily: \\&quot;ttf\\&quot;, fontSize: 100, text: \\&quot;Happy%20New%20Year%202021\\&quot;}} color=\\&quot;white\\&quot; gravity=\\&quot;north_west\\&quot; x=\\&quot;30\\&quot; y=\\&quot;30\\&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;fireworks.jpg\\&quot;).overlay(\\n  source(\\n    text(\\n      \\&quot;Happy New Year 2021\\&quot;,\\n      new TextStyle(\\&quot;AlexBrush-Regular.ttf\\&quot;, 100)\\n    ).textColor(\\&quot;white\\&quot;)\\n  ).position(\\n    new Position()\\n      .gravity(compass(\\&quot;north_west\\&quot;))\\n      .offsetX(30)\\n      .offsetY(30)\\n  )\\n);&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;fireworks.jpg\\&quot;).overlay(\\n  source(\\n    text(\\n      \\&quot;Happy New Year 2021\\&quot;,\\n      new TextStyle(\\&quot;AlexBrush-Regular.ttf\\&quot;, 100)\\n    ).textColor(\\&quot;white\\&quot;)\\n  ).position(\\n    new Position()\\n      .gravity(compass(\\&quot;north_west\\&quot;))\\n      .offsetX(30)\\n      .offsetY(30)\\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;fireworks.jpg\\&quot; &gt; &lt;cld-transformation :overlay=\\&quot;{fontFamily: &#039;ttf&#039;, fontSize: 100, text: &#039;Happy%20New%20Year%202021&#039;}\\&quot; color=\\&quot;white\\&quot; gravity=\\&quot;north_west\\&quot; x=\\&quot;30\\&quot; y=\\&quot;30\\&quot; \\\/&gt; &lt;\\\/cld-image&gt;&quot;,&quot;codeSnippet&quot;:&quot;&lt;cld-image public-id=\\&quot;fireworks.jpg\\&quot; &gt;\\n\\t&lt;cld-transformation :overlay=\\&quot;{fontFamily: &#039;ttf&#039;, fontSize: 100, text: &#039;Happy%20New%20Year%202021&#039;}\\&quot; color=\\&quot;white\\&quot; gravity=\\&quot;north_west\\&quot; x=\\&quot;30\\&quot; y=\\&quot;30\\&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;fireworks.jpg\\&quot;).overlay(\\n  source(\\n    text(\\n      \\&quot;Happy New Year 2021\\&quot;,\\n      new TextStyle(\\&quot;AlexBrush-Regular.ttf\\&quot;, 100)\\n    ).textColor(\\&quot;white\\&quot;)\\n  ).position(\\n    new Position()\\n      .gravity(compass(\\&quot;north_west\\&quot;))\\n      .offsetX(30)\\n      .offsetY(30)\\n  )\\n);&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;fireworks.jpg\\&quot;).overlay(\\n  source(\\n    text(\\n      \\&quot;Happy New Year 2021\\&quot;,\\n      new TextStyle(\\&quot;AlexBrush-Regular.ttf\\&quot;, 100)\\n    ).textColor(\\&quot;white\\&quot;)\\n  ).position(\\n    new Position()\\n      .gravity(compass(\\&quot;north_west\\&quot;))\\n      .offsetX(30)\\n      .offsetY(30)\\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;fireworks.jpg\\&quot; &gt; &lt;cl-transformation overlay=\\&quot;text:AlexBrush-Regular.ttf_100:Happy%20New%20Year%202021\\&quot; color=\\&quot;white\\&quot; gravity=\\&quot;north_west\\&quot; x=\\&quot;30\\&quot; y=\\&quot;30\\&quot;&gt; &lt;\\\/cl-transformation&gt; &lt;\\\/cl-image&gt;&quot;,&quot;codeSnippet&quot;:&quot;&lt;cl-image public-id=\\&quot;fireworks.jpg\\&quot; &gt;\\n\\t&lt;cl-transformation overlay=\\&quot;text:AlexBrush-Regular.ttf_100:Happy%20New%20Year%202021\\&quot; color=\\&quot;white\\&quot; gravity=\\&quot;north_west\\&quot; x=\\&quot;30\\&quot; y=\\&quot;30\\&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;fireworks.jpg\\&quot;).overlay(\\n  source(\\n    text(\\n      \\&quot;Happy New Year 2021\\&quot;,\\n      new TextStyle(\\&quot;AlexBrush-Regular.ttf\\&quot;, 100)\\n    ).textColor(\\&quot;white\\&quot;)\\n  ).position(\\n    new Position()\\n      .gravity(compass(\\&quot;north_west\\&quot;))\\n      .offsetX(30)\\n      .offsetY(30)\\n  )\\n);&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;fireworks.jpg\\&quot;).overlay(\\n  source(\\n    text(\\n      \\&quot;Happy New Year 2021\\&quot;,\\n      new TextStyle(\\&quot;AlexBrush-Regular.ttf\\&quot;, 100)\\n    ).textColor(\\&quot;white\\&quot;)\\n  ).position(\\n    new Position()\\n      .gravity(compass(\\&quot;north_west\\&quot;))\\n      .offsetX(30)\\n      .offsetY(30)\\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;fireworks.jpg&#039;, {overlay: new cloudinary.TextLayer().fontFamily(\\&quot;ttf\\&quot;).fontSize(100).text(\\&quot;Happy%20New%20Year%202021\\&quot;), color: \\&quot;white\\&quot;, gravity: \\&quot;north_west\\&quot;, x: 30, y: 30}).toHtml();&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.imageTag(&#039;fireworks.jpg&#039;, {overlay: new cloudinary.TextLayer().fontFamily(\\&quot;ttf\\&quot;).fontSize(100).text(\\&quot;Happy%20New%20Year%202021\\&quot;), color: \\&quot;white\\&quot;, gravity: \\&quot;north_west\\&quot;, x: 30, y: 30}).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;fireworks.jpg\\&quot;).image(overlay={&#039;font_family&#039;: \\&quot;ttf\\&quot;, &#039;font_size&#039;: 100, &#039;text&#039;: \\&quot;Happy%20New%20Year%202021\\&quot;}, color=\\&quot;white\\&quot;, gravity=\\&quot;north_west\\&quot;, x=30, y=30)&quot;,&quot;codeSnippet&quot;:&quot;CloudinaryImage(\\&quot;fireworks.jpg\\&quot;).image(overlay={&#039;font_family&#039;: \\&quot;ttf\\&quot;, &#039;font_size&#039;: 100, &#039;text&#039;: \\&quot;Happy%20New%20Year%202021\\&quot;}, color=\\&quot;white\\&quot;, gravity=\\&quot;north_west\\&quot;, x=30, y=30)&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;fireworks.jpg&#039;))\\n\\t-&gt;overlay(Overlay::source(\\n\\tSource::text(\\&quot;Happy New Year 2021\\&quot;,(new TextStyle(\\&quot;AlexBrush-Regular.ttf\\&quot;,100)))\\n\\t-&gt;textColor(Color::WHITE)\\n\\t)\\n\\t-&gt;position((new Position())\\n\\t-&gt;gravity(\\n\\tGravity::compass(\\n\\tCompass::northWest()))\\n-&gt;offsetX(30)\\n-&gt;offsetY(30))\\n\\t);&quot;,&quot;codeSnippet&quot;:&quot;(new ImageTag(&#039;fireworks.jpg&#039;))\\n\\t-&gt;overlay(Overlay::source(\\n\\tSource::text(\\&quot;Happy New Year 2021\\&quot;,(new TextStyle(\\&quot;AlexBrush-Regular.ttf\\&quot;,100)))\\n\\t-&gt;textColor(Color::WHITE)\\n\\t)\\n\\t-&gt;position((new Position())\\n\\t-&gt;gravity(\\n\\tGravity::compass(\\n\\tCompass::northWest()))\\n-&gt;offsetX(30)\\n-&gt;offsetY(30))\\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;fireworks.jpg\\&quot;, array(\\&quot;overlay\\&quot;=&gt;array(\\&quot;font_family\\&quot;=&gt;\\&quot;ttf\\&quot;, \\&quot;font_size\\&quot;=&gt;100, \\&quot;text\\&quot;=&gt;\\&quot;Happy%20New%20Year%202021\\&quot;), \\&quot;color\\&quot;=&gt;\\&quot;white\\&quot;, \\&quot;gravity\\&quot;=&gt;\\&quot;north_west\\&quot;, \\&quot;x\\&quot;=&gt;30, \\&quot;y\\&quot;=&gt;30))&quot;,&quot;codeSnippet&quot;:&quot;cl_image_tag(\\&quot;fireworks.jpg\\&quot;, array(\\&quot;overlay\\&quot;=&gt;array(\\&quot;font_family\\&quot;=&gt;\\&quot;ttf\\&quot;, \\&quot;font_size\\&quot;=&gt;100, \\&quot;text\\&quot;=&gt;\\&quot;Happy%20New%20Year%202021\\&quot;), \\&quot;color\\&quot;=&gt;\\&quot;white\\&quot;, \\&quot;gravity\\&quot;=&gt;\\&quot;north_west\\&quot;, \\&quot;x\\&quot;=&gt;30, \\&quot;y\\&quot;=&gt;30))&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 TextLayer().fontFamily(\\&quot;ttf\\&quot;).fontSize(100).text(\\&quot;Happy%20New%20Year%202021\\&quot;)).color(\\&quot;white\\&quot;).gravity(\\&quot;north_west\\&quot;).x(30).y(30)).imageTag(\\&quot;fireworks.jpg\\&quot;);&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.url().transformation(new Transformation().overlay(new TextLayer().fontFamily(\\&quot;ttf\\&quot;).fontSize(100).text(\\&quot;Happy%20New%20Year%202021\\&quot;)).color(\\&quot;white\\&quot;).gravity(\\&quot;north_west\\&quot;).x(30).y(30)).imageTag(\\&quot;fireworks.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;fireworks.jpg\\&quot;, overlay: {font_family: \\&quot;ttf\\&quot;, font_size: 100, text: \\&quot;Happy%20New%20Year%202021\\&quot;}, color: \\&quot;white\\&quot;, gravity: \\&quot;north_west\\&quot;, x: 30, y: 30)&quot;,&quot;codeSnippet&quot;:&quot;cl_image_tag(\\&quot;fireworks.jpg\\&quot;, overlay: {font_family: \\&quot;ttf\\&quot;, font_size: 100, text: \\&quot;Happy%20New%20Year%202021\\&quot;}, color: \\&quot;white\\&quot;, gravity: \\&quot;north_west\\&quot;, x: 30, y: 30)&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 TextLayer().FontFamily(\\&quot;ttf\\&quot;).FontSize(100).Text(\\&quot;Happy%20New%20Year%202021\\&quot;)).Color(\\&quot;white\\&quot;).Gravity(\\&quot;north_west\\&quot;).X(30).Y(30)).BuildImageTag(\\&quot;fireworks.jpg\\&quot;)&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.Api.UrlImgUp.Transform(new Transformation().Overlay(new TextLayer().FontFamily(\\&quot;ttf\\&quot;).FontSize(100).Text(\\&quot;Happy%20New%20Year%202021\\&quot;)).Color(\\&quot;white\\&quot;).Gravity(\\&quot;north_west\\&quot;).X(30).Y(30)).BuildImageTag(\\&quot;fireworks.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;fireworks.jpg&#039;).transformation(Transformation()\\n\\t.addTransformation(\\&quot;l_text:AlexBrush-Regular.ttf_100:Happy New Year 2021,co_white,g_north_west,x_30,y_30\\&quot;));&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image(&#039;fireworks.jpg&#039;).transformation(Transformation()\\n\\t.addTransformation(\\&quot;l_text:AlexBrush-Regular.ttf_100:Happy New Year 2021,co_white,g_north_west,x_30,y_30\\&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().setOverlay(\\&quot;text:AlexBrush-Regular.ttf_100:Happy%20New%20Year%202021\\&quot;).setColor(\\&quot;white\\&quot;).setGravity(\\&quot;north_west\\&quot;).setX(30).setY(30)).generate(\\&quot;fireworks.jpg\\&quot;)!, cloudinary: cloudinary)&quot;,&quot;codeSnippet&quot;:&quot;imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setOverlay(\\&quot;text:AlexBrush-Regular.ttf_100:Happy%20New%20Year%202021\\&quot;).setColor(\\&quot;white\\&quot;).setGravity(\\&quot;north_west\\&quot;).setX(30).setY(30)).generate(\\&quot;fireworks.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().overlay(new TextLayer().fontFamily(\\&quot;ttf\\&quot;).fontSize(100).text(\\&quot;Happy%20New%20Year%202021\\&quot;)).color(\\&quot;white\\&quot;).gravity(\\&quot;north_west\\&quot;).x(30).y(30)).generate(\\&quot;fireworks.jpg\\&quot;);&quot;,&quot;codeSnippet&quot;:&quot;MediaManager.get().url().transformation(new Transformation().overlay(new TextLayer().fontFamily(\\&quot;ttf\\&quot;).fontSize(100).text(\\&quot;Happy%20New%20Year%202021\\&quot;)).color(\\&quot;white\\&quot;).gravity(\\&quot;north_west\\&quot;).x(30).y(30)).generate(\\&quot;fireworks.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;fireworks.jpg&#039;).transformation(Transformation()\\n\\t.addTransformation(\\&quot;l_text:AlexBrush-Regular.ttf_100:Happy New Year 2021,co_white,g_north_west,x_30,y_30\\&quot;));&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image(&#039;fireworks.jpg&#039;).transformation(Transformation()\\n\\t.addTransformation(\\&quot;l_text:AlexBrush-Regular.ttf_100:Happy New Year 2021,co_white,g_north_west,x_30,y_30\\&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;fireworks.jpg\\&quot;)\\n\\t overlay(Overlay.source(\\n\\tSource.text(\\&quot;Happy New Year 2021\\&quot;,TextStyle(\\&quot;AlexBrush-Regular.ttf\\&quot;,100)) {\\n\\t textColor(Color.WHITE)\\n\\t }) {\\n\\t position(Position() {\\n\\t gravity(\\n\\tGravity.compass(\\n\\tCompass.northWest()))\\n offsetX(30)\\n offsetY(30) })\\n\\t }) \\n}.generate()&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image {\\n\\tpublicId(\\&quot;fireworks.jpg\\&quot;)\\n\\t overlay(Overlay.source(\\n\\tSource.text(\\&quot;Happy New Year 2021\\&quot;,TextStyle(\\&quot;AlexBrush-Regular.ttf\\&quot;,100)) {\\n\\t textColor(Color.WHITE)\\n\\t }) {\\n\\t position(Position() {\\n\\t gravity(\\n\\tGravity.compass(\\n\\tCompass.northWest()))\\n offsetX(30)\\n offsetY(30) })\\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;fireworks.jpg\\&quot;, {overlay: new cloudinary.TextLayer().fontFamily(\\&quot;ttf\\&quot;).fontSize(100).text(\\&quot;Happy%20New%20Year%202021\\&quot;), color: \\&quot;white\\&quot;, gravity: \\&quot;north_west\\&quot;, x: 30, y: 30})&quot;,&quot;codeSnippet&quot;:&quot;$.cloudinary.image(\\&quot;fireworks.jpg\\&quot;, {overlay: new cloudinary.TextLayer().fontFamily(\\&quot;ttf\\&quot;).fontSize(100).text(\\&quot;Happy%20New%20Year%202021\\&quot;), color: \\&quot;white\\&quot;, gravity: \\&quot;north_west\\&quot;, x: 30, y: 30})&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;fireworks.jpg\\&quot;).overlay(\\n  source(\\n    text(\\n      \\&quot;Happy New Year 2021\\&quot;,\\n      new TextStyle(\\&quot;AlexBrush-Regular.ttf\\&quot;, 100)\\n    ).textColor(\\&quot;white\\&quot;)\\n  ).position(\\n    new Position()\\n      .gravity(compass(\\&quot;north_west\\&quot;))\\n      .offsetX(30)\\n      .offsetY(30)\\n  )\\n);&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;fireworks.jpg\\&quot;).overlay(\\n  source(\\n    text(\\n      \\&quot;Happy New Year 2021\\&quot;,\\n      new TextStyle(\\&quot;AlexBrush-Regular.ttf\\&quot;, 100)\\n    ).textColor(\\&quot;white\\&quot;)\\n  ).position(\\n    new Position()\\n      .gravity(compass(\\&quot;north_west\\&quot;))\\n      .offsetX(30)\\n      .offsetY(30)\\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_text:AlexBrush-Regular.ttf_100:Happy%20New%20Year%202021,co_white,g_north_west,x_30,y_30\\\/fireworks.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;overlay&quot;:&quot;text:AlexBrush-Regular.ttf_100:Happy New Year 2021&quot;,&quot;color&quot;:&quot;white&quot;,&quot;gravity&quot;:&quot;north_west&quot;,&quot;x&quot;:&quot;30&quot;,&quot;y&quot;:&quot;30&quot;}],&quot;transformation_string&quot;:&quot;l_text:AlexBrush-Regular.ttf_100:Happy New Year 2021,co_white,g_north_west,x_30,y_30&quot;,&quot;url_suffix&quot;:&quot;&quot;,&quot;version&quot;:&quot;&quot;,&quot;secure&quot;:true,&quot;public_id&quot;:&quot;fireworks.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\/l_text:AlexBrush-Regular.ttf_100:Happy%20New%20Year%202021,co_white,g_north_west,x_30,y_30\/fireworks.jpg\" target=\"_blank\"><img decoding=\"async\" src=\"https:\/\/res.cloudinary.com\/demo\/image\/upload\/l_text:AlexBrush-Regular.ttf_100:Happy%20New%20Year%202021,co_white,g_north_west,x_30,y_30\/fireworks.jpg\" alt=\"custom fonts\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"1920\" height=\"1281\"\/><\/a><\/p>\n<h3 id=\"multiple-effects\">Overlays with multiple images and effects<\/h3>\n<p>You can stack multiple images, one after the other, on top of a base image. Cloudinary can apply eye-catching effects to each of the overlaid images.<\/p>\n<p>The URL below sets the flag <code>fl_layer_apply<\/code> and performs three transformations:<\/p>\n<ol>\n<li>Display a base image of a coffee mug with the pictures of a handsome couple and a balloon on top of it.<\/li>\n<li>Smartly crop and resize the picture of the couple in addition to adding a blurred border.<\/li>\n<li>Resize the balloon to 30 pixels wide, rotate it, and change the hue level to pink.<\/li>\n<\/ol>\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;coffee_cup.jpg\\&quot;, {transformation: [ {width: 400, height: 250, gravity: \\&quot;south\\&quot;, crop: \\&quot;fill\\&quot;}, {overlay: \\&quot;nice_couple\\&quot;, width: \\&quot;1.3\\&quot;, height: \\&quot;1.3\\&quot;, gravity: \\&quot;faces\\&quot;, flags: \\&quot;region_relative\\&quot;, crop: \\&quot;crop\\&quot;}, {effect: \\&quot;saturation:50\\&quot;}, {effect: \\&quot;vignette\\&quot;}, {flags: \\&quot;layer_apply\\&quot;, width: 100, radius: \\&quot;max\\&quot;, gravity: \\&quot;center\\&quot;, y: 20, x: -20, crop: \\&quot;scale\\&quot;}, {overlay: \\&quot;balloon\\&quot;, width: 30}, {effect: \\&quot;hue:-20\\&quot;, angle: 5}, {flags: \\&quot;layer_apply\\&quot;, x: 30, y: 5} ]})&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image(\\&quot;coffee_cup.jpg\\&quot;, {transformation: [\\n  {width: 400, height: 250, gravity: \\&quot;south\\&quot;, crop: \\&quot;fill\\&quot;},\\n  {overlay: \\&quot;nice_couple\\&quot;, width: \\&quot;1.3\\&quot;, height: \\&quot;1.3\\&quot;, gravity: \\&quot;faces\\&quot;, flags: \\&quot;region_relative\\&quot;, crop: \\&quot;crop\\&quot;},\\n  {effect: \\&quot;saturation:50\\&quot;},\\n  {effect: \\&quot;vignette\\&quot;},\\n  {flags: \\&quot;layer_apply\\&quot;, width: 100, radius: \\&quot;max\\&quot;, gravity: \\&quot;center\\&quot;, y: 20, x: -20, crop: \\&quot;scale\\&quot;},\\n  {overlay: \\&quot;balloon\\&quot;, width: 30},\\n  {effect: \\&quot;hue:-20\\&quot;, angle: 5},\\n  {flags: \\&quot;layer_apply\\&quot;, x: 30, y: 5}\\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;coffee_cup.jpg\\&quot;)\\n  .resize(\\n    fill()\\n      .width(400)\\n      .height(250)\\n      .gravity(compass(\\&quot;south\\&quot;))\\n  )\\n  .overlay(\\n    source(\\n      image(\\&quot;nice_couple\\&quot;).transformation(\\n        new Transformation()\\n          .resize(\\n            crop()\\n              .width(1.3)\\n              .height(1.3)\\n              .gravity(focusOn(faces()))\\n              .regionRelative()\\n          )\\n          .adjust(saturation().level(50))\\n          .effect(vignette())\\n          .resize(scale().width(100))\\n          .roundCorners(max())\\n      )\\n    ).position(\\n      new Position()\\n        .gravity(compass(\\&quot;center\\&quot;))\\n        .offsetX(-20)\\n        .offsetY(20)\\n    )\\n  )\\n  .overlay(\\n    source(\\n      image(\\&quot;balloon\\&quot;).transformation(\\n        new Transformation()\\n          .resize(scale().width(30))\\n          .rotate(byAngle(5))\\n          .adjust(hue().level(-20))\\n      )\\n    ).position(new Position().offsetX(30).offsetY(5))\\n  );&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;coffee_cup.jpg\\&quot;)\\n  .resize(\\n    fill()\\n      .width(400)\\n      .height(250)\\n      .gravity(compass(\\&quot;south\\&quot;))\\n  )\\n  .overlay(\\n    source(\\n      image(\\&quot;nice_couple\\&quot;).transformation(\\n        new Transformation()\\n          .resize(\\n            crop()\\n              .width(1.3)\\n              .height(1.3)\\n              .gravity(focusOn(faces()))\\n              .regionRelative()\\n          )\\n          .adjust(saturation().level(50))\\n          .effect(vignette())\\n          .resize(scale().width(100))\\n          .roundCorners(max())\\n      )\\n    ).position(\\n      new Position()\\n        .gravity(compass(\\&quot;center\\&quot;))\\n        .offsetX(-20)\\n        .offsetY(20)\\n    )\\n  )\\n  .overlay(\\n    source(\\n      image(\\&quot;balloon\\&quot;).transformation(\\n        new Transformation()\\n          .resize(scale().width(30))\\n          .rotate(byAngle(5))\\n          .adjust(hue().level(-20))\\n      )\\n    ).position(new Position().offsetX(30).offsetY(5))\\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;coffee_cup.jpg\\&quot; &gt; &lt;Transformation width=\\&quot;400\\&quot; height=\\&quot;250\\&quot; gravity=\\&quot;south\\&quot; crop=\\&quot;fill\\&quot; \\\/&gt; &lt;Transformation overlay=\\&quot;nice_couple\\&quot; width=\\&quot;1.3\\&quot; height=\\&quot;1.3\\&quot; gravity=\\&quot;faces\\&quot; flags=\\&quot;region_relative\\&quot; crop=\\&quot;crop\\&quot; \\\/&gt; &lt;Transformation effect=\\&quot;saturation:50\\&quot; \\\/&gt; &lt;Transformation effect=\\&quot;vignette\\&quot; \\\/&gt; &lt;Transformation flags=\\&quot;layer_apply\\&quot; width=\\&quot;100\\&quot; radius=\\&quot;max\\&quot; gravity=\\&quot;center\\&quot; y=\\&quot;20\\&quot; x=\\&quot;-20\\&quot; crop=\\&quot;scale\\&quot; \\\/&gt; &lt;Transformation overlay=\\&quot;balloon\\&quot; width=\\&quot;30\\&quot; \\\/&gt; &lt;Transformation effect=\\&quot;hue:-20\\&quot; angle=\\&quot;5\\&quot; \\\/&gt; &lt;Transformation flags=\\&quot;layer_apply\\&quot; x=\\&quot;30\\&quot; y=\\&quot;5\\&quot; \\\/&gt; &lt;\\\/Image&gt;&quot;,&quot;codeSnippet&quot;:&quot;&lt;Image publicId=\\&quot;coffee_cup.jpg\\&quot; &gt;\\n\\t&lt;Transformation width=\\&quot;400\\&quot; height=\\&quot;250\\&quot; gravity=\\&quot;south\\&quot; crop=\\&quot;fill\\&quot; \\\/&gt;\\n\\t&lt;Transformation overlay=\\&quot;nice_couple\\&quot; width=\\&quot;1.3\\&quot; height=\\&quot;1.3\\&quot; gravity=\\&quot;faces\\&quot; flags=\\&quot;region_relative\\&quot; crop=\\&quot;crop\\&quot; \\\/&gt;\\n\\t&lt;Transformation effect=\\&quot;saturation:50\\&quot; \\\/&gt;\\n\\t&lt;Transformation effect=\\&quot;vignette\\&quot; \\\/&gt;\\n\\t&lt;Transformation flags=\\&quot;layer_apply\\&quot; width=\\&quot;100\\&quot; radius=\\&quot;max\\&quot; gravity=\\&quot;center\\&quot; y=\\&quot;20\\&quot; x=\\&quot;-20\\&quot; crop=\\&quot;scale\\&quot; \\\/&gt;\\n\\t&lt;Transformation overlay=\\&quot;balloon\\&quot; width=\\&quot;30\\&quot; \\\/&gt;\\n\\t&lt;Transformation effect=\\&quot;hue:-20\\&quot; angle=\\&quot;5\\&quot; \\\/&gt;\\n\\t&lt;Transformation flags=\\&quot;layer_apply\\&quot; x=\\&quot;30\\&quot; y=\\&quot;5\\&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;coffee_cup.jpg\\&quot;)\\n  .resize(\\n    fill()\\n      .width(400)\\n      .height(250)\\n      .gravity(compass(\\&quot;south\\&quot;))\\n  )\\n  .overlay(\\n    source(\\n      image(\\&quot;nice_couple\\&quot;).transformation(\\n        new Transformation()\\n          .resize(\\n            crop()\\n              .width(1.3)\\n              .height(1.3)\\n              .gravity(focusOn(faces()))\\n              .regionRelative()\\n          )\\n          .adjust(saturation().level(50))\\n          .effect(vignette())\\n          .resize(scale().width(100))\\n          .roundCorners(max())\\n      )\\n    ).position(\\n      new Position()\\n        .gravity(compass(\\&quot;center\\&quot;))\\n        .offsetX(-20)\\n        .offsetY(20)\\n    )\\n  )\\n  .overlay(\\n    source(\\n      image(\\&quot;balloon\\&quot;).transformation(\\n        new Transformation()\\n          .resize(scale().width(30))\\n          .rotate(byAngle(5))\\n          .adjust(hue().level(-20))\\n      )\\n    ).position(new Position().offsetX(30).offsetY(5))\\n  );&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;coffee_cup.jpg\\&quot;)\\n  .resize(\\n    fill()\\n      .width(400)\\n      .height(250)\\n      .gravity(compass(\\&quot;south\\&quot;))\\n  )\\n  .overlay(\\n    source(\\n      image(\\&quot;nice_couple\\&quot;).transformation(\\n        new Transformation()\\n          .resize(\\n            crop()\\n              .width(1.3)\\n              .height(1.3)\\n              .gravity(focusOn(faces()))\\n              .regionRelative()\\n          )\\n          .adjust(saturation().level(50))\\n          .effect(vignette())\\n          .resize(scale().width(100))\\n          .roundCorners(max())\\n      )\\n    ).position(\\n      new Position()\\n        .gravity(compass(\\&quot;center\\&quot;))\\n        .offsetX(-20)\\n        .offsetY(20)\\n    )\\n  )\\n  .overlay(\\n    source(\\n      image(\\&quot;balloon\\&quot;).transformation(\\n        new Transformation()\\n          .resize(scale().width(30))\\n          .rotate(byAngle(5))\\n          .adjust(hue().level(-20))\\n      )\\n    ).position(new Position().offsetX(30).offsetY(5))\\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;coffee_cup.jpg\\&quot; &gt; &lt;cld-transformation width=\\&quot;400\\&quot; height=\\&quot;250\\&quot; gravity=\\&quot;south\\&quot; crop=\\&quot;fill\\&quot; \\\/&gt; &lt;cld-transformation :overlay=\\&quot;nice_couple\\&quot; width=\\&quot;1.3\\&quot; height=\\&quot;1.3\\&quot; gravity=\\&quot;faces\\&quot; flags=\\&quot;region_relative\\&quot; crop=\\&quot;crop\\&quot; \\\/&gt; &lt;cld-transformation effect=\\&quot;saturation:50\\&quot; \\\/&gt; &lt;cld-transformation effect=\\&quot;vignette\\&quot; \\\/&gt; &lt;cld-transformation flags=\\&quot;layer_apply\\&quot; width=\\&quot;100\\&quot; radius=\\&quot;max\\&quot; gravity=\\&quot;center\\&quot; y=\\&quot;20\\&quot; x=\\&quot;-20\\&quot; crop=\\&quot;scale\\&quot; \\\/&gt; &lt;cld-transformation :overlay=\\&quot;balloon\\&quot; width=\\&quot;30\\&quot; \\\/&gt; &lt;cld-transformation effect=\\&quot;hue:-20\\&quot; angle=\\&quot;5\\&quot; \\\/&gt; &lt;cld-transformation flags=\\&quot;layer_apply\\&quot; x=\\&quot;30\\&quot; y=\\&quot;5\\&quot; \\\/&gt; &lt;\\\/cld-image&gt;&quot;,&quot;codeSnippet&quot;:&quot;&lt;cld-image public-id=\\&quot;coffee_cup.jpg\\&quot; &gt;\\n\\t&lt;cld-transformation width=\\&quot;400\\&quot; height=\\&quot;250\\&quot; gravity=\\&quot;south\\&quot; crop=\\&quot;fill\\&quot; \\\/&gt;\\n\\t&lt;cld-transformation :overlay=\\&quot;nice_couple\\&quot; width=\\&quot;1.3\\&quot; height=\\&quot;1.3\\&quot; gravity=\\&quot;faces\\&quot; flags=\\&quot;region_relative\\&quot; crop=\\&quot;crop\\&quot; \\\/&gt;\\n\\t&lt;cld-transformation effect=\\&quot;saturation:50\\&quot; \\\/&gt;\\n\\t&lt;cld-transformation effect=\\&quot;vignette\\&quot; \\\/&gt;\\n\\t&lt;cld-transformation flags=\\&quot;layer_apply\\&quot; width=\\&quot;100\\&quot; radius=\\&quot;max\\&quot; gravity=\\&quot;center\\&quot; y=\\&quot;20\\&quot; x=\\&quot;-20\\&quot; crop=\\&quot;scale\\&quot; \\\/&gt;\\n\\t&lt;cld-transformation :overlay=\\&quot;balloon\\&quot; width=\\&quot;30\\&quot; \\\/&gt;\\n\\t&lt;cld-transformation effect=\\&quot;hue:-20\\&quot; angle=\\&quot;5\\&quot; \\\/&gt;\\n\\t&lt;cld-transformation flags=\\&quot;layer_apply\\&quot; x=\\&quot;30\\&quot; y=\\&quot;5\\&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;coffee_cup.jpg\\&quot;)\\n  .resize(\\n    fill()\\n      .width(400)\\n      .height(250)\\n      .gravity(compass(\\&quot;south\\&quot;))\\n  )\\n  .overlay(\\n    source(\\n      image(\\&quot;nice_couple\\&quot;).transformation(\\n        new Transformation()\\n          .resize(\\n            crop()\\n              .width(1.3)\\n              .height(1.3)\\n              .gravity(focusOn(faces()))\\n              .regionRelative()\\n          )\\n          .adjust(saturation().level(50))\\n          .effect(vignette())\\n          .resize(scale().width(100))\\n          .roundCorners(max())\\n      )\\n    ).position(\\n      new Position()\\n        .gravity(compass(\\&quot;center\\&quot;))\\n        .offsetX(-20)\\n        .offsetY(20)\\n    )\\n  )\\n  .overlay(\\n    source(\\n      image(\\&quot;balloon\\&quot;).transformation(\\n        new Transformation()\\n          .resize(scale().width(30))\\n          .rotate(byAngle(5))\\n          .adjust(hue().level(-20))\\n      )\\n    ).position(new Position().offsetX(30).offsetY(5))\\n  );&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;coffee_cup.jpg\\&quot;)\\n  .resize(\\n    fill()\\n      .width(400)\\n      .height(250)\\n      .gravity(compass(\\&quot;south\\&quot;))\\n  )\\n  .overlay(\\n    source(\\n      image(\\&quot;nice_couple\\&quot;).transformation(\\n        new Transformation()\\n          .resize(\\n            crop()\\n              .width(1.3)\\n              .height(1.3)\\n              .gravity(focusOn(faces()))\\n              .regionRelative()\\n          )\\n          .adjust(saturation().level(50))\\n          .effect(vignette())\\n          .resize(scale().width(100))\\n          .roundCorners(max())\\n      )\\n    ).position(\\n      new Position()\\n        .gravity(compass(\\&quot;center\\&quot;))\\n        .offsetX(-20)\\n        .offsetY(20)\\n    )\\n  )\\n  .overlay(\\n    source(\\n      image(\\&quot;balloon\\&quot;).transformation(\\n        new Transformation()\\n          .resize(scale().width(30))\\n          .rotate(byAngle(5))\\n          .adjust(hue().level(-20))\\n      )\\n    ).position(new Position().offsetX(30).offsetY(5))\\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;coffee_cup.jpg\\&quot; &gt; &lt;cl-transformation width=\\&quot;400\\&quot; height=\\&quot;250\\&quot; gravity=\\&quot;south\\&quot; crop=\\&quot;fill\\&quot;&gt; &lt;\\\/cl-transformation&gt; &lt;cl-transformation overlay=\\&quot;nice_couple\\&quot; width=\\&quot;1.3\\&quot; height=\\&quot;1.3\\&quot; gravity=\\&quot;faces\\&quot; flags=\\&quot;region_relative\\&quot; crop=\\&quot;crop\\&quot;&gt; &lt;\\\/cl-transformation&gt; &lt;cl-transformation effect=\\&quot;saturation:50\\&quot;&gt; &lt;\\\/cl-transformation&gt; &lt;cl-transformation effect=\\&quot;vignette\\&quot;&gt; &lt;\\\/cl-transformation&gt; &lt;cl-transformation flags=\\&quot;layer_apply\\&quot; width=\\&quot;100\\&quot; radius=\\&quot;max\\&quot; gravity=\\&quot;center\\&quot; y=\\&quot;20\\&quot; x=\\&quot;-20\\&quot; crop=\\&quot;scale\\&quot;&gt; &lt;\\\/cl-transformation&gt; &lt;cl-transformation overlay=\\&quot;balloon\\&quot; width=\\&quot;30\\&quot;&gt; &lt;\\\/cl-transformation&gt; &lt;cl-transformation effect=\\&quot;hue:-20\\&quot; angle=\\&quot;5\\&quot;&gt; &lt;\\\/cl-transformation&gt; &lt;cl-transformation flags=\\&quot;layer_apply\\&quot; x=\\&quot;30\\&quot; y=\\&quot;5\\&quot;&gt; &lt;\\\/cl-transformation&gt; &lt;\\\/cl-image&gt;&quot;,&quot;codeSnippet&quot;:&quot;&lt;cl-image public-id=\\&quot;coffee_cup.jpg\\&quot; &gt;\\n\\t&lt;cl-transformation width=\\&quot;400\\&quot; height=\\&quot;250\\&quot; gravity=\\&quot;south\\&quot; crop=\\&quot;fill\\&quot;&gt;\\n\\t&lt;\\\/cl-transformation&gt;\\n\\t&lt;cl-transformation overlay=\\&quot;nice_couple\\&quot; width=\\&quot;1.3\\&quot; height=\\&quot;1.3\\&quot; gravity=\\&quot;faces\\&quot; flags=\\&quot;region_relative\\&quot; crop=\\&quot;crop\\&quot;&gt;\\n\\t&lt;\\\/cl-transformation&gt;\\n\\t&lt;cl-transformation effect=\\&quot;saturation:50\\&quot;&gt;\\n\\t&lt;\\\/cl-transformation&gt;\\n\\t&lt;cl-transformation effect=\\&quot;vignette\\&quot;&gt;\\n\\t&lt;\\\/cl-transformation&gt;\\n\\t&lt;cl-transformation flags=\\&quot;layer_apply\\&quot; width=\\&quot;100\\&quot; radius=\\&quot;max\\&quot; gravity=\\&quot;center\\&quot; y=\\&quot;20\\&quot; x=\\&quot;-20\\&quot; crop=\\&quot;scale\\&quot;&gt;\\n\\t&lt;\\\/cl-transformation&gt;\\n\\t&lt;cl-transformation overlay=\\&quot;balloon\\&quot; width=\\&quot;30\\&quot;&gt;\\n\\t&lt;\\\/cl-transformation&gt;\\n\\t&lt;cl-transformation effect=\\&quot;hue:-20\\&quot; angle=\\&quot;5\\&quot;&gt;\\n\\t&lt;\\\/cl-transformation&gt;\\n\\t&lt;cl-transformation flags=\\&quot;layer_apply\\&quot; x=\\&quot;30\\&quot; y=\\&quot;5\\&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;coffee_cup.jpg\\&quot;)\\n  .resize(\\n    fill()\\n      .width(400)\\n      .height(250)\\n      .gravity(compass(\\&quot;south\\&quot;))\\n  )\\n  .overlay(\\n    source(\\n      image(\\&quot;nice_couple\\&quot;).transformation(\\n        new Transformation()\\n          .resize(\\n            crop()\\n              .width(1.3)\\n              .height(1.3)\\n              .gravity(focusOn(faces()))\\n              .regionRelative()\\n          )\\n          .adjust(saturation().level(50))\\n          .effect(vignette())\\n          .resize(scale().width(100))\\n          .roundCorners(max())\\n      )\\n    ).position(\\n      new Position()\\n        .gravity(compass(\\&quot;center\\&quot;))\\n        .offsetX(-20)\\n        .offsetY(20)\\n    )\\n  )\\n  .overlay(\\n    source(\\n      image(\\&quot;balloon\\&quot;).transformation(\\n        new Transformation()\\n          .resize(scale().width(30))\\n          .rotate(byAngle(5))\\n          .adjust(hue().level(-20))\\n      )\\n    ).position(new Position().offsetX(30).offsetY(5))\\n  );&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;coffee_cup.jpg\\&quot;)\\n  .resize(\\n    fill()\\n      .width(400)\\n      .height(250)\\n      .gravity(compass(\\&quot;south\\&quot;))\\n  )\\n  .overlay(\\n    source(\\n      image(\\&quot;nice_couple\\&quot;).transformation(\\n        new Transformation()\\n          .resize(\\n            crop()\\n              .width(1.3)\\n              .height(1.3)\\n              .gravity(focusOn(faces()))\\n              .regionRelative()\\n          )\\n          .adjust(saturation().level(50))\\n          .effect(vignette())\\n          .resize(scale().width(100))\\n          .roundCorners(max())\\n      )\\n    ).position(\\n      new Position()\\n        .gravity(compass(\\&quot;center\\&quot;))\\n        .offsetX(-20)\\n        .offsetY(20)\\n    )\\n  )\\n  .overlay(\\n    source(\\n      image(\\&quot;balloon\\&quot;).transformation(\\n        new Transformation()\\n          .resize(scale().width(30))\\n          .rotate(byAngle(5))\\n          .adjust(hue().level(-20))\\n      )\\n    ).position(new Position().offsetX(30).offsetY(5))\\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;coffee_cup.jpg&#039;, {transformation: [ {width: 400, height: 250, gravity: \\&quot;south\\&quot;, crop: \\&quot;fill\\&quot;}, {overlay: new cloudinary.Layer().publicId(\\&quot;nice_couple\\&quot;), width: \\&quot;1.3\\&quot;, height: \\&quot;1.3\\&quot;, gravity: \\&quot;faces\\&quot;, flags: \\&quot;region_relative\\&quot;, crop: \\&quot;crop\\&quot;}, {effect: \\&quot;saturation:50\\&quot;}, {effect: \\&quot;vignette\\&quot;}, {flags: \\&quot;layer_apply\\&quot;, width: 100, radius: \\&quot;max\\&quot;, gravity: \\&quot;center\\&quot;, y: 20, x: -20, crop: \\&quot;scale\\&quot;}, {overlay: new cloudinary.Layer().publicId(\\&quot;balloon\\&quot;), width: 30}, {effect: \\&quot;hue:-20\\&quot;, angle: 5}, {flags: \\&quot;layer_apply\\&quot;, x: 30, y: 5} ]}).toHtml();&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.imageTag(&#039;coffee_cup.jpg&#039;, {transformation: [\\n  {width: 400, height: 250, gravity: \\&quot;south\\&quot;, crop: \\&quot;fill\\&quot;},\\n  {overlay: new cloudinary.Layer().publicId(\\&quot;nice_couple\\&quot;), width: \\&quot;1.3\\&quot;, height: \\&quot;1.3\\&quot;, gravity: \\&quot;faces\\&quot;, flags: \\&quot;region_relative\\&quot;, crop: \\&quot;crop\\&quot;},\\n  {effect: \\&quot;saturation:50\\&quot;},\\n  {effect: \\&quot;vignette\\&quot;},\\n  {flags: \\&quot;layer_apply\\&quot;, width: 100, radius: \\&quot;max\\&quot;, gravity: \\&quot;center\\&quot;, y: 20, x: -20, crop: \\&quot;scale\\&quot;},\\n  {overlay: new cloudinary.Layer().publicId(\\&quot;balloon\\&quot;), width: 30},\\n  {effect: \\&quot;hue:-20\\&quot;, angle: 5},\\n  {flags: \\&quot;layer_apply\\&quot;, x: 30, y: 5}\\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;coffee_cup.jpg\\&quot;).image(transformation=[ {&#039;width&#039;: 400, &#039;height&#039;: 250, &#039;gravity&#039;: \\&quot;south\\&quot;, &#039;crop&#039;: \\&quot;fill\\&quot;}, {&#039;overlay&#039;: \\&quot;nice_couple\\&quot;, &#039;width&#039;: \\&quot;1.3\\&quot;, &#039;height&#039;: \\&quot;1.3\\&quot;, &#039;gravity&#039;: \\&quot;faces\\&quot;, &#039;flags&#039;: \\&quot;region_relative\\&quot;, &#039;crop&#039;: \\&quot;crop\\&quot;}, {&#039;effect&#039;: \\&quot;saturation:50\\&quot;}, {&#039;effect&#039;: \\&quot;vignette\\&quot;}, {&#039;flags&#039;: \\&quot;layer_apply\\&quot;, &#039;width&#039;: 100, &#039;radius&#039;: \\&quot;max\\&quot;, &#039;gravity&#039;: \\&quot;center\\&quot;, &#039;y&#039;: 20, &#039;x&#039;: -20, &#039;crop&#039;: \\&quot;scale\\&quot;}, {&#039;overlay&#039;: \\&quot;balloon\\&quot;, &#039;width&#039;: 30}, {&#039;effect&#039;: \\&quot;hue:-20\\&quot;, &#039;angle&#039;: 5}, {&#039;flags&#039;: \\&quot;layer_apply\\&quot;, &#039;x&#039;: 30, &#039;y&#039;: 5} ])&quot;,&quot;codeSnippet&quot;:&quot;CloudinaryImage(\\&quot;coffee_cup.jpg\\&quot;).image(transformation=[\\n  {&#039;width&#039;: 400, &#039;height&#039;: 250, &#039;gravity&#039;: \\&quot;south\\&quot;, &#039;crop&#039;: \\&quot;fill\\&quot;},\\n  {&#039;overlay&#039;: \\&quot;nice_couple\\&quot;, &#039;width&#039;: \\&quot;1.3\\&quot;, &#039;height&#039;: \\&quot;1.3\\&quot;, &#039;gravity&#039;: \\&quot;faces\\&quot;, &#039;flags&#039;: \\&quot;region_relative\\&quot;, &#039;crop&#039;: \\&quot;crop\\&quot;},\\n  {&#039;effect&#039;: \\&quot;saturation:50\\&quot;},\\n  {&#039;effect&#039;: \\&quot;vignette\\&quot;},\\n  {&#039;flags&#039;: \\&quot;layer_apply\\&quot;, &#039;width&#039;: 100, &#039;radius&#039;: \\&quot;max\\&quot;, &#039;gravity&#039;: \\&quot;center\\&quot;, &#039;y&#039;: 20, &#039;x&#039;: -20, &#039;crop&#039;: \\&quot;scale\\&quot;},\\n  {&#039;overlay&#039;: \\&quot;balloon\\&quot;, &#039;width&#039;: 30},\\n  {&#039;effect&#039;: \\&quot;hue:-20\\&quot;, &#039;angle&#039;: 5},\\n  {&#039;flags&#039;: \\&quot;layer_apply\\&quot;, &#039;x&#039;: 30, &#039;y&#039;: 5}\\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;coffee_cup.jpg&#039;))\\n\\t-&gt;resize(Resize::fill()-&gt;width(400)\\n-&gt;height(250)\\n\\t-&gt;gravity(\\n\\tGravity::compass(\\n\\tCompass::south()))\\n\\t)\\n\\t-&gt;overlay(Overlay::source(\\n\\tSource::image(\\&quot;nice_couple\\&quot;)\\n\\t-&gt;transformation((new Transformation())\\n\\t-&gt;resize(Resize::crop()-&gt;width(1.3)\\n-&gt;height(1.3)\\n\\t-&gt;gravity(\\n\\tGravity::focusOn(\\n\\tFocusOn::faces()))\\n\\t-&gt;regionRelative()\\n\\t)\\n\\t-&gt;adjust(Adjust::saturation()-&gt;level(50))\\n\\t-&gt;effect(Effect::vignette())\\n\\t-&gt;resize(Resize::scale()-&gt;width(100))\\n\\t-&gt;roundCorners(RoundCorners::max()))\\n\\t)\\n\\t-&gt;position((new Position())\\n\\t-&gt;gravity(\\n\\tGravity::compass(\\n\\tCompass::center()))\\n-&gt;offsetX(-20)\\n-&gt;offsetY(20))\\n\\t)\\n\\t-&gt;overlay(Overlay::source(\\n\\tSource::image(\\&quot;balloon\\&quot;)\\n\\t-&gt;transformation((new Transformation())\\n\\t-&gt;resize(Resize::scale()-&gt;width(30))\\n\\t-&gt;rotate(Rotate::byAngle(5))\\n\\t-&gt;adjust(Adjust::hue()-&gt;level(-20)))\\n\\t)\\n\\t-&gt;position((new Position())-&gt;offsetX(30)\\n-&gt;offsetY(5))\\n\\t);&quot;,&quot;codeSnippet&quot;:&quot;(new ImageTag(&#039;coffee_cup.jpg&#039;))\\n\\t-&gt;resize(Resize::fill()-&gt;width(400)\\n-&gt;height(250)\\n\\t-&gt;gravity(\\n\\tGravity::compass(\\n\\tCompass::south()))\\n\\t)\\n\\t-&gt;overlay(Overlay::source(\\n\\tSource::image(\\&quot;nice_couple\\&quot;)\\n\\t-&gt;transformation((new Transformation())\\n\\t-&gt;resize(Resize::crop()-&gt;width(1.3)\\n-&gt;height(1.3)\\n\\t-&gt;gravity(\\n\\tGravity::focusOn(\\n\\tFocusOn::faces()))\\n\\t-&gt;regionRelative()\\n\\t)\\n\\t-&gt;adjust(Adjust::saturation()-&gt;level(50))\\n\\t-&gt;effect(Effect::vignette())\\n\\t-&gt;resize(Resize::scale()-&gt;width(100))\\n\\t-&gt;roundCorners(RoundCorners::max()))\\n\\t)\\n\\t-&gt;position((new Position())\\n\\t-&gt;gravity(\\n\\tGravity::compass(\\n\\tCompass::center()))\\n-&gt;offsetX(-20)\\n-&gt;offsetY(20))\\n\\t)\\n\\t-&gt;overlay(Overlay::source(\\n\\tSource::image(\\&quot;balloon\\&quot;)\\n\\t-&gt;transformation((new Transformation())\\n\\t-&gt;resize(Resize::scale()-&gt;width(30))\\n\\t-&gt;rotate(Rotate::byAngle(5))\\n\\t-&gt;adjust(Adjust::hue()-&gt;level(-20)))\\n\\t)\\n\\t-&gt;position((new Position())-&gt;offsetX(30)\\n-&gt;offsetY(5))\\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;coffee_cup.jpg\\&quot;, array(\\&quot;transformation\\&quot;=&gt;array( array(\\&quot;width\\&quot;=&gt;400, \\&quot;height\\&quot;=&gt;250, \\&quot;gravity\\&quot;=&gt;\\&quot;south\\&quot;, \\&quot;crop\\&quot;=&gt;\\&quot;fill\\&quot;), array(\\&quot;overlay\\&quot;=&gt;\\&quot;nice_couple\\&quot;, \\&quot;width\\&quot;=&gt;\\&quot;1.3\\&quot;, \\&quot;height\\&quot;=&gt;\\&quot;1.3\\&quot;, \\&quot;gravity\\&quot;=&gt;\\&quot;faces\\&quot;, \\&quot;flags\\&quot;=&gt;\\&quot;region_relative\\&quot;, \\&quot;crop\\&quot;=&gt;\\&quot;crop\\&quot;), array(\\&quot;effect\\&quot;=&gt;\\&quot;saturation:50\\&quot;), array(\\&quot;effect\\&quot;=&gt;\\&quot;vignette\\&quot;), array(\\&quot;flags\\&quot;=&gt;\\&quot;layer_apply\\&quot;, \\&quot;width\\&quot;=&gt;100, \\&quot;radius\\&quot;=&gt;\\&quot;max\\&quot;, \\&quot;gravity\\&quot;=&gt;\\&quot;center\\&quot;, \\&quot;y\\&quot;=&gt;20, \\&quot;x\\&quot;=&gt;-20, \\&quot;crop\\&quot;=&gt;\\&quot;scale\\&quot;), array(\\&quot;overlay\\&quot;=&gt;\\&quot;balloon\\&quot;, \\&quot;width\\&quot;=&gt;30), array(\\&quot;effect\\&quot;=&gt;\\&quot;hue:-20\\&quot;, \\&quot;angle\\&quot;=&gt;5), array(\\&quot;flags\\&quot;=&gt;\\&quot;layer_apply\\&quot;, \\&quot;x\\&quot;=&gt;30, \\&quot;y\\&quot;=&gt;5) )))&quot;,&quot;codeSnippet&quot;:&quot;cl_image_tag(\\&quot;coffee_cup.jpg\\&quot;, array(\\&quot;transformation\\&quot;=&gt;array(\\n  array(\\&quot;width\\&quot;=&gt;400, \\&quot;height\\&quot;=&gt;250, \\&quot;gravity\\&quot;=&gt;\\&quot;south\\&quot;, \\&quot;crop\\&quot;=&gt;\\&quot;fill\\&quot;),\\n  array(\\&quot;overlay\\&quot;=&gt;\\&quot;nice_couple\\&quot;, \\&quot;width\\&quot;=&gt;\\&quot;1.3\\&quot;, \\&quot;height\\&quot;=&gt;\\&quot;1.3\\&quot;, \\&quot;gravity\\&quot;=&gt;\\&quot;faces\\&quot;, \\&quot;flags\\&quot;=&gt;\\&quot;region_relative\\&quot;, \\&quot;crop\\&quot;=&gt;\\&quot;crop\\&quot;),\\n  array(\\&quot;effect\\&quot;=&gt;\\&quot;saturation:50\\&quot;),\\n  array(\\&quot;effect\\&quot;=&gt;\\&quot;vignette\\&quot;),\\n  array(\\&quot;flags\\&quot;=&gt;\\&quot;layer_apply\\&quot;, \\&quot;width\\&quot;=&gt;100, \\&quot;radius\\&quot;=&gt;\\&quot;max\\&quot;, \\&quot;gravity\\&quot;=&gt;\\&quot;center\\&quot;, \\&quot;y\\&quot;=&gt;20, \\&quot;x\\&quot;=&gt;-20, \\&quot;crop\\&quot;=&gt;\\&quot;scale\\&quot;),\\n  array(\\&quot;overlay\\&quot;=&gt;\\&quot;balloon\\&quot;, \\&quot;width\\&quot;=&gt;30),\\n  array(\\&quot;effect\\&quot;=&gt;\\&quot;hue:-20\\&quot;, \\&quot;angle\\&quot;=&gt;5),\\n  array(\\&quot;flags\\&quot;=&gt;\\&quot;layer_apply\\&quot;, \\&quot;x\\&quot;=&gt;30, \\&quot;y\\&quot;=&gt;5)\\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(400).height(250).gravity(\\&quot;south\\&quot;).crop(\\&quot;fill\\&quot;).chain() .overlay(new Layer().publicId(\\&quot;nice_couple\\&quot;)).width(1.3).height(1.3).gravity(\\&quot;faces\\&quot;).flags(\\&quot;region_relative\\&quot;).crop(\\&quot;crop\\&quot;).chain() .effect(\\&quot;saturation:50\\&quot;).chain() .effect(\\&quot;vignette\\&quot;).chain() .flags(\\&quot;layer_apply\\&quot;).width(100).radius(\\&quot;max\\&quot;).gravity(\\&quot;center\\&quot;).y(20).x(-20).crop(\\&quot;scale\\&quot;).chain() .overlay(new Layer().publicId(\\&quot;balloon\\&quot;)).width(30).chain() .effect(\\&quot;hue:-20\\&quot;).angle(5).chain() .flags(\\&quot;layer_apply\\&quot;).x(30).y(5)).imageTag(\\&quot;coffee_cup.jpg\\&quot;);&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.url().transformation(new Transformation()\\n  .width(400).height(250).gravity(\\&quot;south\\&quot;).crop(\\&quot;fill\\&quot;).chain()\\n  .overlay(new Layer().publicId(\\&quot;nice_couple\\&quot;)).width(1.3).height(1.3).gravity(\\&quot;faces\\&quot;).flags(\\&quot;region_relative\\&quot;).crop(\\&quot;crop\\&quot;).chain()\\n  .effect(\\&quot;saturation:50\\&quot;).chain()\\n  .effect(\\&quot;vignette\\&quot;).chain()\\n  .flags(\\&quot;layer_apply\\&quot;).width(100).radius(\\&quot;max\\&quot;).gravity(\\&quot;center\\&quot;).y(20).x(-20).crop(\\&quot;scale\\&quot;).chain()\\n  .overlay(new Layer().publicId(\\&quot;balloon\\&quot;)).width(30).chain()\\n  .effect(\\&quot;hue:-20\\&quot;).angle(5).chain()\\n  .flags(\\&quot;layer_apply\\&quot;).x(30).y(5)).imageTag(\\&quot;coffee_cup.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;coffee_cup.jpg\\&quot;, transformation: [ {width: 400, height: 250, gravity: \\&quot;south\\&quot;, crop: \\&quot;fill\\&quot;}, {overlay: \\&quot;nice_couple\\&quot;, width: 1.3, height: 1.3, gravity: \\&quot;faces\\&quot;, flags: \\&quot;region_relative\\&quot;, crop: \\&quot;crop\\&quot;}, {effect: \\&quot;saturation:50\\&quot;}, {effect: \\&quot;vignette\\&quot;}, {flags: \\&quot;layer_apply\\&quot;, width: 100, radius: \\&quot;max\\&quot;, gravity: \\&quot;center\\&quot;, y: 20, x: -20, crop: \\&quot;scale\\&quot;}, {overlay: \\&quot;balloon\\&quot;, width: 30}, {effect: \\&quot;hue:-20\\&quot;, angle: 5}, {flags: \\&quot;layer_apply\\&quot;, x: 30, y: 5} ])&quot;,&quot;codeSnippet&quot;:&quot;cl_image_tag(\\&quot;coffee_cup.jpg\\&quot;, transformation: [\\n  {width: 400, height: 250, gravity: \\&quot;south\\&quot;, crop: \\&quot;fill\\&quot;},\\n  {overlay: \\&quot;nice_couple\\&quot;, width: 1.3, height: 1.3, gravity: \\&quot;faces\\&quot;, flags: \\&quot;region_relative\\&quot;, crop: \\&quot;crop\\&quot;},\\n  {effect: \\&quot;saturation:50\\&quot;},\\n  {effect: \\&quot;vignette\\&quot;},\\n  {flags: \\&quot;layer_apply\\&quot;, width: 100, radius: \\&quot;max\\&quot;, gravity: \\&quot;center\\&quot;, y: 20, x: -20, crop: \\&quot;scale\\&quot;},\\n  {overlay: \\&quot;balloon\\&quot;, width: 30},\\n  {effect: \\&quot;hue:-20\\&quot;, angle: 5},\\n  {flags: \\&quot;layer_apply\\&quot;, x: 30, y: 5}\\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(400).Height(250).Gravity(\\&quot;south\\&quot;).Crop(\\&quot;fill\\&quot;).Chain() .Overlay(new Layer().PublicId(\\&quot;nice_couple\\&quot;)).Width(1.3).Height(1.3).Gravity(\\&quot;faces\\&quot;).Flags(\\&quot;region_relative\\&quot;).Crop(\\&quot;crop\\&quot;).Chain() .Effect(\\&quot;saturation:50\\&quot;).Chain() .Effect(\\&quot;vignette\\&quot;).Chain() .Flags(\\&quot;layer_apply\\&quot;).Width(100).Radius(\\&quot;max\\&quot;).Gravity(\\&quot;center\\&quot;).Y(20).X(-20).Crop(\\&quot;scale\\&quot;).Chain() .Overlay(new Layer().PublicId(\\&quot;balloon\\&quot;)).Width(30).Chain() .Effect(\\&quot;hue:-20\\&quot;).Angle(5).Chain() .Flags(\\&quot;layer_apply\\&quot;).X(30).Y(5)).BuildImageTag(\\&quot;coffee_cup.jpg\\&quot;)&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.Api.UrlImgUp.Transform(new Transformation()\\n  .Width(400).Height(250).Gravity(\\&quot;south\\&quot;).Crop(\\&quot;fill\\&quot;).Chain()\\n  .Overlay(new Layer().PublicId(\\&quot;nice_couple\\&quot;)).Width(1.3).Height(1.3).Gravity(\\&quot;faces\\&quot;).Flags(\\&quot;region_relative\\&quot;).Crop(\\&quot;crop\\&quot;).Chain()\\n  .Effect(\\&quot;saturation:50\\&quot;).Chain()\\n  .Effect(\\&quot;vignette\\&quot;).Chain()\\n  .Flags(\\&quot;layer_apply\\&quot;).Width(100).Radius(\\&quot;max\\&quot;).Gravity(\\&quot;center\\&quot;).Y(20).X(-20).Crop(\\&quot;scale\\&quot;).Chain()\\n  .Overlay(new Layer().PublicId(\\&quot;balloon\\&quot;)).Width(30).Chain()\\n  .Effect(\\&quot;hue:-20\\&quot;).Angle(5).Chain()\\n  .Flags(\\&quot;layer_apply\\&quot;).X(30).Y(5)).BuildImageTag(\\&quot;coffee_cup.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;coffee_cup.jpg&#039;).transformation(Transformation()\\n\\t.resize(Resize.fill().width(400)\\n.height(250)\\n\\t.gravity(\\n\\tGravity.compass(\\n\\tCompass.south()))\\n\\t)\\n\\t.overlay(Overlay.source(\\n\\tSource.image(\\&quot;nice_couple\\&quot;)\\n\\t.transformation(new Transformation()\\n\\t.resize(Resize.crop().width(1.3)\\n.height(1.3)\\n\\t.gravity(\\n\\tGravity.focusOn(\\n\\tFocusOn.faces()))\\n\\t.regionRelative()\\n\\t)\\n\\t.adjust(Adjust.saturation().level(50))\\n\\t.effect(Effect.vignette())\\n\\t.resize(Resize.scale().width(100))\\n\\t.roundCorners(RoundCorners.max()))\\n\\t)\\n\\t.position(Position()\\n\\t.gravity(\\n\\tGravity.compass(\\n\\tCompass.center()))\\n.offsetX(-20)\\n.offsetY(20))\\n\\t)\\n\\t.overlay(Overlay.source(\\n\\tSource.image(\\&quot;balloon\\&quot;)\\n\\t.transformation(new Transformation()\\n\\t.resize(Resize.scale().width(30))\\n\\t.rotate(Rotate.byAngle(5))\\n\\t.adjust(Adjust.hue().level(-20)))\\n\\t)\\n\\t.position(Position().offsetX(30)\\n.offsetY(5))\\n\\t));&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image(&#039;coffee_cup.jpg&#039;).transformation(Transformation()\\n\\t.resize(Resize.fill().width(400)\\n.height(250)\\n\\t.gravity(\\n\\tGravity.compass(\\n\\tCompass.south()))\\n\\t)\\n\\t.overlay(Overlay.source(\\n\\tSource.image(\\&quot;nice_couple\\&quot;)\\n\\t.transformation(new Transformation()\\n\\t.resize(Resize.crop().width(1.3)\\n.height(1.3)\\n\\t.gravity(\\n\\tGravity.focusOn(\\n\\tFocusOn.faces()))\\n\\t.regionRelative()\\n\\t)\\n\\t.adjust(Adjust.saturation().level(50))\\n\\t.effect(Effect.vignette())\\n\\t.resize(Resize.scale().width(100))\\n\\t.roundCorners(RoundCorners.max()))\\n\\t)\\n\\t.position(Position()\\n\\t.gravity(\\n\\tGravity.compass(\\n\\tCompass.center()))\\n.offsetX(-20)\\n.offsetY(20))\\n\\t)\\n\\t.overlay(Overlay.source(\\n\\tSource.image(\\&quot;balloon\\&quot;)\\n\\t.transformation(new Transformation()\\n\\t.resize(Resize.scale().width(30))\\n\\t.rotate(Rotate.byAngle(5))\\n\\t.adjust(Adjust.hue().level(-20)))\\n\\t)\\n\\t.position(Position().offsetX(30)\\n.offsetY(5))\\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(400).setHeight(250).setGravity(\\&quot;south\\&quot;).setCrop(\\&quot;fill\\&quot;).chain() .setOverlay(\\&quot;nice_couple\\&quot;).setWidth(1.3).setHeight(1.3).setGravity(\\&quot;faces\\&quot;).setFlags(\\&quot;region_relative\\&quot;).setCrop(\\&quot;crop\\&quot;).chain() .setEffect(\\&quot;saturation:50\\&quot;).chain() .setEffect(\\&quot;vignette\\&quot;).chain() .setFlags(\\&quot;layer_apply\\&quot;).setWidth(100).setRadius(\\&quot;max\\&quot;).setGravity(\\&quot;center\\&quot;).setY(20).setX(-20).setCrop(\\&quot;scale\\&quot;).chain() .setOverlay(\\&quot;balloon\\&quot;).setWidth(30).chain() .setEffect(\\&quot;hue:-20\\&quot;).setAngle(5).chain() .setFlags(\\&quot;layer_apply\\&quot;).setX(30).setY(5)).generate(\\&quot;coffee_cup.jpg\\&quot;)!, cloudinary: cloudinary)&quot;,&quot;codeSnippet&quot;:&quot;imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation()\\n  .setWidth(400).setHeight(250).setGravity(\\&quot;south\\&quot;).setCrop(\\&quot;fill\\&quot;).chain()\\n  .setOverlay(\\&quot;nice_couple\\&quot;).setWidth(1.3).setHeight(1.3).setGravity(\\&quot;faces\\&quot;).setFlags(\\&quot;region_relative\\&quot;).setCrop(\\&quot;crop\\&quot;).chain()\\n  .setEffect(\\&quot;saturation:50\\&quot;).chain()\\n  .setEffect(\\&quot;vignette\\&quot;).chain()\\n  .setFlags(\\&quot;layer_apply\\&quot;).setWidth(100).setRadius(\\&quot;max\\&quot;).setGravity(\\&quot;center\\&quot;).setY(20).setX(-20).setCrop(\\&quot;scale\\&quot;).chain()\\n  .setOverlay(\\&quot;balloon\\&quot;).setWidth(30).chain()\\n  .setEffect(\\&quot;hue:-20\\&quot;).setAngle(5).chain()\\n  .setFlags(\\&quot;layer_apply\\&quot;).setX(30).setY(5)).generate(\\&quot;coffee_cup.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(400).height(250).gravity(\\&quot;south\\&quot;).crop(\\&quot;fill\\&quot;).chain() .overlay(new Layer().publicId(\\&quot;nice_couple\\&quot;)).width(1.3).height(1.3).gravity(\\&quot;faces\\&quot;).flags(\\&quot;region_relative\\&quot;).crop(\\&quot;crop\\&quot;).chain() .effect(\\&quot;saturation:50\\&quot;).chain() .effect(\\&quot;vignette\\&quot;).chain() .flags(\\&quot;layer_apply\\&quot;).width(100).radius(\\&quot;max\\&quot;).gravity(\\&quot;center\\&quot;).y(20).x(-20).crop(\\&quot;scale\\&quot;).chain() .overlay(new Layer().publicId(\\&quot;balloon\\&quot;)).width(30).chain() .effect(\\&quot;hue:-20\\&quot;).angle(5).chain() .flags(\\&quot;layer_apply\\&quot;).x(30).y(5)).generate(\\&quot;coffee_cup.jpg\\&quot;);&quot;,&quot;codeSnippet&quot;:&quot;MediaManager.get().url().transformation(new Transformation()\\n  .width(400).height(250).gravity(\\&quot;south\\&quot;).crop(\\&quot;fill\\&quot;).chain()\\n  .overlay(new Layer().publicId(\\&quot;nice_couple\\&quot;)).width(1.3).height(1.3).gravity(\\&quot;faces\\&quot;).flags(\\&quot;region_relative\\&quot;).crop(\\&quot;crop\\&quot;).chain()\\n  .effect(\\&quot;saturation:50\\&quot;).chain()\\n  .effect(\\&quot;vignette\\&quot;).chain()\\n  .flags(\\&quot;layer_apply\\&quot;).width(100).radius(\\&quot;max\\&quot;).gravity(\\&quot;center\\&quot;).y(20).x(-20).crop(\\&quot;scale\\&quot;).chain()\\n  .overlay(new Layer().publicId(\\&quot;balloon\\&quot;)).width(30).chain()\\n  .effect(\\&quot;hue:-20\\&quot;).angle(5).chain()\\n  .flags(\\&quot;layer_apply\\&quot;).x(30).y(5)).generate(\\&quot;coffee_cup.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;coffee_cup.jpg&#039;).transformation(Transformation()\\n\\t.resize(Resize.fill().width(400)\\n.height(250)\\n\\t.gravity(\\n\\tGravity.compass(\\n\\tCompass.south()))\\n\\t)\\n\\t.overlay(Overlay.source(\\n\\tSource.image(\\&quot;nice_couple\\&quot;)\\n\\t.transformation(new Transformation()\\n\\t.addTransformation())\\n\\t)\\n\\t.position(Position()\\n\\t.gravity(\\n\\tGravity.compass(\\n\\tCompass.center()))\\n.offsetX(-20)\\n.offsetY(20))\\n\\t)\\n\\t.overlay(Overlay.source(\\n\\tSource.image(\\&quot;balloon\\&quot;)\\n\\t.transformation(new Transformation()\\n\\t.resize(Resize.scale().width(30))\\n\\t.rotate(Rotate.byAngle(5))\\n\\t.adjust(Adjust.hue().level(-20)))\\n\\t)\\n\\t.position(Position().offsetX(30)\\n.offsetY(5))\\n\\t));&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image(&#039;coffee_cup.jpg&#039;).transformation(Transformation()\\n\\t.resize(Resize.fill().width(400)\\n.height(250)\\n\\t.gravity(\\n\\tGravity.compass(\\n\\tCompass.south()))\\n\\t)\\n\\t.overlay(Overlay.source(\\n\\tSource.image(\\&quot;nice_couple\\&quot;)\\n\\t.transformation(new Transformation()\\n\\t.addTransformation())\\n\\t)\\n\\t.position(Position()\\n\\t.gravity(\\n\\tGravity.compass(\\n\\tCompass.center()))\\n.offsetX(-20)\\n.offsetY(20))\\n\\t)\\n\\t.overlay(Overlay.source(\\n\\tSource.image(\\&quot;balloon\\&quot;)\\n\\t.transformation(new Transformation()\\n\\t.resize(Resize.scale().width(30))\\n\\t.rotate(Rotate.byAngle(5))\\n\\t.adjust(Adjust.hue().level(-20)))\\n\\t)\\n\\t.position(Position().offsetX(30)\\n.offsetY(5))\\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;coffee_cup.jpg\\&quot;)\\n\\t resize(Resize.fill() { width(400)\\n height(250)\\n\\t gravity(\\n\\tGravity.compass(\\n\\tCompass.south()))\\n\\t })\\n\\t overlay(Overlay.source(\\n\\tSource.image(\\&quot;nice_couple\\&quot;) {\\n\\t transformation(Transformation {\\n\\t resize(Resize.crop() { width(1.3F)\\n height(1.3F)\\n\\t gravity(\\n\\tGravity.focusOn(\\n\\tFocusOn.faces()))\\n\\t regionRelative()\\n\\t })\\n\\t adjust(Adjust.saturation() { level(50) })\\n\\t effect(Effect.vignette())\\n\\t resize(Resize.scale() { width(100) })\\n\\t roundCorners(RoundCorners.max()) })\\n\\t }) {\\n\\t position(Position() {\\n\\t gravity(\\n\\tGravity.compass(\\n\\tCompass.center()))\\n offsetX(-20)\\n offsetY(20) })\\n\\t })\\n\\t overlay(Overlay.source(\\n\\tSource.image(\\&quot;balloon\\&quot;) {\\n\\t transformation(Transformation {\\n\\t resize(Resize.scale() { width(30) })\\n\\t rotate(Rotate.byAngle(5))\\n\\t adjust(Adjust.hue() { level(-20) }) })\\n\\t }) {\\n\\t position(Position() { offsetX(30)\\n offsetY(5) })\\n\\t }) \\n}.generate()&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image {\\n\\tpublicId(\\&quot;coffee_cup.jpg\\&quot;)\\n\\t resize(Resize.fill() { width(400)\\n height(250)\\n\\t gravity(\\n\\tGravity.compass(\\n\\tCompass.south()))\\n\\t })\\n\\t overlay(Overlay.source(\\n\\tSource.image(\\&quot;nice_couple\\&quot;) {\\n\\t transformation(Transformation {\\n\\t resize(Resize.crop() { width(1.3F)\\n height(1.3F)\\n\\t gravity(\\n\\tGravity.focusOn(\\n\\tFocusOn.faces()))\\n\\t regionRelative()\\n\\t })\\n\\t adjust(Adjust.saturation() { level(50) })\\n\\t effect(Effect.vignette())\\n\\t resize(Resize.scale() { width(100) })\\n\\t roundCorners(RoundCorners.max()) })\\n\\t }) {\\n\\t position(Position() {\\n\\t gravity(\\n\\tGravity.compass(\\n\\tCompass.center()))\\n offsetX(-20)\\n offsetY(20) })\\n\\t })\\n\\t overlay(Overlay.source(\\n\\tSource.image(\\&quot;balloon\\&quot;) {\\n\\t transformation(Transformation {\\n\\t resize(Resize.scale() { width(30) })\\n\\t rotate(Rotate.byAngle(5))\\n\\t adjust(Adjust.hue() { level(-20) }) })\\n\\t }) {\\n\\t position(Position() { offsetX(30)\\n offsetY(5) })\\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;coffee_cup.jpg\\&quot;, {transformation: [ {width: 400, height: 250, gravity: \\&quot;south\\&quot;, crop: \\&quot;fill\\&quot;}, {overlay: new cloudinary.Layer().publicId(\\&quot;nice_couple\\&quot;), width: \\&quot;1.3\\&quot;, height: \\&quot;1.3\\&quot;, gravity: \\&quot;faces\\&quot;, flags: \\&quot;region_relative\\&quot;, crop: \\&quot;crop\\&quot;}, {effect: \\&quot;saturation:50\\&quot;}, {effect: \\&quot;vignette\\&quot;}, {flags: \\&quot;layer_apply\\&quot;, width: 100, radius: \\&quot;max\\&quot;, gravity: \\&quot;center\\&quot;, y: 20, x: -20, crop: \\&quot;scale\\&quot;}, {overlay: new cloudinary.Layer().publicId(\\&quot;balloon\\&quot;), width: 30}, {effect: \\&quot;hue:-20\\&quot;, angle: 5}, {flags: \\&quot;layer_apply\\&quot;, x: 30, y: 5} ]})&quot;,&quot;codeSnippet&quot;:&quot;$.cloudinary.image(\\&quot;coffee_cup.jpg\\&quot;, {transformation: [\\n  {width: 400, height: 250, gravity: \\&quot;south\\&quot;, crop: \\&quot;fill\\&quot;},\\n  {overlay: new cloudinary.Layer().publicId(\\&quot;nice_couple\\&quot;), width: \\&quot;1.3\\&quot;, height: \\&quot;1.3\\&quot;, gravity: \\&quot;faces\\&quot;, flags: \\&quot;region_relative\\&quot;, crop: \\&quot;crop\\&quot;},\\n  {effect: \\&quot;saturation:50\\&quot;},\\n  {effect: \\&quot;vignette\\&quot;},\\n  {flags: \\&quot;layer_apply\\&quot;, width: 100, radius: \\&quot;max\\&quot;, gravity: \\&quot;center\\&quot;, y: 20, x: -20, crop: \\&quot;scale\\&quot;},\\n  {overlay: new cloudinary.Layer().publicId(\\&quot;balloon\\&quot;), width: 30},\\n  {effect: \\&quot;hue:-20\\&quot;, angle: 5},\\n  {flags: \\&quot;layer_apply\\&quot;, x: 30, y: 5}\\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;coffee_cup.jpg\\&quot;)\\n  .resize(\\n    fill()\\n      .width(400)\\n      .height(250)\\n      .gravity(compass(\\&quot;south\\&quot;))\\n  )\\n  .overlay(\\n    source(\\n      image(\\&quot;nice_couple\\&quot;).transformation(\\n        new Transformation()\\n          .resize(\\n            crop()\\n              .width(1.3)\\n              .height(1.3)\\n              .gravity(focusOn(faces()))\\n              .regionRelative()\\n          )\\n          .adjust(saturation().level(50))\\n          .effect(vignette())\\n          .resize(scale().width(100))\\n          .roundCorners(max())\\n      )\\n    ).position(\\n      new Position()\\n        .gravity(compass(\\&quot;center\\&quot;))\\n        .offsetX(-20)\\n        .offsetY(20)\\n    )\\n  )\\n  .overlay(\\n    source(\\n      image(\\&quot;balloon\\&quot;).transformation(\\n        new Transformation()\\n          .resize(scale().width(30))\\n          .rotate(byAngle(5))\\n          .adjust(hue().level(-20))\\n      )\\n    ).position(new Position().offsetX(30).offsetY(5))\\n  );&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;coffee_cup.jpg\\&quot;)\\n  .resize(\\n    fill()\\n      .width(400)\\n      .height(250)\\n      .gravity(compass(\\&quot;south\\&quot;))\\n  )\\n  .overlay(\\n    source(\\n      image(\\&quot;nice_couple\\&quot;).transformation(\\n        new Transformation()\\n          .resize(\\n            crop()\\n              .width(1.3)\\n              .height(1.3)\\n              .gravity(focusOn(faces()))\\n              .regionRelative()\\n          )\\n          .adjust(saturation().level(50))\\n          .effect(vignette())\\n          .resize(scale().width(100))\\n          .roundCorners(max())\\n      )\\n    ).position(\\n      new Position()\\n        .gravity(compass(\\&quot;center\\&quot;))\\n        .offsetX(-20)\\n        .offsetY(20)\\n    )\\n  )\\n  .overlay(\\n    source(\\n      image(\\&quot;balloon\\&quot;).transformation(\\n        new Transformation()\\n          .resize(scale().width(30))\\n          .rotate(byAngle(5))\\n          .adjust(hue().level(-20))\\n      )\\n    ).position(new Position().offsetX(30).offsetY(5))\\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_400,h_250,c_fill,g_south\\\/l_nice_couple,w_1.3,h_1.3,g_faces,c_crop,fl_region_relative\\\/e_saturation:50\\\/e_vignette\\\/fl_layer_apply,w_100,r_max,g_center,y_20,x_-20\\\/l_balloon,w_30\\\/e_hue:-20,a_5\\\/fl_layer_apply,x_30,y_5\\\/coffee_cup.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;400&quot;,&quot;height&quot;:&quot;250&quot;,&quot;crop_mode&quot;:&quot;fill&quot;,&quot;gravity&quot;:&quot;south&quot;},{&quot;overlay&quot;:&quot;nice_couple&quot;,&quot;width&quot;:&quot;1.3&quot;,&quot;height&quot;:&quot;1.3&quot;,&quot;gravity&quot;:&quot;faces&quot;,&quot;crop_mode&quot;:&quot;crop&quot;,&quot;flags&quot;:&quot;region_relative&quot;},{&quot;effect&quot;:&quot;saturation:50&quot;},{&quot;effect&quot;:&quot;vignette&quot;},{&quot;flags&quot;:&quot;layer_apply&quot;,&quot;width&quot;:&quot;100&quot;,&quot;radius&quot;:&quot;max&quot;,&quot;gravity&quot;:&quot;center&quot;,&quot;y&quot;:&quot;20&quot;,&quot;x&quot;:&quot;-20&quot;},{&quot;overlay&quot;:&quot;balloon&quot;,&quot;width&quot;:&quot;30&quot;},{&quot;effect&quot;:&quot;hue:-20&quot;,&quot;angle&quot;:&quot;5&quot;},{&quot;flags&quot;:&quot;layer_apply&quot;,&quot;x&quot;:&quot;30&quot;,&quot;y&quot;:&quot;5&quot;}],&quot;transformation_string&quot;:&quot;w_400,h_250,c_fill,g_south\\\/l_nice_couple,w_1.3,h_1.3,g_faces,c_crop,fl_region_relative\\\/e_saturation:50\\\/e_vignette\\\/fl_layer_apply,w_100,r_max,g_center,y_20,x_-20\\\/l_balloon,w_30\\\/e_hue:-20,a_5\\\/fl_layer_apply,x_30,y_5&quot;,&quot;url_suffix&quot;:&quot;&quot;,&quot;version&quot;:&quot;&quot;,&quot;secure&quot;:true,&quot;public_id&quot;:&quot;coffee_cup.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_400,h_250,c_fill,g_south\/l_nice_couple,w_1.3,h_1.3,g_faces,c_crop,fl_region_relative\/e_saturation:50\/e_vignette\/fl_layer_apply,w_100,r_max,g_center,y_20,x_-20\/l_balloon,w_30\/e_hue:-20,a_5\/fl_layer_apply,x_30,y_5\/coffee_cup.jpg\" target=\"_blank\"><img decoding=\"async\" src=\"https:\/\/res.cloudinary.com\/demo\/image\/upload\/w_400,h_250,c_fill,g_south\/l_nice_couple,w_1.3,h_1.3,g_faces,c_crop,fl_region_relative\/e_saturation:50\/e_vignette\/fl_layer_apply,w_100,r_max,g_center,y_20,x_-20\/l_balloon,w_30\/e_hue:-20,a_5\/fl_layer_apply,x_30,y_5\/coffee_cup.jpg\" alt=\"Multiple overlays\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"400\" height=\"250\"\/><\/a><\/p>\n<h2 id=\"cloudinary\">Cloudinary: Much More than Image Overlays<\/h2> \n<p>Besides overlay capabilities for images and text, 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\/users\/register\/free\">sign up<\/a> for a free account.<\/p>\n<h2 id=\"css\">Check Out the Details of CSS Images<\/h2> \n<p>Want to learn more about CSS images? 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":22142,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_cloudinary_featured_overwrite":false,"footnotes":""},"categories":[1],"tags":[25,75,227],"class_list":["post-22141","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-asset-management","tag-css","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>Basic and Bonus CSS Image-Overlay Effects<\/title>\n<meta name=\"description\" content=\"Learn how to create CSS images overlays for compelling effects with a single codeline 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\/css_image_overlay_overlaying_text_and_images_for_visual_effect\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"CSS Image Overlay: Overlaying Text and Images for Visual Effect\" \/>\n<meta property=\"og:description\" content=\"Learn how to create CSS images overlays for compelling effects with a single codeline in Cloudinary.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/cloudinary.com\/blog\/css_image_overlay_overlaying_text_and_images_for_visual_effect\" \/>\n<meta property=\"og:site_name\" content=\"Cloudinary Blog\" \/>\n<meta property=\"article:published_time\" content=\"2021-07-26T20:23:17+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-02-09T02:15:20+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/v1649718781\/Web_Assets\/blog\/CSS-Image-Overlay_2214290345\/CSS-Image-Overlay_2214290345-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\/css_image_overlay_overlaying_text_and_images_for_visual_effect#article\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/css_image_overlay_overlaying_text_and_images_for_visual_effect\"},\"author\":{\"name\":\"\",\"@id\":\"\"},\"headline\":\"CSS Image Overlay: Overlaying Text and Images for Visual Effect\",\"datePublished\":\"2021-07-26T20:23:17+00:00\",\"dateModified\":\"2025-02-09T02:15:20+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/css_image_overlay_overlaying_text_and_images_for_visual_effect\"},\"wordCount\":10,\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/css_image_overlay_overlaying_text_and_images_for_visual_effect#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718781\/Web_Assets\/blog\/CSS-Image-Overlay_2214290345\/CSS-Image-Overlay_2214290345.jpg?_i=AA\",\"keywords\":[\"Asset Management\",\"CSS\",\"Performance Optimization\"],\"inLanguage\":\"en-US\",\"copyrightYear\":\"2021\",\"copyrightHolder\":{\"@id\":\"https:\/\/cloudinary.com\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/cloudinary.com\/blog\/css_image_overlay_overlaying_text_and_images_for_visual_effect\",\"url\":\"https:\/\/cloudinary.com\/blog\/css_image_overlay_overlaying_text_and_images_for_visual_effect\",\"name\":\"Basic and Bonus CSS Image-Overlay Effects\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/css_image_overlay_overlaying_text_and_images_for_visual_effect#primaryimage\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/css_image_overlay_overlaying_text_and_images_for_visual_effect#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718781\/Web_Assets\/blog\/CSS-Image-Overlay_2214290345\/CSS-Image-Overlay_2214290345.jpg?_i=AA\",\"datePublished\":\"2021-07-26T20:23:17+00:00\",\"dateModified\":\"2025-02-09T02:15:20+00:00\",\"description\":\"Learn how to create CSS images overlays for compelling effects with a single codeline in Cloudinary.\",\"breadcrumb\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/css_image_overlay_overlaying_text_and_images_for_visual_effect#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/cloudinary.com\/blog\/css_image_overlay_overlaying_text_and_images_for_visual_effect\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/css_image_overlay_overlaying_text_and_images_for_visual_effect#primaryimage\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718781\/Web_Assets\/blog\/CSS-Image-Overlay_2214290345\/CSS-Image-Overlay_2214290345.jpg?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718781\/Web_Assets\/blog\/CSS-Image-Overlay_2214290345\/CSS-Image-Overlay_2214290345.jpg?_i=AA\",\"width\":1540,\"height\":847},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/cloudinary.com\/blog\/css_image_overlay_overlaying_text_and_images_for_visual_effect#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/cloudinary.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"CSS Image Overlay: Overlaying Text and Images for Visual Effect\"}]},{\"@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":"Basic and Bonus CSS Image-Overlay Effects","description":"Learn how to create CSS images overlays for compelling effects with a single codeline 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\/css_image_overlay_overlaying_text_and_images_for_visual_effect","og_locale":"en_US","og_type":"article","og_title":"CSS Image Overlay: Overlaying Text and Images for Visual Effect","og_description":"Learn how to create CSS images overlays for compelling effects with a single codeline in Cloudinary.","og_url":"https:\/\/cloudinary.com\/blog\/css_image_overlay_overlaying_text_and_images_for_visual_effect","og_site_name":"Cloudinary Blog","article_published_time":"2021-07-26T20:23:17+00:00","article_modified_time":"2025-02-09T02:15:20+00:00","og_image":[{"width":1540,"height":847,"url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/v1649718781\/Web_Assets\/blog\/CSS-Image-Overlay_2214290345\/CSS-Image-Overlay_2214290345-jpg?_i=AA","type":"image\/jpeg"}],"twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"NewsArticle","@id":"https:\/\/cloudinary.com\/blog\/css_image_overlay_overlaying_text_and_images_for_visual_effect#article","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/css_image_overlay_overlaying_text_and_images_for_visual_effect"},"author":{"name":"","@id":""},"headline":"CSS Image Overlay: Overlaying Text and Images for Visual Effect","datePublished":"2021-07-26T20:23:17+00:00","dateModified":"2025-02-09T02:15:20+00:00","mainEntityOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/css_image_overlay_overlaying_text_and_images_for_visual_effect"},"wordCount":10,"publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/css_image_overlay_overlaying_text_and_images_for_visual_effect#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718781\/Web_Assets\/blog\/CSS-Image-Overlay_2214290345\/CSS-Image-Overlay_2214290345.jpg?_i=AA","keywords":["Asset Management","CSS","Performance Optimization"],"inLanguage":"en-US","copyrightYear":"2021","copyrightHolder":{"@id":"https:\/\/cloudinary.com\/#organization"}},{"@type":"WebPage","@id":"https:\/\/cloudinary.com\/blog\/css_image_overlay_overlaying_text_and_images_for_visual_effect","url":"https:\/\/cloudinary.com\/blog\/css_image_overlay_overlaying_text_and_images_for_visual_effect","name":"Basic and Bonus CSS Image-Overlay Effects","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/css_image_overlay_overlaying_text_and_images_for_visual_effect#primaryimage"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/css_image_overlay_overlaying_text_and_images_for_visual_effect#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718781\/Web_Assets\/blog\/CSS-Image-Overlay_2214290345\/CSS-Image-Overlay_2214290345.jpg?_i=AA","datePublished":"2021-07-26T20:23:17+00:00","dateModified":"2025-02-09T02:15:20+00:00","description":"Learn how to create CSS images overlays for compelling effects with a single codeline in Cloudinary.","breadcrumb":{"@id":"https:\/\/cloudinary.com\/blog\/css_image_overlay_overlaying_text_and_images_for_visual_effect#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/cloudinary.com\/blog\/css_image_overlay_overlaying_text_and_images_for_visual_effect"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/css_image_overlay_overlaying_text_and_images_for_visual_effect#primaryimage","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718781\/Web_Assets\/blog\/CSS-Image-Overlay_2214290345\/CSS-Image-Overlay_2214290345.jpg?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718781\/Web_Assets\/blog\/CSS-Image-Overlay_2214290345\/CSS-Image-Overlay_2214290345.jpg?_i=AA","width":1540,"height":847},{"@type":"BreadcrumbList","@id":"https:\/\/cloudinary.com\/blog\/css_image_overlay_overlaying_text_and_images_for_visual_effect#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/cloudinary.com\/blog\/"},{"@type":"ListItem","position":2,"name":"CSS Image Overlay: Overlaying Text and Images for Visual Effect"}]},{"@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\/v1649718781\/Web_Assets\/blog\/CSS-Image-Overlay_2214290345\/CSS-Image-Overlay_2214290345.jpg?_i=AA","_links":{"self":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/22141","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=22141"}],"version-history":[{"count":3,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/22141\/revisions"}],"predecessor-version":[{"id":36761,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/22141\/revisions\/36761"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media\/22142"}],"wp:attachment":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media?parent=22141"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/categories?post=22141"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/tags?post=22141"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}