Cloudinary cookbook background
Cloudinary Cookbook
← View popular recipes
Find recipes by tags:
View all tags

Relative size overlays

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:

URLRubyPHPPythonNode.jsJavaJSjQueryReactAngular.NetAndroidiOSAll
URL:
https://res.cloudinary.com/demo/image/upload/black_bar.png
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>
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)
Overlay image
 on top of the following image:
URLRubyPHPPythonNode.jsJavaJSjQueryReactAngular.NetAndroidiOSAll
URL:
https://res.cloudinary.com/demo/image/upload/lupine.jpg
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>
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)
Main image

The overlay image can be resized by specifying its dimensions with an absolute value in pixels. For example, 500px width and 200px height:

URLRubyPHPPythonNode.jsJavaJSjQueryReactAngular.NetAndroidiOSAll
URL:
https://res.cloudinary.com/demo/image/upload/l_black_bar,h_200,w_500/lupine.jpg
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>
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)
Absolute value

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:

URLRubyPHPPythonNode.jsJavaJSjQueryReactAngular.NetAndroidiOSAll
URL:
https://res.cloudinary.com/demo/image/upload/l_black_bar,w_1.0,h_0.1,fl_relative/lupine.jpg
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>
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)
100% width-related

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:

URLRubyPHPPythonNode.jsJavaJSjQueryReactAngular.NetAndroidiOSAll
URL:
https://res.cloudinary.com/demo/image/upload/l_black_bar,w_1.0,h_0.1,fl_relative,o_60/l_text:Arial_150_bold:Cloudinary,co_white/lupine.jpg
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>
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)
Including text

by Itay Taragano
Tags: