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:

URL Ruby PHP v1 PHP v2 Python Node.js Java JS jQuery React Vue.js Angular .NET Android iOS All

URL:

https://res.cloudinary.com/demo/image/upload/black_bar.png

Ruby:

cl_image_tag("black_bar.png")

PHP v1:

cl_image_tag("black_bar.png")

PHP v2:

(new ImageTag('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:

URL Ruby PHP v1 PHP v2 Python Node.js Java JS jQuery React Vue.js Angular .NET Android iOS All

URL:

https://res.cloudinary.com/demo/image/upload/lupine.jpg

Ruby:

cl_image_tag("lupine.jpg")

PHP v1:

cl_image_tag("lupine.jpg")

PHP v2:

(new ImageTag('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:

URL Ruby PHP v1 PHP v2 Python Node.js Java JS jQuery React Vue.js Angular .NET Android iOS All

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 v1:

cl_image_tag("lupine.jpg", array("overlay"=>"black_bar", "height"=>200, "width"=>500))

PHP v2:

(new ImageTag('lupine.jpg'))
  ->overlay(
      Overlay::source(Source::image('black_bar')
        ->transformation((new ImageTransformation())
          ->resize(Resize::scale()->width(500)->height(200))
  )));

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:

URL Ruby PHP v1 PHP v2 Python Node.js Java JS jQuery React Vue.js Angular .NET Android iOS All

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 v1:

cl_image_tag("lupine.jpg", array("overlay"=>"black_bar", "width"=>"1.0", "height"=>"0.1", "flags"=>"relative"))

PHP v2:

(new ImageTag('lupine.jpg'))
  ->overlay(
      Overlay::source(Source::image('black_bar')
        ->transformation((new ImageTransformation())
          ->resize(Resize::scale()->width(1.0)->height(0.1)
            ->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:

URL Ruby PHP v1 PHP v2 Python Node.js Java JS jQuery React Vue.js Angular .NET Android iOS All

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 v1:

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

PHP v2:

(new ImageTag('lupine.jpg'))
  ->overlay(
      Overlay::source(Source::image('black_bar')
        ->transformation((new ImageTransformation())
          ->resize(Resize::scale()->width(1.0)->height(0.1)->relative())
          ->adjust(Adjust::opacity(60)))))
    ->overlay(
        Overlay::source(
            Source::text('Cloudinary', (new TextStyle('Arial', 150))
              ->fontWeight(FontWeight::bold()))
            ->textColor(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)