> ## Documentation Index > Fetch the complete documentation index at: https://cloudinary.com/documentation/llms.txt > Use this file to discover all available pages before exploring further. # Transforming layers [remote_image_overlays]: layers#remote_image_overlays This page covers applying transformations to layers, including multiple overlays and relative sizing. For positioning layers, see [Layer placement](image_layer_placement). For the layer syntax itself, see [Layer syntax](layers). ## Applying transformations to overlays You can apply resizing and other [transformation options](transformation_reference) on your overlays just like any other asset delivered from Cloudinary. You can apply multiple ([chained](image_transformations#chained_transformations)) transformations to overlays by adding them in separate components before the `layer_apply` component. All chained transformations, until a transformation component that includes the `layer_apply` flag, are applied on the last added overlay or underlay instead of applying them on the base asset (the `layer_apply` flag closes the layer, similar to a closing bracket). For example: 1. Adding a logo overlay scaled down to 50% of its original width and made into a watermark by reducing the opacity to 70% and increasing the brightness to 50% using the `brightness` effect. The transformed image is then placed as a layer in the top-right corner of the base image (`l_cloudinary_icon_blue/c_scale,w_0.5/o_70/e_brightness:50/fl_layer_apply,g_north_east`): ![Image with transformed overlay](https://res.cloudinary.com/demo/image/upload/l_cloudinary_icon_blue/c_scale,w_0.5/o_70/e_brightness:50/fl_layer_apply,g_north_east/guitar_end.jpg "thumb: w_500") ```nodejs cloudinary.image("guitar_end.jpg", {transformation: [ {overlay: "cloudinary_icon_blue"}, {width: "0.5", crop: "scale"}, {opacity: 70}, {effect: "brightness:50"}, {flags: "layer_apply", gravity: "north_east"} ]}) ``` ```react import { source } from "@cloudinary/url-gen/actions/overlay"; import { scale } from "@cloudinary/url-gen/actions/resize"; import { opacity, brightness } from "@cloudinary/url-gen/actions/adjust"; import { image } from "@cloudinary/url-gen/qualifiers/source"; import { Position } from "@cloudinary/url-gen/qualifiers/position"; import { compass } from "@cloudinary/url-gen/qualifiers/gravity"; new CloudinaryImage("guitar_end.jpg").overlay( source( image("cloudinary_icon_blue").transformation( new Transformation() .resize(scale().width(0.5)) .adjust(opacity(70)) .adjust(brightness().level(50)) ) ).position(new Position().gravity(compass("north_east"))) ); ``` ```vue import { source } from "@cloudinary/url-gen/actions/overlay"; import { scale } from "@cloudinary/url-gen/actions/resize"; import { opacity, brightness } from "@cloudinary/url-gen/actions/adjust"; import { image } from "@cloudinary/url-gen/qualifiers/source"; import { Position } from "@cloudinary/url-gen/qualifiers/position"; import { compass } from "@cloudinary/url-gen/qualifiers/gravity"; new CloudinaryImage("guitar_end.jpg").overlay( source( image("cloudinary_icon_blue").transformation( new Transformation() .resize(scale().width(0.5)) .adjust(opacity(70)) .adjust(brightness().level(50)) ) ).position(new Position().gravity(compass("north_east"))) ); ``` ```angular import { source } from "@cloudinary/url-gen/actions/overlay"; import { scale } from "@cloudinary/url-gen/actions/resize"; import { opacity, brightness } from "@cloudinary/url-gen/actions/adjust"; import { image } from "@cloudinary/url-gen/qualifiers/source"; import { Position } from "@cloudinary/url-gen/qualifiers/position"; import { compass } from "@cloudinary/url-gen/qualifiers/gravity"; new CloudinaryImage("guitar_end.jpg").overlay( source( image("cloudinary_icon_blue").transformation( new Transformation() .resize(scale().width(0.5)) .adjust(opacity(70)) .adjust(brightness().level(50)) ) ).position(new Position().gravity(compass("north_east"))) ); ``` ```js import { source } from "@cloudinary/url-gen/actions/overlay"; import { scale } from "@cloudinary/url-gen/actions/resize"; import { opacity, brightness } from "@cloudinary/url-gen/actions/adjust"; import { image } from "@cloudinary/url-gen/qualifiers/source"; import { Position } from "@cloudinary/url-gen/qualifiers/position"; import { compass } from "@cloudinary/url-gen/qualifiers/gravity"; new CloudinaryImage("guitar_end.jpg").overlay( source( image("cloudinary_icon_blue").transformation( new Transformation() .resize(scale().width(0.5)) .adjust(opacity(70)) .adjust(brightness().level(50)) ) ).position(new Position().gravity(compass("north_east"))) ); ``` ```python CloudinaryImage("guitar_end.jpg").image(transformation=[ {'overlay': "cloudinary_icon_blue"}, {'width': "0.5", 'crop': "scale"}, {'opacity': 70}, {'effect': "brightness:50"}, {'flags': "layer_apply", 'gravity': "north_east"} ]) ``` ```php use Cloudinary\Transformation\Overlay; use Cloudinary\Transformation\Resize; use Cloudinary\Transformation\Adjust; use Cloudinary\Transformation\Source; use Cloudinary\Transformation\Position; use Cloudinary\Transformation\Gravity; use Cloudinary\Transformation\Compass; (new ImageTag('guitar_end.jpg')) ->overlay(Overlay::source( Source::image("cloudinary_icon_blue") ->transformation((new Transformation()) ->resize(Resize::scale()->width(0.5)) ->adjust(Adjust::opacity(70)) ->adjust(Adjust::brightness()->level(50))) ) ->position((new Position()) ->gravity( Gravity::compass( Compass::northEast())) ) ); ``` ```java cloudinary.url().transformation(new Transformation() .overlay(new Layer().publicId("cloudinary_icon_blue")).chain() .width(0.5).crop("scale").chain() .opacity(70).chain() .effect("brightness:50").chain() .flags("layer_apply").gravity("north_east")).imageTag("guitar_end.jpg"); ``` ```ruby cl_image_tag("guitar_end.jpg", transformation: [ {overlay: "cloudinary_icon_blue"}, {width: 0.5, crop: "scale"}, {opacity: 70}, {effect: "brightness:50"}, {flags: "layer_apply", gravity: "north_east"} ]) ``` ```csharp cloudinary.Api.UrlImgUp.Transform(new Transformation() .Overlay(new Layer().PublicId("cloudinary_icon_blue")).Chain() .Width(0.5).Crop("scale").Chain() .Opacity(70).Chain() .Effect("brightness:50").Chain() .Flags("layer_apply").Gravity("north_east")).BuildImageTag("guitar_end.jpg") ``` ```dart cloudinary.image('guitar_end.jpg').transformation(Transformation() .overlay(Overlay.source( Source.image("cloudinary_icon_blue") .transformation(new Transformation() .resize(Resize.scale().width(0.5)) .adjust(Adjust.opacity(70)) .adjust(Adjust.brightness().level(50))) ) .position(Position() .gravity( Gravity.compass( Compass.northEast())) ) )); ``` ```swift imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation() .setOverlay("cloudinary_icon_blue").chain() .setWidth(0.5).setCrop("scale").chain() .setOpacity(70).chain() .setEffect("brightness:50").chain() .setFlags("layer_apply").setGravity("north_east")).generate("guitar_end.jpg")!, cloudinary: cloudinary) ``` ```android MediaManager.get().url().transformation(new Transformation() .overlay(new Layer().publicId("cloudinary_icon_blue")).chain() .width(0.5).crop("scale").chain() .opacity(70).chain() .effect("brightness:50").chain() .flags("layer_apply").gravity("north_east")).generate("guitar_end.jpg"); ``` ```flutter cloudinary.image('guitar_end.jpg').transformation(Transformation() .overlay(Overlay.source( Source.image("cloudinary_icon_blue") .transformation(new Transformation() .resize(Resize.scale().width(0.5)) .adjust(Adjust.opacity(70)) .adjust(Adjust.brightness().level(50))) ) .position(Position() .gravity( Gravity.compass( Compass.northEast())) ) )); ``` ```kotlin cloudinary.image { publicId("guitar_end.jpg") overlay(Overlay.source( Source.image("cloudinary_icon_blue") { transformation(Transformation { resize(Resize.scale() { width(0.5F) }) adjust(Adjust.opacity(70)) adjust(Adjust.brightness() { level(50) }) }) }) { position(Position() { gravity( Gravity.compass( Compass.northEast())) }) }) }.generate() ``` ```jquery $.cloudinary.image("guitar_end.jpg", {transformation: [ {overlay: new cloudinary.Layer().publicId("cloudinary_icon_blue")}, {width: "0.5", crop: "scale"}, {opacity: 70}, {effect: "brightness:50"}, {flags: "layer_apply", gravity: "north_east"} ]}) ``` ```react_native import { source } from "@cloudinary/url-gen/actions/overlay"; import { scale } from "@cloudinary/url-gen/actions/resize"; import { opacity, brightness } from "@cloudinary/url-gen/actions/adjust"; import { image } from "@cloudinary/url-gen/qualifiers/source"; import { Position } from "@cloudinary/url-gen/qualifiers/position"; import { compass } from "@cloudinary/url-gen/qualifiers/gravity"; new CloudinaryImage("guitar_end.jpg").overlay( source( image("cloudinary_icon_blue").transformation( new Transformation() .resize(scale().width(0.5)) .adjust(opacity(70)) .adjust(brightness().level(50)) ) ).position(new Position().gravity(compass("north_east"))) ); ``` ![Video with transformed overlay](https://res.cloudinary.com/demo/video/upload/l_cloudinary_icon_blue/c_scale,w_0.5/o_70/e_brightness:50/fl_layer_apply,g_north_east/docs/mountain-aerial-view.mp4 "thumb: w_500") ```nodejs cloudinary.video("docs/mountain-aerial-view", {transformation: [ {overlay: "cloudinary_icon_blue"}, {width: "0.5", crop: "scale"}, {opacity: 70}, {effect: "brightness:50"}, {flags: "layer_apply", gravity: "north_east"} ]}) ``` ```react import { source } from "@cloudinary/url-gen/actions/overlay"; import { scale } from "@cloudinary/url-gen/actions/resize"; import { opacity, brightness } from "@cloudinary/url-gen/actions/adjust"; import { image } from "@cloudinary/url-gen/qualifiers/source"; import { Position } from "@cloudinary/url-gen/qualifiers/position"; import { compass } from "@cloudinary/url-gen/qualifiers/gravity"; new CloudinaryVideo("docs/mountain-aerial-view.mp4").overlay( source( image("cloudinary_icon_blue").transformation( new Transformation() .resize(scale().width(0.5)) .adjust(opacity(70)) .adjust(brightness().level(50)) ) ).position(new Position().gravity(compass("north_east"))) ); ``` ```vue import { source } from "@cloudinary/url-gen/actions/overlay"; import { scale } from "@cloudinary/url-gen/actions/resize"; import { opacity, brightness } from "@cloudinary/url-gen/actions/adjust"; import { image } from "@cloudinary/url-gen/qualifiers/source"; import { Position } from "@cloudinary/url-gen/qualifiers/position"; import { compass } from "@cloudinary/url-gen/qualifiers/gravity"; new CloudinaryVideo("docs/mountain-aerial-view.mp4").overlay( source( image("cloudinary_icon_blue").transformation( new Transformation() .resize(scale().width(0.5)) .adjust(opacity(70)) .adjust(brightness().level(50)) ) ).position(new Position().gravity(compass("north_east"))) ); ``` ```angular import { source } from "@cloudinary/url-gen/actions/overlay"; import { scale } from "@cloudinary/url-gen/actions/resize"; import { opacity, brightness } from "@cloudinary/url-gen/actions/adjust"; import { image } from "@cloudinary/url-gen/qualifiers/source"; import { Position } from "@cloudinary/url-gen/qualifiers/position"; import { compass } from "@cloudinary/url-gen/qualifiers/gravity"; new CloudinaryVideo("docs/mountain-aerial-view.mp4").overlay( source( image("cloudinary_icon_blue").transformation( new Transformation() .resize(scale().width(0.5)) .adjust(opacity(70)) .adjust(brightness().level(50)) ) ).position(new Position().gravity(compass("north_east"))) ); ``` ```js import { source } from "@cloudinary/url-gen/actions/overlay"; import { scale } from "@cloudinary/url-gen/actions/resize"; import { opacity, brightness } from "@cloudinary/url-gen/actions/adjust"; import { image } from "@cloudinary/url-gen/qualifiers/source"; import { Position } from "@cloudinary/url-gen/qualifiers/position"; import { compass } from "@cloudinary/url-gen/qualifiers/gravity"; new CloudinaryVideo("docs/mountain-aerial-view.mp4").overlay( source( image("cloudinary_icon_blue").transformation( new Transformation() .resize(scale().width(0.5)) .adjust(opacity(70)) .adjust(brightness().level(50)) ) ).position(new Position().gravity(compass("north_east"))) ); ``` ```python CloudinaryVideo("docs/mountain-aerial-view").video(transformation=[ {'overlay': "cloudinary_icon_blue"}, {'width': "0.5", 'crop': "scale"}, {'opacity': 70}, {'effect': "brightness:50"}, {'flags': "layer_apply", 'gravity': "north_east"} ]) ``` ```php use Cloudinary\Transformation\Overlay; use Cloudinary\Transformation\Resize; use Cloudinary\Transformation\Adjust; use Cloudinary\Transformation\Source; use Cloudinary\Transformation\Position; use Cloudinary\Transformation\Gravity; use Cloudinary\Transformation\Compass; (new VideoTag('docs/mountain-aerial-view.mp4')) ->overlay(Overlay::source( Source::image("cloudinary_icon_blue") ->transformation((new Transformation()) ->resize(Resize::scale()->width(0.5)) ->adjust(Adjust::opacity(70)) ->adjust(Adjust::brightness()->level(50))) ) ->position((new Position()) ->gravity( Gravity::compass( Compass::northEast())) ) ); ``` ```java cloudinary.url().transformation(new Transformation() .overlay(new Layer().publicId("cloudinary_icon_blue")).chain() .width(0.5).crop("scale").chain() .opacity(70).chain() .effect("brightness:50").chain() .flags("layer_apply").gravity("north_east")).videoTag("docs/mountain-aerial-view"); ``` ```ruby cl_video_tag("docs/mountain-aerial-view", transformation: [ {overlay: "cloudinary_icon_blue"}, {width: 0.5, crop: "scale"}, {opacity: 70}, {effect: "brightness:50"}, {flags: "layer_apply", gravity: "north_east"} ]) ``` ```csharp cloudinary.Api.UrlVideoUp.Transform(new Transformation() .Overlay(new Layer().PublicId("cloudinary_icon_blue")).Chain() .Width(0.5).Crop("scale").Chain() .Opacity(70).Chain() .Effect("brightness:50").Chain() .Flags("layer_apply").Gravity("north_east")).BuildVideoTag("docs/mountain-aerial-view") ``` ```dart cloudinary.video('docs/mountain-aerial-view.mp4').transformation(Transformation() .overlay(Overlay.source( Source.image("cloudinary_icon_blue") .transformation(new Transformation() .resize(Resize.scale().width(0.5)) .adjust(Adjust.opacity(70)) .adjust(Adjust.brightness().level(50))) ) .position(Position() .gravity( Gravity.compass( Compass.northEast())) ) )); ``` ```swift cloudinary.createUrl().setResourceType("video").setTransformation(CLDTransformation() .setOverlay("cloudinary_icon_blue").chain() .setWidth(0.5).setCrop("scale").chain() .setOpacity(70).chain() .setEffect("brightness:50").chain() .setFlags("layer_apply").setGravity("north_east")).generate("docs/mountain-aerial-view.mp4") ``` ```android MediaManager.get().url().transformation(new Transformation() .overlay(new Layer().publicId("cloudinary_icon_blue")).chain() .width(0.5).crop("scale").chain() .opacity(70).chain() .effect("brightness:50").chain() .flags("layer_apply").gravity("north_east")).resourceType("video").generate("docs/mountain-aerial-view.mp4"); ``` ```flutter cloudinary.video('docs/mountain-aerial-view.mp4').transformation(Transformation() .overlay(Overlay.source( Source.image("cloudinary_icon_blue") .transformation(new Transformation() .resize(Resize.scale().width(0.5)) .adjust(Adjust.opacity(70)) .adjust(Adjust.brightness().level(50))) ) .position(Position() .gravity( Gravity.compass( Compass.northEast())) ) )); ``` ```kotlin cloudinary.video { publicId("docs/mountain-aerial-view.mp4") overlay(Overlay.source( Source.image("cloudinary_icon_blue") { transformation(Transformation { resize(Resize.scale() { width(0.5F) }) adjust(Adjust.opacity(70)) adjust(Adjust.brightness() { level(50) }) }) }) { position(Position() { gravity( Gravity.compass( Compass.northEast())) }) }) }.generate() ``` ```jquery $.cloudinary.video("docs/mountain-aerial-view", {transformation: [ {overlay: new cloudinary.Layer().publicId("cloudinary_icon_blue")}, {width: "0.5", crop: "scale"}, {opacity: 70}, {effect: "brightness:50"}, {flags: "layer_apply", gravity: "north_east"} ]}) ``` ```react_native import { source } from "@cloudinary/url-gen/actions/overlay"; import { scale } from "@cloudinary/url-gen/actions/resize"; import { opacity, brightness } from "@cloudinary/url-gen/actions/adjust"; import { image } from "@cloudinary/url-gen/qualifiers/source"; import { Position } from "@cloudinary/url-gen/qualifiers/position"; import { compass } from "@cloudinary/url-gen/qualifiers/gravity"; new CloudinaryVideo("docs/mountain-aerial-view.mp4").overlay( source( image("cloudinary_icon_blue").transformation( new Transformation() .resize(scale().width(0.5)) .adjust(opacity(70)) .adjust(brightness().level(50)) ) ).position(new Position().gravity(compass("north_east"))) ); ``` 2. The base image is scaled to a width of 500 pixels before adding an image overlay, where the overlay is automatically cropped to a 150px thumbnail including only the detected face and placed in the top left corner (`c_scale,w_500/l_docs:model/c_thumb,g_face,w_150/fl_layer_apply,g_north_west`): ![image with transformations applied to the overlay](https://res.cloudinary.com/demo/image/upload/c_scale,w_500/l_docs:model/c_thumb,g_face,w_150/fl_layer_apply,g_north_west/docs/man-rocks-sea.jpg) ```nodejs cloudinary.image("docs/man-rocks-sea.jpg", {transformation: [ {width: 500, crop: "scale"}, {overlay: "docs:model"}, {gravity: "face", width: 150, crop: "thumb"}, {flags: "layer_apply", gravity: "north_west"} ]}) ``` ```react import { scale, thumbnail } from "@cloudinary/url-gen/actions/resize"; import { source } from "@cloudinary/url-gen/actions/overlay"; import { image } from "@cloudinary/url-gen/qualifiers/source"; import { Position } from "@cloudinary/url-gen/qualifiers/position"; import { face } from "@cloudinary/url-gen/qualifiers/focusOn"; import { compass } from "@cloudinary/url-gen/qualifiers/gravity"; new CloudinaryImage("docs/man-rocks-sea.jpg") .resize(scale().width(500)) .overlay( source( image("docs/model").transformation( new Transformation().resize( thumbnail().width(150).gravity(focusOn(face())) ) ) ).position(new Position().gravity(compass("north_west"))) ); ``` ```vue import { scale, thumbnail } from "@cloudinary/url-gen/actions/resize"; import { source } from "@cloudinary/url-gen/actions/overlay"; import { image } from "@cloudinary/url-gen/qualifiers/source"; import { Position } from "@cloudinary/url-gen/qualifiers/position"; import { face } from "@cloudinary/url-gen/qualifiers/focusOn"; import { compass } from "@cloudinary/url-gen/qualifiers/gravity"; new CloudinaryImage("docs/man-rocks-sea.jpg") .resize(scale().width(500)) .overlay( source( image("docs/model").transformation( new Transformation().resize( thumbnail().width(150).gravity(focusOn(face())) ) ) ).position(new Position().gravity(compass("north_west"))) ); ``` ```angular import { scale, thumbnail } from "@cloudinary/url-gen/actions/resize"; import { source } from "@cloudinary/url-gen/actions/overlay"; import { image } from "@cloudinary/url-gen/qualifiers/source"; import { Position } from "@cloudinary/url-gen/qualifiers/position"; import { face } from "@cloudinary/url-gen/qualifiers/focusOn"; import { compass } from "@cloudinary/url-gen/qualifiers/gravity"; new CloudinaryImage("docs/man-rocks-sea.jpg") .resize(scale().width(500)) .overlay( source( image("docs/model").transformation( new Transformation().resize( thumbnail().width(150).gravity(focusOn(face())) ) ) ).position(new Position().gravity(compass("north_west"))) ); ``` ```js import { scale, thumbnail } from "@cloudinary/url-gen/actions/resize"; import { source } from "@cloudinary/url-gen/actions/overlay"; import { image } from "@cloudinary/url-gen/qualifiers/source"; import { Position } from "@cloudinary/url-gen/qualifiers/position"; import { face } from "@cloudinary/url-gen/qualifiers/focusOn"; import { compass } from "@cloudinary/url-gen/qualifiers/gravity"; new CloudinaryImage("docs/man-rocks-sea.jpg") .resize(scale().width(500)) .overlay( source( image("docs/model").transformation( new Transformation().resize( thumbnail().width(150).gravity(focusOn(face())) ) ) ).position(new Position().gravity(compass("north_west"))) ); ``` ```python CloudinaryImage("docs/man-rocks-sea.jpg").image(transformation=[ {'width': 500, 'crop': "scale"}, {'overlay': "docs:model"}, {'gravity': "face", 'width': 150, 'crop': "thumb"}, {'flags': "layer_apply", 'gravity': "north_west"} ]) ``` ```php use Cloudinary\Transformation\Resize; use Cloudinary\Transformation\Overlay; use Cloudinary\Transformation\Source; use Cloudinary\Transformation\Position; use Cloudinary\Transformation\FocusOn; use Cloudinary\Transformation\Gravity; use Cloudinary\Transformation\Compass; (new ImageTag('docs/man-rocks-sea.jpg')) ->resize(Resize::scale()->width(500)) ->overlay(Overlay::source( Source::image("docs/model") ->transformation((new Transformation()) ->resize(Resize::thumbnail()->width(150) ->gravity( Gravity::focusOn( FocusOn::face())) )) ) ->position((new Position()) ->gravity( Gravity::compass( Compass::northWest())) ) ); ``` ```java cloudinary.url().transformation(new Transformation() .width(500).crop("scale").chain() .overlay(new Layer().publicId("docs:model")).chain() .gravity("face").width(150).crop("thumb").chain() .flags("layer_apply").gravity("north_west")).imageTag("docs/man-rocks-sea.jpg"); ``` ```ruby cl_image_tag("docs/man-rocks-sea.jpg", transformation: [ {width: 500, crop: "scale"}, {overlay: "docs:model"}, {gravity: "face", width: 150, crop: "thumb"}, {flags: "layer_apply", gravity: "north_west"} ]) ``` ```csharp cloudinary.Api.UrlImgUp.Transform(new Transformation() .Width(500).Crop("scale").Chain() .Overlay(new Layer().PublicId("docs:model")).Chain() .Gravity("face").Width(150).Crop("thumb").Chain() .Flags("layer_apply").Gravity("north_west")).BuildImageTag("docs/man-rocks-sea.jpg") ``` ```dart cloudinary.image('docs/man-rocks-sea.jpg').transformation(Transformation() .resize(Resize.scale().width(500)) .overlay(Overlay.source( Source.image("docs/model") .transformation(new Transformation() .resize(Resize.thumbnail().width(150) .gravity( Gravity.focusOn( FocusOn.face())) )) ) .position(Position() .gravity( Gravity.compass( Compass.northWest())) ) )); ``` ```swift imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation() .setWidth(500).setCrop("scale").chain() .setOverlay("docs:model").chain() .setGravity("face").setWidth(150).setCrop("thumb").chain() .setFlags("layer_apply").setGravity("north_west")).generate("docs/man-rocks-sea.jpg")!, cloudinary: cloudinary) ``` ```android MediaManager.get().url().transformation(new Transformation() .width(500).crop("scale").chain() .overlay(new Layer().publicId("docs:model")).chain() .gravity("face").width(150).crop("thumb").chain() .flags("layer_apply").gravity("north_west")).generate("docs/man-rocks-sea.jpg"); ``` ```flutter cloudinary.image('docs/man-rocks-sea.jpg').transformation(Transformation() .resize(Resize.scale().width(500)) .overlay(Overlay.source( Source.image("docs/model") .transformation(new Transformation() .resize(Resize.thumbnail().width(150) .gravity( Gravity.focusOn( FocusOn.face())) )) ) .position(Position() .gravity( Gravity.compass( Compass.northWest())) ) )); ``` ```kotlin cloudinary.image { publicId("docs/man-rocks-sea.jpg") resize(Resize.scale() { width(500) }) overlay(Overlay.source( Source.image("docs/model") { transformation(Transformation { resize(Resize.thumbnail() { width(150) gravity( Gravity.focusOn( FocusOn.face())) }) }) }) { position(Position() { gravity( Gravity.compass( Compass.northWest())) }) }) }.generate() ``` ```jquery $.cloudinary.image("docs/man-rocks-sea.jpg", {transformation: [ {width: 500, crop: "scale"}, {overlay: new cloudinary.Layer().publicId("docs:model")}, {gravity: "face", width: 150, crop: "thumb"}, {flags: "layer_apply", gravity: "north_west"} ]}) ``` ```react_native import { scale, thumbnail } from "@cloudinary/url-gen/actions/resize"; import { source } from "@cloudinary/url-gen/actions/overlay"; import { image } from "@cloudinary/url-gen/qualifiers/source"; import { Position } from "@cloudinary/url-gen/qualifiers/position"; import { face } from "@cloudinary/url-gen/qualifiers/focusOn"; import { compass } from "@cloudinary/url-gen/qualifiers/gravity"; new CloudinaryImage("docs/man-rocks-sea.jpg") .resize(scale().width(500)) .overlay( source( image("docs/model").transformation( new Transformation().resize( thumbnail().width(150).gravity(focusOn(face())) ) ) ).position(new Position().gravity(compass("north_west"))) ); ``` ![Video with transformations applied to the overlay](https://res.cloudinary.com/demo/video/upload/c_scale,w_500/l_docs:model/c_thumb,g_face,w_150/fl_layer_apply,g_north_west/docs/campervan-by-lake.mp4) ```nodejs cloudinary.video("docs/campervan-by-lake", {transformation: [ {width: 500, crop: "scale"}, {overlay: "docs:model"}, {gravity: "face", width: 150, crop: "thumb"}, {flags: "layer_apply", gravity: "north_west"} ]}) ``` ```react import { scale, thumbnail } from "@cloudinary/url-gen/actions/resize"; import { source } from "@cloudinary/url-gen/actions/overlay"; import { image } from "@cloudinary/url-gen/qualifiers/source"; import { Position } from "@cloudinary/url-gen/qualifiers/position"; import { face } from "@cloudinary/url-gen/qualifiers/focusOn"; import { compass } from "@cloudinary/url-gen/qualifiers/gravity"; new CloudinaryVideo("docs/campervan-by-lake.mp4") .resize(scale().width(500)) .overlay( source( image("docs/model").transformation( new Transformation().resize( thumbnail().width(150).gravity(focusOn(face())) ) ) ).position(new Position().gravity(compass("north_west"))) ); ``` ```vue import { scale, thumbnail } from "@cloudinary/url-gen/actions/resize"; import { source } from "@cloudinary/url-gen/actions/overlay"; import { image } from "@cloudinary/url-gen/qualifiers/source"; import { Position } from "@cloudinary/url-gen/qualifiers/position"; import { face } from "@cloudinary/url-gen/qualifiers/focusOn"; import { compass } from "@cloudinary/url-gen/qualifiers/gravity"; new CloudinaryVideo("docs/campervan-by-lake.mp4") .resize(scale().width(500)) .overlay( source( image("docs/model").transformation( new Transformation().resize( thumbnail().width(150).gravity(focusOn(face())) ) ) ).position(new Position().gravity(compass("north_west"))) ); ``` ```angular import { scale, thumbnail } from "@cloudinary/url-gen/actions/resize"; import { source } from "@cloudinary/url-gen/actions/overlay"; import { image } from "@cloudinary/url-gen/qualifiers/source"; import { Position } from "@cloudinary/url-gen/qualifiers/position"; import { face } from "@cloudinary/url-gen/qualifiers/focusOn"; import { compass } from "@cloudinary/url-gen/qualifiers/gravity"; new CloudinaryVideo("docs/campervan-by-lake.mp4") .resize(scale().width(500)) .overlay( source( image("docs/model").transformation( new Transformation().resize( thumbnail().width(150).gravity(focusOn(face())) ) ) ).position(new Position().gravity(compass("north_west"))) ); ``` ```js import { scale, thumbnail } from "@cloudinary/url-gen/actions/resize"; import { source } from "@cloudinary/url-gen/actions/overlay"; import { image } from "@cloudinary/url-gen/qualifiers/source"; import { Position } from "@cloudinary/url-gen/qualifiers/position"; import { face } from "@cloudinary/url-gen/qualifiers/focusOn"; import { compass } from "@cloudinary/url-gen/qualifiers/gravity"; new CloudinaryVideo("docs/campervan-by-lake.mp4") .resize(scale().width(500)) .overlay( source( image("docs/model").transformation( new Transformation().resize( thumbnail().width(150).gravity(focusOn(face())) ) ) ).position(new Position().gravity(compass("north_west"))) ); ``` ```python CloudinaryVideo("docs/campervan-by-lake").video(transformation=[ {'width': 500, 'crop': "scale"}, {'overlay': "docs:model"}, {'gravity': "face", 'width': 150, 'crop': "thumb"}, {'flags': "layer_apply", 'gravity': "north_west"} ]) ``` ```php use Cloudinary\Transformation\Resize; use Cloudinary\Transformation\Overlay; use Cloudinary\Transformation\Source; use Cloudinary\Transformation\Position; use Cloudinary\Transformation\FocusOn; use Cloudinary\Transformation\Gravity; use Cloudinary\Transformation\Compass; (new VideoTag('docs/campervan-by-lake.mp4')) ->resize(Resize::scale()->width(500)) ->overlay(Overlay::source( Source::image("docs/model") ->transformation((new Transformation()) ->resize(Resize::thumbnail()->width(150) ->gravity( Gravity::focusOn( FocusOn::face())) )) ) ->position((new Position()) ->gravity( Gravity::compass( Compass::northWest())) ) ); ``` ```java cloudinary.url().transformation(new Transformation() .width(500).crop("scale").chain() .overlay(new Layer().publicId("docs:model")).chain() .gravity("face").width(150).crop("thumb").chain() .flags("layer_apply").gravity("north_west")).videoTag("docs/campervan-by-lake"); ``` ```ruby cl_video_tag("docs/campervan-by-lake", transformation: [ {width: 500, crop: "scale"}, {overlay: "docs:model"}, {gravity: "face", width: 150, crop: "thumb"}, {flags: "layer_apply", gravity: "north_west"} ]) ``` ```csharp cloudinary.Api.UrlVideoUp.Transform(new Transformation() .Width(500).Crop("scale").Chain() .Overlay(new Layer().PublicId("docs:model")).Chain() .Gravity("face").Width(150).Crop("thumb").Chain() .Flags("layer_apply").Gravity("north_west")).BuildVideoTag("docs/campervan-by-lake") ``` ```dart cloudinary.video('docs/campervan-by-lake.mp4').transformation(Transformation() .resize(Resize.scale().width(500)) .overlay(Overlay.source( Source.image("docs/model") .transformation(new Transformation() .resize(Resize.thumbnail().width(150) .gravity( Gravity.focusOn( FocusOn.face())) )) ) .position(Position() .gravity( Gravity.compass( Compass.northWest())) ) )); ``` ```swift cloudinary.createUrl().setResourceType("video").setTransformation(CLDTransformation() .setWidth(500).setCrop("scale").chain() .setOverlay("docs:model").chain() .setGravity("face").setWidth(150).setCrop("thumb").chain() .setFlags("layer_apply").setGravity("north_west")).generate("docs/campervan-by-lake.mp4") ``` ```android MediaManager.get().url().transformation(new Transformation() .width(500).crop("scale").chain() .overlay(new Layer().publicId("docs:model")).chain() .gravity("face").width(150).crop("thumb").chain() .flags("layer_apply").gravity("north_west")).resourceType("video").generate("docs/campervan-by-lake.mp4"); ``` ```flutter cloudinary.video('docs/campervan-by-lake.mp4').transformation(Transformation() .resize(Resize.scale().width(500)) .overlay(Overlay.source( Source.image("docs/model") .transformation(new Transformation() .resize(Resize.thumbnail().width(150) .gravity( Gravity.focusOn( FocusOn.face())) )) ) .position(Position() .gravity( Gravity.compass( Compass.northWest())) ) )); ``` ```kotlin cloudinary.video { publicId("docs/campervan-by-lake.mp4") resize(Resize.scale() { width(500) }) overlay(Overlay.source( Source.image("docs/model") { transformation(Transformation { resize(Resize.thumbnail() { width(150) gravity( Gravity.focusOn( FocusOn.face())) }) }) }) { position(Position() { gravity( Gravity.compass( Compass.northWest())) }) }) }.generate() ``` ```jquery $.cloudinary.video("docs/campervan-by-lake", {transformation: [ {width: 500, crop: "scale"}, {overlay: new cloudinary.Layer().publicId("docs:model")}, {gravity: "face", width: 150, crop: "thumb"}, {flags: "layer_apply", gravity: "north_west"} ]}) ``` ```react_native import { scale, thumbnail } from "@cloudinary/url-gen/actions/resize"; import { source } from "@cloudinary/url-gen/actions/overlay"; import { image } from "@cloudinary/url-gen/qualifiers/source"; import { Position } from "@cloudinary/url-gen/qualifiers/position"; import { face } from "@cloudinary/url-gen/qualifiers/focusOn"; import { compass } from "@cloudinary/url-gen/qualifiers/gravity"; new CloudinaryVideo("docs/campervan-by-lake.mp4") .resize(scale().width(500)) .overlay( source( image("docs/model").transformation( new Transformation().resize( thumbnail().width(150).gravity(focusOn(face())) ) ) ).position(new Position().gravity(compass("north_west"))) ); ``` > **NOTE**: You cannot use [object aware cropping](cloudinary_ai_content_analysis_object_aware_cropping) in layers. ## Multiple overlays Multiple overlays can easily be added as chained transformations to an asset. The following example adds both image and text overlays to the base image as follows: 1. An overlay of an image called `umbrella`, scaled to a 300px and place in the top left corner (`l_umbrella/c_scale,w_300/fl_layer_apply,g_north_west`). 2. An overlay of an image called `cloudinary_icon_white` with a relative width of 50% of the base image and an opacity of 50% and a brightness of 100 (`l_cloudinary_icon_white/c_scale,fl_relative,w_0.5/o_50/e_brightness:100/fl_layer_apply`). 3. The white text string "London" in bold 'Roboto' font with a size of 80 pixels, placed at a distance of 20 pixels from the bottom of the base image (`co_white,l_text:roboto_80_bold:London/fl_layer_apply,g_south,y_20`). ![Image with 3 overlays](https://res.cloudinary.com/demo/image/upload/w_1000/l_umbrella/c_scale,w_300/fl_layer_apply,g_north_west/l_cloudinary_icon_white/c_scale,fl_relative,w_0.5/o_50/e_brightness:100/fl_layer_apply/co_white,l_text:roboto_80_bold:London/fl_layer_apply,g_south,y_20/stroll-london-coat-bag.jpg "thumb: w_500") ```nodejs cloudinary.image("stroll-london-coat-bag.jpg", {transformation: [ {width: 1000, crop: "scale"}, {overlay: "umbrella"}, {width: 300, crop: "scale"}, {flags: "layer_apply", gravity: "north_west"}, {overlay: "cloudinary_icon_white"}, {flags: "relative", width: "0.5", crop: "scale"}, {opacity: 50}, {effect: "brightness:100"}, {flags: "layer_apply"}, {color: "white", overlay: {font_family: "roboto", font_size: 80, font_weight: "bold", text: "London"}}, {flags: "layer_apply", gravity: "south", y: 20} ]}) ``` ```react import { scale } from "@cloudinary/url-gen/actions/resize"; import { source } from "@cloudinary/url-gen/actions/overlay"; import { opacity, brightness } from "@cloudinary/url-gen/actions/adjust"; import { image, text } from "@cloudinary/url-gen/qualifiers/source"; import { Position } from "@cloudinary/url-gen/qualifiers/position"; import { TextStyle } from "@cloudinary/url-gen/qualifiers/textStyle"; import { compass } from "@cloudinary/url-gen/qualifiers/gravity"; new CloudinaryImage("stroll-london-coat-bag.jpg") .resize(scale().width(1000)) .overlay( source( image("umbrella").transformation( new Transformation().resize(scale().width(300)) ) ).position(new Position().gravity(compass("north_west"))) ) .overlay( source( image("cloudinary_icon_white").transformation( new Transformation() .resize(scale().width(0.5).relative()) .adjust(opacity(50)) .adjust(brightness().level(100)) ) ) ) .overlay( source( text("London", new TextStyle("roboto", 80).fontWeight("bold")).textColor( "white" ) ).position( new Position() .gravity(compass("south")) .offsetY(20) ) ); ``` ```vue import { scale } from "@cloudinary/url-gen/actions/resize"; import { source } from "@cloudinary/url-gen/actions/overlay"; import { opacity, brightness } from "@cloudinary/url-gen/actions/adjust"; import { image, text } from "@cloudinary/url-gen/qualifiers/source"; import { Position } from "@cloudinary/url-gen/qualifiers/position"; import { TextStyle } from "@cloudinary/url-gen/qualifiers/textStyle"; import { compass } from "@cloudinary/url-gen/qualifiers/gravity"; new CloudinaryImage("stroll-london-coat-bag.jpg") .resize(scale().width(1000)) .overlay( source( image("umbrella").transformation( new Transformation().resize(scale().width(300)) ) ).position(new Position().gravity(compass("north_west"))) ) .overlay( source( image("cloudinary_icon_white").transformation( new Transformation() .resize(scale().width(0.5).relative()) .adjust(opacity(50)) .adjust(brightness().level(100)) ) ) ) .overlay( source( text("London", new TextStyle("roboto", 80).fontWeight("bold")).textColor( "white" ) ).position( new Position() .gravity(compass("south")) .offsetY(20) ) ); ``` ```angular import { scale } from "@cloudinary/url-gen/actions/resize"; import { source } from "@cloudinary/url-gen/actions/overlay"; import { opacity, brightness } from "@cloudinary/url-gen/actions/adjust"; import { image, text } from "@cloudinary/url-gen/qualifiers/source"; import { Position } from "@cloudinary/url-gen/qualifiers/position"; import { TextStyle } from "@cloudinary/url-gen/qualifiers/textStyle"; import { compass } from "@cloudinary/url-gen/qualifiers/gravity"; new CloudinaryImage("stroll-london-coat-bag.jpg") .resize(scale().width(1000)) .overlay( source( image("umbrella").transformation( new Transformation().resize(scale().width(300)) ) ).position(new Position().gravity(compass("north_west"))) ) .overlay( source( image("cloudinary_icon_white").transformation( new Transformation() .resize(scale().width(0.5).relative()) .adjust(opacity(50)) .adjust(brightness().level(100)) ) ) ) .overlay( source( text("London", new TextStyle("roboto", 80).fontWeight("bold")).textColor( "white" ) ).position( new Position() .gravity(compass("south")) .offsetY(20) ) ); ``` ```js import { scale } from "@cloudinary/url-gen/actions/resize"; import { source } from "@cloudinary/url-gen/actions/overlay"; import { opacity, brightness } from "@cloudinary/url-gen/actions/adjust"; import { image, text } from "@cloudinary/url-gen/qualifiers/source"; import { Position } from "@cloudinary/url-gen/qualifiers/position"; import { TextStyle } from "@cloudinary/url-gen/qualifiers/textStyle"; import { compass } from "@cloudinary/url-gen/qualifiers/gravity"; new CloudinaryImage("stroll-london-coat-bag.jpg") .resize(scale().width(1000)) .overlay( source( image("umbrella").transformation( new Transformation().resize(scale().width(300)) ) ).position(new Position().gravity(compass("north_west"))) ) .overlay( source( image("cloudinary_icon_white").transformation( new Transformation() .resize(scale().width(0.5).relative()) .adjust(opacity(50)) .adjust(brightness().level(100)) ) ) ) .overlay( source( text("London", new TextStyle("roboto", 80).fontWeight("bold")).textColor( "white" ) ).position( new Position() .gravity(compass("south")) .offsetY(20) ) ); ``` ```python CloudinaryImage("stroll-london-coat-bag.jpg").image(transformation=[ {'width': 1000, 'crop': "scale"}, {'overlay': "umbrella"}, {'width': 300, 'crop': "scale"}, {'flags': "layer_apply", 'gravity': "north_west"}, {'overlay': "cloudinary_icon_white"}, {'flags': "relative", 'width': "0.5", 'crop': "scale"}, {'opacity': 50}, {'effect': "brightness:100"}, {'flags': "layer_apply"}, {'color': "white", 'overlay': {'font_family': "roboto", 'font_size': 80, 'font_weight': "bold", 'text': "London"}}, {'flags': "layer_apply", 'gravity': "south", 'y': 20} ]) ``` ```php use Cloudinary\Transformation\Resize; use Cloudinary\Transformation\Overlay; use Cloudinary\Transformation\Adjust; use Cloudinary\Transformation\Source; use Cloudinary\Transformation\Position; use Cloudinary\Transformation\TextStyle; use Cloudinary\Transformation\Color; use Cloudinary\Transformation\Gravity; use Cloudinary\Transformation\FontWeight; use Cloudinary\Transformation\Compass; (new ImageTag('stroll-london-coat-bag.jpg')) ->resize(Resize::scale()->width(1000)) ->overlay(Overlay::source( Source::image("umbrella") ->transformation((new Transformation()) ->resize(Resize::scale()->width(300))) ) ->position((new Position()) ->gravity( Gravity::compass( Compass::northWest())) ) ) ->overlay(Overlay::source( Source::image("cloudinary_icon_white") ->transformation((new Transformation()) ->resize(Resize::scale()->width(0.5) ->relative() ) ->adjust(Adjust::opacity(50)) ->adjust(Adjust::brightness()->level(100))) )) ->overlay(Overlay::source( Source::text("London",(new TextStyle("roboto",80)) ->fontWeight( FontWeight::bold()) ) ->textColor(Color::WHITE) ) ->position((new Position()) ->gravity( Gravity::compass( Compass::south())) ->offsetY(20)) ); ``` ```java cloudinary.url().transformation(new Transformation() .width(1000).crop("scale").chain() .overlay(new Layer().publicId("umbrella")).chain() .width(300).crop("scale").chain() .flags("layer_apply").gravity("north_west").chain() .overlay(new Layer().publicId("cloudinary_icon_white")).chain() .flags("relative").width(0.5).crop("scale").chain() .opacity(50).chain() .effect("brightness:100").chain() .flags("layer_apply").chain() .color("white").overlay(new TextLayer().fontFamily("roboto").fontSize(80).fontWeight("bold").text("London")).chain() .flags("layer_apply").gravity("south").y(20)).imageTag("stroll-london-coat-bag.jpg"); ``` ```ruby cl_image_tag("stroll-london-coat-bag.jpg", transformation: [ {width: 1000, crop: "scale"}, {overlay: "umbrella"}, {width: 300, crop: "scale"}, {flags: "layer_apply", gravity: "north_west"}, {overlay: "cloudinary_icon_white"}, {flags: "relative", width: 0.5, crop: "scale"}, {opacity: 50}, {effect: "brightness:100"}, {flags: "layer_apply"}, {color: "white", overlay: {font_family: "roboto", font_size: 80, font_weight: "bold", text: "London"}}, {flags: "layer_apply", gravity: "south", y: 20} ]) ``` ```csharp cloudinary.Api.UrlImgUp.Transform(new Transformation() .Width(1000).Crop("scale").Chain() .Overlay(new Layer().PublicId("umbrella")).Chain() .Width(300).Crop("scale").Chain() .Flags("layer_apply").Gravity("north_west").Chain() .Overlay(new Layer().PublicId("cloudinary_icon_white")).Chain() .Flags("relative").Width(0.5).Crop("scale").Chain() .Opacity(50).Chain() .Effect("brightness:100").Chain() .Flags("layer_apply").Chain() .Color("white").Overlay(new TextLayer().FontFamily("roboto").FontSize(80).FontWeight("bold").Text("London")).Chain() .Flags("layer_apply").Gravity("south").Y(20)).BuildImageTag("stroll-london-coat-bag.jpg") ``` ```dart cloudinary.image('stroll-london-coat-bag.jpg').transformation(Transformation() .addTransformation("w_1000/l_umbrella/c_scale,w_300/fl_layer_apply,g_north_west/l_cloudinary_icon_white/c_scale,fl_relative,w_0.5/o_50/e_brightness:100/fl_layer_apply/co_white,l_text:roboto_80_bold:London/fl_layer_apply,g_south,y_20")); ``` ```swift imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation() .setWidth(1000).setCrop("scale").chain() .setOverlay("umbrella").chain() .setWidth(300).setCrop("scale").chain() .setFlags("layer_apply").setGravity("north_west").chain() .setOverlay("cloudinary_icon_white").chain() .setFlags("relative").setWidth(0.5).setCrop("scale").chain() .setOpacity(50).chain() .setEffect("brightness:100").chain() .setFlags("layer_apply").chain() .setColor("white").setOverlay("text:roboto_80_bold:London").chain() .setFlags("layer_apply").setGravity("south").setY(20)).generate("stroll-london-coat-bag.jpg")!, cloudinary: cloudinary) ``` ```android MediaManager.get().url().transformation(new Transformation() .width(1000).crop("scale").chain() .overlay(new Layer().publicId("umbrella")).chain() .width(300).crop("scale").chain() .flags("layer_apply").gravity("north_west").chain() .overlay(new Layer().publicId("cloudinary_icon_white")).chain() .flags("relative").width(0.5).crop("scale").chain() .opacity(50).chain() .effect("brightness:100").chain() .flags("layer_apply").chain() .color("white").overlay(new TextLayer().fontFamily("roboto").fontSize(80).fontWeight("bold").text("London")).chain() .flags("layer_apply").gravity("south").y(20)).generate("stroll-london-coat-bag.jpg"); ``` ```flutter cloudinary.image('stroll-london-coat-bag.jpg').transformation(Transformation() .addTransformation("w_1000/l_umbrella/c_scale,w_300/fl_layer_apply,g_north_west/l_cloudinary_icon_white/c_scale,fl_relative,w_0.5/o_50/e_brightness:100/fl_layer_apply/co_white,l_text:roboto_80_bold:London/fl_layer_apply,g_south,y_20")); ``` ```kotlin cloudinary.image { publicId("stroll-london-coat-bag.jpg") resize(Resize.scale() { width(1000) }) overlay(Overlay.source( Source.image("umbrella") { transformation(Transformation { resize(Resize.scale() { width(300) }) }) }) { position(Position() { gravity( Gravity.compass( Compass.northWest())) }) }) overlay(Overlay.source( Source.image("cloudinary_icon_white") { transformation(Transformation { resize(Resize.scale() { width(0.5F) relative() }) adjust(Adjust.opacity(50)) adjust(Adjust.brightness() { level(100) }) }) })) overlay(Overlay.source( Source.text("London",TextStyle("roboto",80) { fontWeight( FontWeight.bold()) }) { textColor(Color.WHITE) }) { position(Position() { gravity( Gravity.compass( Compass.south())) offsetY(20) }) }) }.generate() ``` ```jquery $.cloudinary.image("stroll-london-coat-bag.jpg", {transformation: [ {width: 1000, crop: "scale"}, {overlay: new cloudinary.Layer().publicId("umbrella")}, {width: 300, crop: "scale"}, {flags: "layer_apply", gravity: "north_west"}, {overlay: new cloudinary.Layer().publicId("cloudinary_icon_white")}, {flags: "relative", width: "0.5", crop: "scale"}, {opacity: 50}, {effect: "brightness:100"}, {flags: "layer_apply"}, {color: "white", overlay: new cloudinary.TextLayer().fontFamily("roboto").fontSize(80).fontWeight("bold").text("London")}, {flags: "layer_apply", gravity: "south", y: 20} ]}) ``` ```react_native import { scale } from "@cloudinary/url-gen/actions/resize"; import { source } from "@cloudinary/url-gen/actions/overlay"; import { opacity, brightness } from "@cloudinary/url-gen/actions/adjust"; import { image, text } from "@cloudinary/url-gen/qualifiers/source"; import { Position } from "@cloudinary/url-gen/qualifiers/position"; import { TextStyle } from "@cloudinary/url-gen/qualifiers/textStyle"; import { compass } from "@cloudinary/url-gen/qualifiers/gravity"; new CloudinaryImage("stroll-london-coat-bag.jpg") .resize(scale().width(1000)) .overlay( source( image("umbrella").transformation( new Transformation().resize(scale().width(300)) ) ).position(new Position().gravity(compass("north_west"))) ) .overlay( source( image("cloudinary_icon_white").transformation( new Transformation() .resize(scale().width(0.5).relative()) .adjust(opacity(50)) .adjust(brightness().level(100)) ) ) ) .overlay( source( text("London", new TextStyle("roboto", 80).fontWeight("bold")).textColor( "white" ) ).position( new Position() .gravity(compass("south")) .offsetY(20) ) ); ``` ![Video with 3 overlays](https://res.cloudinary.com/demo/video/upload/w_1000/l_umbrella/c_scale,w_300/fl_layer_apply,g_north_west/l_cloudinary_icon_white/c_scale,fl_relative,w_0.5/o_50/e_brightness:100/fl_layer_apply/co_white,l_text:roboto_80_bold:London/fl_layer_apply,g_south,y_20/london_timelapse.mp4 "thumb: w_500") ```nodejs cloudinary.video("london_timelapse", {transformation: [ {width: 1000, crop: "scale"}, {overlay: "umbrella"}, {width: 300, crop: "scale"}, {flags: "layer_apply", gravity: "north_west"}, {overlay: "cloudinary_icon_white"}, {flags: "relative", width: "0.5", crop: "scale"}, {opacity: 50}, {effect: "brightness:100"}, {flags: "layer_apply"}, {color: "white", overlay: {font_family: "roboto", font_size: 80, font_weight: "bold", text: "London"}}, {flags: "layer_apply", gravity: "south", y: 20} ]}) ``` ```react import { scale } from "@cloudinary/url-gen/actions/resize"; import { source } from "@cloudinary/url-gen/actions/overlay"; import { opacity, brightness } from "@cloudinary/url-gen/actions/adjust"; import { image, text } from "@cloudinary/url-gen/qualifiers/source"; import { Position } from "@cloudinary/url-gen/qualifiers/position"; import { TextStyle } from "@cloudinary/url-gen/qualifiers/textStyle"; import { compass } from "@cloudinary/url-gen/qualifiers/gravity"; new CloudinaryVideo("london_timelapse.mp4") .resize(scale().width(1000)) .overlay( source( image("umbrella").transformation( new Transformation().resize(scale().width(300)) ) ).position(new Position().gravity(compass("north_west"))) ) .overlay( source( image("cloudinary_icon_white").transformation( new Transformation() .resize(scale().width(0.5).relative()) .adjust(opacity(50)) .adjust(brightness().level(100)) ) ) ) .overlay( source( text("London", new TextStyle("roboto", 80).fontWeight("bold")).textColor( "white" ) ).position( new Position() .gravity(compass("south")) .offsetY(20) ) ); ``` ```vue import { scale } from "@cloudinary/url-gen/actions/resize"; import { source } from "@cloudinary/url-gen/actions/overlay"; import { opacity, brightness } from "@cloudinary/url-gen/actions/adjust"; import { image, text } from "@cloudinary/url-gen/qualifiers/source"; import { Position } from "@cloudinary/url-gen/qualifiers/position"; import { TextStyle } from "@cloudinary/url-gen/qualifiers/textStyle"; import { compass } from "@cloudinary/url-gen/qualifiers/gravity"; new CloudinaryVideo("london_timelapse.mp4") .resize(scale().width(1000)) .overlay( source( image("umbrella").transformation( new Transformation().resize(scale().width(300)) ) ).position(new Position().gravity(compass("north_west"))) ) .overlay( source( image("cloudinary_icon_white").transformation( new Transformation() .resize(scale().width(0.5).relative()) .adjust(opacity(50)) .adjust(brightness().level(100)) ) ) ) .overlay( source( text("London", new TextStyle("roboto", 80).fontWeight("bold")).textColor( "white" ) ).position( new Position() .gravity(compass("south")) .offsetY(20) ) ); ``` ```angular import { scale } from "@cloudinary/url-gen/actions/resize"; import { source } from "@cloudinary/url-gen/actions/overlay"; import { opacity, brightness } from "@cloudinary/url-gen/actions/adjust"; import { image, text } from "@cloudinary/url-gen/qualifiers/source"; import { Position } from "@cloudinary/url-gen/qualifiers/position"; import { TextStyle } from "@cloudinary/url-gen/qualifiers/textStyle"; import { compass } from "@cloudinary/url-gen/qualifiers/gravity"; new CloudinaryVideo("london_timelapse.mp4") .resize(scale().width(1000)) .overlay( source( image("umbrella").transformation( new Transformation().resize(scale().width(300)) ) ).position(new Position().gravity(compass("north_west"))) ) .overlay( source( image("cloudinary_icon_white").transformation( new Transformation() .resize(scale().width(0.5).relative()) .adjust(opacity(50)) .adjust(brightness().level(100)) ) ) ) .overlay( source( text("London", new TextStyle("roboto", 80).fontWeight("bold")).textColor( "white" ) ).position( new Position() .gravity(compass("south")) .offsetY(20) ) ); ``` ```js import { scale } from "@cloudinary/url-gen/actions/resize"; import { source } from "@cloudinary/url-gen/actions/overlay"; import { opacity, brightness } from "@cloudinary/url-gen/actions/adjust"; import { image, text } from "@cloudinary/url-gen/qualifiers/source"; import { Position } from "@cloudinary/url-gen/qualifiers/position"; import { TextStyle } from "@cloudinary/url-gen/qualifiers/textStyle"; import { compass } from "@cloudinary/url-gen/qualifiers/gravity"; new CloudinaryVideo("london_timelapse.mp4") .resize(scale().width(1000)) .overlay( source( image("umbrella").transformation( new Transformation().resize(scale().width(300)) ) ).position(new Position().gravity(compass("north_west"))) ) .overlay( source( image("cloudinary_icon_white").transformation( new Transformation() .resize(scale().width(0.5).relative()) .adjust(opacity(50)) .adjust(brightness().level(100)) ) ) ) .overlay( source( text("London", new TextStyle("roboto", 80).fontWeight("bold")).textColor( "white" ) ).position( new Position() .gravity(compass("south")) .offsetY(20) ) ); ``` ```python CloudinaryVideo("london_timelapse").video(transformation=[ {'width': 1000, 'crop': "scale"}, {'overlay': "umbrella"}, {'width': 300, 'crop': "scale"}, {'flags': "layer_apply", 'gravity': "north_west"}, {'overlay': "cloudinary_icon_white"}, {'flags': "relative", 'width': "0.5", 'crop': "scale"}, {'opacity': 50}, {'effect': "brightness:100"}, {'flags': "layer_apply"}, {'color': "white", 'overlay': {'font_family': "roboto", 'font_size': 80, 'font_weight': "bold", 'text': "London"}}, {'flags': "layer_apply", 'gravity': "south", 'y': 20} ]) ``` ```php use Cloudinary\Transformation\Resize; use Cloudinary\Transformation\Overlay; use Cloudinary\Transformation\Adjust; use Cloudinary\Transformation\Source; use Cloudinary\Transformation\Position; use Cloudinary\Transformation\TextStyle; use Cloudinary\Transformation\Color; use Cloudinary\Transformation\Gravity; use Cloudinary\Transformation\FontWeight; use Cloudinary\Transformation\Compass; (new VideoTag('london_timelapse.mp4')) ->resize(Resize::scale()->width(1000)) ->overlay(Overlay::source( Source::image("umbrella") ->transformation((new Transformation()) ->resize(Resize::scale()->width(300))) ) ->position((new Position()) ->gravity( Gravity::compass( Compass::northWest())) ) ) ->overlay(Overlay::source( Source::image("cloudinary_icon_white") ->transformation((new Transformation()) ->resize(Resize::scale()->width(0.5) ->relative() ) ->adjust(Adjust::opacity(50)) ->adjust(Adjust::brightness()->level(100))) )) ->overlay(Overlay::source( Source::text("London",(new TextStyle("roboto",80)) ->fontWeight( FontWeight::bold()) ) ->textColor(Color::WHITE) ) ->position((new Position()) ->gravity( Gravity::compass( Compass::south())) ->offsetY(20)) ); ``` ```java cloudinary.url().transformation(new Transformation() .width(1000).crop("scale").chain() .overlay(new Layer().publicId("umbrella")).chain() .width(300).crop("scale").chain() .flags("layer_apply").gravity("north_west").chain() .overlay(new Layer().publicId("cloudinary_icon_white")).chain() .flags("relative").width(0.5).crop("scale").chain() .opacity(50).chain() .effect("brightness:100").chain() .flags("layer_apply").chain() .color("white").overlay(new TextLayer().fontFamily("roboto").fontSize(80).fontWeight("bold").text("London")).chain() .flags("layer_apply").gravity("south").y(20)).videoTag("london_timelapse"); ``` ```ruby cl_video_tag("london_timelapse", transformation: [ {width: 1000, crop: "scale"}, {overlay: "umbrella"}, {width: 300, crop: "scale"}, {flags: "layer_apply", gravity: "north_west"}, {overlay: "cloudinary_icon_white"}, {flags: "relative", width: 0.5, crop: "scale"}, {opacity: 50}, {effect: "brightness:100"}, {flags: "layer_apply"}, {color: "white", overlay: {font_family: "roboto", font_size: 80, font_weight: "bold", text: "London"}}, {flags: "layer_apply", gravity: "south", y: 20} ]) ``` ```csharp cloudinary.Api.UrlVideoUp.Transform(new Transformation() .Width(1000).Crop("scale").Chain() .Overlay(new Layer().PublicId("umbrella")).Chain() .Width(300).Crop("scale").Chain() .Flags("layer_apply").Gravity("north_west").Chain() .Overlay(new Layer().PublicId("cloudinary_icon_white")).Chain() .Flags("relative").Width(0.5).Crop("scale").Chain() .Opacity(50).Chain() .Effect("brightness:100").Chain() .Flags("layer_apply").Chain() .Color("white").Overlay(new TextLayer().FontFamily("roboto").FontSize(80).FontWeight("bold").Text("London")).Chain() .Flags("layer_apply").Gravity("south").Y(20)).BuildVideoTag("london_timelapse") ``` ```dart cloudinary.video('london_timelapse.mp4').transformation(Transformation() .addTransformation("w_1000/l_umbrella/c_scale,w_300/fl_layer_apply,g_north_west/l_cloudinary_icon_white/c_scale,fl_relative,w_0.5/o_50/e_brightness:100/fl_layer_apply/co_white,l_text:roboto_80_bold:London/fl_layer_apply,g_south,y_20")); ``` ```swift cloudinary.createUrl().setResourceType("video").setTransformation(CLDTransformation() .setWidth(1000).setCrop("scale").chain() .setOverlay("umbrella").chain() .setWidth(300).setCrop("scale").chain() .setFlags("layer_apply").setGravity("north_west").chain() .setOverlay("cloudinary_icon_white").chain() .setFlags("relative").setWidth(0.5).setCrop("scale").chain() .setOpacity(50).chain() .setEffect("brightness:100").chain() .setFlags("layer_apply").chain() .setColor("white").setOverlay("text:roboto_80_bold:London").chain() .setFlags("layer_apply").setGravity("south").setY(20)).generate("london_timelapse.mp4") ``` ```android MediaManager.get().url().transformation(new Transformation() .width(1000).crop("scale").chain() .overlay(new Layer().publicId("umbrella")).chain() .width(300).crop("scale").chain() .flags("layer_apply").gravity("north_west").chain() .overlay(new Layer().publicId("cloudinary_icon_white")).chain() .flags("relative").width(0.5).crop("scale").chain() .opacity(50).chain() .effect("brightness:100").chain() .flags("layer_apply").chain() .color("white").overlay(new TextLayer().fontFamily("roboto").fontSize(80).fontWeight("bold").text("London")).chain() .flags("layer_apply").gravity("south").y(20)).resourceType("video").generate("london_timelapse.mp4"); ``` ```flutter cloudinary.video('london_timelapse.mp4').transformation(Transformation() .addTransformation("w_1000/l_umbrella/c_scale,w_300/fl_layer_apply,g_north_west/l_cloudinary_icon_white/c_scale,fl_relative,w_0.5/o_50/e_brightness:100/fl_layer_apply/co_white,l_text:roboto_80_bold:London/fl_layer_apply,g_south,y_20")); ``` ```kotlin cloudinary.video { publicId("london_timelapse.mp4") resize(Resize.scale() { width(1000) }) overlay(Overlay.source( Source.image("umbrella") { transformation(Transformation { resize(Resize.scale() { width(300) }) }) }) { position(Position() { gravity( Gravity.compass( Compass.northWest())) }) }) overlay(Overlay.source( Source.image("cloudinary_icon_white") { transformation(Transformation { resize(Resize.scale() { width(0.5F) relative() }) adjust(Adjust.opacity(50)) adjust(Adjust.brightness() { level(100) }) }) })) overlay(Overlay.source( Source.text("London",TextStyle("roboto",80) { fontWeight( FontWeight.bold()) }) { textColor(Color.WHITE) }) { position(Position() { gravity( Gravity.compass( Compass.south())) offsetY(20) }) }) }.generate() ``` ```jquery $.cloudinary.video("london_timelapse", {transformation: [ {width: 1000, crop: "scale"}, {overlay: new cloudinary.Layer().publicId("umbrella")}, {width: 300, crop: "scale"}, {flags: "layer_apply", gravity: "north_west"}, {overlay: new cloudinary.Layer().publicId("cloudinary_icon_white")}, {flags: "relative", width: "0.5", crop: "scale"}, {opacity: 50}, {effect: "brightness:100"}, {flags: "layer_apply"}, {color: "white", overlay: new cloudinary.TextLayer().fontFamily("roboto").fontSize(80).fontWeight("bold").text("London")}, {flags: "layer_apply", gravity: "south", y: 20} ]}) ``` ```react_native import { scale } from "@cloudinary/url-gen/actions/resize"; import { source } from "@cloudinary/url-gen/actions/overlay"; import { opacity, brightness } from "@cloudinary/url-gen/actions/adjust"; import { image, text } from "@cloudinary/url-gen/qualifiers/source"; import { Position } from "@cloudinary/url-gen/qualifiers/position"; import { TextStyle } from "@cloudinary/url-gen/qualifiers/textStyle"; import { compass } from "@cloudinary/url-gen/qualifiers/gravity"; new CloudinaryVideo("london_timelapse.mp4") .resize(scale().width(1000)) .overlay( source( image("umbrella").transformation( new Transformation().resize(scale().width(300)) ) ).position(new Position().gravity(compass("north_west"))) ) .overlay( source( image("cloudinary_icon_white").transformation( new Transformation() .resize(scale().width(0.5).relative()) .adjust(opacity(50)) .adjust(brightness().level(100)) ) ) ) .overlay( source( text("London", new TextStyle("roboto", 80).fontWeight("bold")).textColor( "white" ) ).position( new Position() .gravity(compass("south")) .offsetY(20) ) ); ``` ### Nesting layers Layers can be nested within layers. Each layer must have its own layer and `layer_apply` components, and the inner layer must be closed before the outer one, like with any nested programming statement. For example, adding text to the moon overlay: ![image with nested layers](https://res.cloudinary.com/demo/image/upload/c_scale,w_500/l_moon_layer/c_scale,w_150/l_text:roboto_20_bold:Moonlight/fl_layer_apply/fl_layer_apply,g_north_east/city_night_time.jpg) ```nodejs cloudinary.image("city_night_time.jpg", {transformation: [ {width: 500, crop: "scale"}, {overlay: "moon_layer"}, {width: 150, crop: "scale"}, {overlay: {font_family: "roboto", font_size: 20, font_weight: "bold", text: "Moonlight"}}, {flags: "layer_apply"}, {flags: "layer_apply", gravity: "north_east"} ]}) ``` ```react import { scale } from "@cloudinary/url-gen/actions/resize"; import { source } from "@cloudinary/url-gen/actions/overlay"; import { image } from "@cloudinary/url-gen/qualifiers/source"; import { Position } from "@cloudinary/url-gen/qualifiers/position"; import { compass } from "@cloudinary/url-gen/qualifiers/gravity"; new CloudinaryImage("city_night_time.jpg") .resize(scale().width(500)) .overlay( source( image("moon_layer").transformation( new Transformation() .resize(scale().width(150)) .overlay( source( text("Moonlight", new TextStyle("roboto", 20).fontWeight("bold")) ) ) ) ).position(new Position().gravity(compass("north_east"))) ); ``` ```vue import { scale } from "@cloudinary/url-gen/actions/resize"; import { source } from "@cloudinary/url-gen/actions/overlay"; import { image } from "@cloudinary/url-gen/qualifiers/source"; import { Position } from "@cloudinary/url-gen/qualifiers/position"; import { compass } from "@cloudinary/url-gen/qualifiers/gravity"; new CloudinaryImage("city_night_time.jpg") .resize(scale().width(500)) .overlay( source( image("moon_layer").transformation( new Transformation() .resize(scale().width(150)) .overlay( source( text("Moonlight", new TextStyle("roboto", 20).fontWeight("bold")) ) ) ) ).position(new Position().gravity(compass("north_east"))) ); ``` ```angular import { scale } from "@cloudinary/url-gen/actions/resize"; import { source } from "@cloudinary/url-gen/actions/overlay"; import { image } from "@cloudinary/url-gen/qualifiers/source"; import { Position } from "@cloudinary/url-gen/qualifiers/position"; import { compass } from "@cloudinary/url-gen/qualifiers/gravity"; new CloudinaryImage("city_night_time.jpg") .resize(scale().width(500)) .overlay( source( image("moon_layer").transformation( new Transformation() .resize(scale().width(150)) .overlay( source( text("Moonlight", new TextStyle("roboto", 20).fontWeight("bold")) ) ) ) ).position(new Position().gravity(compass("north_east"))) ); ``` ```js import { scale } from "@cloudinary/url-gen/actions/resize"; import { source } from "@cloudinary/url-gen/actions/overlay"; import { image } from "@cloudinary/url-gen/qualifiers/source"; import { Position } from "@cloudinary/url-gen/qualifiers/position"; import { compass } from "@cloudinary/url-gen/qualifiers/gravity"; new CloudinaryImage("city_night_time.jpg") .resize(scale().width(500)) .overlay( source( image("moon_layer").transformation( new Transformation() .resize(scale().width(150)) .overlay( source( text("Moonlight", new TextStyle("roboto", 20).fontWeight("bold")) ) ) ) ).position(new Position().gravity(compass("north_east"))) ); ``` ```python CloudinaryImage("city_night_time.jpg").image(transformation=[ {'width': 500, 'crop': "scale"}, {'overlay': "moon_layer"}, {'width': 150, 'crop': "scale"}, {'overlay': {'font_family': "roboto", 'font_size': 20, 'font_weight': "bold", 'text': "Moonlight"}}, {'flags': "layer_apply"}, {'flags': "layer_apply", 'gravity': "north_east"} ]) ``` ```php use Cloudinary\Transformation\Resize; use Cloudinary\Transformation\Overlay; use Cloudinary\Transformation\Source; use Cloudinary\Transformation\Position; use Cloudinary\Transformation\FontWeight; use Cloudinary\Transformation\Gravity; use Cloudinary\Transformation\Compass; (new ImageTag('city_night_time.jpg')) ->resize(Resize::scale()->width(500)) ->overlay(Overlay::source( Source::image("moon_layer") ->transformation((new Transformation()) ->resize(Resize::scale()->width(150)) ->overlay(Overlay::source( Source::text("Moonlight",(new TextStyle("roboto",20)) ->fontWeight( FontWeight::bold()) )))) ) ->position((new Position()) ->gravity( Gravity::compass( Compass::northEast())) ) ); ``` ```java cloudinary.url().transformation(new Transformation() .width(500).crop("scale").chain() .overlay(new Layer().publicId("moon_layer")).chain() .width(150).crop("scale").chain() .overlay(new TextLayer().fontFamily("roboto").fontSize(20).fontWeight("bold").text("Moonlight")).chain() .flags("layer_apply").chain() .flags("layer_apply").gravity("north_east")).imageTag("city_night_time.jpg"); ``` ```ruby cl_image_tag("city_night_time.jpg", transformation: [ {width: 500, crop: "scale"}, {overlay: "moon_layer"}, {width: 150, crop: "scale"}, {overlay: {font_family: "roboto", font_size: 20, font_weight: "bold", text: "Moonlight"}}, {flags: "layer_apply"}, {flags: "layer_apply", gravity: "north_east"} ]) ``` ```csharp cloudinary.Api.UrlImgUp.Transform(new Transformation() .Width(500).Crop("scale").Chain() .Overlay(new Layer().PublicId("moon_layer")).Chain() .Width(150).Crop("scale").Chain() .Overlay(new TextLayer().FontFamily("roboto").FontSize(20).FontWeight("bold").Text("Moonlight")).Chain() .Flags("layer_apply").Chain() .Flags("layer_apply").Gravity("north_east")).BuildImageTag("city_night_time.jpg") ``` ```dart cloudinary.image('city_night_time.jpg').transformation(Transformation() .addTransformation("c_scale,w_500/l_moon_layer/c_scale,w_150/l_text:roboto_20_bold:Moonlight/fl_layer_apply/fl_layer_apply,g_north_east")); ``` ```swift imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation() .setWidth(500).setCrop("scale").chain() .setOverlay("moon_layer").chain() .setWidth(150).setCrop("scale").chain() .setOverlay("text:roboto_20_bold:Moonlight").chain() .setFlags("layer_apply").chain() .setFlags("layer_apply").setGravity("north_east")).generate("city_night_time.jpg")!, cloudinary: cloudinary) ``` ```android MediaManager.get().url().transformation(new Transformation() .width(500).crop("scale").chain() .overlay(new Layer().publicId("moon_layer")).chain() .width(150).crop("scale").chain() .overlay(new TextLayer().fontFamily("roboto").fontSize(20).fontWeight("bold").text("Moonlight")).chain() .flags("layer_apply").chain() .flags("layer_apply").gravity("north_east")).generate("city_night_time.jpg"); ``` ```flutter cloudinary.image('city_night_time.jpg').transformation(Transformation() .addTransformation("c_scale,w_500/l_moon_layer/c_scale,w_150/l_text:roboto_20_bold:Moonlight/fl_layer_apply/fl_layer_apply,g_north_east")); ``` ```kotlin cloudinary.image { publicId("city_night_time.jpg") resize(Resize.scale() { width(500) }) overlay(Overlay.source( Source.image("moon_layer") { transformation(Transformation { resize(Resize.scale() { width(150) }) overlay(Overlay.source( Source.text("Moonlight",TextStyle("roboto",20) { fontWeight( FontWeight.bold()) }))) }) }) { position(Position() { gravity( Gravity.compass( Compass.northEast())) }) }) }.generate() ``` ```jquery $.cloudinary.image("city_night_time.jpg", {transformation: [ {width: 500, crop: "scale"}, {overlay: new cloudinary.Layer().publicId("moon_layer")}, {width: 150, crop: "scale"}, {overlay: new cloudinary.TextLayer().fontFamily("roboto").fontSize(20).fontWeight("bold").text("Moonlight")}, {flags: "layer_apply"}, {flags: "layer_apply", gravity: "north_east"} ]}) ``` ```react_native import { scale } from "@cloudinary/url-gen/actions/resize"; import { source } from "@cloudinary/url-gen/actions/overlay"; import { image } from "@cloudinary/url-gen/qualifiers/source"; import { Position } from "@cloudinary/url-gen/qualifiers/position"; import { compass } from "@cloudinary/url-gen/qualifiers/gravity"; new CloudinaryImage("city_night_time.jpg") .resize(scale().width(500)) .overlay( source( image("moon_layer").transformation( new Transformation() .resize(scale().width(150)) .overlay( source( text("Moonlight", new TextStyle("roboto", 20).fontWeight("bold")) ) ) ) ).position(new Position().gravity(compass("north_east"))) ); ``` ![Video with nested layers](https://res.cloudinary.com/demo/video/upload/c_scale,h_500/l_moon_layer/c_scale,w_150/l_text:roboto_20_bold:Moonlight/fl_layer_apply/fl_layer_apply,g_north_east/night_drive.mp4) ```nodejs cloudinary.video("night_drive", {transformation: [ {height: 500, crop: "scale"}, {overlay: "moon_layer"}, {width: 150, crop: "scale"}, {overlay: {font_family: "roboto", font_size: 20, font_weight: "bold", text: "Moonlight"}}, {flags: "layer_apply"}, {flags: "layer_apply", gravity: "north_east"} ]}) ``` ```react import { scale } from "@cloudinary/url-gen/actions/resize"; import { source } from "@cloudinary/url-gen/actions/overlay"; import { image } from "@cloudinary/url-gen/qualifiers/source"; import { Position } from "@cloudinary/url-gen/qualifiers/position"; import { compass } from "@cloudinary/url-gen/qualifiers/gravity"; new CloudinaryVideo("night_drive.mp4") .resize(scale().height(500)) .overlay( source( image("moon_layer").transformation( new Transformation() .resize(scale().width(150)) .overlay( source( text("Moonlight", new TextStyle("roboto", 20).fontWeight("bold")) ) ) ) ).position(new Position().gravity(compass("north_east"))) ); ``` ```vue import { scale } from "@cloudinary/url-gen/actions/resize"; import { source } from "@cloudinary/url-gen/actions/overlay"; import { image } from "@cloudinary/url-gen/qualifiers/source"; import { Position } from "@cloudinary/url-gen/qualifiers/position"; import { compass } from "@cloudinary/url-gen/qualifiers/gravity"; new CloudinaryVideo("night_drive.mp4") .resize(scale().height(500)) .overlay( source( image("moon_layer").transformation( new Transformation() .resize(scale().width(150)) .overlay( source( text("Moonlight", new TextStyle("roboto", 20).fontWeight("bold")) ) ) ) ).position(new Position().gravity(compass("north_east"))) ); ``` ```angular import { scale } from "@cloudinary/url-gen/actions/resize"; import { source } from "@cloudinary/url-gen/actions/overlay"; import { image } from "@cloudinary/url-gen/qualifiers/source"; import { Position } from "@cloudinary/url-gen/qualifiers/position"; import { compass } from "@cloudinary/url-gen/qualifiers/gravity"; new CloudinaryVideo("night_drive.mp4") .resize(scale().height(500)) .overlay( source( image("moon_layer").transformation( new Transformation() .resize(scale().width(150)) .overlay( source( text("Moonlight", new TextStyle("roboto", 20).fontWeight("bold")) ) ) ) ).position(new Position().gravity(compass("north_east"))) ); ``` ```js import { scale } from "@cloudinary/url-gen/actions/resize"; import { source } from "@cloudinary/url-gen/actions/overlay"; import { image } from "@cloudinary/url-gen/qualifiers/source"; import { Position } from "@cloudinary/url-gen/qualifiers/position"; import { compass } from "@cloudinary/url-gen/qualifiers/gravity"; new CloudinaryVideo("night_drive.mp4") .resize(scale().height(500)) .overlay( source( image("moon_layer").transformation( new Transformation() .resize(scale().width(150)) .overlay( source( text("Moonlight", new TextStyle("roboto", 20).fontWeight("bold")) ) ) ) ).position(new Position().gravity(compass("north_east"))) ); ``` ```python CloudinaryVideo("night_drive").video(transformation=[ {'height': 500, 'crop': "scale"}, {'overlay': "moon_layer"}, {'width': 150, 'crop': "scale"}, {'overlay': {'font_family': "roboto", 'font_size': 20, 'font_weight': "bold", 'text': "Moonlight"}}, {'flags': "layer_apply"}, {'flags': "layer_apply", 'gravity': "north_east"} ]) ``` ```php use Cloudinary\Transformation\Resize; use Cloudinary\Transformation\Overlay; use Cloudinary\Transformation\Source; use Cloudinary\Transformation\Position; use Cloudinary\Transformation\FontWeight; use Cloudinary\Transformation\Gravity; use Cloudinary\Transformation\Compass; (new VideoTag('night_drive.mp4')) ->resize(Resize::scale()->height(500)) ->overlay(Overlay::source( Source::image("moon_layer") ->transformation((new Transformation()) ->resize(Resize::scale()->width(150)) ->overlay(Overlay::source( Source::text("Moonlight",(new TextStyle("roboto",20)) ->fontWeight( FontWeight::bold()) )))) ) ->position((new Position()) ->gravity( Gravity::compass( Compass::northEast())) ) ); ``` ```java cloudinary.url().transformation(new Transformation() .height(500).crop("scale").chain() .overlay(new Layer().publicId("moon_layer")).chain() .width(150).crop("scale").chain() .overlay(new TextLayer().fontFamily("roboto").fontSize(20).fontWeight("bold").text("Moonlight")).chain() .flags("layer_apply").chain() .flags("layer_apply").gravity("north_east")).videoTag("night_drive"); ``` ```ruby cl_video_tag("night_drive", transformation: [ {height: 500, crop: "scale"}, {overlay: "moon_layer"}, {width: 150, crop: "scale"}, {overlay: {font_family: "roboto", font_size: 20, font_weight: "bold", text: "Moonlight"}}, {flags: "layer_apply"}, {flags: "layer_apply", gravity: "north_east"} ]) ``` ```csharp cloudinary.Api.UrlVideoUp.Transform(new Transformation() .Height(500).Crop("scale").Chain() .Overlay(new Layer().PublicId("moon_layer")).Chain() .Width(150).Crop("scale").Chain() .Overlay(new TextLayer().FontFamily("roboto").FontSize(20).FontWeight("bold").Text("Moonlight")).Chain() .Flags("layer_apply").Chain() .Flags("layer_apply").Gravity("north_east")).BuildVideoTag("night_drive") ``` ```dart cloudinary.video('night_drive.mp4').transformation(Transformation() .addTransformation("c_scale,h_500/l_moon_layer/c_scale,w_150/l_text:roboto_20_bold:Moonlight/fl_layer_apply/fl_layer_apply,g_north_east")); ``` ```swift cloudinary.createUrl().setResourceType("video").setTransformation(CLDTransformation() .setHeight(500).setCrop("scale").chain() .setOverlay("moon_layer").chain() .setWidth(150).setCrop("scale").chain() .setOverlay("text:roboto_20_bold:Moonlight").chain() .setFlags("layer_apply").chain() .setFlags("layer_apply").setGravity("north_east")).generate("night_drive.mp4") ``` ```android MediaManager.get().url().transformation(new Transformation() .height(500).crop("scale").chain() .overlay(new Layer().publicId("moon_layer")).chain() .width(150).crop("scale").chain() .overlay(new TextLayer().fontFamily("roboto").fontSize(20).fontWeight("bold").text("Moonlight")).chain() .flags("layer_apply").chain() .flags("layer_apply").gravity("north_east")).resourceType("video").generate("night_drive.mp4"); ``` ```flutter cloudinary.video('night_drive.mp4').transformation(Transformation() .addTransformation("c_scale,h_500/l_moon_layer/c_scale,w_150/l_text:roboto_20_bold:Moonlight/fl_layer_apply/fl_layer_apply,g_north_east")); ``` ```kotlin cloudinary.video { publicId("night_drive.mp4") resize(Resize.scale() { height(500) }) overlay(Overlay.source( Source.image("moon_layer") { transformation(Transformation { resize(Resize.scale() { width(150) }) overlay(Overlay.source( Source.text("Moonlight",TextStyle("roboto",20) { fontWeight( FontWeight.bold()) }))) }) }) { position(Position() { gravity( Gravity.compass( Compass.northEast())) }) }) }.generate() ``` ```jquery $.cloudinary.video("night_drive", {transformation: [ {height: 500, crop: "scale"}, {overlay: new cloudinary.Layer().publicId("moon_layer")}, {width: 150, crop: "scale"}, {overlay: new cloudinary.TextLayer().fontFamily("roboto").fontSize(20).fontWeight("bold").text("Moonlight")}, {flags: "layer_apply"}, {flags: "layer_apply", gravity: "north_east"} ]}) ``` ```react_native import { scale } from "@cloudinary/url-gen/actions/resize"; import { source } from "@cloudinary/url-gen/actions/overlay"; import { image } from "@cloudinary/url-gen/qualifiers/source"; import { Position } from "@cloudinary/url-gen/qualifiers/position"; import { compass } from "@cloudinary/url-gen/qualifiers/gravity"; new CloudinaryVideo("night_drive.mp4") .resize(scale().height(500)) .overlay( source( image("moon_layer").transformation( new Transformation() .resize(scale().width(150)) .overlay( source( text("Moonlight", new TextStyle("roboto", 20).fontWeight("bold")) ) ) ) ).position(new Position().gravity(compass("north_east"))) ); ``` The first image layer has a transformation that changes its size and the second layer is a text layer configured with a font and size. The second layer is closed and placed by the first (inner) `fl_layer_apply`. Since no gravity was specified for that later, it's placed in the center of the first overlay. Then the outer layer apply closes and places the entire layer (including its nested layer) and positions it in the northeast corner. ## Relative layer sizing By default, whenever you apply relative resize [transformations to your overlay](#applying_transformations_to_overlays), the overlay image is resized relative to its own original size. However, you can use one of the following flags to resize relative to other elements. ### Sizing relative to the base image You can add the `relative` flag (`fl_relative` in URLs) to specify that percentage-based width & height parameters of overlays (e.g., w\_0.5) are relative to the size of the base image instead of to the original size of the overlaying image itself. For example, to add an overlay of the image called `stamp-exclusive-premium`, where the overlay is resized to 70% of the width of the base image (`l_stamp-exclusive-premium/c_scale,fl_relative,w_0.7/fl_layer_apply`): ![Image with overlay resized relative to base image](https://res.cloudinary.com/demo/image/upload/l_stamp-exclusive-premium/c_scale,fl_relative,w_0.7/fl_layer_apply/docs/car-2596344_1280.jpg "thumb: w_400") ```nodejs cloudinary.image("docs/car-2596344_1280.jpg", {transformation: [ {overlay: "stamp-exclusive-premium"}, {flags: "relative", width: "0.7", crop: "scale"}, {flags: "layer_apply"} ]}) ``` ```react import { source } from "@cloudinary/url-gen/actions/overlay"; import { scale } from "@cloudinary/url-gen/actions/resize"; import { image } from "@cloudinary/url-gen/qualifiers/source"; new CloudinaryImage("docs/car-2596344_1280.jpg").overlay( source( image("stamp-exclusive-premium").transformation( new Transformation().resize(scale().width(0.7).relative()) ) ) ); ``` ```vue import { source } from "@cloudinary/url-gen/actions/overlay"; import { scale } from "@cloudinary/url-gen/actions/resize"; import { image } from "@cloudinary/url-gen/qualifiers/source"; new CloudinaryImage("docs/car-2596344_1280.jpg").overlay( source( image("stamp-exclusive-premium").transformation( new Transformation().resize(scale().width(0.7).relative()) ) ) ); ``` ```angular import { source } from "@cloudinary/url-gen/actions/overlay"; import { scale } from "@cloudinary/url-gen/actions/resize"; import { image } from "@cloudinary/url-gen/qualifiers/source"; new CloudinaryImage("docs/car-2596344_1280.jpg").overlay( source( image("stamp-exclusive-premium").transformation( new Transformation().resize(scale().width(0.7).relative()) ) ) ); ``` ```js import { source } from "@cloudinary/url-gen/actions/overlay"; import { scale } from "@cloudinary/url-gen/actions/resize"; import { image } from "@cloudinary/url-gen/qualifiers/source"; new CloudinaryImage("docs/car-2596344_1280.jpg").overlay( source( image("stamp-exclusive-premium").transformation( new Transformation().resize(scale().width(0.7).relative()) ) ) ); ``` ```python CloudinaryImage("docs/car-2596344_1280.jpg").image(transformation=[ {'overlay': "stamp-exclusive-premium"}, {'flags': "relative", 'width': "0.7", 'crop': "scale"}, {'flags': "layer_apply"} ]) ``` ```php use Cloudinary\Transformation\Overlay; use Cloudinary\Transformation\Resize; use Cloudinary\Transformation\Source; (new ImageTag('docs/car-2596344_1280.jpg')) ->overlay(Overlay::source( Source::image("stamp-exclusive-premium") ->transformation((new Transformation()) ->resize(Resize::scale()->width(0.7) ->relative() )) )); ``` ```java cloudinary.url().transformation(new Transformation() .overlay(new Layer().publicId("stamp-exclusive-premium")).chain() .flags("relative").width(0.7).crop("scale").chain() .flags("layer_apply")).imageTag("docs/car-2596344_1280.jpg"); ``` ```ruby cl_image_tag("docs/car-2596344_1280.jpg", transformation: [ {overlay: "stamp-exclusive-premium"}, {flags: "relative", width: 0.7, crop: "scale"}, {flags: "layer_apply"} ]) ``` ```csharp cloudinary.Api.UrlImgUp.Transform(new Transformation() .Overlay(new Layer().PublicId("stamp-exclusive-premium")).Chain() .Flags("relative").Width(0.7).Crop("scale").Chain() .Flags("layer_apply")).BuildImageTag("docs/car-2596344_1280.jpg") ``` ```dart cloudinary.image('docs/car-2596344_1280.jpg').transformation(Transformation() .overlay(Overlay.source( Source.image("stamp-exclusive-premium") .transformation(new Transformation() .resize(Resize.scale().width(0.7) .relative() )) ))); ``` ```swift imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation() .setOverlay("stamp-exclusive-premium").chain() .setFlags("relative").setWidth(0.7).setCrop("scale").chain() .setFlags("layer_apply")).generate("docs/car-2596344_1280.jpg")!, cloudinary: cloudinary) ``` ```android MediaManager.get().url().transformation(new Transformation() .overlay(new Layer().publicId("stamp-exclusive-premium")).chain() .flags("relative").width(0.7).crop("scale").chain() .flags("layer_apply")).generate("docs/car-2596344_1280.jpg"); ``` ```flutter cloudinary.image('docs/car-2596344_1280.jpg').transformation(Transformation() .overlay(Overlay.source( Source.image("stamp-exclusive-premium") .transformation(new Transformation() .resize(Resize.scale().width(0.7) .relative() )) ))); ``` ```kotlin cloudinary.image { publicId("docs/car-2596344_1280.jpg") overlay(Overlay.source( Source.image("stamp-exclusive-premium") { transformation(Transformation { resize(Resize.scale() { width(0.7F) relative() }) }) })) }.generate() ``` ```jquery $.cloudinary.image("docs/car-2596344_1280.jpg", {transformation: [ {overlay: new cloudinary.Layer().publicId("stamp-exclusive-premium")}, {flags: "relative", width: "0.7", crop: "scale"}, {flags: "layer_apply"} ]}) ``` ```react_native import { source } from "@cloudinary/url-gen/actions/overlay"; import { scale } from "@cloudinary/url-gen/actions/resize"; import { image } from "@cloudinary/url-gen/qualifiers/source"; new CloudinaryImage("docs/car-2596344_1280.jpg").overlay( source( image("stamp-exclusive-premium").transformation( new Transformation().resize(scale().width(0.7).relative()) ) ) ); ``` ### Sizing relative to the detected region You can add the `region_relative` flag (`fl_region_relative` in URLs) to instruct Cloudinary to size your layers relative to the regions detected by the specified gravity type. * The region can be detected faces (`g_face`, `g_faces` ), detected OCR text regions (`g_ocr_text`) or pre-defined custom regions (`g_custom`). * This flag must be used in conjunction with a relative (decimal value) width or height qualifier. For example, to hide all the faces in an image by covering them with an emoji overlay, where each overlay is sized at 1.3x (130%) of each detected face (`l_happy_smiley/c_scale,fl_region_relative,w_1.3/fl_layer_apply,g_faces`): ![Hide faces in an image with emojis](https://res.cloudinary.com/demo/image/upload/l_happy_smiley/c_scale,fl_region_relative,w_1.3/fl_layer_apply,g_faces/rollercoaster.jpg "thumb: w_400") ```nodejs cloudinary.image("rollercoaster.jpg", {transformation: [ {overlay: "happy_smiley"}, {flags: "region_relative", width: "1.3", crop: "scale"}, {flags: "layer_apply", gravity: "faces"} ]}) ``` ```react import { source } from "@cloudinary/url-gen/actions/overlay"; import { scale } from "@cloudinary/url-gen/actions/resize"; import { image } from "@cloudinary/url-gen/qualifiers/source"; import { Position } from "@cloudinary/url-gen/qualifiers/position"; import { focusOn } from "@cloudinary/url-gen/qualifiers/gravity"; import { faces } from "@cloudinary/url-gen/qualifiers/focusOn"; new CloudinaryImage("rollercoaster.jpg").overlay( source( image("happy_smiley").transformation( new Transformation().resize(scale().width(1.3).regionRelative()) ) ).position(new Position().gravity(focusOn(faces()))) ); ``` ```vue import { source } from "@cloudinary/url-gen/actions/overlay"; import { scale } from "@cloudinary/url-gen/actions/resize"; import { image } from "@cloudinary/url-gen/qualifiers/source"; import { Position } from "@cloudinary/url-gen/qualifiers/position"; import { focusOn } from "@cloudinary/url-gen/qualifiers/gravity"; import { faces } from "@cloudinary/url-gen/qualifiers/focusOn"; new CloudinaryImage("rollercoaster.jpg").overlay( source( image("happy_smiley").transformation( new Transformation().resize(scale().width(1.3).regionRelative()) ) ).position(new Position().gravity(focusOn(faces()))) ); ``` ```angular import { source } from "@cloudinary/url-gen/actions/overlay"; import { scale } from "@cloudinary/url-gen/actions/resize"; import { image } from "@cloudinary/url-gen/qualifiers/source"; import { Position } from "@cloudinary/url-gen/qualifiers/position"; import { focusOn } from "@cloudinary/url-gen/qualifiers/gravity"; import { faces } from "@cloudinary/url-gen/qualifiers/focusOn"; new CloudinaryImage("rollercoaster.jpg").overlay( source( image("happy_smiley").transformation( new Transformation().resize(scale().width(1.3).regionRelative()) ) ).position(new Position().gravity(focusOn(faces()))) ); ``` ```js import { source } from "@cloudinary/url-gen/actions/overlay"; import { scale } from "@cloudinary/url-gen/actions/resize"; import { image } from "@cloudinary/url-gen/qualifiers/source"; import { Position } from "@cloudinary/url-gen/qualifiers/position"; import { focusOn } from "@cloudinary/url-gen/qualifiers/gravity"; import { faces } from "@cloudinary/url-gen/qualifiers/focusOn"; new CloudinaryImage("rollercoaster.jpg").overlay( source( image("happy_smiley").transformation( new Transformation().resize(scale().width(1.3).regionRelative()) ) ).position(new Position().gravity(focusOn(faces()))) ); ``` ```python CloudinaryImage("rollercoaster.jpg").image(transformation=[ {'overlay': "happy_smiley"}, {'flags': "region_relative", 'width': "1.3", 'crop': "scale"}, {'flags': "layer_apply", 'gravity': "faces"} ]) ``` ```php use Cloudinary\Transformation\Overlay; use Cloudinary\Transformation\Resize; use Cloudinary\Transformation\Source; use Cloudinary\Transformation\Position; use Cloudinary\Transformation\Gravity; use Cloudinary\Transformation\FocusOn; (new ImageTag('rollercoaster.jpg')) ->overlay(Overlay::source( Source::image("happy_smiley") ->transformation((new Transformation()) ->resize(Resize::scale()->width(1.3) ->regionRelative() )) ) ->position((new Position()) ->gravity( Gravity::focusOn( FocusOn::faces())) ) ); ``` ```java cloudinary.url().transformation(new Transformation() .overlay(new Layer().publicId("happy_smiley")).chain() .flags("region_relative").width(1.3).crop("scale").chain() .flags("layer_apply").gravity("faces")).imageTag("rollercoaster.jpg"); ``` ```ruby cl_image_tag("rollercoaster.jpg", transformation: [ {overlay: "happy_smiley"}, {flags: "region_relative", width: 1.3, crop: "scale"}, {flags: "layer_apply", gravity: "faces"} ]) ``` ```csharp cloudinary.Api.UrlImgUp.Transform(new Transformation() .Overlay(new Layer().PublicId("happy_smiley")).Chain() .Flags("region_relative").Width(1.3).Crop("scale").Chain() .Flags("layer_apply").Gravity("faces")).BuildImageTag("rollercoaster.jpg") ``` ```dart cloudinary.image('rollercoaster.jpg').transformation(Transformation() .overlay(Overlay.source( Source.image("happy_smiley") .transformation(new Transformation() .resize(Resize.scale().width(1.3) .regionRelative() )) ) .position(Position() .gravity( Gravity.focusOn( FocusOn.faces())) ) )); ``` ```swift imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation() .setOverlay("happy_smiley").chain() .setFlags("region_relative").setWidth(1.3).setCrop("scale").chain() .setFlags("layer_apply").setGravity("faces")).generate("rollercoaster.jpg")!, cloudinary: cloudinary) ``` ```android MediaManager.get().url().transformation(new Transformation() .overlay(new Layer().publicId("happy_smiley")).chain() .flags("region_relative").width(1.3).crop("scale").chain() .flags("layer_apply").gravity("faces")).generate("rollercoaster.jpg"); ``` ```flutter cloudinary.image('rollercoaster.jpg').transformation(Transformation() .overlay(Overlay.source( Source.image("happy_smiley") .transformation(new Transformation() .resize(Resize.scale().width(1.3) .regionRelative() )) ) .position(Position() .gravity( Gravity.focusOn( FocusOn.faces())) ) )); ``` ```kotlin cloudinary.image { publicId("rollercoaster.jpg") overlay(Overlay.source( Source.image("happy_smiley") { transformation(Transformation { resize(Resize.scale() { width(1.3F) regionRelative() }) }) }) { position(Position() { gravity( Gravity.focusOn( FocusOn.faces())) }) }) }.generate() ``` ```jquery $.cloudinary.image("rollercoaster.jpg", {transformation: [ {overlay: new cloudinary.Layer().publicId("happy_smiley")}, {flags: "region_relative", width: "1.3", crop: "scale"}, {flags: "layer_apply", gravity: "faces"} ]}) ``` ```react_native import { source } from "@cloudinary/url-gen/actions/overlay"; import { scale } from "@cloudinary/url-gen/actions/resize"; import { image } from "@cloudinary/url-gen/qualifiers/source"; import { Position } from "@cloudinary/url-gen/qualifiers/position"; import { focusOn } from "@cloudinary/url-gen/qualifiers/gravity"; import { faces } from "@cloudinary/url-gen/qualifiers/focusOn"; new CloudinaryImage("rollercoaster.jpg").overlay( source( image("happy_smiley").transformation( new Transformation().resize(scale().width(1.3).regionRelative()) ) ).position(new Position().gravity(focusOn(faces()))) ); ``` > **READING**: > > * [Layer syntax](layers): Learn the layer URL syntax and overlay types for images. > * [Layer placement](image_layer_placement): Position layers using gravity, offsets, and overflow behavior. > * [Text layer options](image_text_layers): Text styling, color, multi-line text, and special characters. > * [Underlays, watermarking, and special effects](image_layer_watermarking): Image underlays, watermarking, tiling, and special layer applications.