Cloudinary cookbook background

Cloudinary Cookbook

Recipes of the Gravity tag

← View popular recipes
Find recipes by tags:
View all tags

Text overlays flowing together irrespective of text size

You can add text dynamically to the image by using overlays with syntax l_ in the URL. Here's an example of a URL with on-the-fly generated text transformation: Dynamic style

Dynamic style

Dynamic style

sky

sky

sky

sky
URLRubyPHPPythonNode.jsJavaJSjQueryReactAngular.NetAndroidiOSAll
URL:
https://res.cloudinary.com/demo/image/upload/l_text:Arial_100:Weather/photo-1430609098125-581618d0482f_xvayby
Ruby:
cl_image_tag("photo-1430609098125-581618d0482f_xvayby", :overlay=>{:font_family=>"Arial", :font_size=>100, :text=>"Weather"})
PHP:
cl_image_tag("photo-1430609098125-581618d0482f_xvayby", array("overlay"=>array("font_family"=>"Arial", "font_size"=>100, "text"=>"Weather")))
Python:
CloudinaryImage("photo-1430609098125-581618d0482f_xvayby").image(overlay={'font_family': "Arial", 'font_size': 100, 'text': "Weather"})
Node.js:
cloudinary.image("photo-1430609098125-581618d0482f_xvayby", {overlay: {font_family: "Arial", font_size: 100, text: "Weather"}})
Java:
cloudinary.url().transformation(new Transformation().overlay(new TextLayer().fontFamily("Arial").fontSize(100).text("Weather"))).imageTag("photo-1430609098125-581618d0482f_xvayby");
JS:
cloudinary.imageTag('photo-1430609098125-581618d0482f_xvayby', {overlay: new cloudinary.TextLayer().fontFamily("Arial").fontSize(100).text("Weather")}).toHtml();
jQuery:
$.cloudinary.image("photo-1430609098125-581618d0482f_xvayby", {overlay: new cloudinary.TextLayer().fontFamily("Arial").fontSize(100).text("Weather")})
React:
<Image publicId="photo-1430609098125-581618d0482f_xvayby" >
  <Transformation overlay={{fontFamily: "Arial", fontSize: 100, text: "Weather"}} />
</Image>
Angular:
<cl-image public-id="photo-1430609098125-581618d0482f_xvayby" >
  <cl-transformation overlay="text:Arial_100:Weather">
  </cl-transformation>
</cl-image>
.Net:
cloudinary.Api.UrlImgUp.Transform(new Transformation().Overlay(new TextLayer().FontFamily("Arial").FontSize(100).Text("Weather"))).BuildImageTag("photo-1430609098125-581618d0482f_xvayby")
Android:
MediaManager.get().url().transformation(new Transformation().overlay(new TextLayer().fontFamily("Arial").fontSize(100).text("Weather"))).generate("photo-1430609098125-581618d0482f_xvayby");
iOS:
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setOverlay("text:Arial_100:Weather")).generate("photo-1430609098125-581618d0482f_xvayby")!, cloudinary: cloudinary)
Read more
by Aditi
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.jsJavaJSjQueryReactAngular.NetAndroidiOSAll
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=>{:font_family=>"Arial", :font_size=>45, :font_weight=>"bold", :text=>"Hello%20World"}, :gravity=>"north_west", :x=>20, :y=>20)
PHP:
cl_image_tag("face_center.jpg", array("overlay"=>array("font_family"=>"Arial", "font_size"=>45, "font_weight"=>"bold", "text"=>"Hello%20World"), "gravity"=>"north_west", "x"=>20, "y"=>20))
Python:
CloudinaryImage("face_center.jpg").image(overlay={'font_family': "Arial", 'font_size': 45, 'font_weight': "bold", 'text': "Hello%20World"}, gravity="north_west", x=20, y=20)
Node.js:
cloudinary.image("face_center.jpg", {overlay: {font_family: "Arial", font_size: 45, font_weight: "bold", text: "Hello%20World"}, gravity: "north_west", x: 20, y: 20})
Java:
cloudinary.url().transformation(new Transformation().overlay(new TextLayer().fontFamily("Arial").fontSize(45).fontWeight("bold").text("Hello%20World")).gravity("north_west").x(20).y(20)).imageTag("face_center.jpg");
JS:
cloudinary.imageTag('face_center.jpg', {overlay: new cloudinary.TextLayer().fontFamily("Arial").fontSize(45).fontWeight("bold").text("Hello%20World"), gravity: "north_west", x: 20, y: 20}).toHtml();
jQuery:
$.cloudinary.image("face_center.jpg", {overlay: new cloudinary.TextLayer().fontFamily("Arial").fontSize(45).fontWeight("bold").text("Hello%20World"), gravity: "north_west", x: 20, y: 20})
React:
<Image publicId="face_center.jpg" >
  <Transformation overlay={{fontFamily: "Arial", fontSize: 45, fontWeight: "bold", text: "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(new TextLayer().FontFamily("Arial").FontSize(45).FontWeight("bold").Text("Hello%20World")).Gravity("north_west").X(20).Y(20)).BuildImageTag("face_center.jpg")
Android:
MediaManager.get().url().transformation(new Transformation().overlay(new TextLayer().fontFamily("Arial").fontSize(45).fontWeight("bold").text("Hello%20World")).gravity("north_west").x(20).y(20)).generate("face_center.jpg");
iOS:
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setOverlay("text:Arial_45_bold:Hello%20World").setGravity("north_west").setX(20).setY(20)).generate("face_center.jpg")!, cloudinary: cloudinary)
Read more
by Itay Taragano
Tags: