{"id":22271,"date":"2021-01-25T16:58:20","date_gmt":"2021-01-25T16:58:20","guid":{"rendered":"http:\/\/introducing_a_text_overlay_creator"},"modified":"2025-02-21T15:28:16","modified_gmt":"2025-02-21T23:28:16","slug":"introducing_a_text_overlay_creator","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/introducing_a_text_overlay_creator","title":{"rendered":"Introducing a Text-Overlay Creator"},"content":{"rendered":"<div class=\"wp-block-cloudinary-markdown \"><p>Many Cloudinary users desire a UI for tasks like creating text overlays for images, which they then embed on webpages or download for marketing campaigns. Generating such overlays with the Cloudinary Media Library UI involves a bit of a learning curve, especially if they require multiple fonts or text lines, which even experienced users might find challenging to implement.<\/p>\n<p>Let me showcase below a simple tool that I recently built for easily creating text overlays, including those with multiple lines and fonts.<\/p>\n<h2>Building Overlays in the Current Way<\/h2>\n<p>To create text overlays for an image in Cloudinary, you normally do that by editing the URL, as in this example:<\/p>\n<p><cld-code-widget\n      class=\" c-code-widget\"\n      snippets=\"[{&quot;sdkId&quot;:&quot;nodejs&quot;,&quot;framework&quot;:&quot;nodejs&quot;,&quot;language&quot;:&quot;nodejs&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.image(\\&quot;flowers.jpg\\&quot;, {transformation: [ {width: 500, crop: \\&quot;scale\\&quot;}, {overlay: {font_family: \\&quot;Arial\\&quot;, font_size: 80, text: \\&quot;Flowers\\&quot;}} ]})&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image(\\&quot;flowers.jpg\\&quot;, {transformation: [\\n  {width: 500, crop: \\&quot;scale\\&quot;},\\n  {overlay: {font_family: \\&quot;Arial\\&quot;, font_size: 80, text: \\&quot;Flowers\\&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;flowers.jpg\\&quot;)\\n  .resize(scale().width(500))\\n  .overlay(source(text(\\&quot;Flowers\\&quot;, new TextStyle(\\&quot;Arial\\&quot;, 80))));&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;flowers.jpg\\&quot;)\\n  .resize(scale().width(500))\\n  .overlay(source(text(\\&quot;Flowers\\&quot;, new TextStyle(\\&quot;Arial\\&quot;, 80))));&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;React&quot;,&quot;packageName&quot;:&quot;@cloudinary\\\/react&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;react&quot;,&quot;framework&quot;:&quot;react&quot;,&quot;language&quot;:&quot;react&quot;,&quot;rawCodeSnippet&quot;:&quot;&lt;Image publicId=\\&quot;flowers.jpg\\&quot; &gt; &lt;Transformation width=\\&quot;500\\&quot; crop=\\&quot;scale\\&quot; \\\/&gt; &lt;Transformation overlay={{fontFamily: \\&quot;Arial\\&quot;, fontSize: 80, text: \\&quot;Flowers\\&quot;}} \\\/&gt; &lt;\\\/Image&gt;&quot;,&quot;codeSnippet&quot;:&quot;&lt;Image publicId=\\&quot;flowers.jpg\\&quot; &gt;\\n\\t&lt;Transformation width=\\&quot;500\\&quot; crop=\\&quot;scale\\&quot; \\\/&gt;\\n\\t&lt;Transformation overlay={{fontFamily: \\&quot;Arial\\&quot;, fontSize: 80, text: \\&quot;Flowers\\&quot;}} \\\/&gt;\\n&lt;\\\/Image&gt;&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;React&quot;,&quot;packageName&quot;:&quot;cloudinary-react&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;vue_2&quot;,&quot;framework&quot;:&quot;vue_2&quot;,&quot;language&quot;:&quot;vue&quot;,&quot;rawCodeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;flowers.jpg\\&quot;)\\n  .resize(scale().width(500))\\n  .overlay(source(text(\\&quot;Flowers\\&quot;, new TextStyle(\\&quot;Arial\\&quot;, 80))));&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;flowers.jpg\\&quot;)\\n  .resize(scale().width(500))\\n  .overlay(source(text(\\&quot;Flowers\\&quot;, new TextStyle(\\&quot;Arial\\&quot;, 80))));&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Vue.js&quot;,&quot;packageName&quot;:&quot;@cloudinary\\\/vue&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;vue&quot;,&quot;framework&quot;:&quot;vue&quot;,&quot;language&quot;:&quot;vue&quot;,&quot;rawCodeSnippet&quot;:&quot;&lt;cld-image public-id=\\&quot;flowers.jpg\\&quot; &gt; &lt;cld-transformation width=\\&quot;500\\&quot; crop=\\&quot;scale\\&quot; \\\/&gt; &lt;cld-transformation :overlay=\\&quot;{fontFamily: &#039;Arial&#039;, fontSize: 80, text: &#039;Flowers&#039;}\\&quot; \\\/&gt; &lt;\\\/cld-image&gt;&quot;,&quot;codeSnippet&quot;:&quot;&lt;cld-image public-id=\\&quot;flowers.jpg\\&quot; &gt;\\n\\t&lt;cld-transformation width=\\&quot;500\\&quot; crop=\\&quot;scale\\&quot; \\\/&gt;\\n\\t&lt;cld-transformation :overlay=\\&quot;{fontFamily: &#039;Arial&#039;, fontSize: 80, text: &#039;Flowers&#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;flowers.jpg\\&quot;)\\n  .resize(scale().width(500))\\n  .overlay(source(text(\\&quot;Flowers\\&quot;, new TextStyle(\\&quot;Arial\\&quot;, 80))));&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;flowers.jpg\\&quot;)\\n  .resize(scale().width(500))\\n  .overlay(source(text(\\&quot;Flowers\\&quot;, new TextStyle(\\&quot;Arial\\&quot;, 80))));&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Angular&quot;,&quot;packageName&quot;:&quot;@cloudinary\\\/ng&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;angular&quot;,&quot;framework&quot;:&quot;angular&quot;,&quot;language&quot;:&quot;angular&quot;,&quot;rawCodeSnippet&quot;:&quot;&lt;cl-image public-id=\\&quot;flowers.jpg\\&quot; &gt; &lt;cl-transformation width=\\&quot;500\\&quot; crop=\\&quot;scale\\&quot;&gt; &lt;\\\/cl-transformation&gt; &lt;cl-transformation overlay=\\&quot;text:Arial_80:Flowers\\&quot;&gt; &lt;\\\/cl-transformation&gt; &lt;\\\/cl-image&gt;&quot;,&quot;codeSnippet&quot;:&quot;&lt;cl-image public-id=\\&quot;flowers.jpg\\&quot; &gt;\\n\\t&lt;cl-transformation width=\\&quot;500\\&quot; crop=\\&quot;scale\\&quot;&gt;\\n\\t&lt;\\\/cl-transformation&gt;\\n\\t&lt;cl-transformation overlay=\\&quot;text:Arial_80:Flowers\\&quot;&gt;\\n\\t&lt;\\\/cl-transformation&gt;\\n&lt;\\\/cl-image&gt;&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Angular&quot;,&quot;packageName&quot;:&quot;@cloudinary\\\/angular-5.x&quot;,&quot;packageStatus&quot;:&quot;legacy&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;js_2&quot;,&quot;framework&quot;:&quot;js_2&quot;,&quot;language&quot;:&quot;js&quot;,&quot;rawCodeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;flowers.jpg\\&quot;)\\n  .resize(scale().width(500))\\n  .overlay(source(text(\\&quot;Flowers\\&quot;, new TextStyle(\\&quot;Arial\\&quot;, 80))));&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;flowers.jpg\\&quot;)\\n  .resize(scale().width(500))\\n  .overlay(source(text(\\&quot;Flowers\\&quot;, new TextStyle(\\&quot;Arial\\&quot;, 80))));&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;JS&quot;,&quot;packageName&quot;:&quot;@cloudinary\\\/url-gen&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;js&quot;,&quot;framework&quot;:&quot;js&quot;,&quot;language&quot;:&quot;js&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.imageTag(&#039;flowers.jpg&#039;, {transformation: [ {width: 500, crop: \\&quot;scale\\&quot;}, {overlay: new cloudinary.TextLayer().fontFamily(\\&quot;Arial\\&quot;).fontSize(80).text(\\&quot;Flowers\\&quot;)} ]}).toHtml();&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.imageTag(&#039;flowers.jpg&#039;, {transformation: [\\n  {width: 500, crop: \\&quot;scale\\&quot;},\\n  {overlay: new cloudinary.TextLayer().fontFamily(\\&quot;Arial\\&quot;).fontSize(80).text(\\&quot;Flowers\\&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;flowers.jpg\\&quot;).image(transformation=[ {&#039;width&#039;: 500, &#039;crop&#039;: \\&quot;scale\\&quot;}, {&#039;overlay&#039;: {&#039;font_family&#039;: \\&quot;Arial\\&quot;, &#039;font_size&#039;: 80, &#039;text&#039;: \\&quot;Flowers\\&quot;}} ])&quot;,&quot;codeSnippet&quot;:&quot;CloudinaryImage(\\&quot;flowers.jpg\\&quot;).image(transformation=[\\n  {&#039;width&#039;: 500, &#039;crop&#039;: \\&quot;scale\\&quot;},\\n  {&#039;overlay&#039;: {&#039;font_family&#039;: \\&quot;Arial\\&quot;, &#039;font_size&#039;: 80, &#039;text&#039;: \\&quot;Flowers\\&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;flowers.jpg&#039;))\\n\\t-&gt;resize(Resize::scale()-&gt;width(500))\\n\\t-&gt;overlay(Overlay::source(\\n\\tSource::text(\\&quot;Flowers\\&quot;,(new TextStyle(\\&quot;Arial\\&quot;,80)))));&quot;,&quot;codeSnippet&quot;:&quot;(new ImageTag(&#039;flowers.jpg&#039;))\\n\\t-&gt;resize(Resize::scale()-&gt;width(500))\\n\\t-&gt;overlay(Overlay::source(\\n\\tSource::text(\\&quot;Flowers\\&quot;,(new TextStyle(\\&quot;Arial\\&quot;,80)))));&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;PHP&quot;,&quot;packageName&quot;:&quot;cloudinary_php&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;3.x&quot;},{&quot;sdkId&quot;:&quot;php&quot;,&quot;framework&quot;:&quot;php&quot;,&quot;language&quot;:&quot;php&quot;,&quot;rawCodeSnippet&quot;:&quot;cl_image_tag(\\&quot;flowers.jpg\\&quot;, array(\\&quot;transformation\\&quot;=&gt;array( array(\\&quot;width\\&quot;=&gt;500, \\&quot;crop\\&quot;=&gt;\\&quot;scale\\&quot;), array(\\&quot;overlay\\&quot;=&gt;array(\\&quot;font_family\\&quot;=&gt;\\&quot;Arial\\&quot;, \\&quot;font_size\\&quot;=&gt;80, \\&quot;text\\&quot;=&gt;\\&quot;Flowers\\&quot;)) )))&quot;,&quot;codeSnippet&quot;:&quot;cl_image_tag(\\&quot;flowers.jpg\\&quot;, array(\\&quot;transformation\\&quot;=&gt;array(\\n  array(\\&quot;width\\&quot;=&gt;500, \\&quot;crop\\&quot;=&gt;\\&quot;scale\\&quot;),\\n  array(\\&quot;overlay\\&quot;=&gt;array(\\&quot;font_family\\&quot;=&gt;\\&quot;Arial\\&quot;, \\&quot;font_size\\&quot;=&gt;80, \\&quot;text\\&quot;=&gt;\\&quot;Flowers\\&quot;))\\n  )))&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;PHP&quot;,&quot;packageName&quot;:&quot;cloudinary_php&quot;,&quot;packageStatus&quot;:&quot;legacy&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;java&quot;,&quot;framework&quot;:&quot;java&quot;,&quot;language&quot;:&quot;java&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.url().transformation(new Transformation().width(500).crop(\\&quot;scale\\&quot;).chain() .overlay(new TextLayer().fontFamily(\\&quot;Arial\\&quot;).fontSize(80).text(\\&quot;Flowers\\&quot;))).imageTag(\\&quot;flowers.jpg\\&quot;);&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.url().transformation(new Transformation()\\n  .width(500).crop(\\&quot;scale\\&quot;).chain()\\n  .overlay(new TextLayer().fontFamily(\\&quot;Arial\\&quot;).fontSize(80).text(\\&quot;Flowers\\&quot;))).imageTag(\\&quot;flowers.jpg\\&quot;);&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Java&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;},{&quot;sdkId&quot;:&quot;ruby&quot;,&quot;framework&quot;:&quot;ruby&quot;,&quot;language&quot;:&quot;ruby&quot;,&quot;rawCodeSnippet&quot;:&quot;cl_image_tag(\\&quot;flowers.jpg\\&quot;, transformation: [ {width: 500, crop: \\&quot;scale\\&quot;}, {overlay: {font_family: \\&quot;Arial\\&quot;, font_size: 80, text: \\&quot;Flowers\\&quot;}} ])&quot;,&quot;codeSnippet&quot;:&quot;cl_image_tag(\\&quot;flowers.jpg\\&quot;, transformation: [\\n  {width: 500, crop: \\&quot;scale\\&quot;},\\n  {overlay: {font_family: \\&quot;Arial\\&quot;, font_size: 80, text: \\&quot;Flowers\\&quot;}}\\n  ])&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Ruby&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;},{&quot;sdkId&quot;:&quot;csharp&quot;,&quot;framework&quot;:&quot;csharp&quot;,&quot;language&quot;:&quot;csharp&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.Api.UrlImgUp.Transform(new Transformation().Width(500).Crop(\\&quot;scale\\&quot;).Chain() .Overlay(new TextLayer().FontFamily(\\&quot;Arial\\&quot;).FontSize(80).Text(\\&quot;Flowers\\&quot;))).BuildImageTag(\\&quot;flowers.jpg\\&quot;)&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.Api.UrlImgUp.Transform(new Transformation()\\n  .Width(500).Crop(\\&quot;scale\\&quot;).Chain()\\n  .Overlay(new TextLayer().FontFamily(\\&quot;Arial\\&quot;).FontSize(80).Text(\\&quot;Flowers\\&quot;))).BuildImageTag(\\&quot;flowers.jpg\\&quot;)&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;.NET&quot;,&quot;packageName&quot;:&quot;CloudinaryDotNet&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;dart&quot;,&quot;framework&quot;:&quot;dart&quot;,&quot;language&quot;:&quot;dart&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.image(&#039;flowers.jpg&#039;).transformation(Transformation()\\n\\t.addTransformation(\\&quot;w_500\\\/l_text:Arial_80:Flowers\\&quot;));&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image(&#039;flowers.jpg&#039;).transformation(Transformation()\\n\\t.addTransformation(\\&quot;w_500\\\/l_text:Arial_80:Flowers\\&quot;));&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Dart&quot;,&quot;packageName&quot;:&quot;cloudinary_dart&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;swift&quot;,&quot;framework&quot;:&quot;swift&quot;,&quot;language&quot;:&quot;swift&quot;,&quot;rawCodeSnippet&quot;:&quot;imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setWidth(500).setCrop(\\&quot;scale\\&quot;).chain() .setOverlay(\\&quot;text:Arial_80:Flowers\\&quot;)).generate(\\&quot;flowers.jpg\\&quot;)!, cloudinary: cloudinary)&quot;,&quot;codeSnippet&quot;:&quot;imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation()\\n  .setWidth(500).setCrop(\\&quot;scale\\&quot;).chain()\\n  .setOverlay(\\&quot;text:Arial_80:Flowers\\&quot;)).generate(\\&quot;flowers.jpg\\&quot;)!, cloudinary: cloudinary)&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;iOS&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;5.x&quot;},{&quot;sdkId&quot;:&quot;android&quot;,&quot;framework&quot;:&quot;android&quot;,&quot;language&quot;:&quot;android&quot;,&quot;rawCodeSnippet&quot;:&quot;MediaManager.get().url().transformation(new Transformation().width(500).crop(\\&quot;scale\\&quot;).chain() .overlay(new TextLayer().fontFamily(\\&quot;Arial\\&quot;).fontSize(80).text(\\&quot;Flowers\\&quot;))).generate(\\&quot;flowers.jpg\\&quot;);&quot;,&quot;codeSnippet&quot;:&quot;MediaManager.get().url().transformation(new Transformation()\\n  .width(500).crop(\\&quot;scale\\&quot;).chain()\\n  .overlay(new TextLayer().fontFamily(\\&quot;Arial\\&quot;).fontSize(80).text(\\&quot;Flowers\\&quot;))).generate(\\&quot;flowers.jpg\\&quot;);&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Android&quot;,&quot;packageName&quot;:&quot;cloudinary-android&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;3.x&quot;},{&quot;sdkId&quot;:&quot;flutter&quot;,&quot;framework&quot;:&quot;flutter&quot;,&quot;language&quot;:&quot;flutter&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.image(&#039;flowers.jpg&#039;).transformation(Transformation()\\n\\t.addTransformation(\\&quot;w_500\\\/l_text:Arial_80:Flowers\\&quot;));&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image(&#039;flowers.jpg&#039;).transformation(Transformation()\\n\\t.addTransformation(\\&quot;w_500\\\/l_text:Arial_80:Flowers\\&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;flowers.jpg\\&quot;)\\n\\t resize(Resize.scale() { width(500) })\\n\\t overlay(Overlay.source(\\n\\tSource.text(\\&quot;Flowers\\&quot;,TextStyle(\\&quot;Arial\\&quot;,80)))) \\n}.generate()&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image {\\n\\tpublicId(\\&quot;flowers.jpg\\&quot;)\\n\\t resize(Resize.scale() { width(500) })\\n\\t overlay(Overlay.source(\\n\\tSource.text(\\&quot;Flowers\\&quot;,TextStyle(\\&quot;Arial\\&quot;,80)))) \\n}.generate()&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Kotlin&quot;,&quot;packageName&quot;:&quot;kotlin-url-gen&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;jquery&quot;,&quot;framework&quot;:&quot;jquery&quot;,&quot;language&quot;:&quot;jquery&quot;,&quot;rawCodeSnippet&quot;:&quot;$.cloudinary.image(\\&quot;flowers.jpg\\&quot;, {transformation: [ {width: 500, crop: \\&quot;scale\\&quot;}, {overlay: new cloudinary.TextLayer().fontFamily(\\&quot;Arial\\&quot;).fontSize(80).text(\\&quot;Flowers\\&quot;)} ]})&quot;,&quot;codeSnippet&quot;:&quot;$.cloudinary.image(\\&quot;flowers.jpg\\&quot;, {transformation: [\\n  {width: 500, crop: \\&quot;scale\\&quot;},\\n  {overlay: new cloudinary.TextLayer().fontFamily(\\&quot;Arial\\&quot;).fontSize(80).text(\\&quot;Flowers\\&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;flowers.jpg\\&quot;)\\n  .resize(scale().width(500))\\n  .overlay(source(text(\\&quot;Flowers\\&quot;, new TextStyle(\\&quot;Arial\\&quot;, 80))));&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;flowers.jpg\\&quot;)\\n  .resize(scale().width(500))\\n  .overlay(source(text(\\&quot;Flowers\\&quot;, new TextStyle(\\&quot;Arial\\&quot;, 80))));&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;React Native&quot;,&quot;packageName&quot;:&quot;cloudinary-react-native&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;}]\"\n      parsed-url=\"{&quot;url&quot;:&quot;https:\\\/\\\/res.cloudinary.com\\\/demo\\\/image\\\/upload\\\/w_500\\\/l_text:Arial_80:Flowers\\\/flowers.jpg&quot;,&quot;cloud_name&quot;:&quot;demo&quot;,&quot;host&quot;:&quot;res.cloudinary.com&quot;,&quot;type&quot;:&quot;upload&quot;,&quot;resource_type&quot;:&quot;image&quot;,&quot;transformation&quot;:[{&quot;width&quot;:&quot;500&quot;},{&quot;overlay&quot;:&quot;text:Arial_80:Flowers&quot;}],&quot;transformation_string&quot;:&quot;w_500\\\/l_text:Arial_80:Flowers&quot;,&quot;url_suffix&quot;:&quot;&quot;,&quot;version&quot;:&quot;&quot;,&quot;secure&quot;:true,&quot;public_id&quot;:&quot;flowers.jpg&quot;,&quot;extension&quot;:&quot;jpg&quot;,&quot;format&quot;:&quot;jpg&quot;,&quot;format_code&quot;:true,&quot;url_code&quot;:false,&quot;signature&quot;:&quot;&quot;,&quot;private_cdn&quot;:false,&quot;result_asset_type&quot;:&quot;image&quot;}\"\n      with-url=\"true\"\n    >\n      <span class=\"u-visually-hidden\">Loading code examples<\/span>\n    <\/cld-code-widget><a class=\"c-image-link\" href=\"https:\/\/res.cloudinary.com\/demo\/image\/upload\/w_500\/l_text:Arial_80:Flowers\/flowers.jpg\" target=\"_blank\"><img decoding=\"async\" src=\"https:\/\/res.cloudinary.com\/demo\/image\/upload\/w_500\/l_text:Arial_80:Flowers\/flowers.jpg\" alt=\"Flowers\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"500\" height=\"264\"\/><\/a><\/p>\n<p>The above URL contains the following parameters:<\/p>\n<ul>\n<li>\n<code>flowers.jpg<\/code>: the image name<\/li>\n<li>\n<code>w_500<\/code>: the width of the overlay on the image<\/li>\n<li>\n<code>l_text<\/code>: the type of the overlay, in this case text\n<ul>\n<li>\n<code>Arial<\/code>: the font face<\/li>\n<li>\n<code>80<\/code>: the font size<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p>The above setup is a cinch to master. However, creating a text overlay, e.g., Happy New Year!, with a custom font takes more steps:<\/p>\n<ol>\n<li>Encode the text for the URL, i.e., <code>Happy%20New%20Year%21<\/code>.<\/li>\n<li>Locate your font file. Let\u2019s say it\u2019s <code>fonts\/Roboto-Thin.ttf<\/code>.<\/li>\n<li>Build the full URL in the correct syntax, as follows:<\/li>\n<\/ol>\n<p><cld-code-widget\n      class=\" c-code-widget\"\n      snippets=\"[{&quot;sdkId&quot;:&quot;nodejs&quot;,&quot;framework&quot;:&quot;nodejs&quot;,&quot;language&quot;:&quot;nodejs&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.image(\\&quot;sample.jpg\\&quot;, {overlay: {public_id: \\&quot;fonts\\&quot;, text: \\&quot;Roboto-Thin.ttf_30\\&quot;}})&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image(\\&quot;sample.jpg\\&quot;, {overlay: {public_id: \\&quot;fonts\\&quot;, text: \\&quot;Roboto-Thin.ttf_30\\&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;sample.jpg\\&quot;).overlay(\\n  source(text(\\&quot;Happy New Year!\\&quot;, new TextStyle(\\&quot;fonts:Roboto-Thin.ttf\\&quot;, 30)))\\n);&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;sample.jpg\\&quot;).overlay(\\n  source(text(\\&quot;Happy New Year!\\&quot;, new TextStyle(\\&quot;fonts:Roboto-Thin.ttf\\&quot;, 30)))\\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;sample.jpg\\&quot; &gt; &lt;Transformation overlay={{text: \\&quot;Roboto-Thin.ttf_30\\&quot;, publicId: \\&quot;fonts\\&quot;}} \\\/&gt; &lt;\\\/Image&gt;&quot;,&quot;codeSnippet&quot;:&quot;&lt;Image publicId=\\&quot;sample.jpg\\&quot; &gt;\\n\\t&lt;Transformation overlay={{text: \\&quot;Roboto-Thin.ttf_30\\&quot;, publicId: \\&quot;fonts\\&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;sample.jpg\\&quot;).overlay(\\n  source(text(\\&quot;Happy New Year!\\&quot;, new TextStyle(\\&quot;fonts:Roboto-Thin.ttf\\&quot;, 30)))\\n);&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;sample.jpg\\&quot;).overlay(\\n  source(text(\\&quot;Happy New Year!\\&quot;, new TextStyle(\\&quot;fonts:Roboto-Thin.ttf\\&quot;, 30)))\\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;sample.jpg\\&quot; &gt; &lt;cld-transformation :overlay=\\&quot;{text: &#039;Roboto-Thin.ttf_30&#039;, publicId: &#039;fonts&#039;}\\&quot; \\\/&gt; &lt;\\\/cld-image&gt;&quot;,&quot;codeSnippet&quot;:&quot;&lt;cld-image public-id=\\&quot;sample.jpg\\&quot; &gt;\\n\\t&lt;cld-transformation :overlay=\\&quot;{text: &#039;Roboto-Thin.ttf_30&#039;, publicId: &#039;fonts&#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;sample.jpg\\&quot;).overlay(\\n  source(text(\\&quot;Happy New Year!\\&quot;, new TextStyle(\\&quot;fonts:Roboto-Thin.ttf\\&quot;, 30)))\\n);&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;sample.jpg\\&quot;).overlay(\\n  source(text(\\&quot;Happy New Year!\\&quot;, new TextStyle(\\&quot;fonts:Roboto-Thin.ttf\\&quot;, 30)))\\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;sample.jpg\\&quot; &gt; &lt;cl-transformation overlay=\\&quot;text:fonts:Roboto-Thin.ttf_30:Happy%20New%20Year%21\\&quot;&gt; &lt;\\\/cl-transformation&gt; &lt;\\\/cl-image&gt;&quot;,&quot;codeSnippet&quot;:&quot;&lt;cl-image public-id=\\&quot;sample.jpg\\&quot; &gt;\\n\\t&lt;cl-transformation overlay=\\&quot;text:fonts:Roboto-Thin.ttf_30:Happy%20New%20Year%21\\&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;sample.jpg\\&quot;).overlay(\\n  source(text(\\&quot;Happy New Year!\\&quot;, new TextStyle(\\&quot;fonts:Roboto-Thin.ttf\\&quot;, 30)))\\n);&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;sample.jpg\\&quot;).overlay(\\n  source(text(\\&quot;Happy New Year!\\&quot;, new TextStyle(\\&quot;fonts:Roboto-Thin.ttf\\&quot;, 30)))\\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;sample.jpg&#039;, {overlay: new cloudinary.TextLayer().text(\\&quot;Roboto-Thin.ttf_30\\&quot;).publicId(\\&quot;fonts\\&quot;)}).toHtml();&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.imageTag(&#039;sample.jpg&#039;, {overlay: new cloudinary.TextLayer().text(\\&quot;Roboto-Thin.ttf_30\\&quot;).publicId(\\&quot;fonts\\&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;sample.jpg\\&quot;).image(overlay={&#039;public_id&#039;: \\&quot;fonts\\&quot;, &#039;text&#039;: \\&quot;Roboto-Thin.ttf_30\\&quot;})&quot;,&quot;codeSnippet&quot;:&quot;CloudinaryImage(\\&quot;sample.jpg\\&quot;).image(overlay={&#039;public_id&#039;: \\&quot;fonts\\&quot;, &#039;text&#039;: \\&quot;Roboto-Thin.ttf_30\\&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;sample.jpg&#039;))\\n\\t-&gt;overlay(Overlay::source(\\n\\tSource::text(\\&quot;Happy New Year!\\&quot;,(new TextStyle(\\&quot;fonts:Roboto-Thin.ttf\\&quot;,30)))));&quot;,&quot;codeSnippet&quot;:&quot;(new ImageTag(&#039;sample.jpg&#039;))\\n\\t-&gt;overlay(Overlay::source(\\n\\tSource::text(\\&quot;Happy New Year!\\&quot;,(new TextStyle(\\&quot;fonts:Roboto-Thin.ttf\\&quot;,30)))));&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;PHP&quot;,&quot;packageName&quot;:&quot;cloudinary_php&quot;,&quot;packageStatus&quot;:&quot;&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;sample.jpg\\&quot;, array(\\&quot;overlay\\&quot;=&gt;array(\\&quot;public_id\\&quot;=&gt;\\&quot;fonts\\&quot;, \\&quot;text\\&quot;=&gt;\\&quot;Roboto-Thin.ttf_30\\&quot;)))&quot;,&quot;codeSnippet&quot;:&quot;cl_image_tag(\\&quot;sample.jpg\\&quot;, array(\\&quot;overlay\\&quot;=&gt;array(\\&quot;public_id\\&quot;=&gt;\\&quot;fonts\\&quot;, \\&quot;text\\&quot;=&gt;\\&quot;Roboto-Thin.ttf_30\\&quot;)))&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;PHP&quot;,&quot;packageName&quot;:&quot;cloudinary_php&quot;,&quot;packageStatus&quot;:&quot;legacy&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;java&quot;,&quot;framework&quot;:&quot;java&quot;,&quot;language&quot;:&quot;java&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.url().transformation(new Transformation().overlay(new TextLayer().text(\\&quot;Roboto-Thin.ttf_30\\&quot;).publicId(\\&quot;fonts\\&quot;))).imageTag(\\&quot;sample.jpg\\&quot;);&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.url().transformation(new Transformation().overlay(new TextLayer().text(\\&quot;Roboto-Thin.ttf_30\\&quot;).publicId(\\&quot;fonts\\&quot;))).imageTag(\\&quot;sample.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;sample.jpg\\&quot;, overlay: {public_id: \\&quot;fonts\\&quot;, text: \\&quot;Roboto-Thin.ttf_30\\&quot;})&quot;,&quot;codeSnippet&quot;:&quot;cl_image_tag(\\&quot;sample.jpg\\&quot;, overlay: {public_id: \\&quot;fonts\\&quot;, text: \\&quot;Roboto-Thin.ttf_30\\&quot;})&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Ruby&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;},{&quot;sdkId&quot;:&quot;csharp&quot;,&quot;framework&quot;:&quot;csharp&quot;,&quot;language&quot;:&quot;csharp&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.Api.UrlImgUp.Transform(new Transformation().Overlay(new TextLayer().Text(\\&quot;Roboto-Thin.ttf_30\\&quot;).PublicId(\\&quot;fonts\\&quot;))).BuildImageTag(\\&quot;sample.jpg\\&quot;)&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.Api.UrlImgUp.Transform(new Transformation().Overlay(new TextLayer().Text(\\&quot;Roboto-Thin.ttf_30\\&quot;).PublicId(\\&quot;fonts\\&quot;))).BuildImageTag(\\&quot;sample.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;sample.jpg&#039;).transformation(Transformation()\\n\\t.addTransformation(\\&quot;l_text:fonts:Roboto-Thin.ttf_30:Happy New Year!\\&quot;));&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image(&#039;sample.jpg&#039;).transformation(Transformation()\\n\\t.addTransformation(\\&quot;l_text:fonts:Roboto-Thin.ttf_30:Happy New Year!\\&quot;));&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Dart&quot;,&quot;packageName&quot;:&quot;cloudinary_dart&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;swift&quot;,&quot;framework&quot;:&quot;swift&quot;,&quot;language&quot;:&quot;swift&quot;,&quot;rawCodeSnippet&quot;:&quot;imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setOverlay(\\&quot;text:fonts:Roboto-Thin.ttf_30:Happy%20New%20Year%21\\&quot;)).generate(\\&quot;sample.jpg\\&quot;)!, cloudinary: cloudinary)&quot;,&quot;codeSnippet&quot;:&quot;imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setOverlay(\\&quot;text:fonts:Roboto-Thin.ttf_30:Happy%20New%20Year%21\\&quot;)).generate(\\&quot;sample.jpg\\&quot;)!, cloudinary: cloudinary)&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;iOS&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;5.x&quot;},{&quot;sdkId&quot;:&quot;android&quot;,&quot;framework&quot;:&quot;android&quot;,&quot;language&quot;:&quot;android&quot;,&quot;rawCodeSnippet&quot;:&quot;MediaManager.get().url().transformation(new Transformation().overlay(new TextLayer().text(\\&quot;Roboto-Thin.ttf_30\\&quot;).publicId(\\&quot;fonts\\&quot;))).generate(\\&quot;sample.jpg\\&quot;);&quot;,&quot;codeSnippet&quot;:&quot;MediaManager.get().url().transformation(new Transformation().overlay(new TextLayer().text(\\&quot;Roboto-Thin.ttf_30\\&quot;).publicId(\\&quot;fonts\\&quot;))).generate(\\&quot;sample.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;sample.jpg&#039;).transformation(Transformation()\\n\\t.addTransformation(\\&quot;l_text:fonts:Roboto-Thin.ttf_30:Happy New Year!\\&quot;));&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image(&#039;sample.jpg&#039;).transformation(Transformation()\\n\\t.addTransformation(\\&quot;l_text:fonts:Roboto-Thin.ttf_30:Happy New Year!\\&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;sample.jpg\\&quot;)\\n\\t overlay(Overlay.source(\\n\\tSource.text(\\&quot;Happy New Year!\\&quot;,TextStyle(\\&quot;fonts:Roboto-Thin.ttf\\&quot;,30)))) \\n}.generate()&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image {\\n\\tpublicId(\\&quot;sample.jpg\\&quot;)\\n\\t overlay(Overlay.source(\\n\\tSource.text(\\&quot;Happy New Year!\\&quot;,TextStyle(\\&quot;fonts:Roboto-Thin.ttf\\&quot;,30)))) \\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;sample.jpg\\&quot;, {overlay: new cloudinary.TextLayer().text(\\&quot;Roboto-Thin.ttf_30\\&quot;).publicId(\\&quot;fonts\\&quot;)})&quot;,&quot;codeSnippet&quot;:&quot;$.cloudinary.image(\\&quot;sample.jpg\\&quot;, {overlay: new cloudinary.TextLayer().text(\\&quot;Roboto-Thin.ttf_30\\&quot;).publicId(\\&quot;fonts\\&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;sample.jpg\\&quot;).overlay(\\n  source(text(\\&quot;Happy New Year!\\&quot;, new TextStyle(\\&quot;fonts:Roboto-Thin.ttf\\&quot;, 30)))\\n);&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;sample.jpg\\&quot;).overlay(\\n  source(text(\\&quot;Happy New Year!\\&quot;, new TextStyle(\\&quot;fonts:Roboto-Thin.ttf\\&quot;, 30)))\\n);&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;React Native&quot;,&quot;packageName&quot;:&quot;cloudinary-react-native&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;}]\"\n      parsed-url=\"{&quot;url&quot;:&quot;https:\\\/\\\/res.cloudinary.com\\\/demo\\\/image\\\/upload\\\/l_text:fonts:Roboto-Thin.ttf_30:Happy%20New%20Year%21\\\/sample.jpg&quot;,&quot;cloud_name&quot;:&quot;demo&quot;,&quot;host&quot;:&quot;res.cloudinary.com&quot;,&quot;type&quot;:&quot;upload&quot;,&quot;resource_type&quot;:&quot;image&quot;,&quot;transformation&quot;:[{&quot;overlay&quot;:&quot;text:fonts:Roboto-Thin.ttf_30:Happy New Year!&quot;}],&quot;transformation_string&quot;:&quot;l_text:fonts:Roboto-Thin.ttf_30:Happy New Year!&quot;,&quot;url_suffix&quot;:&quot;&quot;,&quot;version&quot;:&quot;&quot;,&quot;secure&quot;:true,&quot;public_id&quot;:&quot;sample.jpg&quot;,&quot;extension&quot;:&quot;jpg&quot;,&quot;format&quot;:&quot;jpg&quot;,&quot;format_code&quot;:true,&quot;url_code&quot;:false,&quot;signature&quot;:&quot;&quot;,&quot;private_cdn&quot;:false,&quot;result_asset_type&quot;:&quot;image&quot;}\"\n      with-url=\"true\"\n    >\n      <span class=\"u-visually-hidden\">Loading code examples<\/span>\n    <\/cld-code-widget><a class=\"c-image-link\" href=\"https:\/\/res.cloudinary.com\/demo\/image\/upload\/l_text:fonts:Roboto-Thin.ttf_30:Happy%20New%20Year%21\/sample.jpg\" target=\"_blank\"><img decoding=\"async\" src=\"https:\/\/res.cloudinary.com\/demo\/image\/upload\/l_text:fonts:Roboto-Thin.ttf_30:Happy%20New%20Year%21\/sample.jpg\" alt=\"Sample\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"864\" height=\"576\"\/><\/a><\/p>\n<p>To color the text yellow and position the overlay in the top-left corner, make the URL 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;sample.jpg\\&quot;, {overlay: {public_id: \\&quot;fonts\\&quot;, text: \\&quot;Roboto-Thin.ttf_30\\&quot;}, gravity: \\&quot;north_west\\&quot;, color: \\&quot;#FFF000\\&quot;})&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image(\\&quot;sample.jpg\\&quot;, {overlay: {public_id: \\&quot;fonts\\&quot;, text: \\&quot;Roboto-Thin.ttf_30\\&quot;}, gravity: \\&quot;north_west\\&quot;, color: \\&quot;#FFF000\\&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;sample.jpg\\&quot;).overlay(\\n  source(\\n    text(\\n      \\&quot;Happy New Year!\\&quot;,\\n      new TextStyle(\\&quot;fonts:Roboto-Thin.ttf\\&quot;, 30)\\n    ).textColor(\\&quot;#FFF000\\&quot;)\\n  ).position(new Position().gravity(compass(\\&quot;north_west\\&quot;)))\\n);&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;sample.jpg\\&quot;).overlay(\\n  source(\\n    text(\\n      \\&quot;Happy New Year!\\&quot;,\\n      new TextStyle(\\&quot;fonts:Roboto-Thin.ttf\\&quot;, 30)\\n    ).textColor(\\&quot;#FFF000\\&quot;)\\n  ).position(new Position().gravity(compass(\\&quot;north_west\\&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;sample.jpg\\&quot; &gt; &lt;Transformation overlay={{text: \\&quot;Roboto-Thin.ttf_30\\&quot;, publicId: \\&quot;fonts\\&quot;}} gravity=\\&quot;north_west\\&quot; color=\\&quot;#FFF000\\&quot; \\\/&gt; &lt;\\\/Image&gt;&quot;,&quot;codeSnippet&quot;:&quot;&lt;Image publicId=\\&quot;sample.jpg\\&quot; &gt;\\n\\t&lt;Transformation overlay={{text: \\&quot;Roboto-Thin.ttf_30\\&quot;, publicId: \\&quot;fonts\\&quot;}} gravity=\\&quot;north_west\\&quot; color=\\&quot;#FFF000\\&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;sample.jpg\\&quot;).overlay(\\n  source(\\n    text(\\n      \\&quot;Happy New Year!\\&quot;,\\n      new TextStyle(\\&quot;fonts:Roboto-Thin.ttf\\&quot;, 30)\\n    ).textColor(\\&quot;#FFF000\\&quot;)\\n  ).position(new Position().gravity(compass(\\&quot;north_west\\&quot;)))\\n);&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;sample.jpg\\&quot;).overlay(\\n  source(\\n    text(\\n      \\&quot;Happy New Year!\\&quot;,\\n      new TextStyle(\\&quot;fonts:Roboto-Thin.ttf\\&quot;, 30)\\n    ).textColor(\\&quot;#FFF000\\&quot;)\\n  ).position(new Position().gravity(compass(\\&quot;north_west\\&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;sample.jpg\\&quot; &gt; &lt;cld-transformation :overlay=\\&quot;{text: &#039;Roboto-Thin.ttf_30&#039;, publicId: &#039;fonts&#039;}\\&quot; gravity=\\&quot;north_west\\&quot; color=\\&quot;#FFF000\\&quot; \\\/&gt; &lt;\\\/cld-image&gt;&quot;,&quot;codeSnippet&quot;:&quot;&lt;cld-image public-id=\\&quot;sample.jpg\\&quot; &gt;\\n\\t&lt;cld-transformation :overlay=\\&quot;{text: &#039;Roboto-Thin.ttf_30&#039;, publicId: &#039;fonts&#039;}\\&quot; gravity=\\&quot;north_west\\&quot; color=\\&quot;#FFF000\\&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;sample.jpg\\&quot;).overlay(\\n  source(\\n    text(\\n      \\&quot;Happy New Year!\\&quot;,\\n      new TextStyle(\\&quot;fonts:Roboto-Thin.ttf\\&quot;, 30)\\n    ).textColor(\\&quot;#FFF000\\&quot;)\\n  ).position(new Position().gravity(compass(\\&quot;north_west\\&quot;)))\\n);&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;sample.jpg\\&quot;).overlay(\\n  source(\\n    text(\\n      \\&quot;Happy New Year!\\&quot;,\\n      new TextStyle(\\&quot;fonts:Roboto-Thin.ttf\\&quot;, 30)\\n    ).textColor(\\&quot;#FFF000\\&quot;)\\n  ).position(new Position().gravity(compass(\\&quot;north_west\\&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;sample.jpg\\&quot; &gt; &lt;cl-transformation overlay=\\&quot;text:fonts:Roboto-Thin.ttf_30:Happy%20New%20Year%21\\&quot; gravity=\\&quot;north_west\\&quot; color=\\&quot;#FFF000\\&quot;&gt; &lt;\\\/cl-transformation&gt; &lt;\\\/cl-image&gt;&quot;,&quot;codeSnippet&quot;:&quot;&lt;cl-image public-id=\\&quot;sample.jpg\\&quot; &gt;\\n\\t&lt;cl-transformation overlay=\\&quot;text:fonts:Roboto-Thin.ttf_30:Happy%20New%20Year%21\\&quot; gravity=\\&quot;north_west\\&quot; color=\\&quot;#FFF000\\&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;sample.jpg\\&quot;).overlay(\\n  source(\\n    text(\\n      \\&quot;Happy New Year!\\&quot;,\\n      new TextStyle(\\&quot;fonts:Roboto-Thin.ttf\\&quot;, 30)\\n    ).textColor(\\&quot;#FFF000\\&quot;)\\n  ).position(new Position().gravity(compass(\\&quot;north_west\\&quot;)))\\n);&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;sample.jpg\\&quot;).overlay(\\n  source(\\n    text(\\n      \\&quot;Happy New Year!\\&quot;,\\n      new TextStyle(\\&quot;fonts:Roboto-Thin.ttf\\&quot;, 30)\\n    ).textColor(\\&quot;#FFF000\\&quot;)\\n  ).position(new Position().gravity(compass(\\&quot;north_west\\&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;sample.jpg&#039;, {overlay: new cloudinary.TextLayer().text(\\&quot;Roboto-Thin.ttf_30\\&quot;).publicId(\\&quot;fonts\\&quot;), gravity: \\&quot;north_west\\&quot;, color: \\&quot;#FFF000\\&quot;}).toHtml();&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.imageTag(&#039;sample.jpg&#039;, {overlay: new cloudinary.TextLayer().text(\\&quot;Roboto-Thin.ttf_30\\&quot;).publicId(\\&quot;fonts\\&quot;), gravity: \\&quot;north_west\\&quot;, color: \\&quot;#FFF000\\&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;sample.jpg\\&quot;).image(overlay={&#039;public_id&#039;: \\&quot;fonts\\&quot;, &#039;text&#039;: \\&quot;Roboto-Thin.ttf_30\\&quot;}, gravity=\\&quot;north_west\\&quot;, color=\\&quot;#FFF000\\&quot;)&quot;,&quot;codeSnippet&quot;:&quot;CloudinaryImage(\\&quot;sample.jpg\\&quot;).image(overlay={&#039;public_id&#039;: \\&quot;fonts\\&quot;, &#039;text&#039;: \\&quot;Roboto-Thin.ttf_30\\&quot;}, gravity=\\&quot;north_west\\&quot;, color=\\&quot;#FFF000\\&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;sample.jpg&#039;))\\n\\t-&gt;overlay(Overlay::source(\\n\\tSource::text(\\&quot;Happy New Year!\\&quot;,(new TextStyle(\\&quot;fonts:Roboto-Thin.ttf\\&quot;,30)))\\n\\t-&gt;textColor(Color::rgb(\\&quot;FFF000\\&quot;))\\n\\t)\\n\\t-&gt;position((new Position())\\n\\t-&gt;gravity(\\n\\tGravity::compass(\\n\\tCompass::northWest()))\\n\\t)\\n\\t);&quot;,&quot;codeSnippet&quot;:&quot;(new ImageTag(&#039;sample.jpg&#039;))\\n\\t-&gt;overlay(Overlay::source(\\n\\tSource::text(\\&quot;Happy New Year!\\&quot;,(new TextStyle(\\&quot;fonts:Roboto-Thin.ttf\\&quot;,30)))\\n\\t-&gt;textColor(Color::rgb(\\&quot;FFF000\\&quot;))\\n\\t)\\n\\t-&gt;position((new Position())\\n\\t-&gt;gravity(\\n\\tGravity::compass(\\n\\tCompass::northWest()))\\n\\t)\\n\\t);&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;PHP&quot;,&quot;packageName&quot;:&quot;cloudinary_php&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;3.x&quot;},{&quot;sdkId&quot;:&quot;php&quot;,&quot;framework&quot;:&quot;php&quot;,&quot;language&quot;:&quot;php&quot;,&quot;rawCodeSnippet&quot;:&quot;cl_image_tag(\\&quot;sample.jpg\\&quot;, array(\\&quot;overlay\\&quot;=&gt;array(\\&quot;public_id\\&quot;=&gt;\\&quot;fonts\\&quot;, \\&quot;text\\&quot;=&gt;\\&quot;Roboto-Thin.ttf_30\\&quot;), \\&quot;gravity\\&quot;=&gt;\\&quot;north_west\\&quot;, \\&quot;color\\&quot;=&gt;\\&quot;#FFF000\\&quot;))&quot;,&quot;codeSnippet&quot;:&quot;cl_image_tag(\\&quot;sample.jpg\\&quot;, array(\\&quot;overlay\\&quot;=&gt;array(\\&quot;public_id\\&quot;=&gt;\\&quot;fonts\\&quot;, \\&quot;text\\&quot;=&gt;\\&quot;Roboto-Thin.ttf_30\\&quot;), \\&quot;gravity\\&quot;=&gt;\\&quot;north_west\\&quot;, \\&quot;color\\&quot;=&gt;\\&quot;#FFF000\\&quot;))&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;PHP&quot;,&quot;packageName&quot;:&quot;cloudinary_php&quot;,&quot;packageStatus&quot;:&quot;legacy&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;java&quot;,&quot;framework&quot;:&quot;java&quot;,&quot;language&quot;:&quot;java&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.url().transformation(new Transformation().overlay(new TextLayer().text(\\&quot;Roboto-Thin.ttf_30\\&quot;).publicId(\\&quot;fonts\\&quot;)).gravity(\\&quot;north_west\\&quot;).color(\\&quot;#FFF000\\&quot;)).imageTag(\\&quot;sample.jpg\\&quot;);&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.url().transformation(new Transformation().overlay(new TextLayer().text(\\&quot;Roboto-Thin.ttf_30\\&quot;).publicId(\\&quot;fonts\\&quot;)).gravity(\\&quot;north_west\\&quot;).color(\\&quot;#FFF000\\&quot;)).imageTag(\\&quot;sample.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;sample.jpg\\&quot;, overlay: {public_id: \\&quot;fonts\\&quot;, text: \\&quot;Roboto-Thin.ttf_30\\&quot;}, gravity: \\&quot;north_west\\&quot;, color: \\&quot;#FFF000\\&quot;)&quot;,&quot;codeSnippet&quot;:&quot;cl_image_tag(\\&quot;sample.jpg\\&quot;, overlay: {public_id: \\&quot;fonts\\&quot;, text: \\&quot;Roboto-Thin.ttf_30\\&quot;}, gravity: \\&quot;north_west\\&quot;, color: \\&quot;#FFF000\\&quot;)&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Ruby&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;},{&quot;sdkId&quot;:&quot;csharp&quot;,&quot;framework&quot;:&quot;csharp&quot;,&quot;language&quot;:&quot;csharp&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.Api.UrlImgUp.Transform(new Transformation().Overlay(new TextLayer().Text(\\&quot;Roboto-Thin.ttf_30\\&quot;).PublicId(\\&quot;fonts\\&quot;)).Gravity(\\&quot;north_west\\&quot;).Color(\\&quot;#FFF000\\&quot;)).BuildImageTag(\\&quot;sample.jpg\\&quot;)&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.Api.UrlImgUp.Transform(new Transformation().Overlay(new TextLayer().Text(\\&quot;Roboto-Thin.ttf_30\\&quot;).PublicId(\\&quot;fonts\\&quot;)).Gravity(\\&quot;north_west\\&quot;).Color(\\&quot;#FFF000\\&quot;)).BuildImageTag(\\&quot;sample.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;sample.jpg&#039;).transformation(Transformation()\\n\\t.addTransformation(\\&quot;l_text:fonts:Roboto-Thin.ttf_30:Happy New Year!,g_north_west,co_rgb:FFF000\\&quot;));&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image(&#039;sample.jpg&#039;).transformation(Transformation()\\n\\t.addTransformation(\\&quot;l_text:fonts:Roboto-Thin.ttf_30:Happy New Year!,g_north_west,co_rgb:FFF000\\&quot;));&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Dart&quot;,&quot;packageName&quot;:&quot;cloudinary_dart&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;swift&quot;,&quot;framework&quot;:&quot;swift&quot;,&quot;language&quot;:&quot;swift&quot;,&quot;rawCodeSnippet&quot;:&quot;imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setOverlay(\\&quot;text:fonts:Roboto-Thin.ttf_30:Happy%20New%20Year%21\\&quot;).setGravity(\\&quot;north_west\\&quot;).setColor(\\&quot;#FFF000\\&quot;)).generate(\\&quot;sample.jpg\\&quot;)!, cloudinary: cloudinary)&quot;,&quot;codeSnippet&quot;:&quot;imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setOverlay(\\&quot;text:fonts:Roboto-Thin.ttf_30:Happy%20New%20Year%21\\&quot;).setGravity(\\&quot;north_west\\&quot;).setColor(\\&quot;#FFF000\\&quot;)).generate(\\&quot;sample.jpg\\&quot;)!, cloudinary: cloudinary)&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;iOS&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;5.x&quot;},{&quot;sdkId&quot;:&quot;android&quot;,&quot;framework&quot;:&quot;android&quot;,&quot;language&quot;:&quot;android&quot;,&quot;rawCodeSnippet&quot;:&quot;MediaManager.get().url().transformation(new Transformation().overlay(new TextLayer().text(\\&quot;Roboto-Thin.ttf_30\\&quot;).publicId(\\&quot;fonts\\&quot;)).gravity(\\&quot;north_west\\&quot;).color(\\&quot;#FFF000\\&quot;)).generate(\\&quot;sample.jpg\\&quot;);&quot;,&quot;codeSnippet&quot;:&quot;MediaManager.get().url().transformation(new Transformation().overlay(new TextLayer().text(\\&quot;Roboto-Thin.ttf_30\\&quot;).publicId(\\&quot;fonts\\&quot;)).gravity(\\&quot;north_west\\&quot;).color(\\&quot;#FFF000\\&quot;)).generate(\\&quot;sample.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;sample.jpg&#039;).transformation(Transformation()\\n\\t.addTransformation(\\&quot;l_text:fonts:Roboto-Thin.ttf_30:Happy New Year!,g_north_west,co_rgb:FFF000\\&quot;));&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image(&#039;sample.jpg&#039;).transformation(Transformation()\\n\\t.addTransformation(\\&quot;l_text:fonts:Roboto-Thin.ttf_30:Happy New Year!,g_north_west,co_rgb:FFF000\\&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;sample.jpg\\&quot;)\\n\\t overlay(Overlay.source(\\n\\tSource.text(\\&quot;Happy New Year!\\&quot;,TextStyle(\\&quot;fonts:Roboto-Thin.ttf\\&quot;,30)) {\\n\\t textColor(Color.rgb(\\&quot;FFF000\\&quot;))\\n\\t }) {\\n\\t position(Position() {\\n\\t gravity(\\n\\tGravity.compass(\\n\\tCompass.northWest()))\\n\\t })\\n\\t }) \\n}.generate()&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image {\\n\\tpublicId(\\&quot;sample.jpg\\&quot;)\\n\\t overlay(Overlay.source(\\n\\tSource.text(\\&quot;Happy New Year!\\&quot;,TextStyle(\\&quot;fonts:Roboto-Thin.ttf\\&quot;,30)) {\\n\\t textColor(Color.rgb(\\&quot;FFF000\\&quot;))\\n\\t }) {\\n\\t position(Position() {\\n\\t gravity(\\n\\tGravity.compass(\\n\\tCompass.northWest()))\\n\\t })\\n\\t }) \\n}.generate()&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Kotlin&quot;,&quot;packageName&quot;:&quot;kotlin-url-gen&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;jquery&quot;,&quot;framework&quot;:&quot;jquery&quot;,&quot;language&quot;:&quot;jquery&quot;,&quot;rawCodeSnippet&quot;:&quot;$.cloudinary.image(\\&quot;sample.jpg\\&quot;, {overlay: new cloudinary.TextLayer().text(\\&quot;Roboto-Thin.ttf_30\\&quot;).publicId(\\&quot;fonts\\&quot;), gravity: \\&quot;north_west\\&quot;, color: \\&quot;#FFF000\\&quot;})&quot;,&quot;codeSnippet&quot;:&quot;$.cloudinary.image(\\&quot;sample.jpg\\&quot;, {overlay: new cloudinary.TextLayer().text(\\&quot;Roboto-Thin.ttf_30\\&quot;).publicId(\\&quot;fonts\\&quot;), gravity: \\&quot;north_west\\&quot;, color: \\&quot;#FFF000\\&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;sample.jpg\\&quot;).overlay(\\n  source(\\n    text(\\n      \\&quot;Happy New Year!\\&quot;,\\n      new TextStyle(\\&quot;fonts:Roboto-Thin.ttf\\&quot;, 30)\\n    ).textColor(\\&quot;#FFF000\\&quot;)\\n  ).position(new Position().gravity(compass(\\&quot;north_west\\&quot;)))\\n);&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;sample.jpg\\&quot;).overlay(\\n  source(\\n    text(\\n      \\&quot;Happy New Year!\\&quot;,\\n      new TextStyle(\\&quot;fonts:Roboto-Thin.ttf\\&quot;, 30)\\n    ).textColor(\\&quot;#FFF000\\&quot;)\\n  ).position(new Position().gravity(compass(\\&quot;north_west\\&quot;)))\\n);&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;React Native&quot;,&quot;packageName&quot;:&quot;cloudinary-react-native&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;}]\"\n      parsed-url=\"{&quot;url&quot;:&quot;https:\\\/\\\/res.cloudinary.com\\\/demo\\\/image\\\/upload\\\/l_text:fonts:Roboto-Thin.ttf_30:Happy%20New%20Year%21,g_north_west,co_rgb:FFF000\\\/sample.jpg&quot;,&quot;cloud_name&quot;:&quot;demo&quot;,&quot;host&quot;:&quot;res.cloudinary.com&quot;,&quot;type&quot;:&quot;upload&quot;,&quot;resource_type&quot;:&quot;image&quot;,&quot;transformation&quot;:[{&quot;overlay&quot;:&quot;text:fonts:Roboto-Thin.ttf_30:Happy New Year!&quot;,&quot;gravity&quot;:&quot;north_west&quot;,&quot;color&quot;:&quot;rgb:FFF000&quot;}],&quot;transformation_string&quot;:&quot;l_text:fonts:Roboto-Thin.ttf_30:Happy New Year!,g_north_west,co_rgb:FFF000&quot;,&quot;url_suffix&quot;:&quot;&quot;,&quot;version&quot;:&quot;&quot;,&quot;secure&quot;:true,&quot;public_id&quot;:&quot;sample.jpg&quot;,&quot;extension&quot;:&quot;jpg&quot;,&quot;format&quot;:&quot;jpg&quot;,&quot;format_code&quot;:true,&quot;url_code&quot;:false,&quot;signature&quot;:&quot;&quot;,&quot;private_cdn&quot;:false,&quot;result_asset_type&quot;:&quot;image&quot;}\"\n      with-url=\"true\"\n    >\n      <span class=\"u-visually-hidden\">Loading code examples<\/span>\n    <\/cld-code-widget><a class=\"c-image-link\" href=\"https:\/\/res.cloudinary.com\/demo\/image\/upload\/l_text:fonts:Roboto-Thin.ttf_30:Happy%20New%20Year%21,g_north_west,co_rgb:FFF000\/sample.jpg\" target=\"_blank\"><img decoding=\"async\" src=\"https:\/\/res.cloudinary.com\/demo\/image\/upload\/l_text:fonts:Roboto-Thin.ttf_30:Happy%20New%20Year%21,g_north_west,co_rgb:FFF000\/sample.jpg\" alt=\"Sample 2\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"864\" height=\"576\"\/><\/a><\/p>\n<p>To add an overlay with multiple lines, you must construct <a href=\"https:\/\/cloudinary.com\/documentation\/image_transformations\">chained transformations<\/a> with multiple components, each implementing a specific section of the overlay. The more requirements for the overlay, the more complex the related image URL. Even though the Media Library UI offers shortcuts, becoming adept with the procedure takes time and practice. Also, nontechnical professionals, who are often tasked with creating text overlays, might take longer to familiarize with the URL format and the UI.<\/p>\n<h2>Creating Overlays With an Intuitive Tool<\/h2>\n<p>For a simpler alternative, leverage this <a href=\"https:\/\/github.com\/akshay-ranganath\/simple-text-overlay\">text-overlay tool<\/a>, an HTML-JavaScript app through which you can input the following details for an overlay:<\/p>\n<ul>\n<li>The text<\/li>\n<li>The font face<\/li>\n<li>The font size<\/li>\n<li>The position of the text line<\/li>\n<\/ul>\n<p>You can set up a maximum of three such overlays, each one with its own text, font face, font size, and position.<\/p>\n<div class='c-callout  c-callout--inline-title c-callout--note'><strong class='c-callout__title'>Note:<\/strong> <p><a href=\"https:\/\/demo.cloudinary.com\/cloudydesk\/text-overlay\/index.html\">Try out this demo<\/a>.<\/p><\/div>\n<h3>Example<\/h3>\n<p>Suppose you\u2019d like to create a three-line text overlay with the following properties for an image and position the lines at different places of the image:<\/p>\n<table class=\"table table-striped table-bordered\">\n   <thead>\n      <tr>\n         <th>Text<\/th>\n         <th>Color (RGB)<\/th>\n         <th>Size<\/th>\n          <\/tr>\n   <\/thead>\n   <tbody>\n      <tr>\n         <td>Have no fear. . .<\/th>\n         <td>FFF000 (yellow)<\/td>\n         <td>30<\/td>\n      <\/tr>\n         <td>A COVID-19 vaccine is here!<\/td>\n         <td>000FFF (blue)<\/td>\n         <td>35<\/td>\n      <\/tr>\n         <td>Let\u2019s hope 2021 will turn out to be better than 2020.<\/td>\n         <td>F0F0F0 (gray)<\/td>\n         <td>30<\/td>\n      <\/tr>\n      <\/tbody>\n<\/table>\n<h4>Step 1: Identify the Image<\/h4>\n<p>Choose an image from your Cloudinary account\u2019s Media Library by clicking <strong>INSERT IMAGE<\/strong> at the top, which then takes you to the library, in which you can search or navigate to the image. See the demo below.<\/p>\n<video controls=\"controls\" muted poster=\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/video\/upload\/w_700,c_fill,f_auto,q_auto,dpr_2.0\/Web_Assets\/blog\/selecting-asset-with-transformation.jpg\" src=\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/video\/upload\/w_700,f_auto,q_auto\/Web_Assets\/blog\/selecting-asset-with-transformation.mp4\">\n<\/video>\n<h4>Step 2: Input the Text Lines and Specify Their Font Details<\/h4>\n<p>Type the text to be overlaid in the text fields. Note that those fields are optional, i.e., you can input between one to three lines of text.<\/p>\n<p>Afterwards, choose the font face and enter the font size you desire.<\/p>\n<h4>Step 3: Position the Overlay<\/h4>\n<p>Specify the position of the overlay by clicking the <strong>PICK<\/strong> button. Alternatively, enter the X and Y coordinates. In this example, the top-left corner is the original position (X=0,Y=0).<\/p>\n<p>In the demo below, I selected the position for the first text line by clicking the image. I then adjusted the position and, with that as the basis, set the position of the second and third text lines.<\/p>\n<video controls=\"controls\" muted poster=\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/video\/upload\/w_700,c_fill,f_auto,q_auto,dpr_2.0\/Web_Assets\/blog\/using-overlay-creation-tool.jpg\" src=\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/video\/upload\/w_700,f_auto,q_auto\/Web_Assets\/blog\/using-overlay-creation-tool.mp4\">\n<\/video>\n<h4>Step 4: Preview the Image<\/h4>\n<p>Verify the setup by clicking the <strong>PREVIEW<\/strong> button. To make changes, click <strong>CLEAR<\/strong> and edit the settings.<\/p>\n<h4>Step 5: Generate the Image With Overlay<\/h4>\n<p>Once you are happy with the result, click <strong>GENERATE<\/strong> to create the image with the overlay. As reference, the tool displays the Cloudinary URL, with which you can embed the image into a webpage or marketing material.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/image\/upload\/w_700,c_fill,f_auto,q_auto\/Web_Assets\/blog\/cloudinary_url.png\" alt=\"Cloudinary URL\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"700\" height=\"146\"\/><\/p>\n<h2>Wrapping Up<\/h2>\n<p>With the simple tool described above, you can see your multiline or multifont overlay settings at a glance, configure or edit them with ease, and avoid the complex and often time-consuming process of programmatically creating transformations. Since I built the tool on the existing widgets, I\u2019ll enhance it or add features to it from time to time to improve its usability and robustness. If you like what you\u2019ve seen, please vote for this tool in our <a href=\"https:\/\/roadmap.cloudinary.com\/c\/130-media-editor-text-overlays\">Product Roadmap<\/a>.<\/p>\n<p>Do give the tool a try. Any problems, please open an issue on GitHub.<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"","protected":false},"author":41,"featured_media":22272,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_cloudinary_featured_overwrite":false,"footnotes":""},"categories":[1],"tags":[25,165],"class_list":["post-22271","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-asset-management","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>A New, Simple Tool for Creating Text Overlays for Images<\/title>\n<meta name=\"description\" content=\"A simple Cloudinary tool enables you to create text overlays for images up to a maximum of three text lines, complete with a preview capability.\" \/>\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\/introducing_a_text_overlay_creator\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Introducing a Text-Overlay Creator\" \/>\n<meta property=\"og:description\" content=\"A simple Cloudinary tool enables you to create text overlays for images up to a maximum of three text lines, complete with a preview capability.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/cloudinary.com\/blog\/introducing_a_text_overlay_creator\" \/>\n<meta property=\"og:site_name\" content=\"Cloudinary Blog\" \/>\n<meta property=\"article:published_time\" content=\"2021-01-25T16:58:20+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-02-21T23:28:16+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/v1649733897\/Web_Assets\/blog\/Cld_blogimg_Text-Overlay_222724c0a3\/Cld_blogimg_Text-Overlay_222724c0a3-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\/introducing_a_text_overlay_creator#article\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/introducing_a_text_overlay_creator\"},\"author\":{\"name\":\"\",\"@id\":\"\"},\"headline\":\"Introducing a Text-Overlay Creator\",\"datePublished\":\"2021-01-25T16:58:20+00:00\",\"dateModified\":\"2025-02-21T23:28:16+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/introducing_a_text_overlay_creator\"},\"wordCount\":4,\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/introducing_a_text_overlay_creator#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649733897\/Web_Assets\/blog\/Cld_blogimg_Text-Overlay_222724c0a3\/Cld_blogimg_Text-Overlay_222724c0a3.png?_i=AA\",\"keywords\":[\"Asset Management\",\"Image Transformation\"],\"inLanguage\":\"en-US\",\"copyrightYear\":\"2021\",\"copyrightHolder\":{\"@id\":\"https:\/\/cloudinary.com\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/cloudinary.com\/blog\/introducing_a_text_overlay_creator\",\"url\":\"https:\/\/cloudinary.com\/blog\/introducing_a_text_overlay_creator\",\"name\":\"A New, Simple Tool for Creating Text Overlays for Images\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/introducing_a_text_overlay_creator#primaryimage\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/introducing_a_text_overlay_creator#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649733897\/Web_Assets\/blog\/Cld_blogimg_Text-Overlay_222724c0a3\/Cld_blogimg_Text-Overlay_222724c0a3.png?_i=AA\",\"datePublished\":\"2021-01-25T16:58:20+00:00\",\"dateModified\":\"2025-02-21T23:28:16+00:00\",\"description\":\"A simple Cloudinary tool enables you to create text overlays for images up to a maximum of three text lines, complete with a preview capability.\",\"breadcrumb\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/introducing_a_text_overlay_creator#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/cloudinary.com\/blog\/introducing_a_text_overlay_creator\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/introducing_a_text_overlay_creator#primaryimage\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649733897\/Web_Assets\/blog\/Cld_blogimg_Text-Overlay_222724c0a3\/Cld_blogimg_Text-Overlay_222724c0a3.png?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649733897\/Web_Assets\/blog\/Cld_blogimg_Text-Overlay_222724c0a3\/Cld_blogimg_Text-Overlay_222724c0a3.png?_i=AA\",\"width\":1540,\"height\":847},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/cloudinary.com\/blog\/introducing_a_text_overlay_creator#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/cloudinary.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Introducing a Text-Overlay Creator\"}]},{\"@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":"A New, Simple Tool for Creating Text Overlays for Images","description":"A simple Cloudinary tool enables you to create text overlays for images up to a maximum of three text lines, complete with a preview capability.","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\/introducing_a_text_overlay_creator","og_locale":"en_US","og_type":"article","og_title":"Introducing a Text-Overlay Creator","og_description":"A simple Cloudinary tool enables you to create text overlays for images up to a maximum of three text lines, complete with a preview capability.","og_url":"https:\/\/cloudinary.com\/blog\/introducing_a_text_overlay_creator","og_site_name":"Cloudinary Blog","article_published_time":"2021-01-25T16:58:20+00:00","article_modified_time":"2025-02-21T23:28:16+00:00","og_image":[{"width":1540,"height":847,"url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/v1649733897\/Web_Assets\/blog\/Cld_blogimg_Text-Overlay_222724c0a3\/Cld_blogimg_Text-Overlay_222724c0a3-png?_i=AA","type":"image\/png"}],"twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"NewsArticle","@id":"https:\/\/cloudinary.com\/blog\/introducing_a_text_overlay_creator#article","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/introducing_a_text_overlay_creator"},"author":{"name":"","@id":""},"headline":"Introducing a Text-Overlay Creator","datePublished":"2021-01-25T16:58:20+00:00","dateModified":"2025-02-21T23:28:16+00:00","mainEntityOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/introducing_a_text_overlay_creator"},"wordCount":4,"publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/introducing_a_text_overlay_creator#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649733897\/Web_Assets\/blog\/Cld_blogimg_Text-Overlay_222724c0a3\/Cld_blogimg_Text-Overlay_222724c0a3.png?_i=AA","keywords":["Asset Management","Image Transformation"],"inLanguage":"en-US","copyrightYear":"2021","copyrightHolder":{"@id":"https:\/\/cloudinary.com\/#organization"}},{"@type":"WebPage","@id":"https:\/\/cloudinary.com\/blog\/introducing_a_text_overlay_creator","url":"https:\/\/cloudinary.com\/blog\/introducing_a_text_overlay_creator","name":"A New, Simple Tool for Creating Text Overlays for Images","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/introducing_a_text_overlay_creator#primaryimage"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/introducing_a_text_overlay_creator#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649733897\/Web_Assets\/blog\/Cld_blogimg_Text-Overlay_222724c0a3\/Cld_blogimg_Text-Overlay_222724c0a3.png?_i=AA","datePublished":"2021-01-25T16:58:20+00:00","dateModified":"2025-02-21T23:28:16+00:00","description":"A simple Cloudinary tool enables you to create text overlays for images up to a maximum of three text lines, complete with a preview capability.","breadcrumb":{"@id":"https:\/\/cloudinary.com\/blog\/introducing_a_text_overlay_creator#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/cloudinary.com\/blog\/introducing_a_text_overlay_creator"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/introducing_a_text_overlay_creator#primaryimage","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649733897\/Web_Assets\/blog\/Cld_blogimg_Text-Overlay_222724c0a3\/Cld_blogimg_Text-Overlay_222724c0a3.png?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649733897\/Web_Assets\/blog\/Cld_blogimg_Text-Overlay_222724c0a3\/Cld_blogimg_Text-Overlay_222724c0a3.png?_i=AA","width":1540,"height":847},{"@type":"BreadcrumbList","@id":"https:\/\/cloudinary.com\/blog\/introducing_a_text_overlay_creator#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/cloudinary.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Introducing a Text-Overlay Creator"}]},{"@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\/v1649733897\/Web_Assets\/blog\/Cld_blogimg_Text-Overlay_222724c0a3\/Cld_blogimg_Text-Overlay_222724c0a3.png?_i=AA","_links":{"self":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/22271","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=22271"}],"version-history":[{"count":2,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/22271\/revisions"}],"predecessor-version":[{"id":36922,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/22271\/revisions\/36922"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media\/22272"}],"wp:attachment":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media?parent=22271"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/categories?post=22271"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/tags?post=22271"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}