Cloudinary - Cookbook recipes of Text

Find recipes by tags:

Use images as text textures

Instead of coloring your text with a solid color, fill it with an image and give it an interesting texture. How? Choose an image as your text texture, dynamically add a text overlay as explained in the Dynamic text overlay blog post, and set the flags parameter to cutter (fl_cutter in URLs).

Original image

Text texture

Fetch + texture

URL Ruby PHP Python Node.js Java JS jQuery React Angular .Net Android All

URL:

https://res.cloudinary.com/demo/image/upload/l_text:Coustard_200_bold:Flowers,fl_cutter/yellow_tulip.png

Ruby:

cl_image_tag("yellow_tulip.png", :overlay=>"text:Coustard_200_bold:Flowers", :flags=>"cutter")

PHP:

cl_image_tag("yellow_tulip.png", array("overlay"=>"text:Coustard_200_bold:Flowers", "flags"=>"cutter"))

Python:

CloudinaryImage("yellow_tulip.png").image(overlay="text:Coustard_200_bold:Flowers", flags="cutter")

Node.js:

cloudinary.image("yellow_tulip.png", {overlay: "text:Coustard_200_bold:Flowers", flags: "cutter"})

Java:

cloudinary.url().transformation(new Transformation().overlay("text:Coustard_200_bold:Flowers").flags("cutter")).imageTag("yellow_tulip.png")

JS:

cl.imageTag('yellow_tulip.png', {overlay: "text:Coustard_200_bold:Flowers", flags: "cutter"}).toHtml();

jQuery:

$.cloudinary.image("yellow_tulip.png", {overlay: "text:Coustard_200_bold:Flowers", flags: "cutter"})

React:

<Image publicId="yellow_tulip.png" >
  <Transformation overlay="text:Coustard_200_bold:Flowers" flags="cutter" />
</Image>

Angular:

<cl-image public-id="yellow_tulip.png" >
  <cl-transformation overlay="text:Coustard_200_bold:Flowers" flags="cutter">
  </cl-transformation>
</cl-image>

.Net:

cloudinary.Api.UrlImgUp.Transform(new Transformation().Overlay("text:Coustard_200_bold:Flowers").Flags("cutter")).BuildImageTag("yellow_tulip.png")

Android:

MediaManager.get().url().transformation(new Transformation().overlay("text:Coustard_200_bold:Flowers").flags("cutter")).generate("yellow_tulip.png")

by Itay Taragano Jun 11, 2014

Tags:

Generate a profile completeness meter

Generate a great looking profile completeness meter to notify your users of their progress. Whether it's for profile page details, survey progress, or just to show your users the percentage of the completion of any task. Use Cloudinary's powerful manipulation tools to generate just what you need.

Badge meter

User's thumbnail

Avatar meter

URL Ruby PHP Python Node.js Java JS jQuery React Angular .Net Android All

URL:

https://res.cloudinary.com/demo/image/upload/e_trim/e_colorize,co_white/b_rgb:D0CDCD/l_avatar,e_trim,w_1.0,h_0.6,c_crop,g_south/fl_layer_apply,g_south/l_text:Playball_40:60%25,co_white,y_80/w_200,c_scale/avatar.jpg

Ruby:

cl_image_tag("avatar.jpg", :transformation=>[
  {:effect=>"trim"},
  {:effect=>"colorize", :color=>"white"},
  {:background=>"#D0CDCD"},
  {:overlay=>"avatar", :effect=>"trim", :width=>1.0, :height=>0.6, :gravity=>"south", :crop=>"crop"},
  {:flags=>"layer_apply", :gravity=>"south"},
  {:overlay=>"text:Playball_40:60%2525", :color=>"white", :y=>80},
  {:width=>200, :crop=>"scale"}
  ])

PHP:

