Cloudinary cookbook background

Cloudinary Cookbook

Recipes of the Text tag

← View popular recipes
Find recipes by tags:
View all 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

Original image

Text texture

Text texture

Fetch + texture

Fetch + texture
URLRubyPHPPythonNode.jsJavajQuery.NetAll
URL:
http://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")
jQuery:
$.cloudinary.image("yellow_tulip.png", {overlay: "text:Coustard_200_bold:Flowers", flags: "cutter"})
.Net:
cloudinary.Api.UrlImgUp.Transform(new Transformation().Overlay("text:Coustard_200_bold:Flowers").Flags("cutter")).BuildImageTag("yellow_tulip.png")
Read more
by Itay Taragano
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

Badge meter

User's thumbnail

User's thumbnail

Avatar meter

Avatar meter
URLRubyPHPPythonNode.jsJavajQuery.NetAll
URL:
http://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")
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"}
  ]})
.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")
Read more
by Itay Taragano
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

Original

Rotated

Rotated

Adding text

Adding text
URLRubyPHPPythonNode.jsJavajQuery.NetAll
URL:
http://res.cloudinary.com/demo/image/upload/w_0.5/cloudinary_animation.gif
Ruby:
cl_image_tag("cloudinary_animation.gif", :width=>0.5)
PHP:
cl_image_tag("cloudinary_animation.gif", array("width"=>0.5))
Python:
CloudinaryImage("cloudinary_animation.gif").image(width=0.5)
Node.js:
cloudinary.image("cloudinary_animation.gif", {width: 0.5})
Java:
cloudinary.url().transformation(new Transformation().width(0.5)).imageTag("cloudinary_animation.gif")
jQuery:
$.cloudinary.image("cloudinary_animation.gif", {width: 0.5})
.Net:
cloudinary.Api.UrlImgUp.Transform(new Transformation().Width(0.5)).BuildImageTag("cloudinary_animation.gif")
Read more
by Itay Taragano
Tags:

Rounded profile picture with initials

Automatically fetch social networks' profile pictures by setting the type parameter to the required network (e.g., facebook), apply any further transformations and add the user's initials as a text overlay.

Original

Original

Face detection

Face detection

With initials

With initials
URLRubyPHPPythonNode.jsJavajQuery.NetAll
URL:
http://res.cloudinary.com/demo/image/facebook/w_100,h_100,c_thumb,g_face,e_blur:200,r_max/l_text:Arial_50_bold:DB,co_white/Beckham.jpg
Ruby:
cl_image_tag("Beckham.jpg", :type=>"facebook", :transformation=>[
  {:width=>100, :height=>100, :gravity=>"face", :effect=>"blur:200", :radius=>"max", :crop=>"thumb"},
  {:overlay=>"text:Arial_50_bold:DB", :color=>"white"}
  ])
PHP:
cl_image_tag("Beckham.jpg", array("type"=>"facebook", "transformation"=>array(
  array("width"=>100, "height"=>100, "gravity"=>"face", "effect"=>"blur:200", "radius"=>"max", "crop"=>"thumb"),
  array("overlay"=>"text:Arial_50_bold:DB", "color"=>"white")
  )))
Python:
CloudinaryImage("Beckham.jpg").image(type="facebook", transformation=[
  {"width": 100, "height": 100, "gravity": "face", "effect": "blur:200", "radius": "max", "crop": "thumb"},
  {"overlay": "text:Arial_50_bold:DB", "color": "white"}
  ])
Node.js:
cloudinary.image("Beckham.jpg", {type: "facebook", transformation: [
  {width: 100, height: 100, gravity: "face", effect: "blur:200", radius: "max", crop: "thumb"},
  {overlay: "text:Arial_50_bold:DB", color: "white"}
  ]})
Java:
cloudinary.url().transformation(new Transformation()
  .width(100).height(100).gravity("face").effect("blur:200").radius("max").crop("thumb").chain()
  .overlay("text:Arial_50_bold:DB").color("white")).type("facebook").imageTag("Beckham.jpg")
jQuery:
$.cloudinary.image("Beckham.jpg", {type: "facebook", transformation: [
  {width: 100, height: 100, gravity: "face", effect: "blur:200", radius: "max", crop: "thumb"},
  {overlay: "text:Arial_50_bold:DB", color: "white"}
  ]})
.Net:
cloudinary.Api.UrlImgUp.Transform(new Transformation()
  .Width(100).Height(100).Gravity("face").Effect("blur:200").Radius("max").Crop("thumb").Chain()
  .Overlay("text:Arial_50_bold:DB").Color("white")).Type("facebook").BuildImageTag("Beckham.jpg")
Read more
by Itay Taragano
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

Default - center

South gravity

South gravity

Custom position

Custom position
URLRubyPHPPythonNode.jsJavajQuery.NetAll
URL:
http://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")
jQuery:
$.cloudinary.image("face_center.jpg", {overlay: "text:Arial_45_bold:Hello%20World", gravity: "north_west", x: 20, y: 20})
.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")
Read more
by Itay Taragano
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

Dynamic style

Colored text

Colored text

Pre-defined style

Pre-defined style
URLRubyPHPPythonNode.jsJavajQuery.NetAll
URL:
http://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")
jQuery:
$.cloudinary.image("site_bg_bright_small.jpg", {overlay: "text:Arial_24_bold:Dynamic%20style"})
.Net:
cloudinary.Api.UrlImgUp.Transform(new Transformation().Overlay("text:Arial_24_bold:Dynamic%20style")).BuildImageTag("site_bg_bright_small.jpg")
Read more
by Itay Taragano
Tags: