{"id":21764,"date":"2018-07-23T13:40:08","date_gmt":"2018-07-23T13:40:08","guid":{"rendered":"http:\/\/automatically_generating_attendee_tags_for_conferences"},"modified":"2024-06-06T12:51:23","modified_gmt":"2024-06-06T19:51:23","slug":"automatically_generating_attendee_tags_for_conferences","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/automatically_generating_attendee_tags_for_conferences","title":{"rendered":"Automatically Generating Conference Tags"},"content":{"rendered":"<div class=\"wp-block-cloudinary-markdown \"><p>Nowadays, community managers and developer teams in organizations around the world routinely set up local and international conferences, physical or remote. Those meetups not only empower attendees with the latest information regarding the conference themes, but also provide a great opportunity for the organizers to showcase and advocate their products and services.<\/p>\n<p>As a result, thousands of conferences are constantly taking place across the globe. One problem that the organizers must grapple with is the need to generate attendee tags, complete with images and names, for hundreds or even thousands of participants spread all over the world given the enormity of the issue, most organizers simply skip that step. Here comes the good news: with Cloudinary, you don\u2019t have to skip it any more.<\/p>\n<p>This tutorial shows you how Cloudinary enables you to automatically generate conference tags on the fly as attendees register by overlaying their pictures and names on their tags. The best part is that the entire process takes place on the browser by simply transform image URLs there\u2014with no coding whatsoever.<\/p>\n<p>A major use case for that feature is the <a href=\"https:\/\/concatenate.io\">Concatenate<\/a> conference-registration site, which uses the Cloudinary image-overlay feature to generate tags for over 1,000 conference attendees. Here\u2019s a sample:<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/cloudinary-res.cloudinary.com\/image\/upload\/dpr_auto\/Name_Badge_conf.png\" alt=\"Concatenate\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"294\" height=\"704\"\/><\/p>\n<p>As soon as you upload your attendees\u2019 images and specify their names on Concatenate on the browser, Cloudinary overlays them on the attendee tags. Read on for the details of the steps involved.<\/p>\n<h2>Image Uploads<\/h2>\n<p>First, upload all the attendees\u2019 images to Cloudinary by embedding the Cloudinary upload widget in the registration site for your conference. That way, they will have unique public IDs assigned by Cloudinary. You can then access and transform them through the IDs.<\/p>\n<p>Each <a href=\"https:\/\/cloudinary.com\/blog\/automating_file_upload_and_sharing\">file uploaded<\/a> image is in the form of a URL in this format:<\/p>\n<pre class=\"js-syntax-highlighted\"><code>https:\/\/res.cloudinary.com\/*cloud-name*\/image\/upload\/v1531317427\/*publicID*.png`\n<\/code><\/pre>\n<p>In the link above, replace <em>cloud-name<\/em> with the one in your Cloudinary console and <em>publicID<\/em> with that of the image you uploaded. The attendee\u2019s avatar then looks like this:<\/p>\n<p><cld-code-widget\n      class=\" c-code-widget\"\n      snippets=\"[{&quot;sdkId&quot;:&quot;nodejs&quot;,&quot;framework&quot;:&quot;nodejs&quot;,&quot;language&quot;:&quot;nodejs&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.image(\\&quot;attendee_avatar.jpg\\&quot;)&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image(\\&quot;attendee_avatar.jpg\\&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;attendee_avatar.jpg\\&quot;).setVersion(1531899989);&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;attendee_avatar.jpg\\&quot;).setVersion(1531899989);&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;attendee_avatar.jpg\\&quot; &gt; &lt;\\\/Image&gt;&quot;,&quot;codeSnippet&quot;:&quot;&lt;Image publicId=\\&quot;attendee_avatar.jpg\\&quot; &gt;\\n\\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;attendee_avatar.jpg\\&quot;).setVersion(1531899989);&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;attendee_avatar.jpg\\&quot;).setVersion(1531899989);&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;attendee_avatar.jpg\\&quot; &gt; &lt;\\\/cld-image&gt;&quot;,&quot;codeSnippet&quot;:&quot;&lt;cld-image public-id=\\&quot;attendee_avatar.jpg\\&quot; &gt;\\n\\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;attendee_avatar.jpg\\&quot;).setVersion(1531899989);&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;attendee_avatar.jpg\\&quot;).setVersion(1531899989);&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;attendee_avatar.jpg\\&quot; &gt; &lt;\\\/cl-image&gt;&quot;,&quot;codeSnippet&quot;:&quot;&lt;cl-image public-id=\\&quot;attendee_avatar.jpg\\&quot; &gt;\\n\\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;attendee_avatar.jpg\\&quot;).setVersion(1531899989);&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;attendee_avatar.jpg\\&quot;).setVersion(1531899989);&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;attendee_avatar.jpg&#039;).toHtml();&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.imageTag(&#039;attendee_avatar.jpg&#039;).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;attendee_avatar.jpg\\&quot;).image()&quot;,&quot;codeSnippet&quot;:&quot;CloudinaryImage(\\&quot;attendee_avatar.jpg\\&quot;).image()&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;attendee_avatar.jpg&#039;))\\n\\t-&gt;version(1531899989);&quot;,&quot;codeSnippet&quot;:&quot;(new ImageTag(&#039;attendee_avatar.jpg&#039;))\\n\\t-&gt;version(1531899989);&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;attendee_avatar.jpg\\&quot;)&quot;,&quot;codeSnippet&quot;:&quot;cl_image_tag(\\&quot;attendee_avatar.jpg\\&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().imageTag(\\&quot;attendee_avatar.jpg\\&quot;);&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.url().transformation(new Transformation().imageTag(\\&quot;attendee_avatar.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;attendee_avatar.jpg\\&quot;)&quot;,&quot;codeSnippet&quot;:&quot;cl_image_tag(\\&quot;attendee_avatar.jpg\\&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.BuildImageTag(\\&quot;attendee_avatar.jpg\\&quot;)&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.Api.UrlImgUp.BuildImageTag(\\&quot;attendee_avatar.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;attendee_avatar.jpg&#039;).transformation(Transformation()\\n\\t.version(1531899989));&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image(&#039;attendee_avatar.jpg&#039;).transformation(Transformation()\\n\\t.version(1531899989));&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().generate(\\&quot;attendee_avatar.jpg\\&quot;)!, cloudinary: cloudinary)&quot;,&quot;codeSnippet&quot;:&quot;imageView.cldSetImage(cloudinary.createUrl().generate(\\&quot;attendee_avatar.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().generate(\\&quot;attendee_avatar.jpg\\&quot;);&quot;,&quot;codeSnippet&quot;:&quot;MediaManager.get().url().transformation(new Transformation().generate(\\&quot;attendee_avatar.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;attendee_avatar.jpg&#039;).transformation(Transformation()\\n\\t.version(1531899989));&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image(&#039;attendee_avatar.jpg&#039;).transformation(Transformation()\\n\\t.version(1531899989));&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;attendee_avatar.jpg\\&quot;)\\n\\t version(1531899989) \\n}.generate()&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image {\\n\\tpublicId(\\&quot;attendee_avatar.jpg\\&quot;)\\n\\t version(1531899989) \\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;attendee_avatar.jpg\\&quot;)&quot;,&quot;codeSnippet&quot;:&quot;$.cloudinary.image(\\&quot;attendee_avatar.jpg\\&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;attendee_avatar.jpg\\&quot;).setVersion(1531899989);&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;attendee_avatar.jpg\\&quot;).setVersion(1531899989);&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\\\/v1531899989\\\/attendee_avatar.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;transformation_string&quot;:&quot;&quot;,&quot;url_suffix&quot;:&quot;&quot;,&quot;version&quot;:&quot;1531899989&quot;,&quot;secure&quot;:true,&quot;public_id&quot;:&quot;attendee_avatar.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\/v1531899989\/attendee_avatar.jpg\" target=\"_blank\"><img decoding=\"async\" src=\"https:\/\/res.cloudinary.com\/demo\/image\/upload\/v1531899989\/attendee_avatar.jpg\" alt=\"Attendee Avatar\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"512\" height=\"512\"\/><\/a><\/p>\n<h2>Image Transformation<\/h2>\n<p>You can now start transformation the uploaded images as you see fit. With Cloudinary, you can transform them directly from their URLs by adding the required properties. Say, you want to overlay an avatar on the base image of a conference tag, which serves as the background. Once you have uploaded the related image, the API call returns a Hash with the image details, such as the URL, public ID, and so forth.<\/p>\n<h2>Avatar Overlays<\/h2>\n<p>To overlay an avatar on the base image, add the <code>overlay<\/code> parameter (<code>l<\/code> in URLs) and the public ID of a previously uploaded image. For example, if you have a previously uploaded image with the public ID <code>conference_tag<\/code>\u2014<\/p>\n<p><cld-code-widget\n      class=\" c-code-widget\"\n      snippets=\"[{&quot;sdkId&quot;:&quot;nodejs&quot;,&quot;framework&quot;:&quot;nodejs&quot;,&quot;language&quot;:&quot;nodejs&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.image(\\&quot;conference_tag.png\\&quot;)&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image(\\&quot;conference_tag.png\\&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;conference_tag.png\\&quot;).setVersion(1532104433);&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;conference_tag.png\\&quot;).setVersion(1532104433);&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;conference_tag.png\\&quot; &gt; &lt;\\\/Image&gt;&quot;,&quot;codeSnippet&quot;:&quot;&lt;Image publicId=\\&quot;conference_tag.png\\&quot; &gt;\\n\\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;conference_tag.png\\&quot;).setVersion(1532104433);&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;conference_tag.png\\&quot;).setVersion(1532104433);&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;conference_tag.png\\&quot; &gt; &lt;\\\/cld-image&gt;&quot;,&quot;codeSnippet&quot;:&quot;&lt;cld-image public-id=\\&quot;conference_tag.png\\&quot; &gt;\\n\\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;conference_tag.png\\&quot;).setVersion(1532104433);&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;conference_tag.png\\&quot;).setVersion(1532104433);&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;conference_tag.png\\&quot; &gt; &lt;\\\/cl-image&gt;&quot;,&quot;codeSnippet&quot;:&quot;&lt;cl-image public-id=\\&quot;conference_tag.png\\&quot; &gt;\\n\\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;conference_tag.png\\&quot;).setVersion(1532104433);&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;conference_tag.png\\&quot;).setVersion(1532104433);&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;conference_tag.png&#039;).toHtml();&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.imageTag(&#039;conference_tag.png&#039;).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;conference_tag.png\\&quot;).image()&quot;,&quot;codeSnippet&quot;:&quot;CloudinaryImage(\\&quot;conference_tag.png\\&quot;).image()&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;conference_tag.png&#039;))\\n\\t-&gt;version(1532104433);&quot;,&quot;codeSnippet&quot;:&quot;(new ImageTag(&#039;conference_tag.png&#039;))\\n\\t-&gt;version(1532104433);&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;conference_tag.png\\&quot;)&quot;,&quot;codeSnippet&quot;:&quot;cl_image_tag(\\&quot;conference_tag.png\\&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().imageTag(\\&quot;conference_tag.png\\&quot;);&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.url().transformation(new Transformation().imageTag(\\&quot;conference_tag.png\\&quot;);&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Java&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;},{&quot;sdkId&quot;:&quot;ruby&quot;,&quot;framework&quot;:&quot;ruby&quot;,&quot;language&quot;:&quot;ruby&quot;,&quot;rawCodeSnippet&quot;:&quot;cl_image_tag(\\&quot;conference_tag.png\\&quot;)&quot;,&quot;codeSnippet&quot;:&quot;cl_image_tag(\\&quot;conference_tag.png\\&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.BuildImageTag(\\&quot;conference_tag.png\\&quot;)&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.Api.UrlImgUp.BuildImageTag(\\&quot;conference_tag.png\\&quot;)&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;.NET&quot;,&quot;packageName&quot;:&quot;CloudinaryDotNet&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;dart&quot;,&quot;framework&quot;:&quot;dart&quot;,&quot;language&quot;:&quot;dart&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.image(&#039;conference_tag.png&#039;).transformation(Transformation()\\n\\t.version(1532104433));&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image(&#039;conference_tag.png&#039;).transformation(Transformation()\\n\\t.version(1532104433));&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().generate(\\&quot;conference_tag.png\\&quot;)!, cloudinary: cloudinary)&quot;,&quot;codeSnippet&quot;:&quot;imageView.cldSetImage(cloudinary.createUrl().generate(\\&quot;conference_tag.png\\&quot;)!, cloudinary: cloudinary)&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;iOS&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;5.x&quot;},{&quot;sdkId&quot;:&quot;android&quot;,&quot;framework&quot;:&quot;android&quot;,&quot;language&quot;:&quot;android&quot;,&quot;rawCodeSnippet&quot;:&quot;MediaManager.get().url().transformation(new Transformation().generate(\\&quot;conference_tag.png\\&quot;);&quot;,&quot;codeSnippet&quot;:&quot;MediaManager.get().url().transformation(new Transformation().generate(\\&quot;conference_tag.png\\&quot;);&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Android&quot;,&quot;packageName&quot;:&quot;cloudinary-android&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;3.x&quot;},{&quot;sdkId&quot;:&quot;flutter&quot;,&quot;framework&quot;:&quot;flutter&quot;,&quot;language&quot;:&quot;flutter&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.image(&#039;conference_tag.png&#039;).transformation(Transformation()\\n\\t.version(1532104433));&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image(&#039;conference_tag.png&#039;).transformation(Transformation()\\n\\t.version(1532104433));&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;conference_tag.png\\&quot;)\\n\\t version(1532104433) \\n}.generate()&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image {\\n\\tpublicId(\\&quot;conference_tag.png\\&quot;)\\n\\t version(1532104433) \\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;conference_tag.png\\&quot;)&quot;,&quot;codeSnippet&quot;:&quot;$.cloudinary.image(\\&quot;conference_tag.png\\&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;conference_tag.png\\&quot;).setVersion(1532104433);&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;conference_tag.png\\&quot;).setVersion(1532104433);&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\\\/v1532104433\\\/conference_tag.png&quot;,&quot;cloud_name&quot;:&quot;demo&quot;,&quot;host&quot;:&quot;res.cloudinary.com&quot;,&quot;type&quot;:&quot;upload&quot;,&quot;resource_type&quot;:&quot;image&quot;,&quot;transformation&quot;:[],&quot;transformation_string&quot;:&quot;&quot;,&quot;url_suffix&quot;:&quot;&quot;,&quot;version&quot;:&quot;1532104433&quot;,&quot;secure&quot;:true,&quot;public_id&quot;:&quot;conference_tag.png&quot;,&quot;extension&quot;:&quot;png&quot;,&quot;format&quot;:&quot;png&quot;,&quot;format_code&quot;:true,&quot;url_code&quot;:false,&quot;signature&quot;:&quot;&quot;,&quot;private_cdn&quot;:false,&quot;result_asset_type&quot;:&quot;image&quot;}\"\n      with-url=\"true\"\n    >\n      <span class=\"u-visually-hidden\">Loading code examples<\/span>\n    <\/cld-code-widget><a class=\"c-image-link\" href=\"https:\/\/res.cloudinary.com\/demo\/image\/upload\/v1532104433\/conference_tag.png\" target=\"_blank\"><img decoding=\"async\" src=\"https:\/\/res.cloudinary.com\/demo\/image\/upload\/v1532104433\/conference_tag.png\" alt=\"Conference Tag\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"294\" height=\"704\"\/><\/a><\/p>\n<p>\u2014and you want to overlay the following uploaded avatar with the public ID <code>attendee_avatar<\/code> on the base image (the conference tag above):<\/p>\n<p><cld-code-widget\n      class=\" c-code-widget\"\n      snippets=\"[{&quot;sdkId&quot;:&quot;nodejs&quot;,&quot;framework&quot;:&quot;nodejs&quot;,&quot;language&quot;:&quot;nodejs&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.image(\\&quot;attendee_avatar.jpg\\&quot;)&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image(\\&quot;attendee_avatar.jpg\\&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;attendee_avatar.jpg\\&quot;).setVersion(1532104553);&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;attendee_avatar.jpg\\&quot;).setVersion(1532104553);&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;attendee_avatar.jpg\\&quot; &gt; &lt;\\\/Image&gt;&quot;,&quot;codeSnippet&quot;:&quot;&lt;Image publicId=\\&quot;attendee_avatar.jpg\\&quot; &gt;\\n\\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;attendee_avatar.jpg\\&quot;).setVersion(1532104553);&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;attendee_avatar.jpg\\&quot;).setVersion(1532104553);&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;attendee_avatar.jpg\\&quot; &gt; &lt;\\\/cld-image&gt;&quot;,&quot;codeSnippet&quot;:&quot;&lt;cld-image public-id=\\&quot;attendee_avatar.jpg\\&quot; &gt;\\n\\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;attendee_avatar.jpg\\&quot;).setVersion(1532104553);&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;attendee_avatar.jpg\\&quot;).setVersion(1532104553);&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;attendee_avatar.jpg\\&quot; &gt; &lt;\\\/cl-image&gt;&quot;,&quot;codeSnippet&quot;:&quot;&lt;cl-image public-id=\\&quot;attendee_avatar.jpg\\&quot; &gt;\\n\\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;attendee_avatar.jpg\\&quot;).setVersion(1532104553);&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;attendee_avatar.jpg\\&quot;).setVersion(1532104553);&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;attendee_avatar.jpg&#039;).toHtml();&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.imageTag(&#039;attendee_avatar.jpg&#039;).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;attendee_avatar.jpg\\&quot;).image()&quot;,&quot;codeSnippet&quot;:&quot;CloudinaryImage(\\&quot;attendee_avatar.jpg\\&quot;).image()&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;attendee_avatar.jpg&#039;))\\n\\t-&gt;version(1532104553);&quot;,&quot;codeSnippet&quot;:&quot;(new ImageTag(&#039;attendee_avatar.jpg&#039;))\\n\\t-&gt;version(1532104553);&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;attendee_avatar.jpg\\&quot;)&quot;,&quot;codeSnippet&quot;:&quot;cl_image_tag(\\&quot;attendee_avatar.jpg\\&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().imageTag(\\&quot;attendee_avatar.jpg\\&quot;);&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.url().transformation(new Transformation().imageTag(\\&quot;attendee_avatar.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;attendee_avatar.jpg\\&quot;)&quot;,&quot;codeSnippet&quot;:&quot;cl_image_tag(\\&quot;attendee_avatar.jpg\\&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.BuildImageTag(\\&quot;attendee_avatar.jpg\\&quot;)&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.Api.UrlImgUp.BuildImageTag(\\&quot;attendee_avatar.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;attendee_avatar.jpg&#039;).transformation(Transformation()\\n\\t.version(1532104553));&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image(&#039;attendee_avatar.jpg&#039;).transformation(Transformation()\\n\\t.version(1532104553));&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().generate(\\&quot;attendee_avatar.jpg\\&quot;)!, cloudinary: cloudinary)&quot;,&quot;codeSnippet&quot;:&quot;imageView.cldSetImage(cloudinary.createUrl().generate(\\&quot;attendee_avatar.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().generate(\\&quot;attendee_avatar.jpg\\&quot;);&quot;,&quot;codeSnippet&quot;:&quot;MediaManager.get().url().transformation(new Transformation().generate(\\&quot;attendee_avatar.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;attendee_avatar.jpg&#039;).transformation(Transformation()\\n\\t.version(1532104553));&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image(&#039;attendee_avatar.jpg&#039;).transformation(Transformation()\\n\\t.version(1532104553));&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;attendee_avatar.jpg\\&quot;)\\n\\t version(1532104553) \\n}.generate()&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image {\\n\\tpublicId(\\&quot;attendee_avatar.jpg\\&quot;)\\n\\t version(1532104553) \\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;attendee_avatar.jpg\\&quot;)&quot;,&quot;codeSnippet&quot;:&quot;$.cloudinary.image(\\&quot;attendee_avatar.jpg\\&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;attendee_avatar.jpg\\&quot;).setVersion(1532104553);&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;attendee_avatar.jpg\\&quot;).setVersion(1532104553);&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\\\/v1532104553\\\/attendee_avatar.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;transformation_string&quot;:&quot;&quot;,&quot;url_suffix&quot;:&quot;&quot;,&quot;version&quot;:&quot;1532104553&quot;,&quot;secure&quot;:true,&quot;public_id&quot;:&quot;attendee_avatar.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\/v1532104553\/attendee_avatar.jpg\" target=\"_blank\"><img decoding=\"async\" src=\"https:\/\/res.cloudinary.com\/demo\/image\/upload\/v1532104553\/attendee_avatar.jpg\" alt=\"attendee avatar\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"512\" height=\"512\"\/><\/a><\/p>\n<p>Edit the URL to overlay the avatar on the tag with the <code>l_<\/code> parameter, like this:<\/p>\n<p><cld-code-widget\n      class=\" c-code-widget\"\n      snippets=\"[{&quot;sdkId&quot;:&quot;nodejs&quot;,&quot;framework&quot;:&quot;nodejs&quot;,&quot;language&quot;:&quot;nodejs&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.image(\\&quot;conference_tag.png\\&quot;, {overlay: \\&quot;attendee_avatar\\&quot;})&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image(\\&quot;conference_tag.png\\&quot;, {overlay: \\&quot;attendee_avatar\\&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;conference_tag.png\\&quot;).overlay(\\n  source(image(\\&quot;attendee_avatar\\&quot;))\\n);&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;conference_tag.png\\&quot;).overlay(\\n  source(image(\\&quot;attendee_avatar\\&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;conference_tag.png\\&quot; &gt; &lt;Transformation overlay=\\&quot;attendee_avatar\\&quot; \\\/&gt; &lt;\\\/Image&gt;&quot;,&quot;codeSnippet&quot;:&quot;&lt;Image publicId=\\&quot;conference_tag.png\\&quot; &gt;\\n\\t&lt;Transformation overlay=\\&quot;attendee_avatar\\&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;conference_tag.png\\&quot;).overlay(\\n  source(image(\\&quot;attendee_avatar\\&quot;))\\n);&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;conference_tag.png\\&quot;).overlay(\\n  source(image(\\&quot;attendee_avatar\\&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;conference_tag.png\\&quot; &gt; &lt;cld-transformation :overlay=\\&quot;attendee_avatar\\&quot; \\\/&gt; &lt;\\\/cld-image&gt;&quot;,&quot;codeSnippet&quot;:&quot;&lt;cld-image public-id=\\&quot;conference_tag.png\\&quot; &gt;\\n\\t&lt;cld-transformation :overlay=\\&quot;attendee_avatar\\&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;conference_tag.png\\&quot;).overlay(\\n  source(image(\\&quot;attendee_avatar\\&quot;))\\n);&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;conference_tag.png\\&quot;).overlay(\\n  source(image(\\&quot;attendee_avatar\\&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;conference_tag.png\\&quot; &gt; &lt;cl-transformation overlay=\\&quot;attendee_avatar\\&quot;&gt; &lt;\\\/cl-transformation&gt; &lt;\\\/cl-image&gt;&quot;,&quot;codeSnippet&quot;:&quot;&lt;cl-image public-id=\\&quot;conference_tag.png\\&quot; &gt;\\n\\t&lt;cl-transformation overlay=\\&quot;attendee_avatar\\&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;conference_tag.png\\&quot;).overlay(\\n  source(image(\\&quot;attendee_avatar\\&quot;))\\n);&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;conference_tag.png\\&quot;).overlay(\\n  source(image(\\&quot;attendee_avatar\\&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;conference_tag.png&#039;, {overlay: new cloudinary.Layer().publicId(\\&quot;attendee_avatar\\&quot;)}).toHtml();&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.imageTag(&#039;conference_tag.png&#039;, {overlay: new cloudinary.Layer().publicId(\\&quot;attendee_avatar\\&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;conference_tag.png\\&quot;).image(overlay=\\&quot;attendee_avatar\\&quot;)&quot;,&quot;codeSnippet&quot;:&quot;CloudinaryImage(\\&quot;conference_tag.png\\&quot;).image(overlay=\\&quot;attendee_avatar\\&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;conference_tag.png&#039;))\\n\\t-&gt;overlay(Overlay::source(\\n\\tSource::image(\\&quot;attendee_avatar\\&quot;)));&quot;,&quot;codeSnippet&quot;:&quot;(new ImageTag(&#039;conference_tag.png&#039;))\\n\\t-&gt;overlay(Overlay::source(\\n\\tSource::image(\\&quot;attendee_avatar\\&quot;)));&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;PHP&quot;,&quot;packageName&quot;:&quot;cloudinary_php&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;3.x&quot;},{&quot;sdkId&quot;:&quot;php&quot;,&quot;framework&quot;:&quot;php&quot;,&quot;language&quot;:&quot;php&quot;,&quot;rawCodeSnippet&quot;:&quot;cl_image_tag(\\&quot;conference_tag.png\\&quot;, array(\\&quot;overlay\\&quot;=&gt;\\&quot;attendee_avatar\\&quot;))&quot;,&quot;codeSnippet&quot;:&quot;cl_image_tag(\\&quot;conference_tag.png\\&quot;, array(\\&quot;overlay\\&quot;=&gt;\\&quot;attendee_avatar\\&quot;))&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;PHP&quot;,&quot;packageName&quot;:&quot;cloudinary_php&quot;,&quot;packageStatus&quot;:&quot;legacy&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;java&quot;,&quot;framework&quot;:&quot;java&quot;,&quot;language&quot;:&quot;java&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.url().transformation(new Transformation().overlay(new Layer().publicId(\\&quot;attendee_avatar\\&quot;))).imageTag(\\&quot;conference_tag.png\\&quot;);&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.url().transformation(new Transformation().overlay(new Layer().publicId(\\&quot;attendee_avatar\\&quot;))).imageTag(\\&quot;conference_tag.png\\&quot;);&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Java&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;},{&quot;sdkId&quot;:&quot;ruby&quot;,&quot;framework&quot;:&quot;ruby&quot;,&quot;language&quot;:&quot;ruby&quot;,&quot;rawCodeSnippet&quot;:&quot;cl_image_tag(\\&quot;conference_tag.png\\&quot;, overlay: \\&quot;attendee_avatar\\&quot;)&quot;,&quot;codeSnippet&quot;:&quot;cl_image_tag(\\&quot;conference_tag.png\\&quot;, overlay: \\&quot;attendee_avatar\\&quot;)&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Ruby&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;},{&quot;sdkId&quot;:&quot;csharp&quot;,&quot;framework&quot;:&quot;csharp&quot;,&quot;language&quot;:&quot;csharp&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.Api.UrlImgUp.Transform(new Transformation().Overlay(new Layer().PublicId(\\&quot;attendee_avatar\\&quot;))).BuildImageTag(\\&quot;conference_tag.png\\&quot;)&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.Api.UrlImgUp.Transform(new Transformation().Overlay(new Layer().PublicId(\\&quot;attendee_avatar\\&quot;))).BuildImageTag(\\&quot;conference_tag.png\\&quot;)&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;.NET&quot;,&quot;packageName&quot;:&quot;CloudinaryDotNet&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;dart&quot;,&quot;framework&quot;:&quot;dart&quot;,&quot;language&quot;:&quot;dart&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.image(&#039;conference_tag.png&#039;).transformation(Transformation()\\n\\t.overlay(Overlay.source(\\n\\tSource.image(\\&quot;attendee_avatar\\&quot;))));&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image(&#039;conference_tag.png&#039;).transformation(Transformation()\\n\\t.overlay(Overlay.source(\\n\\tSource.image(\\&quot;attendee_avatar\\&quot;))));&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Dart&quot;,&quot;packageName&quot;:&quot;cloudinary_dart&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;swift&quot;,&quot;framework&quot;:&quot;swift&quot;,&quot;language&quot;:&quot;swift&quot;,&quot;rawCodeSnippet&quot;:&quot;imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setOverlay(\\&quot;attendee_avatar\\&quot;)).generate(\\&quot;conference_tag.png\\&quot;)!, cloudinary: cloudinary)&quot;,&quot;codeSnippet&quot;:&quot;imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setOverlay(\\&quot;attendee_avatar\\&quot;)).generate(\\&quot;conference_tag.png\\&quot;)!, cloudinary: cloudinary)&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;iOS&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;5.x&quot;},{&quot;sdkId&quot;:&quot;android&quot;,&quot;framework&quot;:&quot;android&quot;,&quot;language&quot;:&quot;android&quot;,&quot;rawCodeSnippet&quot;:&quot;MediaManager.get().url().transformation(new Transformation().overlay(new Layer().publicId(\\&quot;attendee_avatar\\&quot;))).generate(\\&quot;conference_tag.png\\&quot;);&quot;,&quot;codeSnippet&quot;:&quot;MediaManager.get().url().transformation(new Transformation().overlay(new Layer().publicId(\\&quot;attendee_avatar\\&quot;))).generate(\\&quot;conference_tag.png\\&quot;);&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Android&quot;,&quot;packageName&quot;:&quot;cloudinary-android&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;3.x&quot;},{&quot;sdkId&quot;:&quot;flutter&quot;,&quot;framework&quot;:&quot;flutter&quot;,&quot;language&quot;:&quot;flutter&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.image(&#039;conference_tag.png&#039;).transformation(Transformation()\\n\\t.overlay(Overlay.source(\\n\\tSource.image(\\&quot;attendee_avatar\\&quot;))));&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image(&#039;conference_tag.png&#039;).transformation(Transformation()\\n\\t.overlay(Overlay.source(\\n\\tSource.image(\\&quot;attendee_avatar\\&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;conference_tag.png\\&quot;)\\n\\t overlay(Overlay.source(\\n\\tSource.image(\\&quot;attendee_avatar\\&quot;))) \\n}.generate()&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image {\\n\\tpublicId(\\&quot;conference_tag.png\\&quot;)\\n\\t overlay(Overlay.source(\\n\\tSource.image(\\&quot;attendee_avatar\\&quot;))) \\n}.generate()&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Kotlin&quot;,&quot;packageName&quot;:&quot;kotlin-url-gen&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;jquery&quot;,&quot;framework&quot;:&quot;jquery&quot;,&quot;language&quot;:&quot;jquery&quot;,&quot;rawCodeSnippet&quot;:&quot;$.cloudinary.image(\\&quot;conference_tag.png\\&quot;, {overlay: new cloudinary.Layer().publicId(\\&quot;attendee_avatar\\&quot;)})&quot;,&quot;codeSnippet&quot;:&quot;$.cloudinary.image(\\&quot;conference_tag.png\\&quot;, {overlay: new cloudinary.Layer().publicId(\\&quot;attendee_avatar\\&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;conference_tag.png\\&quot;).overlay(\\n  source(image(\\&quot;attendee_avatar\\&quot;))\\n);&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;conference_tag.png\\&quot;).overlay(\\n  source(image(\\&quot;attendee_avatar\\&quot;))\\n);&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;React Native&quot;,&quot;packageName&quot;:&quot;cloudinary-react-native&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;}]\"\n      parsed-url=\"{&quot;url&quot;:&quot;https:\\\/\\\/res.cloudinary.com\\\/demo\\\/image\\\/upload\\\/l_attendee_avatar\\\/conference_tag.png&quot;,&quot;cloud_name&quot;:&quot;demo&quot;,&quot;host&quot;:&quot;res.cloudinary.com&quot;,&quot;type&quot;:&quot;upload&quot;,&quot;resource_type&quot;:&quot;image&quot;,&quot;transformation&quot;:[{&quot;overlay&quot;:&quot;attendee_avatar&quot;}],&quot;transformation_string&quot;:&quot;l_attendee_avatar&quot;,&quot;url_suffix&quot;:&quot;&quot;,&quot;version&quot;:&quot;&quot;,&quot;secure&quot;:true,&quot;public_id&quot;:&quot;conference_tag.png&quot;,&quot;extension&quot;:&quot;png&quot;,&quot;format&quot;:&quot;png&quot;,&quot;format_code&quot;:true,&quot;url_code&quot;:false,&quot;signature&quot;:&quot;&quot;,&quot;private_cdn&quot;:false,&quot;result_asset_type&quot;:&quot;image&quot;}\"\n      with-url=\"true\"\n    >\n      <span class=\"u-visually-hidden\">Loading code examples<\/span>\n    <\/cld-code-widget><a class=\"c-image-link\" href=\"https:\/\/res.cloudinary.com\/demo\/image\/upload\/l_attendee_avatar\/conference_tag.png\" target=\"_blank\"><img decoding=\"async\" src=\"https:\/\/res.cloudinary.com\/demo\/image\/upload\/l_attendee_avatar\/conference_tag.png\" alt=\"Conference Tag\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"512\" height=\"704\"\/><\/a><\/p>\n<p>You\u2019ve now overlaid the avatar on the base image. However, the avatar spans across the entire width of the image, which looks odd. To fix that issue, transform the overlay, as explained in the next section.<\/p>\n<h2>Overlay Transformations<\/h2>\n<p>You can resize an overlay and <a href=\"https:\/\/cloudinary.com\/documentation\/transformation_reference\">transform<\/a> it just like any other image that\u2019s been uploaded to Cloudinary. For example, to appropriately scale an avatar overlay to fit the desired placeholder size, edit the URL to further define the parameters for the overlay, for example, assign it a radius of 100 pixels (for a circular image), a width of 120 pixels, and x\/y coordinates of 6 and 24, respectively, like this:<\/p>\n<p><cld-code-widget\n      class=\" c-code-widget\"\n      snippets=\"[{&quot;sdkId&quot;:&quot;nodejs&quot;,&quot;framework&quot;:&quot;nodejs&quot;,&quot;language&quot;:&quot;nodejs&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.image(\\&quot;conference_tag.png\\&quot;, {overlay: \\&quot;attendee_avatar\\&quot;, radius: 100, width: 120, x: 6, y: 24})&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image(\\&quot;conference_tag.png\\&quot;, {overlay: \\&quot;attendee_avatar\\&quot;, radius: 100, width: 120, x: 6, y: 24})&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;conference_tag.png\\&quot;).overlay(\\n  source(\\n    image(\\&quot;attendee_avatar\\&quot;).transformation(\\n      new Transformation()\\n        .resize(scale().width(120))\\n        .roundCorners(byRadius(100))\\n    )\\n  ).position(new Position().offsetX(6).offsetY(24))\\n);&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;conference_tag.png\\&quot;).overlay(\\n  source(\\n    image(\\&quot;attendee_avatar\\&quot;).transformation(\\n      new Transformation()\\n        .resize(scale().width(120))\\n        .roundCorners(byRadius(100))\\n    )\\n  ).position(new Position().offsetX(6).offsetY(24))\\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;conference_tag.png\\&quot; &gt; &lt;Transformation overlay=\\&quot;attendee_avatar\\&quot; radius=\\&quot;100\\&quot; width=\\&quot;120\\&quot; x=\\&quot;6\\&quot; y=\\&quot;24\\&quot; \\\/&gt; &lt;\\\/Image&gt;&quot;,&quot;codeSnippet&quot;:&quot;&lt;Image publicId=\\&quot;conference_tag.png\\&quot; &gt;\\n\\t&lt;Transformation overlay=\\&quot;attendee_avatar\\&quot; radius=\\&quot;100\\&quot; width=\\&quot;120\\&quot; x=\\&quot;6\\&quot; y=\\&quot;24\\&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;conference_tag.png\\&quot;).overlay(\\n  source(\\n    image(\\&quot;attendee_avatar\\&quot;).transformation(\\n      new Transformation()\\n        .resize(scale().width(120))\\n        .roundCorners(byRadius(100))\\n    )\\n  ).position(new Position().offsetX(6).offsetY(24))\\n);&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;conference_tag.png\\&quot;).overlay(\\n  source(\\n    image(\\&quot;attendee_avatar\\&quot;).transformation(\\n      new Transformation()\\n        .resize(scale().width(120))\\n        .roundCorners(byRadius(100))\\n    )\\n  ).position(new Position().offsetX(6).offsetY(24))\\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;conference_tag.png\\&quot; &gt; &lt;cld-transformation :overlay=\\&quot;attendee_avatar\\&quot; radius=\\&quot;100\\&quot; width=\\&quot;120\\&quot; x=\\&quot;6\\&quot; y=\\&quot;24\\&quot; \\\/&gt; &lt;\\\/cld-image&gt;&quot;,&quot;codeSnippet&quot;:&quot;&lt;cld-image public-id=\\&quot;conference_tag.png\\&quot; &gt;\\n\\t&lt;cld-transformation :overlay=\\&quot;attendee_avatar\\&quot; radius=\\&quot;100\\&quot; width=\\&quot;120\\&quot; x=\\&quot;6\\&quot; y=\\&quot;24\\&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;conference_tag.png\\&quot;).overlay(\\n  source(\\n    image(\\&quot;attendee_avatar\\&quot;).transformation(\\n      new Transformation()\\n        .resize(scale().width(120))\\n        .roundCorners(byRadius(100))\\n    )\\n  ).position(new Position().offsetX(6).offsetY(24))\\n);&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;conference_tag.png\\&quot;).overlay(\\n  source(\\n    image(\\&quot;attendee_avatar\\&quot;).transformation(\\n      new Transformation()\\n        .resize(scale().width(120))\\n        .roundCorners(byRadius(100))\\n    )\\n  ).position(new Position().offsetX(6).offsetY(24))\\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;conference_tag.png\\&quot; &gt; &lt;cl-transformation overlay=\\&quot;attendee_avatar\\&quot; radius=\\&quot;100\\&quot; width=\\&quot;120\\&quot; x=\\&quot;6\\&quot; y=\\&quot;24\\&quot;&gt; &lt;\\\/cl-transformation&gt; &lt;\\\/cl-image&gt;&quot;,&quot;codeSnippet&quot;:&quot;&lt;cl-image public-id=\\&quot;conference_tag.png\\&quot; &gt;\\n\\t&lt;cl-transformation overlay=\\&quot;attendee_avatar\\&quot; radius=\\&quot;100\\&quot; width=\\&quot;120\\&quot; x=\\&quot;6\\&quot; y=\\&quot;24\\&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;conference_tag.png\\&quot;).overlay(\\n  source(\\n    image(\\&quot;attendee_avatar\\&quot;).transformation(\\n      new Transformation()\\n        .resize(scale().width(120))\\n        .roundCorners(byRadius(100))\\n    )\\n  ).position(new Position().offsetX(6).offsetY(24))\\n);&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;conference_tag.png\\&quot;).overlay(\\n  source(\\n    image(\\&quot;attendee_avatar\\&quot;).transformation(\\n      new Transformation()\\n        .resize(scale().width(120))\\n        .roundCorners(byRadius(100))\\n    )\\n  ).position(new Position().offsetX(6).offsetY(24))\\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;conference_tag.png&#039;, {overlay: new cloudinary.Layer().publicId(\\&quot;attendee_avatar\\&quot;), radius: 100, width: 120, x: 6, y: 24}).toHtml();&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.imageTag(&#039;conference_tag.png&#039;, {overlay: new cloudinary.Layer().publicId(\\&quot;attendee_avatar\\&quot;), radius: 100, width: 120, x: 6, y: 24}).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;conference_tag.png\\&quot;).image(overlay=\\&quot;attendee_avatar\\&quot;, radius=100, width=120, x=6, y=24)&quot;,&quot;codeSnippet&quot;:&quot;CloudinaryImage(\\&quot;conference_tag.png\\&quot;).image(overlay=\\&quot;attendee_avatar\\&quot;, radius=100, width=120, x=6, y=24)&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;conference_tag.png&#039;))\\n\\t-&gt;overlay(Overlay::source(\\n\\tSource::image(\\&quot;attendee_avatar\\&quot;)\\n\\t-&gt;transformation((new Transformation())\\n\\t-&gt;resize(Resize::scale()-&gt;width(120))\\n\\t-&gt;roundCorners(RoundCorners::byRadius(100)))\\n\\t)\\n\\t-&gt;position((new Position())-&gt;offsetX(6)\\n-&gt;offsetY(24))\\n\\t);&quot;,&quot;codeSnippet&quot;:&quot;(new ImageTag(&#039;conference_tag.png&#039;))\\n\\t-&gt;overlay(Overlay::source(\\n\\tSource::image(\\&quot;attendee_avatar\\&quot;)\\n\\t-&gt;transformation((new Transformation())\\n\\t-&gt;resize(Resize::scale()-&gt;width(120))\\n\\t-&gt;roundCorners(RoundCorners::byRadius(100)))\\n\\t)\\n\\t-&gt;position((new Position())-&gt;offsetX(6)\\n-&gt;offsetY(24))\\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;conference_tag.png\\&quot;, array(\\&quot;overlay\\&quot;=&gt;\\&quot;attendee_avatar\\&quot;, \\&quot;radius\\&quot;=&gt;100, \\&quot;width\\&quot;=&gt;120, \\&quot;x\\&quot;=&gt;6, \\&quot;y\\&quot;=&gt;24))&quot;,&quot;codeSnippet&quot;:&quot;cl_image_tag(\\&quot;conference_tag.png\\&quot;, array(\\&quot;overlay\\&quot;=&gt;\\&quot;attendee_avatar\\&quot;, \\&quot;radius\\&quot;=&gt;100, \\&quot;width\\&quot;=&gt;120, \\&quot;x\\&quot;=&gt;6, \\&quot;y\\&quot;=&gt;24))&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;PHP&quot;,&quot;packageName&quot;:&quot;cloudinary_php&quot;,&quot;packageStatus&quot;:&quot;legacy&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;java&quot;,&quot;framework&quot;:&quot;java&quot;,&quot;language&quot;:&quot;java&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.url().transformation(new Transformation().overlay(new Layer().publicId(\\&quot;attendee_avatar\\&quot;)).radius(100).width(120).x(6).y(24)).imageTag(\\&quot;conference_tag.png\\&quot;);&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.url().transformation(new Transformation().overlay(new Layer().publicId(\\&quot;attendee_avatar\\&quot;)).radius(100).width(120).x(6).y(24)).imageTag(\\&quot;conference_tag.png\\&quot;);&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Java&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;},{&quot;sdkId&quot;:&quot;ruby&quot;,&quot;framework&quot;:&quot;ruby&quot;,&quot;language&quot;:&quot;ruby&quot;,&quot;rawCodeSnippet&quot;:&quot;cl_image_tag(\\&quot;conference_tag.png\\&quot;, overlay: \\&quot;attendee_avatar\\&quot;, radius: 100, width: 120, x: 6, y: 24)&quot;,&quot;codeSnippet&quot;:&quot;cl_image_tag(\\&quot;conference_tag.png\\&quot;, overlay: \\&quot;attendee_avatar\\&quot;, radius: 100, width: 120, x: 6, y: 24)&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Ruby&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;},{&quot;sdkId&quot;:&quot;csharp&quot;,&quot;framework&quot;:&quot;csharp&quot;,&quot;language&quot;:&quot;csharp&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.Api.UrlImgUp.Transform(new Transformation().Overlay(new Layer().PublicId(\\&quot;attendee_avatar\\&quot;)).Radius(100).Width(120).X(6).Y(24)).BuildImageTag(\\&quot;conference_tag.png\\&quot;)&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.Api.UrlImgUp.Transform(new Transformation().Overlay(new Layer().PublicId(\\&quot;attendee_avatar\\&quot;)).Radius(100).Width(120).X(6).Y(24)).BuildImageTag(\\&quot;conference_tag.png\\&quot;)&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;.NET&quot;,&quot;packageName&quot;:&quot;CloudinaryDotNet&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;dart&quot;,&quot;framework&quot;:&quot;dart&quot;,&quot;language&quot;:&quot;dart&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.image(&#039;conference_tag.png&#039;).transformation(Transformation()\\n\\t.overlay(Overlay.source(\\n\\tSource.image(\\&quot;attendee_avatar\\&quot;)\\n\\t.transformation(new Transformation()\\n\\t.resize(Resize.scale().width(120))\\n\\t.roundCorners(RoundCorners.byRadius(100)))\\n\\t)\\n\\t.position(Position().offsetX(6)\\n.offsetY(24))\\n\\t));&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image(&#039;conference_tag.png&#039;).transformation(Transformation()\\n\\t.overlay(Overlay.source(\\n\\tSource.image(\\&quot;attendee_avatar\\&quot;)\\n\\t.transformation(new Transformation()\\n\\t.resize(Resize.scale().width(120))\\n\\t.roundCorners(RoundCorners.byRadius(100)))\\n\\t)\\n\\t.position(Position().offsetX(6)\\n.offsetY(24))\\n\\t));&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Dart&quot;,&quot;packageName&quot;:&quot;cloudinary_dart&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;swift&quot;,&quot;framework&quot;:&quot;swift&quot;,&quot;language&quot;:&quot;swift&quot;,&quot;rawCodeSnippet&quot;:&quot;imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setOverlay(\\&quot;attendee_avatar\\&quot;).setRadius(100).setWidth(120).setX(6).setY(24)).generate(\\&quot;conference_tag.png\\&quot;)!, cloudinary: cloudinary)&quot;,&quot;codeSnippet&quot;:&quot;imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setOverlay(\\&quot;attendee_avatar\\&quot;).setRadius(100).setWidth(120).setX(6).setY(24)).generate(\\&quot;conference_tag.png\\&quot;)!, cloudinary: cloudinary)&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;iOS&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;5.x&quot;},{&quot;sdkId&quot;:&quot;android&quot;,&quot;framework&quot;:&quot;android&quot;,&quot;language&quot;:&quot;android&quot;,&quot;rawCodeSnippet&quot;:&quot;MediaManager.get().url().transformation(new Transformation().overlay(new Layer().publicId(\\&quot;attendee_avatar\\&quot;)).radius(100).width(120).x(6).y(24)).generate(\\&quot;conference_tag.png\\&quot;);&quot;,&quot;codeSnippet&quot;:&quot;MediaManager.get().url().transformation(new Transformation().overlay(new Layer().publicId(\\&quot;attendee_avatar\\&quot;)).radius(100).width(120).x(6).y(24)).generate(\\&quot;conference_tag.png\\&quot;);&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Android&quot;,&quot;packageName&quot;:&quot;cloudinary-android&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;3.x&quot;},{&quot;sdkId&quot;:&quot;flutter&quot;,&quot;framework&quot;:&quot;flutter&quot;,&quot;language&quot;:&quot;flutter&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.image(&#039;conference_tag.png&#039;).transformation(Transformation()\\n\\t.overlay(Overlay.source(\\n\\tSource.image(\\&quot;attendee_avatar\\&quot;)\\n\\t.transformation(new Transformation()\\n\\t.addTransformation())\\n\\t)\\n\\t.position(Position().offsetX(6)\\n.offsetY(24))\\n\\t));&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image(&#039;conference_tag.png&#039;).transformation(Transformation()\\n\\t.overlay(Overlay.source(\\n\\tSource.image(\\&quot;attendee_avatar\\&quot;)\\n\\t.transformation(new Transformation()\\n\\t.addTransformation())\\n\\t)\\n\\t.position(Position().offsetX(6)\\n.offsetY(24))\\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;conference_tag.png\\&quot;)\\n\\t overlay(Overlay.source(\\n\\tSource.image(\\&quot;attendee_avatar\\&quot;) {\\n\\t transformation(Transformation {\\n\\t resize(Resize.scale() { width(120) })\\n\\t roundCorners(RoundCorners.byRadius(100)) })\\n\\t }) {\\n\\t position(Position() { offsetX(6)\\n offsetY(24) })\\n\\t }) \\n}.generate()&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image {\\n\\tpublicId(\\&quot;conference_tag.png\\&quot;)\\n\\t overlay(Overlay.source(\\n\\tSource.image(\\&quot;attendee_avatar\\&quot;) {\\n\\t transformation(Transformation {\\n\\t resize(Resize.scale() { width(120) })\\n\\t roundCorners(RoundCorners.byRadius(100)) })\\n\\t }) {\\n\\t position(Position() { offsetX(6)\\n offsetY(24) })\\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;conference_tag.png\\&quot;, {overlay: new cloudinary.Layer().publicId(\\&quot;attendee_avatar\\&quot;), radius: 100, width: 120, x: 6, y: 24})&quot;,&quot;codeSnippet&quot;:&quot;$.cloudinary.image(\\&quot;conference_tag.png\\&quot;, {overlay: new cloudinary.Layer().publicId(\\&quot;attendee_avatar\\&quot;), radius: 100, width: 120, x: 6, y: 24})&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;conference_tag.png\\&quot;).overlay(\\n  source(\\n    image(\\&quot;attendee_avatar\\&quot;).transformation(\\n      new Transformation()\\n        .resize(scale().width(120))\\n        .roundCorners(byRadius(100))\\n    )\\n  ).position(new Position().offsetX(6).offsetY(24))\\n);&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;conference_tag.png\\&quot;).overlay(\\n  source(\\n    image(\\&quot;attendee_avatar\\&quot;).transformation(\\n      new Transformation()\\n        .resize(scale().width(120))\\n        .roundCorners(byRadius(100))\\n    )\\n  ).position(new Position().offsetX(6).offsetY(24))\\n);&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;React Native&quot;,&quot;packageName&quot;:&quot;cloudinary-react-native&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;}]\"\n      parsed-url=\"{&quot;url&quot;:&quot;https:\\\/\\\/res.cloudinary.com\\\/demo\\\/image\\\/upload\\\/l_attendee_avatar,r_100,w_120,x_6,y_24\\\/conference_tag.png&quot;,&quot;cloud_name&quot;:&quot;demo&quot;,&quot;host&quot;:&quot;res.cloudinary.com&quot;,&quot;type&quot;:&quot;upload&quot;,&quot;resource_type&quot;:&quot;image&quot;,&quot;transformation&quot;:[{&quot;overlay&quot;:&quot;attendee_avatar&quot;,&quot;radius&quot;:&quot;100&quot;,&quot;width&quot;:&quot;120&quot;,&quot;x&quot;:&quot;6&quot;,&quot;y&quot;:&quot;24&quot;}],&quot;transformation_string&quot;:&quot;l_attendee_avatar,r_100,w_120,x_6,y_24&quot;,&quot;url_suffix&quot;:&quot;&quot;,&quot;version&quot;:&quot;&quot;,&quot;secure&quot;:true,&quot;public_id&quot;:&quot;conference_tag.png&quot;,&quot;extension&quot;:&quot;png&quot;,&quot;format&quot;:&quot;png&quot;,&quot;format_code&quot;:true,&quot;url_code&quot;:false,&quot;signature&quot;:&quot;&quot;,&quot;private_cdn&quot;:false,&quot;result_asset_type&quot;:&quot;image&quot;}\"\n      with-url=\"true\"\n    >\n      <span class=\"u-visually-hidden\">Loading code examples<\/span>\n    <\/cld-code-widget><a class=\"c-image-link\" href=\"https:\/\/res.cloudinary.com\/demo\/image\/upload\/l_attendee_avatar,r_100,w_120,x_6,y_24\/conference_tag.png\" target=\"_blank\"><img decoding=\"async\" src=\"https:\/\/res.cloudinary.com\/demo\/image\/upload\/l_attendee_avatar,r_100,w_120,x_6,y_24\/conference_tag.png\" alt=\"Resized image\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"294\" height=\"704\"\/><\/a><\/p>\n<div class='c-callout  c-callout--inline-title c-callout--note'><strong class='c-callout__title'>Note:<\/strong> <p>If the public ID of an image includes a folder component, e.g., the public ID of an image is <code>images\/avatar<\/code>, replace the slash with a colon when transforming the image as an overlay. In this case, change the public ID <code>image<\/code> to <code>images:avatar<\/code>.<\/p><\/div>\n<p>Isn\u2019t it amazing how you can do all that just by tweaking the URL? The next section shows you how to overlay the name of the attendee on the image.<\/p>\n<h2>Addition of Text Captions<\/h2>\n<p>With Cloudinary, you can add a text caption on a base image with the <code>text:<\/code> property of the <code>overlay<\/code> parameter ( <code>l_text:<\/code> in URLs). The parameter also requires styling parameters, such as font family and size (separated with an underscore and followed by a colon), and the text string to display. For example, to overlay the text string Christian in Arial font with a size of 18 pixels, update the image URL to read like this:<\/p>\n<p><cld-code-widget\n      class=\" c-code-widget\"\n      snippets=\"[{&quot;sdkId&quot;:&quot;nodejs&quot;,&quot;framework&quot;:&quot;nodejs&quot;,&quot;language&quot;:&quot;nodejs&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.image(\\&quot;conference_tag.png\\&quot;, {transformation: [ {overlay: \\&quot;attendee_avatar\\&quot;, radius: 100, width: 120, x: 6, y: 24}, {overlay: {font_family: \\&quot;Arial\\&quot;, font_size: 18, text: \\&quot;Christian\\&quot;}} ]})&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image(\\&quot;conference_tag.png\\&quot;, {transformation: [\\n  {overlay: \\&quot;attendee_avatar\\&quot;, radius: 100, width: 120, x: 6, y: 24},\\n  {overlay: {font_family: \\&quot;Arial\\&quot;, font_size: 18, text: \\&quot;Christian\\&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;conference_tag.png\\&quot;)\\n  .overlay(\\n    source(\\n      image(\\&quot;attendee_avatar\\&quot;).transformation(\\n        new Transformation()\\n          .resize(scale().width(120))\\n          .roundCorners(byRadius(100))\\n      )\\n    ).position(new Position().offsetX(6).offsetY(24))\\n  )\\n  .overlay(source(text(\\&quot;Christian\\&quot;, new TextStyle(\\&quot;Arial\\&quot;, 18))));&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;conference_tag.png\\&quot;)\\n  .overlay(\\n    source(\\n      image(\\&quot;attendee_avatar\\&quot;).transformation(\\n        new Transformation()\\n          .resize(scale().width(120))\\n          .roundCorners(byRadius(100))\\n      )\\n    ).position(new Position().offsetX(6).offsetY(24))\\n  )\\n  .overlay(source(text(\\&quot;Christian\\&quot;, new TextStyle(\\&quot;Arial\\&quot;, 18))));&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;conference_tag.png\\&quot; &gt; &lt;Transformation overlay=\\&quot;attendee_avatar\\&quot; radius=\\&quot;100\\&quot; width=\\&quot;120\\&quot; x=\\&quot;6\\&quot; y=\\&quot;24\\&quot; \\\/&gt; &lt;Transformation overlay={{fontFamily: \\&quot;Arial\\&quot;, fontSize: 18, text: \\&quot;Christian\\&quot;}} \\\/&gt; &lt;\\\/Image&gt;&quot;,&quot;codeSnippet&quot;:&quot;&lt;Image publicId=\\&quot;conference_tag.png\\&quot; &gt;\\n\\t&lt;Transformation overlay=\\&quot;attendee_avatar\\&quot; radius=\\&quot;100\\&quot; width=\\&quot;120\\&quot; x=\\&quot;6\\&quot; y=\\&quot;24\\&quot; \\\/&gt;\\n\\t&lt;Transformation overlay={{fontFamily: \\&quot;Arial\\&quot;, fontSize: 18, text: \\&quot;Christian\\&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;conference_tag.png\\&quot;)\\n  .overlay(\\n    source(\\n      image(\\&quot;attendee_avatar\\&quot;).transformation(\\n        new Transformation()\\n          .resize(scale().width(120))\\n          .roundCorners(byRadius(100))\\n      )\\n    ).position(new Position().offsetX(6).offsetY(24))\\n  )\\n  .overlay(source(text(\\&quot;Christian\\&quot;, new TextStyle(\\&quot;Arial\\&quot;, 18))));&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;conference_tag.png\\&quot;)\\n  .overlay(\\n    source(\\n      image(\\&quot;attendee_avatar\\&quot;).transformation(\\n        new Transformation()\\n          .resize(scale().width(120))\\n          .roundCorners(byRadius(100))\\n      )\\n    ).position(new Position().offsetX(6).offsetY(24))\\n  )\\n  .overlay(source(text(\\&quot;Christian\\&quot;, new TextStyle(\\&quot;Arial\\&quot;, 18))));&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;conference_tag.png\\&quot; &gt; &lt;cld-transformation :overlay=\\&quot;attendee_avatar\\&quot; radius=\\&quot;100\\&quot; width=\\&quot;120\\&quot; x=\\&quot;6\\&quot; y=\\&quot;24\\&quot; \\\/&gt; &lt;cld-transformation :overlay=\\&quot;{fontFamily: &#039;Arial&#039;, fontSize: 18, text: &#039;Christian&#039;}\\&quot; \\\/&gt; &lt;\\\/cld-image&gt;&quot;,&quot;codeSnippet&quot;:&quot;&lt;cld-image public-id=\\&quot;conference_tag.png\\&quot; &gt;\\n\\t&lt;cld-transformation :overlay=\\&quot;attendee_avatar\\&quot; radius=\\&quot;100\\&quot; width=\\&quot;120\\&quot; x=\\&quot;6\\&quot; y=\\&quot;24\\&quot; \\\/&gt;\\n\\t&lt;cld-transformation :overlay=\\&quot;{fontFamily: &#039;Arial&#039;, fontSize: 18, text: &#039;Christian&#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;conference_tag.png\\&quot;)\\n  .overlay(\\n    source(\\n      image(\\&quot;attendee_avatar\\&quot;).transformation(\\n        new Transformation()\\n          .resize(scale().width(120))\\n          .roundCorners(byRadius(100))\\n      )\\n    ).position(new Position().offsetX(6).offsetY(24))\\n  )\\n  .overlay(source(text(\\&quot;Christian\\&quot;, new TextStyle(\\&quot;Arial\\&quot;, 18))));&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;conference_tag.png\\&quot;)\\n  .overlay(\\n    source(\\n      image(\\&quot;attendee_avatar\\&quot;).transformation(\\n        new Transformation()\\n          .resize(scale().width(120))\\n          .roundCorners(byRadius(100))\\n      )\\n    ).position(new Position().offsetX(6).offsetY(24))\\n  )\\n  .overlay(source(text(\\&quot;Christian\\&quot;, new TextStyle(\\&quot;Arial\\&quot;, 18))));&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;conference_tag.png\\&quot; &gt; &lt;cl-transformation overlay=\\&quot;attendee_avatar\\&quot; radius=\\&quot;100\\&quot; width=\\&quot;120\\&quot; x=\\&quot;6\\&quot; y=\\&quot;24\\&quot;&gt; &lt;\\\/cl-transformation&gt; &lt;cl-transformation overlay=\\&quot;text:Arial_18:Christian\\&quot;&gt; &lt;\\\/cl-transformation&gt; &lt;\\\/cl-image&gt;&quot;,&quot;codeSnippet&quot;:&quot;&lt;cl-image public-id=\\&quot;conference_tag.png\\&quot; &gt;\\n\\t&lt;cl-transformation overlay=\\&quot;attendee_avatar\\&quot; radius=\\&quot;100\\&quot; width=\\&quot;120\\&quot; x=\\&quot;6\\&quot; y=\\&quot;24\\&quot;&gt;\\n\\t&lt;\\\/cl-transformation&gt;\\n\\t&lt;cl-transformation overlay=\\&quot;text:Arial_18:Christian\\&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;conference_tag.png\\&quot;)\\n  .overlay(\\n    source(\\n      image(\\&quot;attendee_avatar\\&quot;).transformation(\\n        new Transformation()\\n          .resize(scale().width(120))\\n          .roundCorners(byRadius(100))\\n      )\\n    ).position(new Position().offsetX(6).offsetY(24))\\n  )\\n  .overlay(source(text(\\&quot;Christian\\&quot;, new TextStyle(\\&quot;Arial\\&quot;, 18))));&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;conference_tag.png\\&quot;)\\n  .overlay(\\n    source(\\n      image(\\&quot;attendee_avatar\\&quot;).transformation(\\n        new Transformation()\\n          .resize(scale().width(120))\\n          .roundCorners(byRadius(100))\\n      )\\n    ).position(new Position().offsetX(6).offsetY(24))\\n  )\\n  .overlay(source(text(\\&quot;Christian\\&quot;, new TextStyle(\\&quot;Arial\\&quot;, 18))));&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;conference_tag.png&#039;, {transformation: [ {overlay: new cloudinary.Layer().publicId(\\&quot;attendee_avatar\\&quot;), radius: 100, width: 120, x: 6, y: 24}, {overlay: new cloudinary.TextLayer().fontFamily(\\&quot;Arial\\&quot;).fontSize(18).text(\\&quot;Christian\\&quot;)} ]}).toHtml();&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.imageTag(&#039;conference_tag.png&#039;, {transformation: [\\n  {overlay: new cloudinary.Layer().publicId(\\&quot;attendee_avatar\\&quot;), radius: 100, width: 120, x: 6, y: 24},\\n  {overlay: new cloudinary.TextLayer().fontFamily(\\&quot;Arial\\&quot;).fontSize(18).text(\\&quot;Christian\\&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;conference_tag.png\\&quot;).image(transformation=[ {&#039;overlay&#039;: \\&quot;attendee_avatar\\&quot;, &#039;radius&#039;: 100, &#039;width&#039;: 120, &#039;x&#039;: 6, &#039;y&#039;: 24}, {&#039;overlay&#039;: {&#039;font_family&#039;: \\&quot;Arial\\&quot;, &#039;font_size&#039;: 18, &#039;text&#039;: \\&quot;Christian\\&quot;}} ])&quot;,&quot;codeSnippet&quot;:&quot;CloudinaryImage(\\&quot;conference_tag.png\\&quot;).image(transformation=[\\n  {&#039;overlay&#039;: \\&quot;attendee_avatar\\&quot;, &#039;radius&#039;: 100, &#039;width&#039;: 120, &#039;x&#039;: 6, &#039;y&#039;: 24},\\n  {&#039;overlay&#039;: {&#039;font_family&#039;: \\&quot;Arial\\&quot;, &#039;font_size&#039;: 18, &#039;text&#039;: \\&quot;Christian\\&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;conference_tag.png&#039;))\\n\\t-&gt;overlay(Overlay::source(\\n\\tSource::image(\\&quot;attendee_avatar\\&quot;)\\n\\t-&gt;transformation((new Transformation())\\n\\t-&gt;resize(Resize::scale()-&gt;width(120))\\n\\t-&gt;roundCorners(RoundCorners::byRadius(100)))\\n\\t)\\n\\t-&gt;position((new Position())-&gt;offsetX(6)\\n-&gt;offsetY(24))\\n\\t)\\n\\t-&gt;overlay(Overlay::source(\\n\\tSource::text(\\&quot;Christian\\&quot;,(new TextStyle(\\&quot;Arial\\&quot;,18)))));&quot;,&quot;codeSnippet&quot;:&quot;(new ImageTag(&#039;conference_tag.png&#039;))\\n\\t-&gt;overlay(Overlay::source(\\n\\tSource::image(\\&quot;attendee_avatar\\&quot;)\\n\\t-&gt;transformation((new Transformation())\\n\\t-&gt;resize(Resize::scale()-&gt;width(120))\\n\\t-&gt;roundCorners(RoundCorners::byRadius(100)))\\n\\t)\\n\\t-&gt;position((new Position())-&gt;offsetX(6)\\n-&gt;offsetY(24))\\n\\t)\\n\\t-&gt;overlay(Overlay::source(\\n\\tSource::text(\\&quot;Christian\\&quot;,(new TextStyle(\\&quot;Arial\\&quot;,18)))));&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;conference_tag.png\\&quot;, array(\\&quot;transformation\\&quot;=&gt;array( array(\\&quot;overlay\\&quot;=&gt;\\&quot;attendee_avatar\\&quot;, \\&quot;radius\\&quot;=&gt;100, \\&quot;width\\&quot;=&gt;120, \\&quot;x\\&quot;=&gt;6, \\&quot;y\\&quot;=&gt;24), array(\\&quot;overlay\\&quot;=&gt;array(\\&quot;font_family\\&quot;=&gt;\\&quot;Arial\\&quot;, \\&quot;font_size\\&quot;=&gt;18, \\&quot;text\\&quot;=&gt;\\&quot;Christian\\&quot;)) )))&quot;,&quot;codeSnippet&quot;:&quot;cl_image_tag(\\&quot;conference_tag.png\\&quot;, array(\\&quot;transformation\\&quot;=&gt;array(\\n  array(\\&quot;overlay\\&quot;=&gt;\\&quot;attendee_avatar\\&quot;, \\&quot;radius\\&quot;=&gt;100, \\&quot;width\\&quot;=&gt;120, \\&quot;x\\&quot;=&gt;6, \\&quot;y\\&quot;=&gt;24),\\n  array(\\&quot;overlay\\&quot;=&gt;array(\\&quot;font_family\\&quot;=&gt;\\&quot;Arial\\&quot;, \\&quot;font_size\\&quot;=&gt;18, \\&quot;text\\&quot;=&gt;\\&quot;Christian\\&quot;))\\n  )))&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;PHP&quot;,&quot;packageName&quot;:&quot;cloudinary_php&quot;,&quot;packageStatus&quot;:&quot;legacy&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;java&quot;,&quot;framework&quot;:&quot;java&quot;,&quot;language&quot;:&quot;java&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.url().transformation(new Transformation().overlay(new Layer().publicId(\\&quot;attendee_avatar\\&quot;)).radius(100).width(120).x(6).y(24).chain() .overlay(new TextLayer().fontFamily(\\&quot;Arial\\&quot;).fontSize(18).text(\\&quot;Christian\\&quot;))).imageTag(\\&quot;conference_tag.png\\&quot;);&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.url().transformation(new Transformation()\\n  .overlay(new Layer().publicId(\\&quot;attendee_avatar\\&quot;)).radius(100).width(120).x(6).y(24).chain()\\n  .overlay(new TextLayer().fontFamily(\\&quot;Arial\\&quot;).fontSize(18).text(\\&quot;Christian\\&quot;))).imageTag(\\&quot;conference_tag.png\\&quot;);&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Java&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;},{&quot;sdkId&quot;:&quot;ruby&quot;,&quot;framework&quot;:&quot;ruby&quot;,&quot;language&quot;:&quot;ruby&quot;,&quot;rawCodeSnippet&quot;:&quot;cl_image_tag(\\&quot;conference_tag.png\\&quot;, transformation: [ {overlay: \\&quot;attendee_avatar\\&quot;, radius: 100, width: 120, x: 6, y: 24}, {overlay: {font_family: \\&quot;Arial\\&quot;, font_size: 18, text: \\&quot;Christian\\&quot;}} ])&quot;,&quot;codeSnippet&quot;:&quot;cl_image_tag(\\&quot;conference_tag.png\\&quot;, transformation: [\\n  {overlay: \\&quot;attendee_avatar\\&quot;, radius: 100, width: 120, x: 6, y: 24},\\n  {overlay: {font_family: \\&quot;Arial\\&quot;, font_size: 18, text: \\&quot;Christian\\&quot;}}\\n  ])&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Ruby&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;},{&quot;sdkId&quot;:&quot;csharp&quot;,&quot;framework&quot;:&quot;csharp&quot;,&quot;language&quot;:&quot;csharp&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.Api.UrlImgUp.Transform(new Transformation().Overlay(new Layer().PublicId(\\&quot;attendee_avatar\\&quot;)).Radius(100).Width(120).X(6).Y(24).Chain() .Overlay(new TextLayer().FontFamily(\\&quot;Arial\\&quot;).FontSize(18).Text(\\&quot;Christian\\&quot;))).BuildImageTag(\\&quot;conference_tag.png\\&quot;)&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.Api.UrlImgUp.Transform(new Transformation()\\n  .Overlay(new Layer().PublicId(\\&quot;attendee_avatar\\&quot;)).Radius(100).Width(120).X(6).Y(24).Chain()\\n  .Overlay(new TextLayer().FontFamily(\\&quot;Arial\\&quot;).FontSize(18).Text(\\&quot;Christian\\&quot;))).BuildImageTag(\\&quot;conference_tag.png\\&quot;)&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;.NET&quot;,&quot;packageName&quot;:&quot;CloudinaryDotNet&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;dart&quot;,&quot;framework&quot;:&quot;dart&quot;,&quot;language&quot;:&quot;dart&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.image(&#039;conference_tag.png&#039;).transformation(Transformation()\\n\\t.addTransformation(\\&quot;l_attendee_avatar,r_100,w_120,x_6,y_24\\\/l_text:Arial_18:Christian\\&quot;));&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image(&#039;conference_tag.png&#039;).transformation(Transformation()\\n\\t.addTransformation(\\&quot;l_attendee_avatar,r_100,w_120,x_6,y_24\\\/l_text:Arial_18:Christian\\&quot;));&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Dart&quot;,&quot;packageName&quot;:&quot;cloudinary_dart&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;swift&quot;,&quot;framework&quot;:&quot;swift&quot;,&quot;language&quot;:&quot;swift&quot;,&quot;rawCodeSnippet&quot;:&quot;imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setOverlay(\\&quot;attendee_avatar\\&quot;).setRadius(100).setWidth(120).setX(6).setY(24).chain() .setOverlay(\\&quot;text:Arial_18:Christian\\&quot;)).generate(\\&quot;conference_tag.png\\&quot;)!, cloudinary: cloudinary)&quot;,&quot;codeSnippet&quot;:&quot;imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation()\\n  .setOverlay(\\&quot;attendee_avatar\\&quot;).setRadius(100).setWidth(120).setX(6).setY(24).chain()\\n  .setOverlay(\\&quot;text:Arial_18:Christian\\&quot;)).generate(\\&quot;conference_tag.png\\&quot;)!, cloudinary: cloudinary)&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;iOS&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;5.x&quot;},{&quot;sdkId&quot;:&quot;android&quot;,&quot;framework&quot;:&quot;android&quot;,&quot;language&quot;:&quot;android&quot;,&quot;rawCodeSnippet&quot;:&quot;MediaManager.get().url().transformation(new Transformation().overlay(new Layer().publicId(\\&quot;attendee_avatar\\&quot;)).radius(100).width(120).x(6).y(24).chain() .overlay(new TextLayer().fontFamily(\\&quot;Arial\\&quot;).fontSize(18).text(\\&quot;Christian\\&quot;))).generate(\\&quot;conference_tag.png\\&quot;);&quot;,&quot;codeSnippet&quot;:&quot;MediaManager.get().url().transformation(new Transformation()\\n  .overlay(new Layer().publicId(\\&quot;attendee_avatar\\&quot;)).radius(100).width(120).x(6).y(24).chain()\\n  .overlay(new TextLayer().fontFamily(\\&quot;Arial\\&quot;).fontSize(18).text(\\&quot;Christian\\&quot;))).generate(\\&quot;conference_tag.png\\&quot;);&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Android&quot;,&quot;packageName&quot;:&quot;cloudinary-android&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;3.x&quot;},{&quot;sdkId&quot;:&quot;flutter&quot;,&quot;framework&quot;:&quot;flutter&quot;,&quot;language&quot;:&quot;flutter&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.image(&#039;conference_tag.png&#039;).transformation(Transformation()\\n\\t.addTransformation(\\&quot;l_attendee_avatar,r_100,w_120,x_6,y_24\\\/l_text:Arial_18:Christian\\&quot;));&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image(&#039;conference_tag.png&#039;).transformation(Transformation()\\n\\t.addTransformation(\\&quot;l_attendee_avatar,r_100,w_120,x_6,y_24\\\/l_text:Arial_18:Christian\\&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;conference_tag.png\\&quot;)\\n\\t overlay(Overlay.source(\\n\\tSource.image(\\&quot;attendee_avatar\\&quot;) {\\n\\t transformation(Transformation {\\n\\t resize(Resize.scale() { width(120) })\\n\\t roundCorners(RoundCorners.byRadius(100)) })\\n\\t }) {\\n\\t position(Position() { offsetX(6)\\n offsetY(24) })\\n\\t })\\n\\t overlay(Overlay.source(\\n\\tSource.text(\\&quot;Christian\\&quot;,TextStyle(\\&quot;Arial\\&quot;,18)))) \\n}.generate()&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image {\\n\\tpublicId(\\&quot;conference_tag.png\\&quot;)\\n\\t overlay(Overlay.source(\\n\\tSource.image(\\&quot;attendee_avatar\\&quot;) {\\n\\t transformation(Transformation {\\n\\t resize(Resize.scale() { width(120) })\\n\\t roundCorners(RoundCorners.byRadius(100)) })\\n\\t }) {\\n\\t position(Position() { offsetX(6)\\n offsetY(24) })\\n\\t })\\n\\t overlay(Overlay.source(\\n\\tSource.text(\\&quot;Christian\\&quot;,TextStyle(\\&quot;Arial\\&quot;,18)))) \\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;conference_tag.png\\&quot;, {transformation: [ {overlay: new cloudinary.Layer().publicId(\\&quot;attendee_avatar\\&quot;), radius: 100, width: 120, x: 6, y: 24}, {overlay: new cloudinary.TextLayer().fontFamily(\\&quot;Arial\\&quot;).fontSize(18).text(\\&quot;Christian\\&quot;)} ]})&quot;,&quot;codeSnippet&quot;:&quot;$.cloudinary.image(\\&quot;conference_tag.png\\&quot;, {transformation: [\\n  {overlay: new cloudinary.Layer().publicId(\\&quot;attendee_avatar\\&quot;), radius: 100, width: 120, x: 6, y: 24},\\n  {overlay: new cloudinary.TextLayer().fontFamily(\\&quot;Arial\\&quot;).fontSize(18).text(\\&quot;Christian\\&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;conference_tag.png\\&quot;)\\n  .overlay(\\n    source(\\n      image(\\&quot;attendee_avatar\\&quot;).transformation(\\n        new Transformation()\\n          .resize(scale().width(120))\\n          .roundCorners(byRadius(100))\\n      )\\n    ).position(new Position().offsetX(6).offsetY(24))\\n  )\\n  .overlay(source(text(\\&quot;Christian\\&quot;, new TextStyle(\\&quot;Arial\\&quot;, 18))));&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;conference_tag.png\\&quot;)\\n  .overlay(\\n    source(\\n      image(\\&quot;attendee_avatar\\&quot;).transformation(\\n        new Transformation()\\n          .resize(scale().width(120))\\n          .roundCorners(byRadius(100))\\n      )\\n    ).position(new Position().offsetX(6).offsetY(24))\\n  )\\n  .overlay(source(text(\\&quot;Christian\\&quot;, new TextStyle(\\&quot;Arial\\&quot;, 18))));&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;React Native&quot;,&quot;packageName&quot;:&quot;cloudinary-react-native&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;}]\"\n      parsed-url=\"{&quot;url&quot;:&quot;https:\\\/\\\/res.cloudinary.com\\\/demo\\\/image\\\/upload\\\/l_attendee_avatar,r_100,w_120,x_6,y_24\\\/l_text:Arial_18:Christian\\\/conference_tag.png&quot;,&quot;cloud_name&quot;:&quot;demo&quot;,&quot;host&quot;:&quot;res.cloudinary.com&quot;,&quot;type&quot;:&quot;upload&quot;,&quot;resource_type&quot;:&quot;image&quot;,&quot;transformation&quot;:[{&quot;overlay&quot;:&quot;attendee_avatar&quot;,&quot;radius&quot;:&quot;100&quot;,&quot;width&quot;:&quot;120&quot;,&quot;x&quot;:&quot;6&quot;,&quot;y&quot;:&quot;24&quot;},{&quot;overlay&quot;:&quot;text:Arial_18:Christian&quot;}],&quot;transformation_string&quot;:&quot;l_attendee_avatar,r_100,w_120,x_6,y_24\\\/l_text:Arial_18:Christian&quot;,&quot;url_suffix&quot;:&quot;&quot;,&quot;version&quot;:&quot;&quot;,&quot;secure&quot;:true,&quot;public_id&quot;:&quot;conference_tag.png&quot;,&quot;extension&quot;:&quot;png&quot;,&quot;format&quot;:&quot;png&quot;,&quot;format_code&quot;:true,&quot;url_code&quot;:false,&quot;signature&quot;:&quot;&quot;,&quot;private_cdn&quot;:false,&quot;result_asset_type&quot;:&quot;image&quot;}\"\n      with-url=\"true\"\n    >\n      <span class=\"u-visually-hidden\">Loading code examples<\/span>\n    <\/cld-code-widget><a class=\"c-image-link\" href=\"https:\/\/res.cloudinary.com\/demo\/image\/upload\/l_attendee_avatar,r_100,w_120,x_6,y_24\/l_text:Arial_18:Christian\/conference_tag.png\" target=\"_blank\"><img decoding=\"async\" src=\"https:\/\/res.cloudinary.com\/demo\/image\/upload\/l_attendee_avatar,r_100,w_120,x_6,y_24\/l_text:Arial_18:Christian\/conference_tag.png\" alt=\"Text captions\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"294\" height=\"704\"\/><\/a><\/p>\n<p>Cloudinary then automatically overlays the name Christian on the image. However, the name now obscures part of the attendee\u2019s picture. See the next section for how to reposition the name.<\/p>\n<h2>Text Transformation<\/h2>\n<p>Just like it does with images, Cloudinary supports numerous styling parameters, which enable you to transform text however you wish. Not only can you change the font, but also resize, reposition, recolor, and even underline text on the fly.<\/p>\n<p>To have the name Christian appear on the placeholder, add the vertical coordinate parameter <code>y_120<\/code> to the URL. The tag now looks like this:<\/p>\n<p><cld-code-widget\n      class=\" c-code-widget\"\n      snippets=\"[{&quot;sdkId&quot;:&quot;nodejs&quot;,&quot;framework&quot;:&quot;nodejs&quot;,&quot;language&quot;:&quot;nodejs&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.image(\\&quot;conference_tag.png\\&quot;, {transformation: [ {overlay: \\&quot;attendee_avatar\\&quot;, radius: 100, width: 120, x: 6, y: 24}, {overlay: {font_family: \\&quot;Arial\\&quot;, font_size: 18, text: \\&quot;Christian\\&quot;}, y: 120} ]})&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image(\\&quot;conference_tag.png\\&quot;, {transformation: [\\n  {overlay: \\&quot;attendee_avatar\\&quot;, radius: 100, width: 120, x: 6, y: 24},\\n  {overlay: {font_family: \\&quot;Arial\\&quot;, font_size: 18, text: \\&quot;Christian\\&quot;}, y: 120}\\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;conference_tag.png\\&quot;)\\n  .overlay(\\n    source(\\n      image(\\&quot;attendee_avatar\\&quot;).transformation(\\n        new Transformation()\\n          .resize(scale().width(120))\\n          .roundCorners(byRadius(100))\\n      )\\n    ).position(new Position().offsetX(6).offsetY(24))\\n  )\\n  .overlay(\\n    source(text(\\&quot;Christian\\&quot;, new TextStyle(\\&quot;Arial\\&quot;, 18))).position(\\n      new Position().offsetY(120)\\n    )\\n  );&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;conference_tag.png\\&quot;)\\n  .overlay(\\n    source(\\n      image(\\&quot;attendee_avatar\\&quot;).transformation(\\n        new Transformation()\\n          .resize(scale().width(120))\\n          .roundCorners(byRadius(100))\\n      )\\n    ).position(new Position().offsetX(6).offsetY(24))\\n  )\\n  .overlay(\\n    source(text(\\&quot;Christian\\&quot;, new TextStyle(\\&quot;Arial\\&quot;, 18))).position(\\n      new Position().offsetY(120)\\n    )\\n  );&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;React&quot;,&quot;packageName&quot;:&quot;@cloudinary\\\/react&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;react&quot;,&quot;framework&quot;:&quot;react&quot;,&quot;language&quot;:&quot;react&quot;,&quot;rawCodeSnippet&quot;:&quot;&lt;Image publicId=\\&quot;conference_tag.png\\&quot; &gt; &lt;Transformation overlay=\\&quot;attendee_avatar\\&quot; radius=\\&quot;100\\&quot; width=\\&quot;120\\&quot; x=\\&quot;6\\&quot; y=\\&quot;24\\&quot; \\\/&gt; &lt;Transformation overlay={{fontFamily: \\&quot;Arial\\&quot;, fontSize: 18, text: \\&quot;Christian\\&quot;}} y=\\&quot;120\\&quot; \\\/&gt; &lt;\\\/Image&gt;&quot;,&quot;codeSnippet&quot;:&quot;&lt;Image publicId=\\&quot;conference_tag.png\\&quot; &gt;\\n\\t&lt;Transformation overlay=\\&quot;attendee_avatar\\&quot; radius=\\&quot;100\\&quot; width=\\&quot;120\\&quot; x=\\&quot;6\\&quot; y=\\&quot;24\\&quot; \\\/&gt;\\n\\t&lt;Transformation overlay={{fontFamily: \\&quot;Arial\\&quot;, fontSize: 18, text: \\&quot;Christian\\&quot;}} y=\\&quot;120\\&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;conference_tag.png\\&quot;)\\n  .overlay(\\n    source(\\n      image(\\&quot;attendee_avatar\\&quot;).transformation(\\n        new Transformation()\\n          .resize(scale().width(120))\\n          .roundCorners(byRadius(100))\\n      )\\n    ).position(new Position().offsetX(6).offsetY(24))\\n  )\\n  .overlay(\\n    source(text(\\&quot;Christian\\&quot;, new TextStyle(\\&quot;Arial\\&quot;, 18))).position(\\n      new Position().offsetY(120)\\n    )\\n  );&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;conference_tag.png\\&quot;)\\n  .overlay(\\n    source(\\n      image(\\&quot;attendee_avatar\\&quot;).transformation(\\n        new Transformation()\\n          .resize(scale().width(120))\\n          .roundCorners(byRadius(100))\\n      )\\n    ).position(new Position().offsetX(6).offsetY(24))\\n  )\\n  .overlay(\\n    source(text(\\&quot;Christian\\&quot;, new TextStyle(\\&quot;Arial\\&quot;, 18))).position(\\n      new Position().offsetY(120)\\n    )\\n  );&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Vue.js&quot;,&quot;packageName&quot;:&quot;@cloudinary\\\/vue&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;vue&quot;,&quot;framework&quot;:&quot;vue&quot;,&quot;language&quot;:&quot;vue&quot;,&quot;rawCodeSnippet&quot;:&quot;&lt;cld-image public-id=\\&quot;conference_tag.png\\&quot; &gt; &lt;cld-transformation :overlay=\\&quot;attendee_avatar\\&quot; radius=\\&quot;100\\&quot; width=\\&quot;120\\&quot; x=\\&quot;6\\&quot; y=\\&quot;24\\&quot; \\\/&gt; &lt;cld-transformation :overlay=\\&quot;{fontFamily: &#039;Arial&#039;, fontSize: 18, text: &#039;Christian&#039;}\\&quot; y=\\&quot;120\\&quot; \\\/&gt; &lt;\\\/cld-image&gt;&quot;,&quot;codeSnippet&quot;:&quot;&lt;cld-image public-id=\\&quot;conference_tag.png\\&quot; &gt;\\n\\t&lt;cld-transformation :overlay=\\&quot;attendee_avatar\\&quot; radius=\\&quot;100\\&quot; width=\\&quot;120\\&quot; x=\\&quot;6\\&quot; y=\\&quot;24\\&quot; \\\/&gt;\\n\\t&lt;cld-transformation :overlay=\\&quot;{fontFamily: &#039;Arial&#039;, fontSize: 18, text: &#039;Christian&#039;}\\&quot; y=\\&quot;120\\&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;conference_tag.png\\&quot;)\\n  .overlay(\\n    source(\\n      image(\\&quot;attendee_avatar\\&quot;).transformation(\\n        new Transformation()\\n          .resize(scale().width(120))\\n          .roundCorners(byRadius(100))\\n      )\\n    ).position(new Position().offsetX(6).offsetY(24))\\n  )\\n  .overlay(\\n    source(text(\\&quot;Christian\\&quot;, new TextStyle(\\&quot;Arial\\&quot;, 18))).position(\\n      new Position().offsetY(120)\\n    )\\n  );&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;conference_tag.png\\&quot;)\\n  .overlay(\\n    source(\\n      image(\\&quot;attendee_avatar\\&quot;).transformation(\\n        new Transformation()\\n          .resize(scale().width(120))\\n          .roundCorners(byRadius(100))\\n      )\\n    ).position(new Position().offsetX(6).offsetY(24))\\n  )\\n  .overlay(\\n    source(text(\\&quot;Christian\\&quot;, new TextStyle(\\&quot;Arial\\&quot;, 18))).position(\\n      new Position().offsetY(120)\\n    )\\n  );&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Angular&quot;,&quot;packageName&quot;:&quot;@cloudinary\\\/ng&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;angular&quot;,&quot;framework&quot;:&quot;angular&quot;,&quot;language&quot;:&quot;angular&quot;,&quot;rawCodeSnippet&quot;:&quot;&lt;cl-image public-id=\\&quot;conference_tag.png\\&quot; &gt; &lt;cl-transformation overlay=\\&quot;attendee_avatar\\&quot; radius=\\&quot;100\\&quot; width=\\&quot;120\\&quot; x=\\&quot;6\\&quot; y=\\&quot;24\\&quot;&gt; &lt;\\\/cl-transformation&gt; &lt;cl-transformation overlay=\\&quot;text:Arial_18:Christian\\&quot; y=\\&quot;120\\&quot;&gt; &lt;\\\/cl-transformation&gt; &lt;\\\/cl-image&gt;&quot;,&quot;codeSnippet&quot;:&quot;&lt;cl-image public-id=\\&quot;conference_tag.png\\&quot; &gt;\\n\\t&lt;cl-transformation overlay=\\&quot;attendee_avatar\\&quot; radius=\\&quot;100\\&quot; width=\\&quot;120\\&quot; x=\\&quot;6\\&quot; y=\\&quot;24\\&quot;&gt;\\n\\t&lt;\\\/cl-transformation&gt;\\n\\t&lt;cl-transformation overlay=\\&quot;text:Arial_18:Christian\\&quot; y=\\&quot;120\\&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;conference_tag.png\\&quot;)\\n  .overlay(\\n    source(\\n      image(\\&quot;attendee_avatar\\&quot;).transformation(\\n        new Transformation()\\n          .resize(scale().width(120))\\n          .roundCorners(byRadius(100))\\n      )\\n    ).position(new Position().offsetX(6).offsetY(24))\\n  )\\n  .overlay(\\n    source(text(\\&quot;Christian\\&quot;, new TextStyle(\\&quot;Arial\\&quot;, 18))).position(\\n      new Position().offsetY(120)\\n    )\\n  );&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;conference_tag.png\\&quot;)\\n  .overlay(\\n    source(\\n      image(\\&quot;attendee_avatar\\&quot;).transformation(\\n        new Transformation()\\n          .resize(scale().width(120))\\n          .roundCorners(byRadius(100))\\n      )\\n    ).position(new Position().offsetX(6).offsetY(24))\\n  )\\n  .overlay(\\n    source(text(\\&quot;Christian\\&quot;, new TextStyle(\\&quot;Arial\\&quot;, 18))).position(\\n      new Position().offsetY(120)\\n    )\\n  );&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;JS&quot;,&quot;packageName&quot;:&quot;@cloudinary\\\/url-gen&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;js&quot;,&quot;framework&quot;:&quot;js&quot;,&quot;language&quot;:&quot;js&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.imageTag(&#039;conference_tag.png&#039;, {transformation: [ {overlay: new cloudinary.Layer().publicId(\\&quot;attendee_avatar\\&quot;), radius: 100, width: 120, x: 6, y: 24}, {overlay: new cloudinary.TextLayer().fontFamily(\\&quot;Arial\\&quot;).fontSize(18).text(\\&quot;Christian\\&quot;), y: 120} ]}).toHtml();&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.imageTag(&#039;conference_tag.png&#039;, {transformation: [\\n  {overlay: new cloudinary.Layer().publicId(\\&quot;attendee_avatar\\&quot;), radius: 100, width: 120, x: 6, y: 24},\\n  {overlay: new cloudinary.TextLayer().fontFamily(\\&quot;Arial\\&quot;).fontSize(18).text(\\&quot;Christian\\&quot;), y: 120}\\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;conference_tag.png\\&quot;).image(transformation=[ {&#039;overlay&#039;: \\&quot;attendee_avatar\\&quot;, &#039;radius&#039;: 100, &#039;width&#039;: 120, &#039;x&#039;: 6, &#039;y&#039;: 24}, {&#039;overlay&#039;: {&#039;font_family&#039;: \\&quot;Arial\\&quot;, &#039;font_size&#039;: 18, &#039;text&#039;: \\&quot;Christian\\&quot;}, &#039;y&#039;: 120} ])&quot;,&quot;codeSnippet&quot;:&quot;CloudinaryImage(\\&quot;conference_tag.png\\&quot;).image(transformation=[\\n  {&#039;overlay&#039;: \\&quot;attendee_avatar\\&quot;, &#039;radius&#039;: 100, &#039;width&#039;: 120, &#039;x&#039;: 6, &#039;y&#039;: 24},\\n  {&#039;overlay&#039;: {&#039;font_family&#039;: \\&quot;Arial\\&quot;, &#039;font_size&#039;: 18, &#039;text&#039;: \\&quot;Christian\\&quot;}, &#039;y&#039;: 120}\\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;conference_tag.png&#039;))\\n\\t-&gt;overlay(Overlay::source(\\n\\tSource::image(\\&quot;attendee_avatar\\&quot;)\\n\\t-&gt;transformation((new Transformation())\\n\\t-&gt;resize(Resize::scale()-&gt;width(120))\\n\\t-&gt;roundCorners(RoundCorners::byRadius(100)))\\n\\t)\\n\\t-&gt;position((new Position())-&gt;offsetX(6)\\n-&gt;offsetY(24))\\n\\t)\\n\\t-&gt;overlay(Overlay::source(\\n\\tSource::text(\\&quot;Christian\\&quot;,(new TextStyle(\\&quot;Arial\\&quot;,18))))\\n\\t-&gt;position((new Position())-&gt;offsetY(120))\\n\\t);&quot;,&quot;codeSnippet&quot;:&quot;(new ImageTag(&#039;conference_tag.png&#039;))\\n\\t-&gt;overlay(Overlay::source(\\n\\tSource::image(\\&quot;attendee_avatar\\&quot;)\\n\\t-&gt;transformation((new Transformation())\\n\\t-&gt;resize(Resize::scale()-&gt;width(120))\\n\\t-&gt;roundCorners(RoundCorners::byRadius(100)))\\n\\t)\\n\\t-&gt;position((new Position())-&gt;offsetX(6)\\n-&gt;offsetY(24))\\n\\t)\\n\\t-&gt;overlay(Overlay::source(\\n\\tSource::text(\\&quot;Christian\\&quot;,(new TextStyle(\\&quot;Arial\\&quot;,18))))\\n\\t-&gt;position((new Position())-&gt;offsetY(120))\\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;conference_tag.png\\&quot;, array(\\&quot;transformation\\&quot;=&gt;array( array(\\&quot;overlay\\&quot;=&gt;\\&quot;attendee_avatar\\&quot;, \\&quot;radius\\&quot;=&gt;100, \\&quot;width\\&quot;=&gt;120, \\&quot;x\\&quot;=&gt;6, \\&quot;y\\&quot;=&gt;24), array(\\&quot;overlay\\&quot;=&gt;array(\\&quot;font_family\\&quot;=&gt;\\&quot;Arial\\&quot;, \\&quot;font_size\\&quot;=&gt;18, \\&quot;text\\&quot;=&gt;\\&quot;Christian\\&quot;), \\&quot;y\\&quot;=&gt;120) )))&quot;,&quot;codeSnippet&quot;:&quot;cl_image_tag(\\&quot;conference_tag.png\\&quot;, array(\\&quot;transformation\\&quot;=&gt;array(\\n  array(\\&quot;overlay\\&quot;=&gt;\\&quot;attendee_avatar\\&quot;, \\&quot;radius\\&quot;=&gt;100, \\&quot;width\\&quot;=&gt;120, \\&quot;x\\&quot;=&gt;6, \\&quot;y\\&quot;=&gt;24),\\n  array(\\&quot;overlay\\&quot;=&gt;array(\\&quot;font_family\\&quot;=&gt;\\&quot;Arial\\&quot;, \\&quot;font_size\\&quot;=&gt;18, \\&quot;text\\&quot;=&gt;\\&quot;Christian\\&quot;), \\&quot;y\\&quot;=&gt;120)\\n  )))&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;PHP&quot;,&quot;packageName&quot;:&quot;cloudinary_php&quot;,&quot;packageStatus&quot;:&quot;legacy&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;java&quot;,&quot;framework&quot;:&quot;java&quot;,&quot;language&quot;:&quot;java&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.url().transformation(new Transformation().overlay(new Layer().publicId(\\&quot;attendee_avatar\\&quot;)).radius(100).width(120).x(6).y(24).chain() .overlay(new TextLayer().fontFamily(\\&quot;Arial\\&quot;).fontSize(18).text(\\&quot;Christian\\&quot;)).y(120)).imageTag(\\&quot;conference_tag.png\\&quot;);&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.url().transformation(new Transformation()\\n  .overlay(new Layer().publicId(\\&quot;attendee_avatar\\&quot;)).radius(100).width(120).x(6).y(24).chain()\\n  .overlay(new TextLayer().fontFamily(\\&quot;Arial\\&quot;).fontSize(18).text(\\&quot;Christian\\&quot;)).y(120)).imageTag(\\&quot;conference_tag.png\\&quot;);&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Java&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;},{&quot;sdkId&quot;:&quot;ruby&quot;,&quot;framework&quot;:&quot;ruby&quot;,&quot;language&quot;:&quot;ruby&quot;,&quot;rawCodeSnippet&quot;:&quot;cl_image_tag(\\&quot;conference_tag.png\\&quot;, transformation: [ {overlay: \\&quot;attendee_avatar\\&quot;, radius: 100, width: 120, x: 6, y: 24}, {overlay: {font_family: \\&quot;Arial\\&quot;, font_size: 18, text: \\&quot;Christian\\&quot;}, y: 120} ])&quot;,&quot;codeSnippet&quot;:&quot;cl_image_tag(\\&quot;conference_tag.png\\&quot;, transformation: [\\n  {overlay: \\&quot;attendee_avatar\\&quot;, radius: 100, width: 120, x: 6, y: 24},\\n  {overlay: {font_family: \\&quot;Arial\\&quot;, font_size: 18, text: \\&quot;Christian\\&quot;}, y: 120}\\n  ])&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Ruby&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;},{&quot;sdkId&quot;:&quot;csharp&quot;,&quot;framework&quot;:&quot;csharp&quot;,&quot;language&quot;:&quot;csharp&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.Api.UrlImgUp.Transform(new Transformation().Overlay(new Layer().PublicId(\\&quot;attendee_avatar\\&quot;)).Radius(100).Width(120).X(6).Y(24).Chain() .Overlay(new TextLayer().FontFamily(\\&quot;Arial\\&quot;).FontSize(18).Text(\\&quot;Christian\\&quot;)).Y(120)).BuildImageTag(\\&quot;conference_tag.png\\&quot;)&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.Api.UrlImgUp.Transform(new Transformation()\\n  .Overlay(new Layer().PublicId(\\&quot;attendee_avatar\\&quot;)).Radius(100).Width(120).X(6).Y(24).Chain()\\n  .Overlay(new TextLayer().FontFamily(\\&quot;Arial\\&quot;).FontSize(18).Text(\\&quot;Christian\\&quot;)).Y(120)).BuildImageTag(\\&quot;conference_tag.png\\&quot;)&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;.NET&quot;,&quot;packageName&quot;:&quot;CloudinaryDotNet&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;dart&quot;,&quot;framework&quot;:&quot;dart&quot;,&quot;language&quot;:&quot;dart&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.image(&#039;conference_tag.png&#039;).transformation(Transformation()\\n\\t.addTransformation(\\&quot;l_attendee_avatar,r_100,w_120,x_6,y_24\\\/l_text:Arial_18:Christian,y_120\\&quot;));&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image(&#039;conference_tag.png&#039;).transformation(Transformation()\\n\\t.addTransformation(\\&quot;l_attendee_avatar,r_100,w_120,x_6,y_24\\\/l_text:Arial_18:Christian,y_120\\&quot;));&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Dart&quot;,&quot;packageName&quot;:&quot;cloudinary_dart&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;swift&quot;,&quot;framework&quot;:&quot;swift&quot;,&quot;language&quot;:&quot;swift&quot;,&quot;rawCodeSnippet&quot;:&quot;imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setOverlay(\\&quot;attendee_avatar\\&quot;).setRadius(100).setWidth(120).setX(6).setY(24).chain() .setOverlay(\\&quot;text:Arial_18:Christian\\&quot;).setY(120)).generate(\\&quot;conference_tag.png\\&quot;)!, cloudinary: cloudinary)&quot;,&quot;codeSnippet&quot;:&quot;imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation()\\n  .setOverlay(\\&quot;attendee_avatar\\&quot;).setRadius(100).setWidth(120).setX(6).setY(24).chain()\\n  .setOverlay(\\&quot;text:Arial_18:Christian\\&quot;).setY(120)).generate(\\&quot;conference_tag.png\\&quot;)!, cloudinary: cloudinary)&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;iOS&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;5.x&quot;},{&quot;sdkId&quot;:&quot;android&quot;,&quot;framework&quot;:&quot;android&quot;,&quot;language&quot;:&quot;android&quot;,&quot;rawCodeSnippet&quot;:&quot;MediaManager.get().url().transformation(new Transformation().overlay(new Layer().publicId(\\&quot;attendee_avatar\\&quot;)).radius(100).width(120).x(6).y(24).chain() .overlay(new TextLayer().fontFamily(\\&quot;Arial\\&quot;).fontSize(18).text(\\&quot;Christian\\&quot;)).y(120)).generate(\\&quot;conference_tag.png\\&quot;);&quot;,&quot;codeSnippet&quot;:&quot;MediaManager.get().url().transformation(new Transformation()\\n  .overlay(new Layer().publicId(\\&quot;attendee_avatar\\&quot;)).radius(100).width(120).x(6).y(24).chain()\\n  .overlay(new TextLayer().fontFamily(\\&quot;Arial\\&quot;).fontSize(18).text(\\&quot;Christian\\&quot;)).y(120)).generate(\\&quot;conference_tag.png\\&quot;);&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Android&quot;,&quot;packageName&quot;:&quot;cloudinary-android&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;3.x&quot;},{&quot;sdkId&quot;:&quot;flutter&quot;,&quot;framework&quot;:&quot;flutter&quot;,&quot;language&quot;:&quot;flutter&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.image(&#039;conference_tag.png&#039;).transformation(Transformation()\\n\\t.addTransformation(\\&quot;l_attendee_avatar,r_100,w_120,x_6,y_24\\\/l_text:Arial_18:Christian,y_120\\&quot;));&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image(&#039;conference_tag.png&#039;).transformation(Transformation()\\n\\t.addTransformation(\\&quot;l_attendee_avatar,r_100,w_120,x_6,y_24\\\/l_text:Arial_18:Christian,y_120\\&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;conference_tag.png\\&quot;)\\n\\t overlay(Overlay.source(\\n\\tSource.image(\\&quot;attendee_avatar\\&quot;) {\\n\\t transformation(Transformation {\\n\\t resize(Resize.scale() { width(120) })\\n\\t roundCorners(RoundCorners.byRadius(100)) })\\n\\t }) {\\n\\t position(Position() { offsetX(6)\\n offsetY(24) })\\n\\t })\\n\\t overlay(Overlay.source(\\n\\tSource.text(\\&quot;Christian\\&quot;,TextStyle(\\&quot;Arial\\&quot;,18))) {\\n\\t position(Position() { offsetY(120) })\\n\\t }) \\n}.generate()&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image {\\n\\tpublicId(\\&quot;conference_tag.png\\&quot;)\\n\\t overlay(Overlay.source(\\n\\tSource.image(\\&quot;attendee_avatar\\&quot;) {\\n\\t transformation(Transformation {\\n\\t resize(Resize.scale() { width(120) })\\n\\t roundCorners(RoundCorners.byRadius(100)) })\\n\\t }) {\\n\\t position(Position() { offsetX(6)\\n offsetY(24) })\\n\\t })\\n\\t overlay(Overlay.source(\\n\\tSource.text(\\&quot;Christian\\&quot;,TextStyle(\\&quot;Arial\\&quot;,18))) {\\n\\t position(Position() { offsetY(120) })\\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;conference_tag.png\\&quot;, {transformation: [ {overlay: new cloudinary.Layer().publicId(\\&quot;attendee_avatar\\&quot;), radius: 100, width: 120, x: 6, y: 24}, {overlay: new cloudinary.TextLayer().fontFamily(\\&quot;Arial\\&quot;).fontSize(18).text(\\&quot;Christian\\&quot;), y: 120} ]})&quot;,&quot;codeSnippet&quot;:&quot;$.cloudinary.image(\\&quot;conference_tag.png\\&quot;, {transformation: [\\n  {overlay: new cloudinary.Layer().publicId(\\&quot;attendee_avatar\\&quot;), radius: 100, width: 120, x: 6, y: 24},\\n  {overlay: new cloudinary.TextLayer().fontFamily(\\&quot;Arial\\&quot;).fontSize(18).text(\\&quot;Christian\\&quot;), y: 120}\\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;conference_tag.png\\&quot;)\\n  .overlay(\\n    source(\\n      image(\\&quot;attendee_avatar\\&quot;).transformation(\\n        new Transformation()\\n          .resize(scale().width(120))\\n          .roundCorners(byRadius(100))\\n      )\\n    ).position(new Position().offsetX(6).offsetY(24))\\n  )\\n  .overlay(\\n    source(text(\\&quot;Christian\\&quot;, new TextStyle(\\&quot;Arial\\&quot;, 18))).position(\\n      new Position().offsetY(120)\\n    )\\n  );&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;conference_tag.png\\&quot;)\\n  .overlay(\\n    source(\\n      image(\\&quot;attendee_avatar\\&quot;).transformation(\\n        new Transformation()\\n          .resize(scale().width(120))\\n          .roundCorners(byRadius(100))\\n      )\\n    ).position(new Position().offsetX(6).offsetY(24))\\n  )\\n  .overlay(\\n    source(text(\\&quot;Christian\\&quot;, new TextStyle(\\&quot;Arial\\&quot;, 18))).position(\\n      new Position().offsetY(120)\\n    )\\n  );&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;React Native&quot;,&quot;packageName&quot;:&quot;cloudinary-react-native&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;}]\"\n      parsed-url=\"{&quot;url&quot;:&quot;https:\\\/\\\/res.cloudinary.com\\\/demo\\\/image\\\/upload\\\/l_attendee_avatar,r_100,w_120,x_6,y_24\\\/l_text:Arial_18:Christian,y_120\\\/conference_tag.png&quot;,&quot;cloud_name&quot;:&quot;demo&quot;,&quot;host&quot;:&quot;res.cloudinary.com&quot;,&quot;type&quot;:&quot;upload&quot;,&quot;resource_type&quot;:&quot;image&quot;,&quot;transformation&quot;:[{&quot;overlay&quot;:&quot;attendee_avatar&quot;,&quot;radius&quot;:&quot;100&quot;,&quot;width&quot;:&quot;120&quot;,&quot;x&quot;:&quot;6&quot;,&quot;y&quot;:&quot;24&quot;},{&quot;overlay&quot;:&quot;text:Arial_18:Christian&quot;,&quot;y&quot;:&quot;120&quot;}],&quot;transformation_string&quot;:&quot;l_attendee_avatar,r_100,w_120,x_6,y_24\\\/l_text:Arial_18:Christian,y_120&quot;,&quot;url_suffix&quot;:&quot;&quot;,&quot;version&quot;:&quot;&quot;,&quot;secure&quot;:true,&quot;public_id&quot;:&quot;conference_tag.png&quot;,&quot;extension&quot;:&quot;png&quot;,&quot;format&quot;:&quot;png&quot;,&quot;format_code&quot;:true,&quot;url_code&quot;:false,&quot;signature&quot;:&quot;&quot;,&quot;private_cdn&quot;:false,&quot;result_asset_type&quot;:&quot;image&quot;}\"\n      with-url=\"true\"\n    >\n      <span class=\"u-visually-hidden\">Loading code examples<\/span>\n    <\/cld-code-widget><a class=\"c-image-link\" href=\"https:\/\/res.cloudinary.com\/demo\/image\/upload\/l_attendee_avatar,r_100,w_120,x_6,y_24\/l_text:Arial_18:Christian,y_120\/conference_tag.png\" target=\"_blank\"><img decoding=\"async\" src=\"https:\/\/res.cloudinary.com\/demo\/image\/upload\/l_attendee_avatar,r_100,w_120,x_6,y_24\/l_text:Arial_18:Christian,y_120\/conference_tag.png\" alt=\"Text Manipulation\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"294\" height=\"704\"\/><\/a><\/p>\n<p>For text strings that contain special characters, modify (escape) them for use with the text overlay feature. Do that for any special characters that are not allowed in a valid URL path and for other special unicode characters.<\/p>\n<p>To ensure that those text strings are valid, escape them with <code>%<\/code>-based encoding. For example, replace <code>?<\/code> with <code>%3F<\/code> and add <code>%20<\/code> for spacing between words. This encoding occurs automatically when you embed images with the Cloudinary SDK <a href=\"https:\/\/cloudinary.com\/documentation\/image_transformations#embedding_images_in_web_pages\">helper methods<\/a>. However, you must manually add it to an image\u2019s delivery URL.<\/p>\n<p>As an example, to change the name Christian to Christian Nwamba, add <code>%20<\/code> between the two words:<\/p>\n<p><cld-code-widget\n      class=\" c-code-widget\"\n      snippets=\"[{&quot;sdkId&quot;:&quot;nodejs&quot;,&quot;framework&quot;:&quot;nodejs&quot;,&quot;language&quot;:&quot;nodejs&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.image(\\&quot;conference_tag.png\\&quot;, {transformation: [ {overlay: \\&quot;attendee_avatar\\&quot;, radius: 100, width: 120, x: 6, y: 24}, {overlay: {font_family: \\&quot;Arial\\&quot;, font_size: 18, text: \\&quot;Christian%20Nwamba\\&quot;}, y: 120} ]})&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image(\\&quot;conference_tag.png\\&quot;, {transformation: [\\n  {overlay: \\&quot;attendee_avatar\\&quot;, radius: 100, width: 120, x: 6, y: 24},\\n  {overlay: {font_family: \\&quot;Arial\\&quot;, font_size: 18, text: \\&quot;Christian%20Nwamba\\&quot;}, y: 120}\\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;conference_tag.png\\&quot;)\\n  .overlay(\\n    source(\\n      image(\\&quot;attendee_avatar\\&quot;).transformation(\\n        new Transformation()\\n          .resize(scale().width(120))\\n          .roundCorners(byRadius(100))\\n      )\\n    ).position(new Position().offsetX(6).offsetY(24))\\n  )\\n  .overlay(\\n    source(text(\\&quot;Christian Nwamba\\&quot;, new TextStyle(\\&quot;Arial\\&quot;, 18))).position(\\n      new Position().offsetY(120)\\n    )\\n  );&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;conference_tag.png\\&quot;)\\n  .overlay(\\n    source(\\n      image(\\&quot;attendee_avatar\\&quot;).transformation(\\n        new Transformation()\\n          .resize(scale().width(120))\\n          .roundCorners(byRadius(100))\\n      )\\n    ).position(new Position().offsetX(6).offsetY(24))\\n  )\\n  .overlay(\\n    source(text(\\&quot;Christian Nwamba\\&quot;, new TextStyle(\\&quot;Arial\\&quot;, 18))).position(\\n      new Position().offsetY(120)\\n    )\\n  );&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;React&quot;,&quot;packageName&quot;:&quot;@cloudinary\\\/react&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;react&quot;,&quot;framework&quot;:&quot;react&quot;,&quot;language&quot;:&quot;react&quot;,&quot;rawCodeSnippet&quot;:&quot;&lt;Image publicId=\\&quot;conference_tag.png\\&quot; &gt; &lt;Transformation overlay=\\&quot;attendee_avatar\\&quot; radius=\\&quot;100\\&quot; width=\\&quot;120\\&quot; x=\\&quot;6\\&quot; y=\\&quot;24\\&quot; \\\/&gt; &lt;Transformation overlay={{fontFamily: \\&quot;Arial\\&quot;, fontSize: 18, text: \\&quot;Christian%20Nwamba\\&quot;}} y=\\&quot;120\\&quot; \\\/&gt; &lt;\\\/Image&gt;&quot;,&quot;codeSnippet&quot;:&quot;&lt;Image publicId=\\&quot;conference_tag.png\\&quot; &gt;\\n\\t&lt;Transformation overlay=\\&quot;attendee_avatar\\&quot; radius=\\&quot;100\\&quot; width=\\&quot;120\\&quot; x=\\&quot;6\\&quot; y=\\&quot;24\\&quot; \\\/&gt;\\n\\t&lt;Transformation overlay={{fontFamily: \\&quot;Arial\\&quot;, fontSize: 18, text: \\&quot;Christian%20Nwamba\\&quot;}} y=\\&quot;120\\&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;conference_tag.png\\&quot;)\\n  .overlay(\\n    source(\\n      image(\\&quot;attendee_avatar\\&quot;).transformation(\\n        new Transformation()\\n          .resize(scale().width(120))\\n          .roundCorners(byRadius(100))\\n      )\\n    ).position(new Position().offsetX(6).offsetY(24))\\n  )\\n  .overlay(\\n    source(text(\\&quot;Christian Nwamba\\&quot;, new TextStyle(\\&quot;Arial\\&quot;, 18))).position(\\n      new Position().offsetY(120)\\n    )\\n  );&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;conference_tag.png\\&quot;)\\n  .overlay(\\n    source(\\n      image(\\&quot;attendee_avatar\\&quot;).transformation(\\n        new Transformation()\\n          .resize(scale().width(120))\\n          .roundCorners(byRadius(100))\\n      )\\n    ).position(new Position().offsetX(6).offsetY(24))\\n  )\\n  .overlay(\\n    source(text(\\&quot;Christian Nwamba\\&quot;, new TextStyle(\\&quot;Arial\\&quot;, 18))).position(\\n      new Position().offsetY(120)\\n    )\\n  );&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Vue.js&quot;,&quot;packageName&quot;:&quot;@cloudinary\\\/vue&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;vue&quot;,&quot;framework&quot;:&quot;vue&quot;,&quot;language&quot;:&quot;vue&quot;,&quot;rawCodeSnippet&quot;:&quot;&lt;cld-image public-id=\\&quot;conference_tag.png\\&quot; &gt; &lt;cld-transformation :overlay=\\&quot;attendee_avatar\\&quot; radius=\\&quot;100\\&quot; width=\\&quot;120\\&quot; x=\\&quot;6\\&quot; y=\\&quot;24\\&quot; \\\/&gt; &lt;cld-transformation :overlay=\\&quot;{fontFamily: &#039;Arial&#039;, fontSize: 18, text: &#039;Christian%20Nwamba&#039;}\\&quot; y=\\&quot;120\\&quot; \\\/&gt; &lt;\\\/cld-image&gt;&quot;,&quot;codeSnippet&quot;:&quot;&lt;cld-image public-id=\\&quot;conference_tag.png\\&quot; &gt;\\n\\t&lt;cld-transformation :overlay=\\&quot;attendee_avatar\\&quot; radius=\\&quot;100\\&quot; width=\\&quot;120\\&quot; x=\\&quot;6\\&quot; y=\\&quot;24\\&quot; \\\/&gt;\\n\\t&lt;cld-transformation :overlay=\\&quot;{fontFamily: &#039;Arial&#039;, fontSize: 18, text: &#039;Christian%20Nwamba&#039;}\\&quot; y=\\&quot;120\\&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;conference_tag.png\\&quot;)\\n  .overlay(\\n    source(\\n      image(\\&quot;attendee_avatar\\&quot;).transformation(\\n        new Transformation()\\n          .resize(scale().width(120))\\n          .roundCorners(byRadius(100))\\n      )\\n    ).position(new Position().offsetX(6).offsetY(24))\\n  )\\n  .overlay(\\n    source(text(\\&quot;Christian Nwamba\\&quot;, new TextStyle(\\&quot;Arial\\&quot;, 18))).position(\\n      new Position().offsetY(120)\\n    )\\n  );&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;conference_tag.png\\&quot;)\\n  .overlay(\\n    source(\\n      image(\\&quot;attendee_avatar\\&quot;).transformation(\\n        new Transformation()\\n          .resize(scale().width(120))\\n          .roundCorners(byRadius(100))\\n      )\\n    ).position(new Position().offsetX(6).offsetY(24))\\n  )\\n  .overlay(\\n    source(text(\\&quot;Christian Nwamba\\&quot;, new TextStyle(\\&quot;Arial\\&quot;, 18))).position(\\n      new Position().offsetY(120)\\n    )\\n  );&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Angular&quot;,&quot;packageName&quot;:&quot;@cloudinary\\\/ng&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;angular&quot;,&quot;framework&quot;:&quot;angular&quot;,&quot;language&quot;:&quot;angular&quot;,&quot;rawCodeSnippet&quot;:&quot;&lt;cl-image public-id=\\&quot;conference_tag.png\\&quot; &gt; &lt;cl-transformation overlay=\\&quot;attendee_avatar\\&quot; radius=\\&quot;100\\&quot; width=\\&quot;120\\&quot; x=\\&quot;6\\&quot; y=\\&quot;24\\&quot;&gt; &lt;\\\/cl-transformation&gt; &lt;cl-transformation overlay=\\&quot;text:Arial_18:Christian%20Nwamba\\&quot; y=\\&quot;120\\&quot;&gt; &lt;\\\/cl-transformation&gt; &lt;\\\/cl-image&gt;&quot;,&quot;codeSnippet&quot;:&quot;&lt;cl-image public-id=\\&quot;conference_tag.png\\&quot; &gt;\\n\\t&lt;cl-transformation overlay=\\&quot;attendee_avatar\\&quot; radius=\\&quot;100\\&quot; width=\\&quot;120\\&quot; x=\\&quot;6\\&quot; y=\\&quot;24\\&quot;&gt;\\n\\t&lt;\\\/cl-transformation&gt;\\n\\t&lt;cl-transformation overlay=\\&quot;text:Arial_18:Christian%20Nwamba\\&quot; y=\\&quot;120\\&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;conference_tag.png\\&quot;)\\n  .overlay(\\n    source(\\n      image(\\&quot;attendee_avatar\\&quot;).transformation(\\n        new Transformation()\\n          .resize(scale().width(120))\\n          .roundCorners(byRadius(100))\\n      )\\n    ).position(new Position().offsetX(6).offsetY(24))\\n  )\\n  .overlay(\\n    source(text(\\&quot;Christian Nwamba\\&quot;, new TextStyle(\\&quot;Arial\\&quot;, 18))).position(\\n      new Position().offsetY(120)\\n    )\\n  );&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;conference_tag.png\\&quot;)\\n  .overlay(\\n    source(\\n      image(\\&quot;attendee_avatar\\&quot;).transformation(\\n        new Transformation()\\n          .resize(scale().width(120))\\n          .roundCorners(byRadius(100))\\n      )\\n    ).position(new Position().offsetX(6).offsetY(24))\\n  )\\n  .overlay(\\n    source(text(\\&quot;Christian Nwamba\\&quot;, new TextStyle(\\&quot;Arial\\&quot;, 18))).position(\\n      new Position().offsetY(120)\\n    )\\n  );&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;JS&quot;,&quot;packageName&quot;:&quot;@cloudinary\\\/url-gen&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;js&quot;,&quot;framework&quot;:&quot;js&quot;,&quot;language&quot;:&quot;js&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.imageTag(&#039;conference_tag.png&#039;, {transformation: [ {overlay: new cloudinary.Layer().publicId(\\&quot;attendee_avatar\\&quot;), radius: 100, width: 120, x: 6, y: 24}, {overlay: new cloudinary.TextLayer().fontFamily(\\&quot;Arial\\&quot;).fontSize(18).text(\\&quot;Christian%20Nwamba\\&quot;), y: 120} ]}).toHtml();&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.imageTag(&#039;conference_tag.png&#039;, {transformation: [\\n  {overlay: new cloudinary.Layer().publicId(\\&quot;attendee_avatar\\&quot;), radius: 100, width: 120, x: 6, y: 24},\\n  {overlay: new cloudinary.TextLayer().fontFamily(\\&quot;Arial\\&quot;).fontSize(18).text(\\&quot;Christian%20Nwamba\\&quot;), y: 120}\\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;conference_tag.png\\&quot;).image(transformation=[ {&#039;overlay&#039;: \\&quot;attendee_avatar\\&quot;, &#039;radius&#039;: 100, &#039;width&#039;: 120, &#039;x&#039;: 6, &#039;y&#039;: 24}, {&#039;overlay&#039;: {&#039;font_family&#039;: \\&quot;Arial\\&quot;, &#039;font_size&#039;: 18, &#039;text&#039;: \\&quot;Christian%20Nwamba\\&quot;}, &#039;y&#039;: 120} ])&quot;,&quot;codeSnippet&quot;:&quot;CloudinaryImage(\\&quot;conference_tag.png\\&quot;).image(transformation=[\\n  {&#039;overlay&#039;: \\&quot;attendee_avatar\\&quot;, &#039;radius&#039;: 100, &#039;width&#039;: 120, &#039;x&#039;: 6, &#039;y&#039;: 24},\\n  {&#039;overlay&#039;: {&#039;font_family&#039;: \\&quot;Arial\\&quot;, &#039;font_size&#039;: 18, &#039;text&#039;: \\&quot;Christian%20Nwamba\\&quot;}, &#039;y&#039;: 120}\\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;conference_tag.png&#039;))\\n\\t-&gt;overlay(Overlay::source(\\n\\tSource::image(\\&quot;attendee_avatar\\&quot;)\\n\\t-&gt;transformation((new Transformation())\\n\\t-&gt;resize(Resize::scale()-&gt;width(120))\\n\\t-&gt;roundCorners(RoundCorners::byRadius(100)))\\n\\t)\\n\\t-&gt;position((new Position())-&gt;offsetX(6)\\n-&gt;offsetY(24))\\n\\t)\\n\\t-&gt;overlay(Overlay::source(\\n\\tSource::text(\\&quot;Christian Nwamba\\&quot;,(new TextStyle(\\&quot;Arial\\&quot;,18))))\\n\\t-&gt;position((new Position())-&gt;offsetY(120))\\n\\t);&quot;,&quot;codeSnippet&quot;:&quot;(new ImageTag(&#039;conference_tag.png&#039;))\\n\\t-&gt;overlay(Overlay::source(\\n\\tSource::image(\\&quot;attendee_avatar\\&quot;)\\n\\t-&gt;transformation((new Transformation())\\n\\t-&gt;resize(Resize::scale()-&gt;width(120))\\n\\t-&gt;roundCorners(RoundCorners::byRadius(100)))\\n\\t)\\n\\t-&gt;position((new Position())-&gt;offsetX(6)\\n-&gt;offsetY(24))\\n\\t)\\n\\t-&gt;overlay(Overlay::source(\\n\\tSource::text(\\&quot;Christian Nwamba\\&quot;,(new TextStyle(\\&quot;Arial\\&quot;,18))))\\n\\t-&gt;position((new Position())-&gt;offsetY(120))\\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;conference_tag.png\\&quot;, array(\\&quot;transformation\\&quot;=&gt;array( array(\\&quot;overlay\\&quot;=&gt;\\&quot;attendee_avatar\\&quot;, \\&quot;radius\\&quot;=&gt;100, \\&quot;width\\&quot;=&gt;120, \\&quot;x\\&quot;=&gt;6, \\&quot;y\\&quot;=&gt;24), array(\\&quot;overlay\\&quot;=&gt;array(\\&quot;font_family\\&quot;=&gt;\\&quot;Arial\\&quot;, \\&quot;font_size\\&quot;=&gt;18, \\&quot;text\\&quot;=&gt;\\&quot;Christian%20Nwamba\\&quot;), \\&quot;y\\&quot;=&gt;120) )))&quot;,&quot;codeSnippet&quot;:&quot;cl_image_tag(\\&quot;conference_tag.png\\&quot;, array(\\&quot;transformation\\&quot;=&gt;array(\\n  array(\\&quot;overlay\\&quot;=&gt;\\&quot;attendee_avatar\\&quot;, \\&quot;radius\\&quot;=&gt;100, \\&quot;width\\&quot;=&gt;120, \\&quot;x\\&quot;=&gt;6, \\&quot;y\\&quot;=&gt;24),\\n  array(\\&quot;overlay\\&quot;=&gt;array(\\&quot;font_family\\&quot;=&gt;\\&quot;Arial\\&quot;, \\&quot;font_size\\&quot;=&gt;18, \\&quot;text\\&quot;=&gt;\\&quot;Christian%20Nwamba\\&quot;), \\&quot;y\\&quot;=&gt;120)\\n  )))&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;PHP&quot;,&quot;packageName&quot;:&quot;cloudinary_php&quot;,&quot;packageStatus&quot;:&quot;legacy&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;java&quot;,&quot;framework&quot;:&quot;java&quot;,&quot;language&quot;:&quot;java&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.url().transformation(new Transformation().overlay(new Layer().publicId(\\&quot;attendee_avatar\\&quot;)).radius(100).width(120).x(6).y(24).chain() .overlay(new TextLayer().fontFamily(\\&quot;Arial\\&quot;).fontSize(18).text(\\&quot;Christian%20Nwamba\\&quot;)).y(120)).imageTag(\\&quot;conference_tag.png\\&quot;);&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.url().transformation(new Transformation()\\n  .overlay(new Layer().publicId(\\&quot;attendee_avatar\\&quot;)).radius(100).width(120).x(6).y(24).chain()\\n  .overlay(new TextLayer().fontFamily(\\&quot;Arial\\&quot;).fontSize(18).text(\\&quot;Christian%20Nwamba\\&quot;)).y(120)).imageTag(\\&quot;conference_tag.png\\&quot;);&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Java&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;},{&quot;sdkId&quot;:&quot;ruby&quot;,&quot;framework&quot;:&quot;ruby&quot;,&quot;language&quot;:&quot;ruby&quot;,&quot;rawCodeSnippet&quot;:&quot;cl_image_tag(\\&quot;conference_tag.png\\&quot;, transformation: [ {overlay: \\&quot;attendee_avatar\\&quot;, radius: 100, width: 120, x: 6, y: 24}, {overlay: {font_family: \\&quot;Arial\\&quot;, font_size: 18, text: \\&quot;Christian%20Nwamba\\&quot;}, y: 120} ])&quot;,&quot;codeSnippet&quot;:&quot;cl_image_tag(\\&quot;conference_tag.png\\&quot;, transformation: [\\n  {overlay: \\&quot;attendee_avatar\\&quot;, radius: 100, width: 120, x: 6, y: 24},\\n  {overlay: {font_family: \\&quot;Arial\\&quot;, font_size: 18, text: \\&quot;Christian%20Nwamba\\&quot;}, y: 120}\\n  ])&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Ruby&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;},{&quot;sdkId&quot;:&quot;csharp&quot;,&quot;framework&quot;:&quot;csharp&quot;,&quot;language&quot;:&quot;csharp&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.Api.UrlImgUp.Transform(new Transformation().Overlay(new Layer().PublicId(\\&quot;attendee_avatar\\&quot;)).Radius(100).Width(120).X(6).Y(24).Chain() .Overlay(new TextLayer().FontFamily(\\&quot;Arial\\&quot;).FontSize(18).Text(\\&quot;Christian%20Nwamba\\&quot;)).Y(120)).BuildImageTag(\\&quot;conference_tag.png\\&quot;)&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.Api.UrlImgUp.Transform(new Transformation()\\n  .Overlay(new Layer().PublicId(\\&quot;attendee_avatar\\&quot;)).Radius(100).Width(120).X(6).Y(24).Chain()\\n  .Overlay(new TextLayer().FontFamily(\\&quot;Arial\\&quot;).FontSize(18).Text(\\&quot;Christian%20Nwamba\\&quot;)).Y(120)).BuildImageTag(\\&quot;conference_tag.png\\&quot;)&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;.NET&quot;,&quot;packageName&quot;:&quot;CloudinaryDotNet&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;dart&quot;,&quot;framework&quot;:&quot;dart&quot;,&quot;language&quot;:&quot;dart&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.image(&#039;conference_tag.png&#039;).transformation(Transformation()\\n\\t.addTransformation(\\&quot;l_attendee_avatar,r_100,w_120,x_6,y_24\\\/l_text:Arial_18:Christian Nwamba,y_120\\&quot;));&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image(&#039;conference_tag.png&#039;).transformation(Transformation()\\n\\t.addTransformation(\\&quot;l_attendee_avatar,r_100,w_120,x_6,y_24\\\/l_text:Arial_18:Christian Nwamba,y_120\\&quot;));&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Dart&quot;,&quot;packageName&quot;:&quot;cloudinary_dart&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;swift&quot;,&quot;framework&quot;:&quot;swift&quot;,&quot;language&quot;:&quot;swift&quot;,&quot;rawCodeSnippet&quot;:&quot;imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setOverlay(\\&quot;attendee_avatar\\&quot;).setRadius(100).setWidth(120).setX(6).setY(24).chain() .setOverlay(\\&quot;text:Arial_18:Christian%20Nwamba\\&quot;).setY(120)).generate(\\&quot;conference_tag.png\\&quot;)!, cloudinary: cloudinary)&quot;,&quot;codeSnippet&quot;:&quot;imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation()\\n  .setOverlay(\\&quot;attendee_avatar\\&quot;).setRadius(100).setWidth(120).setX(6).setY(24).chain()\\n  .setOverlay(\\&quot;text:Arial_18:Christian%20Nwamba\\&quot;).setY(120)).generate(\\&quot;conference_tag.png\\&quot;)!, cloudinary: cloudinary)&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;iOS&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;5.x&quot;},{&quot;sdkId&quot;:&quot;android&quot;,&quot;framework&quot;:&quot;android&quot;,&quot;language&quot;:&quot;android&quot;,&quot;rawCodeSnippet&quot;:&quot;MediaManager.get().url().transformation(new Transformation().overlay(new Layer().publicId(\\&quot;attendee_avatar\\&quot;)).radius(100).width(120).x(6).y(24).chain() .overlay(new TextLayer().fontFamily(\\&quot;Arial\\&quot;).fontSize(18).text(\\&quot;Christian%20Nwamba\\&quot;)).y(120)).generate(\\&quot;conference_tag.png\\&quot;);&quot;,&quot;codeSnippet&quot;:&quot;MediaManager.get().url().transformation(new Transformation()\\n  .overlay(new Layer().publicId(\\&quot;attendee_avatar\\&quot;)).radius(100).width(120).x(6).y(24).chain()\\n  .overlay(new TextLayer().fontFamily(\\&quot;Arial\\&quot;).fontSize(18).text(\\&quot;Christian%20Nwamba\\&quot;)).y(120)).generate(\\&quot;conference_tag.png\\&quot;);&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Android&quot;,&quot;packageName&quot;:&quot;cloudinary-android&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;3.x&quot;},{&quot;sdkId&quot;:&quot;flutter&quot;,&quot;framework&quot;:&quot;flutter&quot;,&quot;language&quot;:&quot;flutter&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.image(&#039;conference_tag.png&#039;).transformation(Transformation()\\n\\t.addTransformation(\\&quot;l_attendee_avatar,r_100,w_120,x_6,y_24\\\/l_text:Arial_18:Christian Nwamba,y_120\\&quot;));&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image(&#039;conference_tag.png&#039;).transformation(Transformation()\\n\\t.addTransformation(\\&quot;l_attendee_avatar,r_100,w_120,x_6,y_24\\\/l_text:Arial_18:Christian Nwamba,y_120\\&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;conference_tag.png\\&quot;)\\n\\t overlay(Overlay.source(\\n\\tSource.image(\\&quot;attendee_avatar\\&quot;) {\\n\\t transformation(Transformation {\\n\\t resize(Resize.scale() { width(120) })\\n\\t roundCorners(RoundCorners.byRadius(100)) })\\n\\t }) {\\n\\t position(Position() { offsetX(6)\\n offsetY(24) })\\n\\t })\\n\\t overlay(Overlay.source(\\n\\tSource.text(\\&quot;Christian Nwamba\\&quot;,TextStyle(\\&quot;Arial\\&quot;,18))) {\\n\\t position(Position() { offsetY(120) })\\n\\t }) \\n}.generate()&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image {\\n\\tpublicId(\\&quot;conference_tag.png\\&quot;)\\n\\t overlay(Overlay.source(\\n\\tSource.image(\\&quot;attendee_avatar\\&quot;) {\\n\\t transformation(Transformation {\\n\\t resize(Resize.scale() { width(120) })\\n\\t roundCorners(RoundCorners.byRadius(100)) })\\n\\t }) {\\n\\t position(Position() { offsetX(6)\\n offsetY(24) })\\n\\t })\\n\\t overlay(Overlay.source(\\n\\tSource.text(\\&quot;Christian Nwamba\\&quot;,TextStyle(\\&quot;Arial\\&quot;,18))) {\\n\\t position(Position() { offsetY(120) })\\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;conference_tag.png\\&quot;, {transformation: [ {overlay: new cloudinary.Layer().publicId(\\&quot;attendee_avatar\\&quot;), radius: 100, width: 120, x: 6, y: 24}, {overlay: new cloudinary.TextLayer().fontFamily(\\&quot;Arial\\&quot;).fontSize(18).text(\\&quot;Christian%20Nwamba\\&quot;), y: 120} ]})&quot;,&quot;codeSnippet&quot;:&quot;$.cloudinary.image(\\&quot;conference_tag.png\\&quot;, {transformation: [\\n  {overlay: new cloudinary.Layer().publicId(\\&quot;attendee_avatar\\&quot;), radius: 100, width: 120, x: 6, y: 24},\\n  {overlay: new cloudinary.TextLayer().fontFamily(\\&quot;Arial\\&quot;).fontSize(18).text(\\&quot;Christian%20Nwamba\\&quot;), y: 120}\\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;conference_tag.png\\&quot;)\\n  .overlay(\\n    source(\\n      image(\\&quot;attendee_avatar\\&quot;).transformation(\\n        new Transformation()\\n          .resize(scale().width(120))\\n          .roundCorners(byRadius(100))\\n      )\\n    ).position(new Position().offsetX(6).offsetY(24))\\n  )\\n  .overlay(\\n    source(text(\\&quot;Christian Nwamba\\&quot;, new TextStyle(\\&quot;Arial\\&quot;, 18))).position(\\n      new Position().offsetY(120)\\n    )\\n  );&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;conference_tag.png\\&quot;)\\n  .overlay(\\n    source(\\n      image(\\&quot;attendee_avatar\\&quot;).transformation(\\n        new Transformation()\\n          .resize(scale().width(120))\\n          .roundCorners(byRadius(100))\\n      )\\n    ).position(new Position().offsetX(6).offsetY(24))\\n  )\\n  .overlay(\\n    source(text(\\&quot;Christian Nwamba\\&quot;, new TextStyle(\\&quot;Arial\\&quot;, 18))).position(\\n      new Position().offsetY(120)\\n    )\\n  );&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;React Native&quot;,&quot;packageName&quot;:&quot;cloudinary-react-native&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;}]\"\n      parsed-url=\"{&quot;url&quot;:&quot;https:\\\/\\\/res.cloudinary.com\\\/demo\\\/image\\\/upload\\\/l_attendee_avatar,r_100,w_120,x_6,y_24\\\/l_text:Arial_18:Christian%20Nwamba,y_120\\\/conference_tag.png&quot;,&quot;cloud_name&quot;:&quot;demo&quot;,&quot;host&quot;:&quot;res.cloudinary.com&quot;,&quot;type&quot;:&quot;upload&quot;,&quot;resource_type&quot;:&quot;image&quot;,&quot;transformation&quot;:[{&quot;overlay&quot;:&quot;attendee_avatar&quot;,&quot;radius&quot;:&quot;100&quot;,&quot;width&quot;:&quot;120&quot;,&quot;x&quot;:&quot;6&quot;,&quot;y&quot;:&quot;24&quot;},{&quot;overlay&quot;:&quot;text:Arial_18:Christian Nwamba&quot;,&quot;y&quot;:&quot;120&quot;}],&quot;transformation_string&quot;:&quot;l_attendee_avatar,r_100,w_120,x_6,y_24\\\/l_text:Arial_18:Christian Nwamba,y_120&quot;,&quot;url_suffix&quot;:&quot;&quot;,&quot;version&quot;:&quot;&quot;,&quot;secure&quot;:true,&quot;public_id&quot;:&quot;conference_tag.png&quot;,&quot;extension&quot;:&quot;png&quot;,&quot;format&quot;:&quot;png&quot;,&quot;format_code&quot;:true,&quot;url_code&quot;:false,&quot;signature&quot;:&quot;&quot;,&quot;private_cdn&quot;:false,&quot;result_asset_type&quot;:&quot;image&quot;}\"\n      with-url=\"true\"\n    >\n      <span class=\"u-visually-hidden\">Loading code examples<\/span>\n    <\/cld-code-widget><a class=\"c-image-link\" href=\"https:\/\/res.cloudinary.com\/demo\/image\/upload\/l_attendee_avatar,r_100,w_120,x_6,y_24\/l_text:Arial_18:Christian%20Nwamba,y_120\/conference_tag.png\" target=\"_blank\"><img decoding=\"async\" src=\"https:\/\/res.cloudinary.com\/demo\/image\/upload\/l_attendee_avatar,r_100,w_120,x_6,y_24\/l_text:Arial_18:Christian%20Nwamba,y_120\/conference_tag.png\" alt=\"Text size\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"294\" height=\"704\"\/><\/a><\/p>\n<p>There! This attendee tag is now ready for use.<\/p>\n<h2>Summary<\/h2>\n<p>To recap, all you need to do to dynamically generate attendee tags for conferences is predefine the desired positions of the avatars and their related text (such as the attendees\u2019 first and last names) on the tags. Cloudinary\u2019s <a href=\"https:\/\/cloudinary.com\/solutions\/customization\">product customization<\/a> takes over from there and passes the URLs appropriately with the correct public IDs.<\/p>\n<p>By following the simple procedure in this tutorial,,you can generate thousands of conference tags in minimal time. The possibilities and applications of this feature are endless. Keep exploring to build whatever product for which the feature might be of help. To learn about other awesome features, visit <a href=\"https:\/\/cloudinary.com\/\">our solutions page<\/a>.<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"","protected":false},"author":41,"featured_media":21765,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_cloudinary_featured_overwrite":false,"footnotes":""},"categories":[1],"tags":[119,165],"class_list":["post-21764","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-file-upload","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>Automatically Generating Conference Tags<\/title>\n<meta name=\"description\" content=\"This tutorial shows you how Cloudinary enables you to automatically generate conference tags on the fly as attendees register.\" \/>\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\/automatically_generating_attendee_tags_for_conferences\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Automatically Generating Conference Tags\" \/>\n<meta property=\"og:description\" content=\"This tutorial shows you how Cloudinary enables you to automatically generate conference tags on the fly as attendees register.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/cloudinary.com\/blog\/automatically_generating_attendee_tags_for_conferences\" \/>\n<meta property=\"og:site_name\" content=\"Cloudinary Blog\" \/>\n<meta property=\"article:published_time\" content=\"2018-07-23T13:40:08+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-06-06T19:51:23+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/v1649721838\/Web_Assets\/blog\/Auto_Conferences_Tags\/Auto_Conferences_Tags-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\/automatically_generating_attendee_tags_for_conferences#article\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/automatically_generating_attendee_tags_for_conferences\"},\"author\":{\"name\":\"\",\"@id\":\"\"},\"headline\":\"Automatically Generating Conference Tags\",\"datePublished\":\"2018-07-23T13:40:08+00:00\",\"dateModified\":\"2024-06-06T19:51:23+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/automatically_generating_attendee_tags_for_conferences\"},\"wordCount\":4,\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/automatically_generating_attendee_tags_for_conferences#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649721838\/Web_Assets\/blog\/Auto_Conferences_Tags\/Auto_Conferences_Tags.png?_i=AA\",\"keywords\":[\"File-upload\",\"Image Transformation\"],\"inLanguage\":\"en-US\",\"copyrightYear\":\"2018\",\"copyrightHolder\":{\"@id\":\"https:\/\/cloudinary.com\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/cloudinary.com\/blog\/automatically_generating_attendee_tags_for_conferences\",\"url\":\"https:\/\/cloudinary.com\/blog\/automatically_generating_attendee_tags_for_conferences\",\"name\":\"Automatically Generating Conference Tags\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/automatically_generating_attendee_tags_for_conferences#primaryimage\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/automatically_generating_attendee_tags_for_conferences#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649721838\/Web_Assets\/blog\/Auto_Conferences_Tags\/Auto_Conferences_Tags.png?_i=AA\",\"datePublished\":\"2018-07-23T13:40:08+00:00\",\"dateModified\":\"2024-06-06T19:51:23+00:00\",\"description\":\"This tutorial shows you how Cloudinary enables you to automatically generate conference tags on the fly as attendees register.\",\"breadcrumb\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/automatically_generating_attendee_tags_for_conferences#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/cloudinary.com\/blog\/automatically_generating_attendee_tags_for_conferences\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/automatically_generating_attendee_tags_for_conferences#primaryimage\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649721838\/Web_Assets\/blog\/Auto_Conferences_Tags\/Auto_Conferences_Tags.png?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649721838\/Web_Assets\/blog\/Auto_Conferences_Tags\/Auto_Conferences_Tags.png?_i=AA\",\"width\":1540,\"height\":847},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/cloudinary.com\/blog\/automatically_generating_attendee_tags_for_conferences#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/cloudinary.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Automatically Generating Conference Tags\"}]},{\"@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":"Automatically Generating Conference Tags","description":"This tutorial shows you how Cloudinary enables you to automatically generate conference tags on the fly as attendees register.","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\/automatically_generating_attendee_tags_for_conferences","og_locale":"en_US","og_type":"article","og_title":"Automatically Generating Conference Tags","og_description":"This tutorial shows you how Cloudinary enables you to automatically generate conference tags on the fly as attendees register.","og_url":"https:\/\/cloudinary.com\/blog\/automatically_generating_attendee_tags_for_conferences","og_site_name":"Cloudinary Blog","article_published_time":"2018-07-23T13:40:08+00:00","article_modified_time":"2024-06-06T19:51:23+00:00","og_image":[{"width":1540,"height":847,"url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/v1649721838\/Web_Assets\/blog\/Auto_Conferences_Tags\/Auto_Conferences_Tags-png?_i=AA","type":"image\/png"}],"twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"NewsArticle","@id":"https:\/\/cloudinary.com\/blog\/automatically_generating_attendee_tags_for_conferences#article","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/automatically_generating_attendee_tags_for_conferences"},"author":{"name":"","@id":""},"headline":"Automatically Generating Conference Tags","datePublished":"2018-07-23T13:40:08+00:00","dateModified":"2024-06-06T19:51:23+00:00","mainEntityOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/automatically_generating_attendee_tags_for_conferences"},"wordCount":4,"publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/automatically_generating_attendee_tags_for_conferences#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649721838\/Web_Assets\/blog\/Auto_Conferences_Tags\/Auto_Conferences_Tags.png?_i=AA","keywords":["File-upload","Image Transformation"],"inLanguage":"en-US","copyrightYear":"2018","copyrightHolder":{"@id":"https:\/\/cloudinary.com\/#organization"}},{"@type":"WebPage","@id":"https:\/\/cloudinary.com\/blog\/automatically_generating_attendee_tags_for_conferences","url":"https:\/\/cloudinary.com\/blog\/automatically_generating_attendee_tags_for_conferences","name":"Automatically Generating Conference Tags","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/automatically_generating_attendee_tags_for_conferences#primaryimage"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/automatically_generating_attendee_tags_for_conferences#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649721838\/Web_Assets\/blog\/Auto_Conferences_Tags\/Auto_Conferences_Tags.png?_i=AA","datePublished":"2018-07-23T13:40:08+00:00","dateModified":"2024-06-06T19:51:23+00:00","description":"This tutorial shows you how Cloudinary enables you to automatically generate conference tags on the fly as attendees register.","breadcrumb":{"@id":"https:\/\/cloudinary.com\/blog\/automatically_generating_attendee_tags_for_conferences#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/cloudinary.com\/blog\/automatically_generating_attendee_tags_for_conferences"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/automatically_generating_attendee_tags_for_conferences#primaryimage","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649721838\/Web_Assets\/blog\/Auto_Conferences_Tags\/Auto_Conferences_Tags.png?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649721838\/Web_Assets\/blog\/Auto_Conferences_Tags\/Auto_Conferences_Tags.png?_i=AA","width":1540,"height":847},{"@type":"BreadcrumbList","@id":"https:\/\/cloudinary.com\/blog\/automatically_generating_attendee_tags_for_conferences#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/cloudinary.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Automatically Generating Conference Tags"}]},{"@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\/v1649721838\/Web_Assets\/blog\/Auto_Conferences_Tags\/Auto_Conferences_Tags.png?_i=AA","_links":{"self":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/21764","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=21764"}],"version-history":[{"count":4,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/21764\/revisions"}],"predecessor-version":[{"id":34478,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/21764\/revisions\/34478"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media\/21765"}],"wp:attachment":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media?parent=21764"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/categories?post=21764"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/tags?post=21764"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}