cl_image_tag("avatar.jpg", array("transformation"=>array(
  array("effect"=>"trim"),
  array("effect"=>"colorize", "color"=>"white"),
  array("background"=>"#D0CDCD"),
  array("overlay"=>"avatar", "effect"=>"trim", "width"=>1.0, "height"=>0.6, "gravity"=>"south", "crop"=>"crop"),
  array("flags"=>"layer_apply", "gravity"=>"south"),
  array("overlay"=>"text:Playball_40:60%2525", "color"=>"white", "y"=>80),
  array("width"=>200, "crop"=>"scale")
  )))

Python:

CloudinaryImage("avatar.jpg").image(transformation=[
  {"effect": "trim"},
  {"effect": "colorize", "color": "white"},
  {"background": "#D0CDCD"},
  {"overlay": "avatar", "effect": "trim", "width": 1.0, "height": 0.6, "gravity": "south", "crop": "crop"},
  {"flags": "layer_apply", "gravity": "south"},
  {"overlay": "text:Playball_40:60%2525", "color": "white", "y": 80},
  {"width": 200, "crop": "scale"}
  ])

Node.js:

cloudinary.image("avatar.jpg", {transformation: [
  {effect: "trim"},
  {effect: "colorize", color: "white"},
  {background: "#D0CDCD"},
  {overlay: "avatar", effect: "trim", width: "1.0", height: "0.6", gravity: "south", crop: "crop"},
  {flags: "layer_apply", gravity: "south"},
  {overlay: "text:Playball_40:60%2525", color: "white", y: 80},
  {width: 200, crop: "scale"}
  ]})

Java:

cloudinary.url().transformation(new Transformation()
  .effect("trim").chain()
  .effect("colorize").color("white").chain()
  .background("#D0CDCD").chain()
  .overlay("avatar").effect("trim").width(1.0).height(0.6).gravity("south").crop("crop").chain()
  .flags("layer_apply").gravity("south").chain()
  .overlay("text:Playball_40:60%2525").color("white").y(80).chain()
  .width(200).crop("scale")).imageTag("avatar.jpg")

JS:

cl.imageTag('avatar.jpg', {transformation: [
  {effect: "trim"},
  {effect: "colorize", color: "white"},
  {background: "#D0CDCD"},
  {overlay: "avatar", effect: "trim", width: "1.0", height: "0.6", gravity: "south", crop: "crop"},
  {flags: "layer_apply", gravity: "south"},
  {overlay: "text:Playball_40:60%2525", color: "white", y: 80},
  {width: 200, crop: "scale"}
  ]}).toHtml();

jQuery:

$.cloudinary.image("avatar.jpg", {transformation: [
  {effect: "trim"},
  {effect: "colorize", color: "white"},
  {background: "#D0CDCD"},
  {overlay: "avatar", effect: "trim", width: "1.0", height: "0.6", gravity: "south", crop: "crop"},
  {flags: "layer_apply", gravity: "south"},
  {overlay: "text:Playball_40:60%2525", color: "white", y: 80},
  {width: 200, crop: "scale"}
  ]})

React:

<Image publicId="avatar.jpg" >
  <Transformation effect="trim" />
  <Transformation effect="colorize" color="white" />
  <Transformation background="#D0CDCD" />
  <Transformation overlay="avatar" effect="trim" width="1.0" height="0.6" gravity="south" crop="crop" />
  <Transformation flags="layer_apply" gravity="south" />
  <Transformation overlay="text:Playball_40:60%2525" color="white" y="80" />
  <Transformation width="200" crop="scale" />
</Image>

Angular:

<cl-image public-id="avatar.jpg" >
  <cl-transformation effect="trim">
  </cl-transformation>
  <cl-transformation effect="colorize" color="white">
  </cl-transformation>
  <cl-transformation background="#D0CDCD">
  </cl-transformation>
  <cl-transformation overlay="avatar" effect="trim" width="1.0" height="0.6" gravity="south" crop="crop">
  </cl-transformation>
  <cl-transformation flags="layer_apply" gravity="south">
  </cl-transformation>
  <cl-transformation overlay="text:Playball_40:60%2525" color="white" y="80">
  </cl-transformation>
  <cl-transformation width="200" crop="scale">
  </cl-transformation>
</cl-image>

.Net:

