{"id":21564,"date":"2017-07-24T17:44:20","date_gmt":"2017-07-24T17:44:20","guid":{"rendered":"http:\/\/chatbot_for_image_manipulation"},"modified":"2025-03-02T14:31:12","modified_gmt":"2025-03-02T22:31:12","slug":"chatbot_for_image_manipulation","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/chatbot_for_image_manipulation","title":{"rendered":"ChatBot Platform for Image Transformation"},"content":{"rendered":"<div class=\"wp-block-cloudinary-markdown \"><p><strong>Bots &#8211;<\/strong> which have been around for a long time and perform different functions &#8211; are gradually replacing traditional applications. Consider Internet bots, also known as web robots, as software applications that run automated tasks over the internet, such as crawling websites and indexing search engines. Slack, the popular business messaging service, also popularized the use of bots for almost anything, from tracking stand-ups and sending reminders, to activating continuous integration and different types of activities.<\/p>\n<p>Chatbots are the new trendy type of bots and they are becoming ubiquitous. Several organizations around the world are now taking advantage of chatbots to simulate conversations between users and computers. With chatbots, you can eliminate the need to have a human on the other end, for basic  customer enquiries or requests. Messaging platforms, such as WeChat and Facebook Messenger, are massive advocates of chatbots.<\/p>\n<h2>Enhancing Chatbots with Image Recognition and Generation Capabilities<\/h2>\n<p>While traditional chatbots have been effective in text-based interactions, the advent of visual chatbots marks a significant evolution. These advanced chatbots are not just limited to understanding text but can also comprehend images and videos. This capability is especially crucial in sectors like retail, where visual content plays a key role.<\/p>\n<p>Compared to other tools like Google Cloud Vision API or Azure AI Vision, Cloudinary stands out with its robust image transformation and analysis capabilities. While these services can identify objects, brands, or even faces in images, Cloudinary further recognizes these elements and allows users to transform images in real-time based on this recognition. This feature is handy for e-commerce platforms where images must be edited and optimized dynamically.<\/p>\n<h2>Integrating Image Responses in Cloudinary-Powered Chatbots<\/h2>\n<p>Users can easily integrate image responses in Cloudinary-powered chatbots. This process involves selecting an image response type within the bot, and Cloudinary\u2019s advanced editing tools allow for further customization, like cropping or adding text overlays. This feature surpasses the capabilities of Microsoft\u2019s Bing chatbot, offering more sophisticated and tailored image responses.<\/p>\n<p>Cloudinary\u2019s integration with advanced AI and machine learning services enables it to perform complex image analyses. This includes extracting visual features and performing content identification more refinedly than the Azure AI Vision Image Analysis service. Cloudinary\u2019s technology can be applied in various ways, from moderating content to enhancing user engagement through personalized image responses.<\/p>\n<h2>The Image Editing Chatbot Platform<\/h2>\n<p><img decoding=\"async\" src=\"https:\/\/cloudinary-res.cloudinary.com\/image\/upload\/w_700,c_fill\/dpr_auto\/Chatbot1.png\" alt=\"Chatbot screen\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"1400\" height=\"876\"\/><\/p>\n<p>The Image Editing Chatbot is a simple prototype\/experiment that can quickly solve your image editing challenges. Let\u2019s examine a scenario here to illustrate my point better:<\/p>\n<p>You work for an e-commerce store that has hundreds of images that are being delivered to different layouts, devices, screens and bandwidths. Manually creating these variants can be resource intensive and not scalable.<\/p>\n<p>However, creating multiple variants of an image being delivered across different layouts, devices and bandwidth using an image transformation chatbot could help. In fact, you can avoid taking on some tasks by simply assigning the URL of the deployed chatbot for others to use. One of the main resulting benefits is that non-technical folks can comfortably use it to solve their image editing challenges, as well.<\/p>\n<h2>Some Tech Required<\/h2>\n<p>Let\u2019s analyze the technology behind the chatbot platform.<\/p>\n<p>Before we start, you will want to clone the chatbot from GitHub.<\/p>\n<p>Follow the instructions on the <strong>README<\/strong> and execute the commands displayed on the repo in the right sequence. Are you having fun yet?<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/cloudinary-res.cloudinary.com\/image\/upload\/w_700,c_fill\/dpr_auto\/chatbot2.png\" alt=\"Chatbot screen\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"1400\" height=\"991\"\/><\/p>\n<p>I used the command <code>please overlay ACME logo at the south-west corner<\/code> and the resulting image was the previously uploaded image with <strong>ACME<\/strong> logo placed on it as specified in the command.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/cloudinary-res.cloudinary.com\/image\/upload\/w_700,c_fill\/dpr_auto\/chatbot3.png\" alt=\"Chatbot screen\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"1400\" height=\"991\"\/><\/p>\n<p>The first image is the original size of the uploaded image. I entered the command <code>please set the width to 500<\/code> and it immediately cropped the image and returned the smaller size.<\/p>\n<p>Easy, isn\u2019t it? Next, let\u2019s talk about the stack.<\/p>\n<p>The chatbot platform is built with:<\/p>\n<ul>\n<li>React &#8211; for building out the front-end of the image editing tool<\/li>\n<li>Node &#8211; for building the backend that interacts with the Cloudinary service for image editing<\/li>\n<li>Cloudinary &#8211; a cloud-based, end-to-end image and video management solution that enables uploads, storage, administration, image transformation and delivery<\/li>\n<li>\n<a href=\"https:\/\/www.pubnub.com\/\">PubNub<\/a> &#8211; a service for developing Real-time applications<\/li>\n<\/ul>\n<p>Now, let\u2019s go more in-depth. Open up the source code.<\/p>\n<p>Check out the <strong>src\/App.js<\/strong> file.<\/p>\n<pre class=\"js-syntax-highlighted\"><code>render() {\n        return (\n            &lt;div className=&quot;vbox fill&quot;&gt;\n                &lt;div className=&quot;scroll grow&quot; id=&quot;scroll&quot;&gt;\n                    {this.renderHistory()}\n                &lt;\/div&gt;\n                &lt;div className=&quot;hbox&quot;&gt;\n                    &lt;input ref='text' type=&quot;text&quot; className=&quot;grow&quot;\n                           value={this.state.currentText} onChange={this.textEdit.bind(this)}\n                           onKeyDown={this.textKeydown.bind(this)}\n                    \/&gt;\n                    &lt;button onClick={this.sendMessage.bind(this)}&gt;send&lt;\/button&gt;\n                    &lt;button onClick={this.showUploader.bind(this)}&gt;Upload Image&lt;\/button&gt;\n                &lt;\/div&gt;\n            &lt;\/div&gt;\n        );\n    }\n\n    showUploader() {\n        var cloudinary = window.cloudinary;\n        cloudinary.openUploadWidget({ cloud_name: 'pubnub', upload_preset: 'mcipauzl'},\n            (error, result) =&gt; {\n                console.log(error, result);\n                console.log(&quot;the upload path is&quot;, result[0].path);\n                ImageService.setImagePath(result[0].path);\n            });\n    }\n\n<\/code><\/pre>\n<p><strong>render()<\/strong> is responsible for displaying the <code>send<\/code>, <code>Upload Image<\/code> buttons and the history of messages sent in the <strong>chatbot<\/strong>.<\/p>\n<p><strong>showUploader()<\/strong> is responsible for calling the <a href=\"https:\/\/cloudinary.com\/documentation\/upload_widget\">Cloudinary upload widget<\/a>. Take a look at the image below:<\/p>\n<p><strong>Note:<\/strong> You can change the <code>cloud_name<\/code> and <code>upload_preset<\/code> to the credentials from <a href=\"https:\/\/cloudinary.com\/users\/login\">your Cloudinary dashboard<\/a>.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/cloudinary-res.cloudinary.com\/image\/upload\/w_700,c_fill\/dpr_auto\/Chatbot4.png\" alt=\"Upload Widget\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"1400\" height=\"991\"\/><\/p>\n<p>Check out the <strong>src\/ImageService.js<\/strong>.<\/p>\n<p>You can change the <strong>publishKey<\/strong> and <strong>subscribeKey<\/strong> values to the credentials from our <a href=\"https:\/\/www.pubnub.com\/\">PubNub<\/a> dashboard.<\/p>\n<p>The <strong>ImageService<\/strong> is responsible for communicating with <a href=\"https:\/\/www.pubnub.com\/\">PubNub<\/a> channels on setting and getting image paths in real time.<\/p>\n<p>Check out the src\/ParserService.js. The <strong>ParserService<\/strong> is a giant service responsible for analyzing keywords in the commands such as <code>upload<\/code>, <code>display<\/code>, <code>show<\/code>, <code>resize<\/code>, <code>reset<\/code>, <code>make<\/code>, <code>overlay<\/code> and processing it.<\/p>\n<pre class=\"js-syntax-highlighted\"><code>src\/ParserService.js\n\nif(command.action === 'overlay') {\n            console.log(&quot;doing an overlay&quot;);\n            var fname = command.target;\n            fname = &quot;sample&quot;;\n            var scale = 1.0;\n            scale = 0.2;\n            var grav = command.direction;\n            if(command.direction === 'southwest') {\n                grav = 'south_west';\n            }\n            transforms.push(&quot;l_&quot;+fname+&quot;,w_&quot;+scale+&quot;,g_&quot;+grav);\n        }\n<\/code><\/pre>\n<p>Taking the <code>overlay<\/code> action and applying the needed <a href=\"https:\/\/cloudinary.com\/documentation\/image_transformations\">Cloudinary transformation<\/a>.<\/p>\n<pre class=\"js-syntax-highlighted\"><code>\/\/apply the context\n        if(!context.format) context.format = 'jpg';\n        if(context.width) {\n            transforms.push(&quot;w_&quot;+context.width);\n        }\n        if(context.autoContrast) transforms.push(&quot;e_auto_contrast&quot;);\n        if(context.autoSharpen) transforms.push(&quot;e_sharpen&quot;);\n        if(context.crop) {\n            transforms.push(&quot;w_&quot;+context.width+&quot;,h_&quot;+context.width\n                +&quot;,c_fill,g_&quot;+context.gravity);\n        }\n\n        console.log(&quot;final context is&quot;,context);\n\n\n        \/\/generate the final url\n        var apiUrl = 'https:\/\/res.cloudinary.com\/' +\n            cloudName + '\/' + resource + '\/' + operation + '\/';\n        if(transforms.length &gt; 0) {\n            apiUrl += transforms.join(&quot;\/&quot;) + &quot;\/&quot;\n        }\n        var filename = context.path.substring(0,context.path.lastIndexOf('.'));\n        apiUrl += filename  + '.' + context.format;\n        return apiUrl;\n<\/code><\/pre>\n<p>It obtains the required <a href=\"https:\/\/davidwalsh.name\/cloudinary-named-transformations\">transformation parameters<\/a> and generates the Cloudinary URL with those parameters.<\/p>\n<p>The server.js is simply responsible for processing the commands from the frontend via the parser service and returning the right responses.<\/p>\n<h2>Cloudinary Transformations<\/h2>\n<p>Using Cloudinary, you can quickly and easily optimize your images, regardless of your programming language preference. Cloudinary automatically performs certain optimizations on all transformed images by default. Its integrated, fast CDN delivery also helps to get all the image resources to your users quickly.<\/p>\n<p>Let\u2019s explore some image transformation techniques and transformations that are effortless using Cloudinary:<\/p>\n<p><strong>Cropping:<\/strong>\n<cld-code-widget\n      class=\" c-code-widget\"\n      snippets=\"[{&quot;sdkId&quot;:&quot;nodejs&quot;,&quot;framework&quot;:&quot;nodejs&quot;,&quot;language&quot;:&quot;nodejs&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.image(\\&quot;lady.jpg\\&quot;, {width: 400, height: 400, crop: \\&quot;crop\\&quot;})&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image(\\&quot;lady.jpg\\&quot;, {width: 400, height: 400, crop: \\&quot;crop\\&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;lady.jpg\\&quot;).resize(crop().width(400).height(400));&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;lady.jpg\\&quot;).resize(crop().width(400).height(400));&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;lady.jpg\\&quot; &gt; &lt;Transformation width=\\&quot;400\\&quot; height=\\&quot;400\\&quot; crop=\\&quot;crop\\&quot; \\\/&gt; &lt;\\\/Image&gt;&quot;,&quot;codeSnippet&quot;:&quot;&lt;Image publicId=\\&quot;lady.jpg\\&quot; &gt;\\n\\t&lt;Transformation width=\\&quot;400\\&quot; height=\\&quot;400\\&quot; crop=\\&quot;crop\\&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;lady.jpg\\&quot;).resize(crop().width(400).height(400));&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;lady.jpg\\&quot;).resize(crop().width(400).height(400));&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;lady.jpg\\&quot; &gt; &lt;cld-transformation width=\\&quot;400\\&quot; height=\\&quot;400\\&quot; crop=\\&quot;crop\\&quot; \\\/&gt; &lt;\\\/cld-image&gt;&quot;,&quot;codeSnippet&quot;:&quot;&lt;cld-image public-id=\\&quot;lady.jpg\\&quot; &gt;\\n\\t&lt;cld-transformation width=\\&quot;400\\&quot; height=\\&quot;400\\&quot; crop=\\&quot;crop\\&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;lady.jpg\\&quot;).resize(crop().width(400).height(400));&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;lady.jpg\\&quot;).resize(crop().width(400).height(400));&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;lady.jpg\\&quot; &gt; &lt;cl-transformation width=\\&quot;400\\&quot; height=\\&quot;400\\&quot; crop=\\&quot;crop\\&quot;&gt; &lt;\\\/cl-transformation&gt; &lt;\\\/cl-image&gt;&quot;,&quot;codeSnippet&quot;:&quot;&lt;cl-image public-id=\\&quot;lady.jpg\\&quot; &gt;\\n\\t&lt;cl-transformation width=\\&quot;400\\&quot; height=\\&quot;400\\&quot; crop=\\&quot;crop\\&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;lady.jpg\\&quot;).resize(crop().width(400).height(400));&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;lady.jpg\\&quot;).resize(crop().width(400).height(400));&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;lady.jpg&#039;, {width: 400, height: 400, crop: \\&quot;crop\\&quot;}).toHtml();&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.imageTag(&#039;lady.jpg&#039;, {width: 400, height: 400, crop: \\&quot;crop\\&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;lady.jpg\\&quot;).image(width=400, height=400, crop=\\&quot;crop\\&quot;)&quot;,&quot;codeSnippet&quot;:&quot;CloudinaryImage(\\&quot;lady.jpg\\&quot;).image(width=400, height=400, crop=\\&quot;crop\\&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;lady.jpg&#039;))\\n\\t-&gt;resize(Resize::crop()-&gt;width(400)\\n-&gt;height(400));&quot;,&quot;codeSnippet&quot;:&quot;(new ImageTag(&#039;lady.jpg&#039;))\\n\\t-&gt;resize(Resize::crop()-&gt;width(400)\\n-&gt;height(400));&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;lady.jpg\\&quot;, array(\\&quot;width\\&quot;=&gt;400, \\&quot;height\\&quot;=&gt;400, \\&quot;crop\\&quot;=&gt;\\&quot;crop\\&quot;))&quot;,&quot;codeSnippet&quot;:&quot;cl_image_tag(\\&quot;lady.jpg\\&quot;, array(\\&quot;width\\&quot;=&gt;400, \\&quot;height\\&quot;=&gt;400, \\&quot;crop\\&quot;=&gt;\\&quot;crop\\&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().width(400).height(400).crop(\\&quot;crop\\&quot;)).imageTag(\\&quot;lady.jpg\\&quot;);&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.url().transformation(new Transformation().width(400).height(400).crop(\\&quot;crop\\&quot;)).imageTag(\\&quot;lady.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;lady.jpg\\&quot;, width: 400, height: 400, crop: \\&quot;crop\\&quot;)&quot;,&quot;codeSnippet&quot;:&quot;cl_image_tag(\\&quot;lady.jpg\\&quot;, width: 400, height: 400, crop: \\&quot;crop\\&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().Width(400).Height(400).Crop(\\&quot;crop\\&quot;)).BuildImageTag(\\&quot;lady.jpg\\&quot;)&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.Api.UrlImgUp.Transform(new Transformation().Width(400).Height(400).Crop(\\&quot;crop\\&quot;)).BuildImageTag(\\&quot;lady.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;lady.jpg&#039;).transformation(Transformation()\\n\\t.resize(Resize.crop().width(400)\\n.height(400)));&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image(&#039;lady.jpg&#039;).transformation(Transformation()\\n\\t.resize(Resize.crop().width(400)\\n.height(400)));&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(400).setCrop(\\&quot;crop\\&quot;)).generate(\\&quot;lady.jpg\\&quot;)!, cloudinary: cloudinary)&quot;,&quot;codeSnippet&quot;:&quot;imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setWidth(400).setHeight(400).setCrop(\\&quot;crop\\&quot;)).generate(\\&quot;lady.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(400).crop(\\&quot;crop\\&quot;)).generate(\\&quot;lady.jpg\\&quot;);&quot;,&quot;codeSnippet&quot;:&quot;MediaManager.get().url().transformation(new Transformation().width(400).height(400).crop(\\&quot;crop\\&quot;)).generate(\\&quot;lady.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;lady.jpg&#039;).transformation(Transformation()\\n\\t.resize(Resize.crop().width(400)\\n.height(400)));&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image(&#039;lady.jpg&#039;).transformation(Transformation()\\n\\t.resize(Resize.crop().width(400)\\n.height(400)));&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;lady.jpg\\&quot;)\\n\\t resize(Resize.crop() { width(400)\\n height(400) }) \\n}.generate()&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image {\\n\\tpublicId(\\&quot;lady.jpg\\&quot;)\\n\\t resize(Resize.crop() { width(400)\\n height(400) }) \\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;lady.jpg\\&quot;, {width: 400, height: 400, crop: \\&quot;crop\\&quot;})&quot;,&quot;codeSnippet&quot;:&quot;$.cloudinary.image(\\&quot;lady.jpg\\&quot;, {width: 400, height: 400, crop: \\&quot;crop\\&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;lady.jpg\\&quot;).resize(crop().width(400).height(400));&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;lady.jpg\\&quot;).resize(crop().width(400).height(400));&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_400,c_crop\\\/lady.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;400&quot;,&quot;crop_mode&quot;:&quot;crop&quot;}],&quot;transformation_string&quot;:&quot;w_400,h_400,c_crop&quot;,&quot;url_suffix&quot;:&quot;&quot;,&quot;version&quot;:&quot;&quot;,&quot;secure&quot;:true,&quot;public_id&quot;:&quot;lady.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_400,c_crop\/lady.jpg\" target=\"_blank\"><img decoding=\"async\" src=\"https:\/\/res.cloudinary.com\/demo\/image\/upload\/w_400,h_400,c_crop\/lady.jpg\" alt=\"lady\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"400\" height=\"400\"\/><\/a><\/p>\n<p><strong>Image overlay:<\/strong>\n<cld-code-widget\n      class=\" c-code-widget\"\n      snippets=\"[{&quot;sdkId&quot;:&quot;nodejs&quot;,&quot;framework&quot;:&quot;nodejs&quot;,&quot;language&quot;:&quot;nodejs&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.image(\\&quot;lady.jpg\\&quot;, {transformation: [ {width: 500, crop: \\&quot;scale\\&quot;}, {overlay: \\&quot;cloudinary_icon\\&quot;, width: \\&quot;0.9\\&quot;, gravity: \\&quot;south_east\\&quot;, opacity: 70, effect: \\&quot;brightness:50\\&quot;, crop: \\&quot;scale\\&quot;} ]})&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image(\\&quot;lady.jpg\\&quot;, {transformation: [\\n  {width: 500, crop: \\&quot;scale\\&quot;},\\n  {overlay: \\&quot;cloudinary_icon\\&quot;, width: \\&quot;0.9\\&quot;, gravity: \\&quot;south_east\\&quot;, opacity: 70, effect: \\&quot;brightness:50\\&quot;, crop: \\&quot;scale\\&quot;}\\n  ]})&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Node.js&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;},{&quot;sdkId&quot;:&quot;react_2&quot;,&quot;framework&quot;:&quot;react_2&quot;,&quot;language&quot;:&quot;react&quot;,&quot;rawCodeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;lady.jpg\\&quot;)\\n  .resize(scale().width(500))\\n  .overlay(\\n    source(\\n      image(\\&quot;cloudinary_icon\\&quot;).transformation(\\n        new Transformation()\\n          .resize(scale().width(0.9))\\n          .adjust(opacity(70))\\n          .adjust(brightness().level(50))\\n      )\\n    ).position(new Position().gravity(compass(\\&quot;south_east\\&quot;)))\\n  );&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;lady.jpg\\&quot;)\\n  .resize(scale().width(500))\\n  .overlay(\\n    source(\\n      image(\\&quot;cloudinary_icon\\&quot;).transformation(\\n        new Transformation()\\n          .resize(scale().width(0.9))\\n          .adjust(opacity(70))\\n          .adjust(brightness().level(50))\\n      )\\n    ).position(new Position().gravity(compass(\\&quot;south_east\\&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;lady.jpg\\&quot; &gt; &lt;Transformation width=\\&quot;500\\&quot; crop=\\&quot;scale\\&quot; \\\/&gt; &lt;Transformation overlay=\\&quot;cloudinary_icon\\&quot; width=\\&quot;0.9\\&quot; gravity=\\&quot;south_east\\&quot; opacity=\\&quot;70\\&quot; effect=\\&quot;brightness:50\\&quot; crop=\\&quot;scale\\&quot; \\\/&gt; &lt;\\\/Image&gt;&quot;,&quot;codeSnippet&quot;:&quot;&lt;Image publicId=\\&quot;lady.jpg\\&quot; &gt;\\n\\t&lt;Transformation width=\\&quot;500\\&quot; crop=\\&quot;scale\\&quot; \\\/&gt;\\n\\t&lt;Transformation overlay=\\&quot;cloudinary_icon\\&quot; width=\\&quot;0.9\\&quot; gravity=\\&quot;south_east\\&quot; opacity=\\&quot;70\\&quot; effect=\\&quot;brightness:50\\&quot; crop=\\&quot;scale\\&quot; \\\/&gt;\\n&lt;\\\/Image&gt;&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;React&quot;,&quot;packageName&quot;:&quot;cloudinary-react&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;vue_2&quot;,&quot;framework&quot;:&quot;vue_2&quot;,&quot;language&quot;:&quot;vue&quot;,&quot;rawCodeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;lady.jpg\\&quot;)\\n  .resize(scale().width(500))\\n  .overlay(\\n    source(\\n      image(\\&quot;cloudinary_icon\\&quot;).transformation(\\n        new Transformation()\\n          .resize(scale().width(0.9))\\n          .adjust(opacity(70))\\n          .adjust(brightness().level(50))\\n      )\\n    ).position(new Position().gravity(compass(\\&quot;south_east\\&quot;)))\\n  );&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;lady.jpg\\&quot;)\\n  .resize(scale().width(500))\\n  .overlay(\\n    source(\\n      image(\\&quot;cloudinary_icon\\&quot;).transformation(\\n        new Transformation()\\n          .resize(scale().width(0.9))\\n          .adjust(opacity(70))\\n          .adjust(brightness().level(50))\\n      )\\n    ).position(new Position().gravity(compass(\\&quot;south_east\\&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;lady.jpg\\&quot; &gt; &lt;cld-transformation width=\\&quot;500\\&quot; crop=\\&quot;scale\\&quot; \\\/&gt; &lt;cld-transformation :overlay=\\&quot;cloudinary_icon\\&quot; width=\\&quot;0.9\\&quot; gravity=\\&quot;south_east\\&quot; opacity=\\&quot;70\\&quot; effect=\\&quot;brightness:50\\&quot; crop=\\&quot;scale\\&quot; \\\/&gt; &lt;\\\/cld-image&gt;&quot;,&quot;codeSnippet&quot;:&quot;&lt;cld-image public-id=\\&quot;lady.jpg\\&quot; &gt;\\n\\t&lt;cld-transformation width=\\&quot;500\\&quot; crop=\\&quot;scale\\&quot; \\\/&gt;\\n\\t&lt;cld-transformation :overlay=\\&quot;cloudinary_icon\\&quot; width=\\&quot;0.9\\&quot; gravity=\\&quot;south_east\\&quot; opacity=\\&quot;70\\&quot; effect=\\&quot;brightness:50\\&quot; crop=\\&quot;scale\\&quot; \\\/&gt;\\n&lt;\\\/cld-image&gt;&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Vue.js&quot;,&quot;packageName&quot;:&quot;cloudinary-vue&quot;,&quot;packageStatus&quot;:&quot;legacy&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;angular_2&quot;,&quot;framework&quot;:&quot;angular_2&quot;,&quot;language&quot;:&quot;angular&quot;,&quot;rawCodeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;lady.jpg\\&quot;)\\n  .resize(scale().width(500))\\n  .overlay(\\n    source(\\n      image(\\&quot;cloudinary_icon\\&quot;).transformation(\\n        new Transformation()\\n          .resize(scale().width(0.9))\\n          .adjust(opacity(70))\\n          .adjust(brightness().level(50))\\n      )\\n    ).position(new Position().gravity(compass(\\&quot;south_east\\&quot;)))\\n  );&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;lady.jpg\\&quot;)\\n  .resize(scale().width(500))\\n  .overlay(\\n    source(\\n      image(\\&quot;cloudinary_icon\\&quot;).transformation(\\n        new Transformation()\\n          .resize(scale().width(0.9))\\n          .adjust(opacity(70))\\n          .adjust(brightness().level(50))\\n      )\\n    ).position(new Position().gravity(compass(\\&quot;south_east\\&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;lady.jpg\\&quot; &gt; &lt;cl-transformation width=\\&quot;500\\&quot; crop=\\&quot;scale\\&quot;&gt; &lt;\\\/cl-transformation&gt; &lt;cl-transformation overlay=\\&quot;cloudinary_icon\\&quot; width=\\&quot;0.9\\&quot; gravity=\\&quot;south_east\\&quot; opacity=\\&quot;70\\&quot; effect=\\&quot;brightness:50\\&quot; crop=\\&quot;scale\\&quot;&gt; &lt;\\\/cl-transformation&gt; &lt;\\\/cl-image&gt;&quot;,&quot;codeSnippet&quot;:&quot;&lt;cl-image public-id=\\&quot;lady.jpg\\&quot; &gt;\\n\\t&lt;cl-transformation width=\\&quot;500\\&quot; crop=\\&quot;scale\\&quot;&gt;\\n\\t&lt;\\\/cl-transformation&gt;\\n\\t&lt;cl-transformation overlay=\\&quot;cloudinary_icon\\&quot; width=\\&quot;0.9\\&quot; gravity=\\&quot;south_east\\&quot; opacity=\\&quot;70\\&quot; effect=\\&quot;brightness:50\\&quot; crop=\\&quot;scale\\&quot;&gt;\\n\\t&lt;\\\/cl-transformation&gt;\\n&lt;\\\/cl-image&gt;&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Angular&quot;,&quot;packageName&quot;:&quot;@cloudinary\\\/angular-5.x&quot;,&quot;packageStatus&quot;:&quot;legacy&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;js_2&quot;,&quot;framework&quot;:&quot;js_2&quot;,&quot;language&quot;:&quot;js&quot;,&quot;rawCodeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;lady.jpg\\&quot;)\\n  .resize(scale().width(500))\\n  .overlay(\\n    source(\\n      image(\\&quot;cloudinary_icon\\&quot;).transformation(\\n        new Transformation()\\n          .resize(scale().width(0.9))\\n          .adjust(opacity(70))\\n          .adjust(brightness().level(50))\\n      )\\n    ).position(new Position().gravity(compass(\\&quot;south_east\\&quot;)))\\n  );&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;lady.jpg\\&quot;)\\n  .resize(scale().width(500))\\n  .overlay(\\n    source(\\n      image(\\&quot;cloudinary_icon\\&quot;).transformation(\\n        new Transformation()\\n          .resize(scale().width(0.9))\\n          .adjust(opacity(70))\\n          .adjust(brightness().level(50))\\n      )\\n    ).position(new Position().gravity(compass(\\&quot;south_east\\&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;lady.jpg&#039;, {transformation: [ {width: 500, crop: \\&quot;scale\\&quot;}, {overlay: new cloudinary.Layer().publicId(\\&quot;cloudinary_icon\\&quot;), width: \\&quot;0.9\\&quot;, gravity: \\&quot;south_east\\&quot;, opacity: 70, effect: \\&quot;brightness:50\\&quot;, crop: \\&quot;scale\\&quot;} ]}).toHtml();&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.imageTag(&#039;lady.jpg&#039;, {transformation: [\\n  {width: 500, crop: \\&quot;scale\\&quot;},\\n  {overlay: new cloudinary.Layer().publicId(\\&quot;cloudinary_icon\\&quot;), width: \\&quot;0.9\\&quot;, gravity: \\&quot;south_east\\&quot;, opacity: 70, effect: \\&quot;brightness:50\\&quot;, crop: \\&quot;scale\\&quot;}\\n  ]}).toHtml();&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;JS&quot;,&quot;packageName&quot;:&quot;cloudinary-core&quot;,&quot;packageStatus&quot;:&quot;legacy&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;},{&quot;sdkId&quot;:&quot;python&quot;,&quot;framework&quot;:&quot;python&quot;,&quot;language&quot;:&quot;python&quot;,&quot;rawCodeSnippet&quot;:&quot;CloudinaryImage(\\&quot;lady.jpg\\&quot;).image(transformation=[ {&#039;width&#039;: 500, &#039;crop&#039;: \\&quot;scale\\&quot;}, {&#039;overlay&#039;: \\&quot;cloudinary_icon\\&quot;, &#039;width&#039;: \\&quot;0.9\\&quot;, &#039;gravity&#039;: \\&quot;south_east\\&quot;, &#039;opacity&#039;: 70, &#039;effect&#039;: \\&quot;brightness:50\\&quot;, &#039;crop&#039;: \\&quot;scale\\&quot;} ])&quot;,&quot;codeSnippet&quot;:&quot;CloudinaryImage(\\&quot;lady.jpg\\&quot;).image(transformation=[\\n  {&#039;width&#039;: 500, &#039;crop&#039;: \\&quot;scale\\&quot;},\\n  {&#039;overlay&#039;: \\&quot;cloudinary_icon\\&quot;, &#039;width&#039;: \\&quot;0.9\\&quot;, &#039;gravity&#039;: \\&quot;south_east\\&quot;, &#039;opacity&#039;: 70, &#039;effect&#039;: \\&quot;brightness:50\\&quot;, &#039;crop&#039;: \\&quot;scale\\&quot;}\\n  ])&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Python&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;php_2&quot;,&quot;framework&quot;:&quot;php_2&quot;,&quot;language&quot;:&quot;php&quot;,&quot;rawCodeSnippet&quot;:&quot;(new ImageTag(&#039;lady.jpg&#039;))\\n\\t-&gt;resize(Resize::scale()-&gt;width(500))\\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(0.9))\\n\\t-&gt;adjust(Adjust::opacity(70))\\n\\t-&gt;adjust(Adjust::brightness()-&gt;level(50)))\\n\\t)\\n\\t-&gt;position((new Position())\\n\\t-&gt;gravity(\\n\\tGravity::compass(\\n\\tCompass::southEast()))\\n\\t)\\n\\t);&quot;,&quot;codeSnippet&quot;:&quot;(new ImageTag(&#039;lady.jpg&#039;))\\n\\t-&gt;resize(Resize::scale()-&gt;width(500))\\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(0.9))\\n\\t-&gt;adjust(Adjust::opacity(70))\\n\\t-&gt;adjust(Adjust::brightness()-&gt;level(50)))\\n\\t)\\n\\t-&gt;position((new Position())\\n\\t-&gt;gravity(\\n\\tGravity::compass(\\n\\tCompass::southEast()))\\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;lady.jpg\\&quot;, array(\\&quot;transformation\\&quot;=&gt;array( array(\\&quot;width\\&quot;=&gt;500, \\&quot;crop\\&quot;=&gt;\\&quot;scale\\&quot;), array(\\&quot;overlay\\&quot;=&gt;\\&quot;cloudinary_icon\\&quot;, \\&quot;width\\&quot;=&gt;\\&quot;0.9\\&quot;, \\&quot;gravity\\&quot;=&gt;\\&quot;south_east\\&quot;, \\&quot;opacity\\&quot;=&gt;70, \\&quot;effect\\&quot;=&gt;\\&quot;brightness:50\\&quot;, \\&quot;crop\\&quot;=&gt;\\&quot;scale\\&quot;) )))&quot;,&quot;codeSnippet&quot;:&quot;cl_image_tag(\\&quot;lady.jpg\\&quot;, array(\\&quot;transformation\\&quot;=&gt;array(\\n  array(\\&quot;width\\&quot;=&gt;500, \\&quot;crop\\&quot;=&gt;\\&quot;scale\\&quot;),\\n  array(\\&quot;overlay\\&quot;=&gt;\\&quot;cloudinary_icon\\&quot;, \\&quot;width\\&quot;=&gt;\\&quot;0.9\\&quot;, \\&quot;gravity\\&quot;=&gt;\\&quot;south_east\\&quot;, \\&quot;opacity\\&quot;=&gt;70, \\&quot;effect\\&quot;=&gt;\\&quot;brightness:50\\&quot;, \\&quot;crop\\&quot;=&gt;\\&quot;scale\\&quot;)\\n  )))&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;PHP&quot;,&quot;packageName&quot;:&quot;cloudinary_php&quot;,&quot;packageStatus&quot;:&quot;legacy&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;java&quot;,&quot;framework&quot;:&quot;java&quot;,&quot;language&quot;:&quot;java&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.url().transformation(new Transformation().width(500).crop(\\&quot;scale\\&quot;).chain() .overlay(new Layer().publicId(\\&quot;cloudinary_icon\\&quot;)).width(0.9).gravity(\\&quot;south_east\\&quot;).opacity(70).effect(\\&quot;brightness:50\\&quot;).crop(\\&quot;scale\\&quot;)).imageTag(\\&quot;lady.jpg\\&quot;);&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.url().transformation(new Transformation()\\n  .width(500).crop(\\&quot;scale\\&quot;).chain()\\n  .overlay(new Layer().publicId(\\&quot;cloudinary_icon\\&quot;)).width(0.9).gravity(\\&quot;south_east\\&quot;).opacity(70).effect(\\&quot;brightness:50\\&quot;).crop(\\&quot;scale\\&quot;)).imageTag(\\&quot;lady.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;lady.jpg\\&quot;, transformation: [ {width: 500, crop: \\&quot;scale\\&quot;}, {overlay: \\&quot;cloudinary_icon\\&quot;, width: 0.9, gravity: \\&quot;south_east\\&quot;, opacity: 70, effect: \\&quot;brightness:50\\&quot;, crop: \\&quot;scale\\&quot;} ])&quot;,&quot;codeSnippet&quot;:&quot;cl_image_tag(\\&quot;lady.jpg\\&quot;, transformation: [\\n  {width: 500, crop: \\&quot;scale\\&quot;},\\n  {overlay: \\&quot;cloudinary_icon\\&quot;, width: 0.9, gravity: \\&quot;south_east\\&quot;, opacity: 70, effect: \\&quot;brightness:50\\&quot;, crop: \\&quot;scale\\&quot;}\\n  ])&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Ruby&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;},{&quot;sdkId&quot;:&quot;csharp&quot;,&quot;framework&quot;:&quot;csharp&quot;,&quot;language&quot;:&quot;csharp&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.Api.UrlImgUp.Transform(new Transformation().Width(500).Crop(\\&quot;scale\\&quot;).Chain() .Overlay(new Layer().PublicId(\\&quot;cloudinary_icon\\&quot;)).Width(0.9).Gravity(\\&quot;south_east\\&quot;).Opacity(70).Effect(\\&quot;brightness:50\\&quot;).Crop(\\&quot;scale\\&quot;)).BuildImageTag(\\&quot;lady.jpg\\&quot;)&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.Api.UrlImgUp.Transform(new Transformation()\\n  .Width(500).Crop(\\&quot;scale\\&quot;).Chain()\\n  .Overlay(new Layer().PublicId(\\&quot;cloudinary_icon\\&quot;)).Width(0.9).Gravity(\\&quot;south_east\\&quot;).Opacity(70).Effect(\\&quot;brightness:50\\&quot;).Crop(\\&quot;scale\\&quot;)).BuildImageTag(\\&quot;lady.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;lady.jpg&#039;).transformation(Transformation()\\n\\t.resize(Resize.scale().width(500))\\n\\t.overlay(Overlay.source(\\n\\tSource.image(\\&quot;cloudinary_icon\\&quot;)\\n\\t.transformation(new Transformation()\\n\\t.resize(Resize.scale().width(0.9))\\n\\t.adjust(Adjust.opacity(70))\\n\\t.adjust(Adjust.brightness().level(50)))\\n\\t)\\n\\t.position(Position()\\n\\t.gravity(\\n\\tGravity.compass(\\n\\tCompass.southEast()))\\n\\t)\\n\\t));&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image(&#039;lady.jpg&#039;).transformation(Transformation()\\n\\t.resize(Resize.scale().width(500))\\n\\t.overlay(Overlay.source(\\n\\tSource.image(\\&quot;cloudinary_icon\\&quot;)\\n\\t.transformation(new Transformation()\\n\\t.resize(Resize.scale().width(0.9))\\n\\t.adjust(Adjust.opacity(70))\\n\\t.adjust(Adjust.brightness().level(50)))\\n\\t)\\n\\t.position(Position()\\n\\t.gravity(\\n\\tGravity.compass(\\n\\tCompass.southEast()))\\n\\t)\\n\\t));&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Dart&quot;,&quot;packageName&quot;:&quot;cloudinary_dart&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;swift&quot;,&quot;framework&quot;:&quot;swift&quot;,&quot;language&quot;:&quot;swift&quot;,&quot;rawCodeSnippet&quot;:&quot;imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setWidth(500).setCrop(\\&quot;scale\\&quot;).chain() .setOverlay(\\&quot;cloudinary_icon\\&quot;).setWidth(0.9).setGravity(\\&quot;south_east\\&quot;).setOpacity(70).setEffect(\\&quot;brightness:50\\&quot;).setCrop(\\&quot;scale\\&quot;)).generate(\\&quot;lady.jpg\\&quot;)!, cloudinary: cloudinary)&quot;,&quot;codeSnippet&quot;:&quot;imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation()\\n  .setWidth(500).setCrop(\\&quot;scale\\&quot;).chain()\\n  .setOverlay(\\&quot;cloudinary_icon\\&quot;).setWidth(0.9).setGravity(\\&quot;south_east\\&quot;).setOpacity(70).setEffect(\\&quot;brightness:50\\&quot;).setCrop(\\&quot;scale\\&quot;)).generate(\\&quot;lady.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(500).crop(\\&quot;scale\\&quot;).chain() .overlay(new Layer().publicId(\\&quot;cloudinary_icon\\&quot;)).width(0.9).gravity(\\&quot;south_east\\&quot;).opacity(70).effect(\\&quot;brightness:50\\&quot;).crop(\\&quot;scale\\&quot;)).generate(\\&quot;lady.jpg\\&quot;);&quot;,&quot;codeSnippet&quot;:&quot;MediaManager.get().url().transformation(new Transformation()\\n  .width(500).crop(\\&quot;scale\\&quot;).chain()\\n  .overlay(new Layer().publicId(\\&quot;cloudinary_icon\\&quot;)).width(0.9).gravity(\\&quot;south_east\\&quot;).opacity(70).effect(\\&quot;brightness:50\\&quot;).crop(\\&quot;scale\\&quot;)).generate(\\&quot;lady.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;lady.jpg&#039;).transformation(Transformation()\\n\\t.resize(Resize.scale().width(500))\\n\\t.overlay(Overlay.source(\\n\\tSource.image(\\&quot;cloudinary_icon\\&quot;)\\n\\t.transformation(new Transformation()\\n\\t.resize(Resize.scale().width(0.9))\\n\\t.adjust(Adjust.opacity(70))\\n\\t.adjust(Adjust.brightness().level(50)))\\n\\t)\\n\\t.position(Position()\\n\\t.gravity(\\n\\tGravity.compass(\\n\\tCompass.southEast()))\\n\\t)\\n\\t));&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image(&#039;lady.jpg&#039;).transformation(Transformation()\\n\\t.resize(Resize.scale().width(500))\\n\\t.overlay(Overlay.source(\\n\\tSource.image(\\&quot;cloudinary_icon\\&quot;)\\n\\t.transformation(new Transformation()\\n\\t.resize(Resize.scale().width(0.9))\\n\\t.adjust(Adjust.opacity(70))\\n\\t.adjust(Adjust.brightness().level(50)))\\n\\t)\\n\\t.position(Position()\\n\\t.gravity(\\n\\tGravity.compass(\\n\\tCompass.southEast()))\\n\\t)\\n\\t));&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Flutter&quot;,&quot;packageName&quot;:&quot;cloudinary_flutter&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;kotlin&quot;,&quot;framework&quot;:&quot;kotlin&quot;,&quot;language&quot;:&quot;kotlin&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.image {\\n\\tpublicId(\\&quot;lady.jpg\\&quot;)\\n\\t resize(Resize.scale() { width(500) })\\n\\t overlay(Overlay.source(\\n\\tSource.image(\\&quot;cloudinary_icon\\&quot;) {\\n\\t transformation(Transformation {\\n\\t resize(Resize.scale() { width(0.9F) })\\n\\t adjust(Adjust.opacity(70))\\n\\t adjust(Adjust.brightness() { level(50) }) })\\n\\t }) {\\n\\t position(Position() {\\n\\t gravity(\\n\\tGravity.compass(\\n\\tCompass.southEast()))\\n\\t })\\n\\t }) \\n}.generate()&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image {\\n\\tpublicId(\\&quot;lady.jpg\\&quot;)\\n\\t resize(Resize.scale() { width(500) })\\n\\t overlay(Overlay.source(\\n\\tSource.image(\\&quot;cloudinary_icon\\&quot;) {\\n\\t transformation(Transformation {\\n\\t resize(Resize.scale() { width(0.9F) })\\n\\t adjust(Adjust.opacity(70))\\n\\t adjust(Adjust.brightness() { level(50) }) })\\n\\t }) {\\n\\t position(Position() {\\n\\t gravity(\\n\\tGravity.compass(\\n\\tCompass.southEast()))\\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;lady.jpg\\&quot;, {transformation: [ {width: 500, crop: \\&quot;scale\\&quot;}, {overlay: new cloudinary.Layer().publicId(\\&quot;cloudinary_icon\\&quot;), width: \\&quot;0.9\\&quot;, gravity: \\&quot;south_east\\&quot;, opacity: 70, effect: \\&quot;brightness:50\\&quot;, crop: \\&quot;scale\\&quot;} ]})&quot;,&quot;codeSnippet&quot;:&quot;$.cloudinary.image(\\&quot;lady.jpg\\&quot;, {transformation: [\\n  {width: 500, crop: \\&quot;scale\\&quot;},\\n  {overlay: new cloudinary.Layer().publicId(\\&quot;cloudinary_icon\\&quot;), width: \\&quot;0.9\\&quot;, gravity: \\&quot;south_east\\&quot;, opacity: 70, effect: \\&quot;brightness:50\\&quot;, crop: \\&quot;scale\\&quot;}\\n  ]})&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;jQuery&quot;,&quot;packageName&quot;:&quot;cloudinary-jquery&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;},{&quot;sdkId&quot;:&quot;react_native&quot;,&quot;framework&quot;:&quot;react_native&quot;,&quot;language&quot;:&quot;react_native&quot;,&quot;rawCodeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;lady.jpg\\&quot;)\\n  .resize(scale().width(500))\\n  .overlay(\\n    source(\\n      image(\\&quot;cloudinary_icon\\&quot;).transformation(\\n        new Transformation()\\n          .resize(scale().width(0.9))\\n          .adjust(opacity(70))\\n          .adjust(brightness().level(50))\\n      )\\n    ).position(new Position().gravity(compass(\\&quot;south_east\\&quot;)))\\n  );&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;lady.jpg\\&quot;)\\n  .resize(scale().width(500))\\n  .overlay(\\n    source(\\n      image(\\&quot;cloudinary_icon\\&quot;).transformation(\\n        new Transformation()\\n          .resize(scale().width(0.9))\\n          .adjust(opacity(70))\\n          .adjust(brightness().level(50))\\n      )\\n    ).position(new Position().gravity(compass(\\&quot;south_east\\&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\\\/w_500\\\/l_cloudinary_icon,w_0.9,c_scale,g_south_east,o_70,e_brightness:50\\\/lady.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;500&quot;},{&quot;overlay&quot;:&quot;cloudinary_icon&quot;,&quot;width&quot;:&quot;0.9&quot;,&quot;crop_mode&quot;:&quot;scale&quot;,&quot;gravity&quot;:&quot;south_east&quot;,&quot;opacity&quot;:&quot;70&quot;,&quot;effect&quot;:&quot;brightness:50&quot;}],&quot;transformation_string&quot;:&quot;w_500\\\/l_cloudinary_icon,w_0.9,c_scale,g_south_east,o_70,e_brightness:50&quot;,&quot;url_suffix&quot;:&quot;&quot;,&quot;version&quot;:&quot;&quot;,&quot;secure&quot;:true,&quot;public_id&quot;:&quot;lady.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_500\/l_cloudinary_icon,w_0.9,c_scale,g_south_east,o_70,e_brightness:50\/lady.jpg\" target=\"_blank\"><img decoding=\"async\" src=\"https:\/\/res.cloudinary.com\/demo\/image\/upload\/w_500\/l_cloudinary_icon,w_0.9,c_scale,g_south_east,o_70,e_brightness:50\/lady.jpg\" alt=\"Lady\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"500\" height=\"750\"\/><\/a><\/p>\n<p><strong>Text overlay:<\/strong>\n<cld-code-widget\n      class=\" c-code-widget\"\n      snippets=\"[{&quot;sdkId&quot;:&quot;nodejs&quot;,&quot;framework&quot;:&quot;nodejs&quot;,&quot;language&quot;:&quot;nodejs&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.image(\\&quot;lady.jpg\\&quot;, {transformation: [ {width: 500, crop: \\&quot;scale\\&quot;}, {overlay: {font_family: \\&quot;Arial\\&quot;, font_size: 50, text: \\&quot;Awesome\\&quot;}} ]})&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image(\\&quot;lady.jpg\\&quot;, {transformation: [\\n  {width: 500, crop: \\&quot;scale\\&quot;},\\n  {overlay: {font_family: \\&quot;Arial\\&quot;, font_size: 50, text: \\&quot;Awesome\\&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;lady.jpg\\&quot;)\\n  .resize(scale().width(500))\\n  .overlay(source(text(\\&quot;Awesome\\&quot;, new TextStyle(\\&quot;Arial\\&quot;, 50))));&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;lady.jpg\\&quot;)\\n  .resize(scale().width(500))\\n  .overlay(source(text(\\&quot;Awesome\\&quot;, new TextStyle(\\&quot;Arial\\&quot;, 50))));&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;lady.jpg\\&quot; &gt; &lt;Transformation width=\\&quot;500\\&quot; crop=\\&quot;scale\\&quot; \\\/&gt; &lt;Transformation overlay={{fontFamily: \\&quot;Arial\\&quot;, fontSize: 50, text: \\&quot;Awesome\\&quot;}} \\\/&gt; &lt;\\\/Image&gt;&quot;,&quot;codeSnippet&quot;:&quot;&lt;Image publicId=\\&quot;lady.jpg\\&quot; &gt;\\n\\t&lt;Transformation width=\\&quot;500\\&quot; crop=\\&quot;scale\\&quot; \\\/&gt;\\n\\t&lt;Transformation overlay={{fontFamily: \\&quot;Arial\\&quot;, fontSize: 50, text: \\&quot;Awesome\\&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;lady.jpg\\&quot;)\\n  .resize(scale().width(500))\\n  .overlay(source(text(\\&quot;Awesome\\&quot;, new TextStyle(\\&quot;Arial\\&quot;, 50))));&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;lady.jpg\\&quot;)\\n  .resize(scale().width(500))\\n  .overlay(source(text(\\&quot;Awesome\\&quot;, new TextStyle(\\&quot;Arial\\&quot;, 50))));&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;lady.jpg\\&quot; &gt; &lt;cld-transformation width=\\&quot;500\\&quot; crop=\\&quot;scale\\&quot; \\\/&gt; &lt;cld-transformation :overlay=\\&quot;{fontFamily: &#039;Arial&#039;, fontSize: 50, text: &#039;Awesome&#039;}\\&quot; \\\/&gt; &lt;\\\/cld-image&gt;&quot;,&quot;codeSnippet&quot;:&quot;&lt;cld-image public-id=\\&quot;lady.jpg\\&quot; &gt;\\n\\t&lt;cld-transformation width=\\&quot;500\\&quot; crop=\\&quot;scale\\&quot; \\\/&gt;\\n\\t&lt;cld-transformation :overlay=\\&quot;{fontFamily: &#039;Arial&#039;, fontSize: 50, text: &#039;Awesome&#039;}\\&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;lady.jpg\\&quot;)\\n  .resize(scale().width(500))\\n  .overlay(source(text(\\&quot;Awesome\\&quot;, new TextStyle(\\&quot;Arial\\&quot;, 50))));&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;lady.jpg\\&quot;)\\n  .resize(scale().width(500))\\n  .overlay(source(text(\\&quot;Awesome\\&quot;, new TextStyle(\\&quot;Arial\\&quot;, 50))));&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;lady.jpg\\&quot; &gt; &lt;cl-transformation width=\\&quot;500\\&quot; crop=\\&quot;scale\\&quot;&gt; &lt;\\\/cl-transformation&gt; &lt;cl-transformation overlay=\\&quot;text:Arial_50:Awesome\\&quot;&gt; &lt;\\\/cl-transformation&gt; &lt;\\\/cl-image&gt;&quot;,&quot;codeSnippet&quot;:&quot;&lt;cl-image public-id=\\&quot;lady.jpg\\&quot; &gt;\\n\\t&lt;cl-transformation width=\\&quot;500\\&quot; crop=\\&quot;scale\\&quot;&gt;\\n\\t&lt;\\\/cl-transformation&gt;\\n\\t&lt;cl-transformation overlay=\\&quot;text:Arial_50:Awesome\\&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;lady.jpg\\&quot;)\\n  .resize(scale().width(500))\\n  .overlay(source(text(\\&quot;Awesome\\&quot;, new TextStyle(\\&quot;Arial\\&quot;, 50))));&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;lady.jpg\\&quot;)\\n  .resize(scale().width(500))\\n  .overlay(source(text(\\&quot;Awesome\\&quot;, new TextStyle(\\&quot;Arial\\&quot;, 50))));&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;lady.jpg&#039;, {transformation: [ {width: 500, crop: \\&quot;scale\\&quot;}, {overlay: new cloudinary.TextLayer().fontFamily(\\&quot;Arial\\&quot;).fontSize(50).text(\\&quot;Awesome\\&quot;)} ]}).toHtml();&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.imageTag(&#039;lady.jpg&#039;, {transformation: [\\n  {width: 500, crop: \\&quot;scale\\&quot;},\\n  {overlay: new cloudinary.TextLayer().fontFamily(\\&quot;Arial\\&quot;).fontSize(50).text(\\&quot;Awesome\\&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;lady.jpg\\&quot;).image(transformation=[ {&#039;width&#039;: 500, &#039;crop&#039;: \\&quot;scale\\&quot;}, {&#039;overlay&#039;: {&#039;font_family&#039;: \\&quot;Arial\\&quot;, &#039;font_size&#039;: 50, &#039;text&#039;: \\&quot;Awesome\\&quot;}} ])&quot;,&quot;codeSnippet&quot;:&quot;CloudinaryImage(\\&quot;lady.jpg\\&quot;).image(transformation=[\\n  {&#039;width&#039;: 500, &#039;crop&#039;: \\&quot;scale\\&quot;},\\n  {&#039;overlay&#039;: {&#039;font_family&#039;: \\&quot;Arial\\&quot;, &#039;font_size&#039;: 50, &#039;text&#039;: \\&quot;Awesome\\&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;lady.jpg&#039;))\\n\\t-&gt;resize(Resize::scale()-&gt;width(500))\\n\\t-&gt;overlay(Overlay::source(\\n\\tSource::text(\\&quot;Awesome\\&quot;,(new TextStyle(\\&quot;Arial\\&quot;,50)))));&quot;,&quot;codeSnippet&quot;:&quot;(new ImageTag(&#039;lady.jpg&#039;))\\n\\t-&gt;resize(Resize::scale()-&gt;width(500))\\n\\t-&gt;overlay(Overlay::source(\\n\\tSource::text(\\&quot;Awesome\\&quot;,(new TextStyle(\\&quot;Arial\\&quot;,50)))));&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;lady.jpg\\&quot;, array(\\&quot;transformation\\&quot;=&gt;array( array(\\&quot;width\\&quot;=&gt;500, \\&quot;crop\\&quot;=&gt;\\&quot;scale\\&quot;), array(\\&quot;overlay\\&quot;=&gt;array(\\&quot;font_family\\&quot;=&gt;\\&quot;Arial\\&quot;, \\&quot;font_size\\&quot;=&gt;50, \\&quot;text\\&quot;=&gt;\\&quot;Awesome\\&quot;)) )))&quot;,&quot;codeSnippet&quot;:&quot;cl_image_tag(\\&quot;lady.jpg\\&quot;, array(\\&quot;transformation\\&quot;=&gt;array(\\n  array(\\&quot;width\\&quot;=&gt;500, \\&quot;crop\\&quot;=&gt;\\&quot;scale\\&quot;),\\n  array(\\&quot;overlay\\&quot;=&gt;array(\\&quot;font_family\\&quot;=&gt;\\&quot;Arial\\&quot;, \\&quot;font_size\\&quot;=&gt;50, \\&quot;text\\&quot;=&gt;\\&quot;Awesome\\&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(500).crop(\\&quot;scale\\&quot;).chain() .overlay(new TextLayer().fontFamily(\\&quot;Arial\\&quot;).fontSize(50).text(\\&quot;Awesome\\&quot;))).imageTag(\\&quot;lady.jpg\\&quot;);&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.url().transformation(new Transformation()\\n  .width(500).crop(\\&quot;scale\\&quot;).chain()\\n  .overlay(new TextLayer().fontFamily(\\&quot;Arial\\&quot;).fontSize(50).text(\\&quot;Awesome\\&quot;))).imageTag(\\&quot;lady.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;lady.jpg\\&quot;, transformation: [ {width: 500, crop: \\&quot;scale\\&quot;}, {overlay: {font_family: \\&quot;Arial\\&quot;, font_size: 50, text: \\&quot;Awesome\\&quot;}} ])&quot;,&quot;codeSnippet&quot;:&quot;cl_image_tag(\\&quot;lady.jpg\\&quot;, transformation: [\\n  {width: 500, crop: \\&quot;scale\\&quot;},\\n  {overlay: {font_family: \\&quot;Arial\\&quot;, font_size: 50, text: \\&quot;Awesome\\&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(500).Crop(\\&quot;scale\\&quot;).Chain() .Overlay(new TextLayer().FontFamily(\\&quot;Arial\\&quot;).FontSize(50).Text(\\&quot;Awesome\\&quot;))).BuildImageTag(\\&quot;lady.jpg\\&quot;)&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.Api.UrlImgUp.Transform(new Transformation()\\n  .Width(500).Crop(\\&quot;scale\\&quot;).Chain()\\n  .Overlay(new TextLayer().FontFamily(\\&quot;Arial\\&quot;).FontSize(50).Text(\\&quot;Awesome\\&quot;))).BuildImageTag(\\&quot;lady.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;lady.jpg&#039;).transformation(Transformation()\\n\\t.addTransformation(\\&quot;w_500\\\/l_text:Arial_50:Awesome\\&quot;));&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image(&#039;lady.jpg&#039;).transformation(Transformation()\\n\\t.addTransformation(\\&quot;w_500\\\/l_text:Arial_50:Awesome\\&quot;));&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Dart&quot;,&quot;packageName&quot;:&quot;cloudinary_dart&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;swift&quot;,&quot;framework&quot;:&quot;swift&quot;,&quot;language&quot;:&quot;swift&quot;,&quot;rawCodeSnippet&quot;:&quot;imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setWidth(500).setCrop(\\&quot;scale\\&quot;).chain() .setOverlay(\\&quot;text:Arial_50:Awesome\\&quot;)).generate(\\&quot;lady.jpg\\&quot;)!, cloudinary: cloudinary)&quot;,&quot;codeSnippet&quot;:&quot;imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation()\\n  .setWidth(500).setCrop(\\&quot;scale\\&quot;).chain()\\n  .setOverlay(\\&quot;text:Arial_50:Awesome\\&quot;)).generate(\\&quot;lady.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(500).crop(\\&quot;scale\\&quot;).chain() .overlay(new TextLayer().fontFamily(\\&quot;Arial\\&quot;).fontSize(50).text(\\&quot;Awesome\\&quot;))).generate(\\&quot;lady.jpg\\&quot;);&quot;,&quot;codeSnippet&quot;:&quot;MediaManager.get().url().transformation(new Transformation()\\n  .width(500).crop(\\&quot;scale\\&quot;).chain()\\n  .overlay(new TextLayer().fontFamily(\\&quot;Arial\\&quot;).fontSize(50).text(\\&quot;Awesome\\&quot;))).generate(\\&quot;lady.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;lady.jpg&#039;).transformation(Transformation()\\n\\t.addTransformation(\\&quot;w_500\\\/l_text:Arial_50:Awesome\\&quot;));&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image(&#039;lady.jpg&#039;).transformation(Transformation()\\n\\t.addTransformation(\\&quot;w_500\\\/l_text:Arial_50:Awesome\\&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;lady.jpg\\&quot;)\\n\\t resize(Resize.scale() { width(500) })\\n\\t overlay(Overlay.source(\\n\\tSource.text(\\&quot;Awesome\\&quot;,TextStyle(\\&quot;Arial\\&quot;,50)))) \\n}.generate()&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image {\\n\\tpublicId(\\&quot;lady.jpg\\&quot;)\\n\\t resize(Resize.scale() { width(500) })\\n\\t overlay(Overlay.source(\\n\\tSource.text(\\&quot;Awesome\\&quot;,TextStyle(\\&quot;Arial\\&quot;,50)))) \\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;lady.jpg\\&quot;, {transformation: [ {width: 500, crop: \\&quot;scale\\&quot;}, {overlay: new cloudinary.TextLayer().fontFamily(\\&quot;Arial\\&quot;).fontSize(50).text(\\&quot;Awesome\\&quot;)} ]})&quot;,&quot;codeSnippet&quot;:&quot;$.cloudinary.image(\\&quot;lady.jpg\\&quot;, {transformation: [\\n  {width: 500, crop: \\&quot;scale\\&quot;},\\n  {overlay: new cloudinary.TextLayer().fontFamily(\\&quot;Arial\\&quot;).fontSize(50).text(\\&quot;Awesome\\&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;lady.jpg\\&quot;)\\n  .resize(scale().width(500))\\n  .overlay(source(text(\\&quot;Awesome\\&quot;, new TextStyle(\\&quot;Arial\\&quot;, 50))));&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;lady.jpg\\&quot;)\\n  .resize(scale().width(500))\\n  .overlay(source(text(\\&quot;Awesome\\&quot;, new TextStyle(\\&quot;Arial\\&quot;, 50))));&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_500\\\/l_text:Arial_50:Awesome\\\/lady.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;500&quot;},{&quot;overlay&quot;:&quot;text:Arial_50:Awesome&quot;}],&quot;transformation_string&quot;:&quot;w_500\\\/l_text:Arial_50:Awesome&quot;,&quot;url_suffix&quot;:&quot;&quot;,&quot;version&quot;:&quot;&quot;,&quot;secure&quot;:true,&quot;public_id&quot;:&quot;lady.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_500\/l_text:Arial_50:Awesome\/lady.jpg\" target=\"_blank\"><img decoding=\"async\" src=\"https:\/\/res.cloudinary.com\/demo\/image\/upload\/w_500\/l_text:Arial_50:Awesome\/lady.jpg\" alt=\"Awesome\/lady\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"500\" height=\"750\"\/><\/a><\/p>\n<p><strong>Blur:<\/strong>\n<cld-code-widget\n      class=\" c-code-widget\"\n      snippets=\"[{&quot;sdkId&quot;:&quot;nodejs&quot;,&quot;framework&quot;:&quot;nodejs&quot;,&quot;language&quot;:&quot;nodejs&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.image(\\&quot;flowers.jpg\\&quot;, {effect: \\&quot;blur:300\\&quot;})&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image(\\&quot;flowers.jpg\\&quot;, {effect: \\&quot;blur:300\\&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;flowers.jpg\\&quot;).effect(blur().strength(300));&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;flowers.jpg\\&quot;).effect(blur().strength(300));&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;flowers.jpg\\&quot; &gt; &lt;Transformation effect=\\&quot;blur:300\\&quot; \\\/&gt; &lt;\\\/Image&gt;&quot;,&quot;codeSnippet&quot;:&quot;&lt;Image publicId=\\&quot;flowers.jpg\\&quot; &gt;\\n\\t&lt;Transformation effect=\\&quot;blur:300\\&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;flowers.jpg\\&quot;).effect(blur().strength(300));&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;flowers.jpg\\&quot;).effect(blur().strength(300));&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;flowers.jpg\\&quot; &gt; &lt;cld-transformation effect=\\&quot;blur:300\\&quot; \\\/&gt; &lt;\\\/cld-image&gt;&quot;,&quot;codeSnippet&quot;:&quot;&lt;cld-image public-id=\\&quot;flowers.jpg\\&quot; &gt;\\n\\t&lt;cld-transformation effect=\\&quot;blur:300\\&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;flowers.jpg\\&quot;).effect(blur().strength(300));&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;flowers.jpg\\&quot;).effect(blur().strength(300));&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;flowers.jpg\\&quot; &gt; &lt;cl-transformation effect=\\&quot;blur:300\\&quot;&gt; &lt;\\\/cl-transformation&gt; &lt;\\\/cl-image&gt;&quot;,&quot;codeSnippet&quot;:&quot;&lt;cl-image public-id=\\&quot;flowers.jpg\\&quot; &gt;\\n\\t&lt;cl-transformation effect=\\&quot;blur:300\\&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;flowers.jpg\\&quot;).effect(blur().strength(300));&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;flowers.jpg\\&quot;).effect(blur().strength(300));&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;flowers.jpg&#039;, {effect: \\&quot;blur:300\\&quot;}).toHtml();&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.imageTag(&#039;flowers.jpg&#039;, {effect: \\&quot;blur:300\\&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;flowers.jpg\\&quot;).image(effect=\\&quot;blur:300\\&quot;)&quot;,&quot;codeSnippet&quot;:&quot;CloudinaryImage(\\&quot;flowers.jpg\\&quot;).image(effect=\\&quot;blur:300\\&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;flowers.jpg&#039;))\\n\\t-&gt;effect(Effect::blur()-&gt;strength(300));&quot;,&quot;codeSnippet&quot;:&quot;(new ImageTag(&#039;flowers.jpg&#039;))\\n\\t-&gt;effect(Effect::blur()-&gt;strength(300));&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;flowers.jpg\\&quot;, array(\\&quot;effect\\&quot;=&gt;\\&quot;blur:300\\&quot;))&quot;,&quot;codeSnippet&quot;:&quot;cl_image_tag(\\&quot;flowers.jpg\\&quot;, array(\\&quot;effect\\&quot;=&gt;\\&quot;blur:300\\&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().effect(\\&quot;blur:300\\&quot;)).imageTag(\\&quot;flowers.jpg\\&quot;);&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.url().transformation(new Transformation().effect(\\&quot;blur:300\\&quot;)).imageTag(\\&quot;flowers.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;flowers.jpg\\&quot;, effect: \\&quot;blur:300\\&quot;)&quot;,&quot;codeSnippet&quot;:&quot;cl_image_tag(\\&quot;flowers.jpg\\&quot;, effect: \\&quot;blur:300\\&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().Effect(\\&quot;blur:300\\&quot;)).BuildImageTag(\\&quot;flowers.jpg\\&quot;)&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.Api.UrlImgUp.Transform(new Transformation().Effect(\\&quot;blur:300\\&quot;)).BuildImageTag(\\&quot;flowers.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;flowers.jpg&#039;).transformation(Transformation()\\n\\t.effect(Effect.blur().strength(300)));&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image(&#039;flowers.jpg&#039;).transformation(Transformation()\\n\\t.effect(Effect.blur().strength(300)));&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().setEffect(\\&quot;blur:300\\&quot;)).generate(\\&quot;flowers.jpg\\&quot;)!, cloudinary: cloudinary)&quot;,&quot;codeSnippet&quot;:&quot;imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setEffect(\\&quot;blur:300\\&quot;)).generate(\\&quot;flowers.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().effect(\\&quot;blur:300\\&quot;)).generate(\\&quot;flowers.jpg\\&quot;);&quot;,&quot;codeSnippet&quot;:&quot;MediaManager.get().url().transformation(new Transformation().effect(\\&quot;blur:300\\&quot;)).generate(\\&quot;flowers.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;flowers.jpg&#039;).transformation(Transformation()\\n\\t.effect(Effect.blur().strength(300)));&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image(&#039;flowers.jpg&#039;).transformation(Transformation()\\n\\t.effect(Effect.blur().strength(300)));&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;flowers.jpg\\&quot;)\\n\\t effect(Effect.blur() { strength(300) }) \\n}.generate()&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image {\\n\\tpublicId(\\&quot;flowers.jpg\\&quot;)\\n\\t effect(Effect.blur() { strength(300) }) \\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;flowers.jpg\\&quot;, {effect: \\&quot;blur:300\\&quot;})&quot;,&quot;codeSnippet&quot;:&quot;$.cloudinary.image(\\&quot;flowers.jpg\\&quot;, {effect: \\&quot;blur:300\\&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;flowers.jpg\\&quot;).effect(blur().strength(300));&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;flowers.jpg\\&quot;).effect(blur().strength(300));&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\\\/e_blur:300\\\/flowers.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;effect&quot;:&quot;blur:300&quot;}],&quot;transformation_string&quot;:&quot;e_blur:300&quot;,&quot;url_suffix&quot;:&quot;&quot;,&quot;version&quot;:&quot;&quot;,&quot;secure&quot;:true,&quot;public_id&quot;:&quot;flowers.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\/e_blur:300\/flowers.jpg\" target=\"_blank\"><img decoding=\"async\" src=\"https:\/\/res.cloudinary.com\/demo\/image\/upload\/e_blur:300\/flowers.jpg\" alt=\"Flowers\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"5034\" height=\"2653\"\/><\/a><\/p>\n<p><strong>Artistic Filter effects:<\/strong>\n<cld-code-widget\n      class=\" c-code-widget\"\n      snippets=\"[{&quot;sdkId&quot;:&quot;nodejs&quot;,&quot;framework&quot;:&quot;nodejs&quot;,&quot;language&quot;:&quot;nodejs&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.image(\\&quot;flowers.jpg\\&quot;, {effect: \\&quot;art:sizzle\\&quot;})&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image(\\&quot;flowers.jpg\\&quot;, {effect: \\&quot;art:sizzle\\&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;flowers.jpg\\&quot;).effect(artisticFilter(\\&quot;sizzle\\&quot;));&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;flowers.jpg\\&quot;).effect(artisticFilter(\\&quot;sizzle\\&quot;));&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;React&quot;,&quot;packageName&quot;:&quot;@cloudinary\\\/react&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;react&quot;,&quot;framework&quot;:&quot;react&quot;,&quot;language&quot;:&quot;react&quot;,&quot;rawCodeSnippet&quot;:&quot;&lt;Image publicId=\\&quot;flowers.jpg\\&quot; &gt; &lt;Transformation effect=\\&quot;art:sizzle\\&quot; \\\/&gt; &lt;\\\/Image&gt;&quot;,&quot;codeSnippet&quot;:&quot;&lt;Image publicId=\\&quot;flowers.jpg\\&quot; &gt;\\n\\t&lt;Transformation effect=\\&quot;art:sizzle\\&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;flowers.jpg\\&quot;).effect(artisticFilter(\\&quot;sizzle\\&quot;));&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;flowers.jpg\\&quot;).effect(artisticFilter(\\&quot;sizzle\\&quot;));&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Vue.js&quot;,&quot;packageName&quot;:&quot;@cloudinary\\\/vue&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;vue&quot;,&quot;framework&quot;:&quot;vue&quot;,&quot;language&quot;:&quot;vue&quot;,&quot;rawCodeSnippet&quot;:&quot;&lt;cld-image public-id=\\&quot;flowers.jpg\\&quot; &gt; &lt;cld-transformation effect=\\&quot;art:sizzle\\&quot; \\\/&gt; &lt;\\\/cld-image&gt;&quot;,&quot;codeSnippet&quot;:&quot;&lt;cld-image public-id=\\&quot;flowers.jpg\\&quot; &gt;\\n\\t&lt;cld-transformation effect=\\&quot;art:sizzle\\&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;flowers.jpg\\&quot;).effect(artisticFilter(\\&quot;sizzle\\&quot;));&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;flowers.jpg\\&quot;).effect(artisticFilter(\\&quot;sizzle\\&quot;));&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Angular&quot;,&quot;packageName&quot;:&quot;@cloudinary\\\/ng&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;angular&quot;,&quot;framework&quot;:&quot;angular&quot;,&quot;language&quot;:&quot;angular&quot;,&quot;rawCodeSnippet&quot;:&quot;&lt;cl-image public-id=\\&quot;flowers.jpg\\&quot; &gt; &lt;cl-transformation effect=\\&quot;art:sizzle\\&quot;&gt; &lt;\\\/cl-transformation&gt; &lt;\\\/cl-image&gt;&quot;,&quot;codeSnippet&quot;:&quot;&lt;cl-image public-id=\\&quot;flowers.jpg\\&quot; &gt;\\n\\t&lt;cl-transformation effect=\\&quot;art:sizzle\\&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;flowers.jpg\\&quot;).effect(artisticFilter(\\&quot;sizzle\\&quot;));&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;flowers.jpg\\&quot;).effect(artisticFilter(\\&quot;sizzle\\&quot;));&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;JS&quot;,&quot;packageName&quot;:&quot;@cloudinary\\\/url-gen&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;js&quot;,&quot;framework&quot;:&quot;js&quot;,&quot;language&quot;:&quot;js&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.imageTag(&#039;flowers.jpg&#039;, {effect: \\&quot;art:sizzle\\&quot;}).toHtml();&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.imageTag(&#039;flowers.jpg&#039;, {effect: \\&quot;art:sizzle\\&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;flowers.jpg\\&quot;).image(effect=\\&quot;art:sizzle\\&quot;)&quot;,&quot;codeSnippet&quot;:&quot;CloudinaryImage(\\&quot;flowers.jpg\\&quot;).image(effect=\\&quot;art:sizzle\\&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;flowers.jpg&#039;))\\n\\t-&gt;effect(Effect::artisticFilter(\\n\\tArtisticFilter::sizzle()));&quot;,&quot;codeSnippet&quot;:&quot;(new ImageTag(&#039;flowers.jpg&#039;))\\n\\t-&gt;effect(Effect::artisticFilter(\\n\\tArtisticFilter::sizzle()));&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;flowers.jpg\\&quot;, array(\\&quot;effect\\&quot;=&gt;\\&quot;art:sizzle\\&quot;))&quot;,&quot;codeSnippet&quot;:&quot;cl_image_tag(\\&quot;flowers.jpg\\&quot;, array(\\&quot;effect\\&quot;=&gt;\\&quot;art:sizzle\\&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().effect(\\&quot;art:sizzle\\&quot;)).imageTag(\\&quot;flowers.jpg\\&quot;);&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.url().transformation(new Transformation().effect(\\&quot;art:sizzle\\&quot;)).imageTag(\\&quot;flowers.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;flowers.jpg\\&quot;, effect: \\&quot;art:sizzle\\&quot;)&quot;,&quot;codeSnippet&quot;:&quot;cl_image_tag(\\&quot;flowers.jpg\\&quot;, effect: \\&quot;art:sizzle\\&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().Effect(\\&quot;art:sizzle\\&quot;)).BuildImageTag(\\&quot;flowers.jpg\\&quot;)&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.Api.UrlImgUp.Transform(new Transformation().Effect(\\&quot;art:sizzle\\&quot;)).BuildImageTag(\\&quot;flowers.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;flowers.jpg&#039;).transformation(Transformation()\\n\\t.effect(Effect.artisticFilter(\\n\\tArtisticFilter.sizzle())));&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image(&#039;flowers.jpg&#039;).transformation(Transformation()\\n\\t.effect(Effect.artisticFilter(\\n\\tArtisticFilter.sizzle())));&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().setEffect(\\&quot;art:sizzle\\&quot;)).generate(\\&quot;flowers.jpg\\&quot;)!, cloudinary: cloudinary)&quot;,&quot;codeSnippet&quot;:&quot;imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setEffect(\\&quot;art:sizzle\\&quot;)).generate(\\&quot;flowers.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().effect(\\&quot;art:sizzle\\&quot;)).generate(\\&quot;flowers.jpg\\&quot;);&quot;,&quot;codeSnippet&quot;:&quot;MediaManager.get().url().transformation(new Transformation().effect(\\&quot;art:sizzle\\&quot;)).generate(\\&quot;flowers.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;flowers.jpg&#039;).transformation(Transformation()\\n\\t.effect(Effect.artisticFilter(\\n\\tArtisticFilter.sizzle())));&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image(&#039;flowers.jpg&#039;).transformation(Transformation()\\n\\t.effect(Effect.artisticFilter(\\n\\tArtisticFilter.sizzle())));&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;flowers.jpg\\&quot;)\\n\\t effect(Effect.artisticFilter(\\n\\tArtisticFilter.sizzle())) \\n}.generate()&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image {\\n\\tpublicId(\\&quot;flowers.jpg\\&quot;)\\n\\t effect(Effect.artisticFilter(\\n\\tArtisticFilter.sizzle())) \\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;flowers.jpg\\&quot;, {effect: \\&quot;art:sizzle\\&quot;})&quot;,&quot;codeSnippet&quot;:&quot;$.cloudinary.image(\\&quot;flowers.jpg\\&quot;, {effect: \\&quot;art:sizzle\\&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;flowers.jpg\\&quot;).effect(artisticFilter(\\&quot;sizzle\\&quot;));&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;flowers.jpg\\&quot;).effect(artisticFilter(\\&quot;sizzle\\&quot;));&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;React Native&quot;,&quot;packageName&quot;:&quot;cloudinary-react-native&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;}]\"\n      parsed-url=\"{&quot;url&quot;:&quot;https:\\\/\\\/res.cloudinary.com\\\/demo\\\/image\\\/upload\\\/e_art:sizzle\\\/flowers.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;effect&quot;:&quot;art:sizzle&quot;}],&quot;transformation_string&quot;:&quot;e_art:sizzle&quot;,&quot;url_suffix&quot;:&quot;&quot;,&quot;version&quot;:&quot;&quot;,&quot;secure&quot;:true,&quot;public_id&quot;:&quot;flowers.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\/e_art:sizzle\/flowers.jpg\" target=\"_blank\"><img decoding=\"async\" src=\"https:\/\/res.cloudinary.com\/demo\/image\/upload\/e_art:sizzle\/flowers.jpg\" alt=\"Flowers\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"5034\" height=\"2653\"\/><\/a><\/p>\n<div class='c-callout  c-callout--inline-title c-callout--note'><strong class='c-callout__title'>Note:<\/strong> <p>There are several effects, such as athena, audrey, frost, quartz, zorro and more. Check out <a href=\"https:\/\/cloudinary.com\/documentation\/image_transformations#blurring_pixelating_and_sharpening_effects\">the docs for more filter effects<\/a>.<\/p><\/div>\n<p>And consult the <a href=\"https:\/\/cloudinary.com\/documentation\/image_transformations#blurring_pixelating_and_sharpening_effects\">Cloudinary documentation<\/a> to see a wide array image transformation techniques.<\/p>\n<h2>Conclusion<\/h2>\n<p>The Image Transformation Chatbot can be further improved to provide more functionality. We can have the chatbot analyze images and detect objects in them. In addition, we can connect the chatbot with <a href=\"https:\/\/cloud.google.com\/speech\/\">Google Cloud Speech API<\/a> to enable a user to speak the commands to the bot. The chatbot will convert audio to text, pass the text onto the Parser Service, process and return the desired results.<\/p>\n<p>One thing to consider, though. The chatbot understands commands written only in English. What about making it multilingual so that our Spanish, French, Dutch or Chinese colleagues could write commands in their language and have the chatbot process and work correctly? Awesome right? <a href=\"https:\/\/cloud.google.com\/translate\/\">Google Cloud Translation Service<\/a> might just come in handy here.<\/p>\n<p>Building a chatbot platform is not rocket science. Harnessing the potential and competence of serverless backends, such as <a href=\"https:\/\/cloudinary.com\/\">Cloudinary<\/a> and <a href=\"https:\/\/www.pubnub.com\/\">PubNub<\/a>, can empower you to automate tedious, time-consuming tasks by building interactive software that simply works.<\/p>\n<p>What would you like a Cloudinary-powered Chatbot to do? Let me know in the comments section.<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"","protected":false},"author":41,"featured_media":21565,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_cloudinary_featured_overwrite":false,"footnotes":""},"categories":[1],"tags":[134,165],"class_list":["post-21564","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-guest-post","tag-image-transformation"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v25.6 (Yoast SEO v26.9) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>ChatBot Platform for Image Transformation<\/title>\n<meta name=\"description\" content=\"Building a chatbot is not rocket science. Harnessing the potential of serverless backends, such as Cloudinary and PubNub can automate time-consuming tasks\" \/>\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\/chatbot_for_image_manipulation\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"ChatBot Platform for Image Transformation\" \/>\n<meta property=\"og:description\" content=\"Building a chatbot is not rocket science. Harnessing the potential of serverless backends, such as Cloudinary and PubNub can automate time-consuming tasks\" \/>\n<meta property=\"og:url\" content=\"https:\/\/cloudinary.com\/blog\/chatbot_for_image_manipulation\" \/>\n<meta property=\"og:site_name\" content=\"Cloudinary Blog\" \/>\n<meta property=\"article:published_time\" content=\"2017-07-24T17:44:20+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-03-02T22:31:12+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/v1649724109\/Web_Assets\/blog\/Chatbot\/Chatbot-png?_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\/png\" \/>\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\/chatbot_for_image_manipulation#article\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/chatbot_for_image_manipulation\"},\"author\":{\"name\":\"\",\"@id\":\"\"},\"headline\":\"ChatBot Platform for Image Transformation\",\"datePublished\":\"2017-07-24T17:44:20+00:00\",\"dateModified\":\"2025-03-02T22:31:12+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/chatbot_for_image_manipulation\"},\"wordCount\":5,\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/chatbot_for_image_manipulation#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649724109\/Web_Assets\/blog\/Chatbot\/Chatbot.png?_i=AA\",\"keywords\":[\"Guest Post\",\"Image Transformation\"],\"inLanguage\":\"en-US\",\"copyrightYear\":\"2017\",\"copyrightHolder\":{\"@id\":\"https:\/\/cloudinary.com\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/cloudinary.com\/blog\/chatbot_for_image_manipulation\",\"url\":\"https:\/\/cloudinary.com\/blog\/chatbot_for_image_manipulation\",\"name\":\"ChatBot Platform for Image Transformation\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/chatbot_for_image_manipulation#primaryimage\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/chatbot_for_image_manipulation#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649724109\/Web_Assets\/blog\/Chatbot\/Chatbot.png?_i=AA\",\"datePublished\":\"2017-07-24T17:44:20+00:00\",\"dateModified\":\"2025-03-02T22:31:12+00:00\",\"description\":\"Building a chatbot is not rocket science. Harnessing the potential of serverless backends, such as Cloudinary and PubNub can automate time-consuming tasks\",\"breadcrumb\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/chatbot_for_image_manipulation#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/cloudinary.com\/blog\/chatbot_for_image_manipulation\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/chatbot_for_image_manipulation#primaryimage\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649724109\/Web_Assets\/blog\/Chatbot\/Chatbot.png?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649724109\/Web_Assets\/blog\/Chatbot\/Chatbot.png?_i=AA\",\"width\":1540,\"height\":847},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/cloudinary.com\/blog\/chatbot_for_image_manipulation#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/cloudinary.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"ChatBot Platform for Image Transformation\"}]},{\"@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":"ChatBot Platform for Image Transformation","description":"Building a chatbot is not rocket science. Harnessing the potential of serverless backends, such as Cloudinary and PubNub can automate time-consuming tasks","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\/chatbot_for_image_manipulation","og_locale":"en_US","og_type":"article","og_title":"ChatBot Platform for Image Transformation","og_description":"Building a chatbot is not rocket science. Harnessing the potential of serverless backends, such as Cloudinary and PubNub can automate time-consuming tasks","og_url":"https:\/\/cloudinary.com\/blog\/chatbot_for_image_manipulation","og_site_name":"Cloudinary Blog","article_published_time":"2017-07-24T17:44:20+00:00","article_modified_time":"2025-03-02T22:31:12+00:00","og_image":[{"width":1540,"height":847,"url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/v1649724109\/Web_Assets\/blog\/Chatbot\/Chatbot-png?_i=AA","type":"image\/png"}],"twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"NewsArticle","@id":"https:\/\/cloudinary.com\/blog\/chatbot_for_image_manipulation#article","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/chatbot_for_image_manipulation"},"author":{"name":"","@id":""},"headline":"ChatBot Platform for Image Transformation","datePublished":"2017-07-24T17:44:20+00:00","dateModified":"2025-03-02T22:31:12+00:00","mainEntityOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/chatbot_for_image_manipulation"},"wordCount":5,"publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/chatbot_for_image_manipulation#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649724109\/Web_Assets\/blog\/Chatbot\/Chatbot.png?_i=AA","keywords":["Guest Post","Image Transformation"],"inLanguage":"en-US","copyrightYear":"2017","copyrightHolder":{"@id":"https:\/\/cloudinary.com\/#organization"}},{"@type":"WebPage","@id":"https:\/\/cloudinary.com\/blog\/chatbot_for_image_manipulation","url":"https:\/\/cloudinary.com\/blog\/chatbot_for_image_manipulation","name":"ChatBot Platform for Image Transformation","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/chatbot_for_image_manipulation#primaryimage"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/chatbot_for_image_manipulation#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649724109\/Web_Assets\/blog\/Chatbot\/Chatbot.png?_i=AA","datePublished":"2017-07-24T17:44:20+00:00","dateModified":"2025-03-02T22:31:12+00:00","description":"Building a chatbot is not rocket science. Harnessing the potential of serverless backends, such as Cloudinary and PubNub can automate time-consuming tasks","breadcrumb":{"@id":"https:\/\/cloudinary.com\/blog\/chatbot_for_image_manipulation#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/cloudinary.com\/blog\/chatbot_for_image_manipulation"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/chatbot_for_image_manipulation#primaryimage","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649724109\/Web_Assets\/blog\/Chatbot\/Chatbot.png?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649724109\/Web_Assets\/blog\/Chatbot\/Chatbot.png?_i=AA","width":1540,"height":847},{"@type":"BreadcrumbList","@id":"https:\/\/cloudinary.com\/blog\/chatbot_for_image_manipulation#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/cloudinary.com\/blog\/"},{"@type":"ListItem","position":2,"name":"ChatBot Platform for Image Transformation"}]},{"@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\/v1649724109\/Web_Assets\/blog\/Chatbot\/Chatbot.png?_i=AA","_links":{"self":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/21564","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=21564"}],"version-history":[{"count":4,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/21564\/revisions"}],"predecessor-version":[{"id":37091,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/21564\/revisions\/37091"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media\/21565"}],"wp:attachment":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media?parent=21564"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/categories?post=21564"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/tags?post=21564"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}