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
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")