cloudinary.Api.UrlImgUp.Transform(new Transformation()
  .Effect("trim").Chain()
  .Effect("colorize").Color("white").Chain()
  .Background("#D0CDCD").Chain()
  .Overlay("avatar").Effect("trim").Width(1.0).Height(0.6).Gravity("south").Crop("crop").Chain()
  .Flags("layer_apply").Gravity("south").Chain()
  .Overlay("text:Playball_40:60%2525").Color("white").Y(80).Chain()
  .Width(200).Crop("scale")).BuildImageTag("avatar.jpg")

Android:

MediaManager.get().url().transformation(new Transformation()
  .effect("trim").chain()
  .effect("colorize").color("white").chain()
  .background("#D0CDCD").chain()
  .overlay("avatar").effect("trim").width(1.0).height(0.6).gravity("south").crop("crop").chain()
  .flags("layer_apply").gravity("south").chain()
  .overlay("text:Playball_40:60%2525").color("white").y(80).chain()
  .width(200).crop("scale")).generate("avatar.jpg")

by Itay Taragano Jul 28, 2014

Tags:

Animated GIF manipulation

Transform animated GIFs just like any other image. Use Cloudinary's powerful image transformation tools to manipulate your animated GIFs just like you do for other standard still images.

Original

Rotated

Adding text

URL Ruby PHP Python Node.js Java JS jQuery React Angular .Net Android All

URL:

https://res.cloudinary.com/demo/image/upload/w_0.5/cloudinary_animation.gif

Ruby:

cl_image_tag("cloudinary_animation.gif", :width=>0.5, :crop=>"scale")

PHP:

cl_image_tag("cloudinary_animation.gif", array("width"=>0.5, "crop"=>"scale"))

Python:

CloudinaryImage("cloudinary_animation.gif").image(width=0.5, crop="scale")

Node.js:

cloudinary.image("cloudinary_animation.gif", {width: "0.5", crop: "scale"})

Java:

cloudinary.url().transformation(new Transformation().width(0.5).crop("scale")).imageTag("cloudinary_animation.gif")

JS:

cl.imageTag('cloudinary_animation.gif', {width: "0.5", crop: "scale"}).toHtml();

jQuery:

$.cloudinary.image("cloudinary_animation.gif", {width: "0.5", crop: "scale"})

React:

<Image publicId="cloudinary_animation.gif" >
  <Transformation width="0.5" crop="scale" />
</Image>

Angular:

<cl-image public-id="cloudinary_animation.gif" >
  <cl-transformation width="0.5" crop="scale">
  </cl-transformation>
</cl-image>

.Net:

cloudinary.Api.UrlImgUp.Transform(new Transformation().Width(0.5).Crop("scale")).BuildImageTag("cloudinary_animation.gif")

Android:

MediaManager.get().url().transformation(new Transformation().width(0.5).crop("scale")).generate("cloudinary_animation.gif")

by Itay Taragano Aug 05, 2014

Tags:

Text overlay positioning

Customize text overlay's position by setting the gravity (g in URLs) and the optional offset of the x and y. While the default text positioning ('gravity') is center, you can place your text in any other area of the image (tip: even outside the image's boundaries).

Default - center

South gravity

Custom position

URL Ruby PHP Python Node.js Java JS jQuery React Angular .Net Android All

URL:

https://res.cloudinary.com/demo/image/upload/l_text:Arial_45_bold:Hello World,g_north_west,x_20,y_20/face_center.jpg

Ruby:

cl_image_tag("face_center.jpg", :overlay=>"text:Arial_45_bold:Hello%20World", :gravity=>"north_west", :x=>20, :y=>20)

PHP:

cl_image_tag("face_center.jpg", array("overlay"=>"text:Arial_45_bold:Hello%20World", "gravity"=>"north_west", "x"=>20, "y"=>20))

Python:

CloudinaryImage("face_center.jpg").image(overlay="text:Arial_45_bold:Hello%20World", gravity="north_west", x=20, y=20)

Node.js:

