Resize overlays to a given percentage of the main image, either related to width, height or both by setting the flags parameter to relative (fl_relative in URLs) while also setting the width and/or height parameters to the percentage value you need, represented by a decimal value (e.g., 0.4 for 40%).
Let's say we want to overlay the following black bar:
Ruby:
cl_image_tag("black_bar.png")
PHP:
cl_image_tag("black_bar.png")
Python:
CloudinaryImage("black_bar.png").image()
Node.js:
cloudinary.image("black_bar.png")
Java:
cloudinary.url().imageTag("black_bar.png");
JS:
cloudinary.imageTag('black_bar.png').toHtml();
jQuery:
$.cloudinary.image("black_bar.png")
React:
<Image publicId="black_bar.png" >
</Image>
Vue.js:
<cld-image publicId="black_bar.png" >
</cld-image>
Angular:
<cl-image public-id="black_bar.png" >
</cl-image>
.Net:
cloudinary.Api.UrlImgUp.BuildImageTag("black_bar.png")
Android:
MediaManager.get().url().generate("black_bar.png");
iOS:
imageView.cldSetImage(cloudinary.createUrl().generate("black_bar.png")!, cloudinary: cloudinary)
on top of the following image:
Ruby:
cl_image_tag("lupine.jpg")
PHP:
cl_image_tag("lupine.jpg")
Python:
CloudinaryImage("lupine.jpg").image()
Node.js:
cloudinary.image("lupine.jpg")
Java:
cloudinary.url().imageTag("lupine.jpg");
JS:
cloudinary.imageTag('lupine.jpg').toHtml();
jQuery:
$.cloudinary.image("lupine.jpg")
React:
<Image publicId="lupine.jpg" >
</Image>
Vue.js:
<cld-image publicId="lupine.jpg" >
</cld-image>
Angular:
<cl-image public-id="lupine.jpg" >
</cl-image>
.Net:
cloudinary.Api.UrlImgUp.BuildImageTag("lupine.jpg")
Android:
MediaManager.get().url().generate("lupine.jpg");
iOS:
imageView.cldSetImage(cloudinary.createUrl().generate("lupine.jpg")!, cloudinary: cloudinary)
The overlay image can be resized by specifying its dimensions with an absolute value in pixels. For example, 500px width and 200px height:
Ruby:
cl_image_tag("lupine.jpg", :overlay=>"black_bar", :height=>200, :width=>500)
PHP:
cl_image_tag("lupine.jpg", array("overlay"=>"black_bar", "height"=>200, "width"=>500))
Python:
CloudinaryImage("lupine.jpg").image(overlay="black_bar", height=200, width=500)
Node.js:
cloudinary.image("lupine.jpg", {overlay: "black_bar", height: 200, width: 500})
Java:
cloudinary.url().transformation(new Transformation().overlay(new Layer().publicId("black_bar")).height(200).width(500)).imageTag("lupine.jpg");
JS:
cloudinary.imageTag('lupine.jpg', {overlay: new cloudinary.Layer().publicId("black_bar"), height: 200, width: 500}).toHtml();
jQuery:
$.cloudinary.image("lupine.jpg", {overlay: new cloudinary.Layer().publicId("black_bar"), height: 200, width: 500})
React:
<Image publicId="lupine.jpg" >
<Transformation overlay="black_bar" height="200" width="500" />
</Image>
Vue.js:
<cld-image publicId="lupine.jpg" >
<cld-transformation overlay="black_bar" height="200" width="500" />
</cld-image>
Angular:
<cl-image public-id="lupine.jpg" >
<cl-transformation overlay="black_bar" height="200" width="500">
</cl-transformation>
</cl-image>
.Net:
cloudinary.Api.UrlImgUp.Transform(new Transformation().Overlay(new Layer().PublicId("black_bar")).Height(200).Width(500)).BuildImageTag("lupine.jpg")
Android:
MediaManager.get().url().transformation(new Transformation().overlay(new Layer().publicId("black_bar")).height(200).width(500)).generate("lupine.jpg");
iOS:
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setOverlay("black_bar").setHeight(200).setWidth(500)).generate("lupine.jpg")!, cloudinary: cloudinary)
However, there are cases where you might not know the exact dimensions of the main image, therefore using fixed dimensions won't always deliver the exact result you expect. You can tell Cloudinary to overlay the image while resizing it to a relative percentage of the containing image by using the relative flag alongside the dimensions you wish.
For example, here's how to place the overlay black bar to fit 100% of the main image's width and 10% of the image's height:
Ruby:
cl_image_tag("lupine.jpg", :overlay=>"black_bar", :width=>1.0, :height=>0.1, :flags=>"relative")
PHP:
cl_image_tag("lupine.jpg", array("overlay"=>"black_bar", "width"=>1.0, "height"=>0.1, "flags"=>"relative"))
Python:
CloudinaryImage("lupine.jpg").image(overlay="black_bar", width=1.0, height=0.1, flags="relative")
Node.js:
cloudinary.image("lupine.jpg", {overlay: "black_bar", width: "1.0", height: "0.1", flags: "relative"})
Java:
cloudinary.url().transformation(new Transformation().overlay(new Layer().publicId("black_bar")).width(1.0).height(0.1).flags("relative")).imageTag("lupine.jpg");
JS:
cloudinary.imageTag('lupine.jpg', {overlay: new cloudinary.Layer().publicId("black_bar"), width: "1.0", height: "0.1", flags: "relative"}).toHtml();
jQuery:
$.cloudinary.image("lupine.jpg", {overlay: new cloudinary.Layer().publicId("black_bar"), width: "1.0", height: "0.1", flags: "relative"})
React:
<Image publicId="lupine.jpg" >
<Transformation overlay="black_bar" width="1.0" height="0.1" flags="relative" />
</Image>
Vue.js:
<cld-image publicId="lupine.jpg" >
<cld-transformation overlay="black_bar" width="1.0" height="0.1" flags="relative" />
</cld-image>
Angular:
<cl-image public-id="lupine.jpg" >
<cl-transformation overlay="black_bar" width="1.0" height="0.1" flags="relative">
</cl-transformation>
</cl-image>
.Net:
cloudinary.Api.UrlImgUp.Transform(new Transformation().Overlay(new Layer().PublicId("black_bar")).Width(1.0).Height(0.1).Flags("relative")).BuildImageTag("lupine.jpg")
Android:
MediaManager.get().url().transformation(new Transformation().overlay(new Layer().publicId("black_bar")).width(1.0).height(0.1).flags("relative")).generate("lupine.jpg");
iOS:
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setOverlay("black_bar").setWidth(1.0).setHeight(0.1).setFlags("relative")).generate("lupine.jpg")!, cloudinary: cloudinary)
This feature can also be applied to an image that is used as a background for text. The following example demonstrates the same dimensioned black bar, while lowering its opacity to 60% and adding text on top of it:
Ruby:
cl_image_tag("lupine.jpg", :transformation=>[
{:overlay=>"black_bar", :width=>1.0, :height=>0.1, :flags=>"relative", :opacity=>60},
{:overlay=>{:font_family=>"Arial", :font_size=>150, :font_weight=>"bold", :text=>"Cloudinary"}, :color=>"white"}
])
PHP:
cl_image_tag("lupine.jpg", array("transformation"=>array(
array("overlay"=>"black_bar", "width"=>1.0, "height"=>0.1, "flags"=>"relative", "opacity"=>60),
array("overlay"=>array("font_family"=>"Arial", "font_size"=>150, "font_weight"=>"bold", "text"=>"Cloudinary"), "color"=>"white")
)))
Python:
CloudinaryImage("lupine.jpg").image(transformation=[
{'overlay': "black_bar", 'width': 1.0, 'height': 0.1, 'flags': "relative", 'opacity': 60},
{'overlay': {'font_family': "Arial", 'font_size': 150, 'font_weight': "bold", 'text': "Cloudinary"}, 'color': "white"}
])
Node.js:
cloudinary.image("lupine.jpg", {transformation: [
{overlay: "black_bar", width: "1.0", height: "0.1", flags: "relative", opacity: 60},
{overlay: {font_family: "Arial", font_size: 150, font_weight: "bold", text: "Cloudinary"}, color: "white"}
]})
Java:
cloudinary.url().transformation(new Transformation()
.overlay(new Layer().publicId("black_bar")).width(1.0).height(0.1).flags("relative").opacity(60).chain()
.overlay(new TextLayer().fontFamily("Arial").fontSize(150).fontWeight("bold").text("Cloudinary")).color("white")).imageTag("lupine.jpg");
JS:
cloudinary.imageTag('lupine.jpg', {transformation: [
{overlay: new cloudinary.Layer().publicId("black_bar"), width: "1.0", height: "0.1", flags: "relative", opacity: 60},
{overlay: new cloudinary.TextLayer().fontFamily("Arial").fontSize(150).fontWeight("bold").text("Cloudinary"), color: "white"}
]}).toHtml();
jQuery:
$.cloudinary.image("lupine.jpg", {transformation: [
{overlay: new cloudinary.Layer().publicId("black_bar"), width: "1.0", height: "0.1", flags: "relative", opacity: 60},
{overlay: new cloudinary.TextLayer().fontFamily("Arial").fontSize(150).fontWeight("bold").text("Cloudinary"), color: "white"}
]})
React:
<Image publicId="lupine.jpg" >
<Transformation overlay="black_bar" width="1.0" height="0.1" flags="relative" opacity="60" />
<Transformation overlay={{fontFamily: "Arial", fontSize: 150, fontWeight: "bold", text: "Cloudinary"}} color="white" />
</Image>
Vue.js:
<cld-image publicId="lupine.jpg" >
<cld-transformation overlay="black_bar" width="1.0" height="0.1" flags="relative" opacity="60" />
<cld-transformation overlay={{fontFamily: "Arial", fontSize: 150, fontWeight: "bold", text: "Cloudinary"}} color="white" />
</cld-image>
Angular:
<cl-image public-id="lupine.jpg" >
<cl-transformation overlay="black_bar" width="1.0" height="0.1" flags="relative" opacity="60">
</cl-transformation>
<cl-transformation overlay="text:Arial_150_bold:Cloudinary" color="white">
</cl-transformation>
</cl-image>
.Net:
cloudinary.Api.UrlImgUp.Transform(new Transformation()
.Overlay(new Layer().PublicId("black_bar")).Width(1.0).Height(0.1).Flags("relative").Opacity(60).Chain()
.Overlay(new TextLayer().FontFamily("Arial").FontSize(150).FontWeight("bold").Text("Cloudinary")).Color("white")).BuildImageTag("lupine.jpg")
Android:
MediaManager.get().url().transformation(new Transformation()
.overlay(new Layer().publicId("black_bar")).width(1.0).height(0.1).flags("relative").opacity(60).chain()
.overlay(new TextLayer().fontFamily("Arial").fontSize(150).fontWeight("bold").text("Cloudinary")).color("white")).generate("lupine.jpg");
iOS:
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation()
.setOverlay("black_bar").setWidth(1.0).setHeight(0.1).setFlags("relative").setOpacity(60).chain()
.setOverlay("text:Arial_150_bold:Cloudinary").setColor("white")).generate("lupine.jpg")!, cloudinary: cloudinary)