cloudinary.image("face_center.jpg", {overlay: "text:Arial_45_bold:Hello%20World", gravity: "north_west", x: 20, y: 20})

Java:

cloudinary.url().transformation(new Transformation().overlay("text:Arial_45_bold:Hello%20World").gravity("north_west").x(20).y(20)).imageTag("face_center.jpg")

JS:

cl.imageTag('face_center.jpg', {overlay: "text:Arial_45_bold:Hello%20World", gravity: "north_west", x: 20, y: 20}).toHtml();

jQuery:

$.cloudinary.image("face_center.jpg", {overlay: "text:Arial_45_bold:Hello%20World", gravity: "north_west", x: 20, y: 20})

React:

<Image publicId="face_center.jpg" >
  <Transformation overlay="text:Arial_45_bold:Hello%20World" gravity="north_west" x="20" y="20" />
</Image>

Angular:

<cl-image public-id="face_center.jpg" >
  <cl-transformation overlay="text:Arial_45_bold:Hello%20World" gravity="north_west" x="20" y="20">
  </cl-transformation>
</cl-image>

.Net:

cloudinary.Api.UrlImgUp.Transform(new Transformation().Overlay("text:Arial_45_bold:Hello%20World").Gravity("north_west").X(20).Y(20)).BuildImageTag("face_center.jpg")

Android:

MediaManager.get().url().transformation(new Transformation().overlay("text:Arial_45_bold:Hello%20World").gravity("north_west").x(20).y(20)).generate("face_center.jpg")

by Itay Taragano Jun 11, 2014

Tags:

Add a text to an image

Add dynamic text on top of any image, on-the-fly. You can use any one of the hundreds of fonts available by Google Fonts, or even use your own custom font. Embed the text by setting the overlay parameter (l in URLs) to text<text_params>.

Dynamic style

Colored text

Pre-defined style

URL Ruby PHP Python Node.js Java JS jQuery React Angular .Net Android All

URL:

https://res.cloudinary.com/demo/image/upload/l_text:Arial_24_bold:Dynamic style/site_bg_bright_small.jpg

Ruby:

cl_image_tag("site_bg_bright_small.jpg", :overlay=>"text:Arial_24_bold:Dynamic%20style")

PHP:

cl_image_tag("site_bg_bright_small.jpg", array("overlay"=>"text:Arial_24_bold:Dynamic%20style"))

Python:

CloudinaryImage("site_bg_bright_small.jpg").image(overlay="text:Arial_24_bold:Dynamic%20style")

Node.js:

cloudinary.image("site_bg_bright_small.jpg", {overlay: "text:Arial_24_bold:Dynamic%20style"})

Java:

cloudinary.url().transformation(new Transformation().overlay("text:Arial_24_bold:Dynamic%20style")).imageTag("site_bg_bright_small.jpg")

JS:

cl.imageTag('site_bg_bright_small.jpg', {overlay: "text:Arial_24_bold:Dynamic%20style"}).toHtml();

jQuery:

$.cloudinary.image("site_bg_bright_small.jpg", {overlay: "text:Arial_24_bold:Dynamic%20style"})

React:

<Image publicId="site_bg_bright_small.jpg" >
  <Transformation overlay="text:Arial_24_bold:Dynamic%20style" />
</Image>

Angular:

<cl-image public-id="site_bg_bright_small.jpg" >
  <cl-transformation overlay="text:Arial_24_bold:Dynamic%20style">
  </cl-transformation>
</cl-image>

.Net:

cloudinary.Api.UrlImgUp.Transform(new Transformation().Overlay("text:Arial_24_bold:Dynamic%20style")).BuildImageTag("site_bg_bright_small.jpg")

Android:

MediaManager.get().url().transformation(new Transformation().overlay("text:Arial_24_bold:Dynamic%20style")).generate("site_bg_bright_small.jpg")

by Itay Taragano Jun 15, 2014

Tags:

Cloudinary Cookbook

Use images as text textures

Generate a profile completeness meter

Animated GIF manipulation

Text overlay positioning

Add a text to an image