> ## Documentation Index
> This page is part of the Image and Video APIs product. Fetch the complete documentation index for Image and Video APIs at: https://cloudinary.com/documentation/llms-image-and-video-apis.txt?referrer=docpage and then use it to discover all relevant pages before exploring further.
> If your task extends beyond this product, fetch the top-level index covering all Cloudinary products and topics at: https://cloudinary.com/documentation/llms.txt?referrer=docpage

# Transform and customize UGC


There are [many transformations](transformation_reference) that you could make available to your users once they've uploaded their images or videos. Unlike [incoming transformations](user_generated_content_upload#transform_on_upload), these transformations don't affect the stored asset, but create different versions for on-the-fly delivery.  

This page presents a few ideas that you may want to consider for the four [example use cases](user_generated_content#popular_applications_of_ugc) followed throughout this guide: profile pictures, video reviews, marketplace products, and try before you buy.

## Recommended features by use case

The following table shows which features we recommend (marked ✅) for each of these use cases:

{table:class=no-borders overview textcenter}  | Profile pictures | Video reviews | Marketplace products | Try before you buy
---|---|---|---|---
[Improve image quality](#improve_image_quality) | ✅ | | ✅ | 
[Change the aspect ratio of an image](#change_the_aspect_ratio_of_an_image) | ✅ | | ✅ | ✅
[Change the aspect ratio of a video](#change_the_aspect_ratio_of_a_video) | | ✅ | ✅ |
[Standardize product images](#standardize_product_images) | | | ✅ |
[Conditionally apply transformations](#conditionally_apply_transformations) | | | ✅ |
[Apply a watermark](#apply_a_watermark) | | | ✅ | 
[Recompose an image for personalization](#recompose_an_image_for_personalization) | | | ✅  | ✅
[Help customers try before they buy](#help_customers_try_before_they_buy) | | | ✅  | ✅

> **TIP**: For additional e-commerce focused examples, see [Visual differentiators](ecommerce_visual_differentiators) in the Retail and e-commerce guide.

## Improve image quality

To ensure that your users' images are displayed at their best, there are various transformations that you can apply to improve the way they look. See the [image enhancement options](image_enhancement), which you can combine to achieve the best results.

Here, the image on the right uses generative restore, upscale, enhance and improve:

  
  

![Enhanced wedding image](https://res.cloudinary.com/demo/image/upload/e_gen_restore/e_upscale/e_enhance/e_improve/c_scale,w_300/docs/small-wedding-couple "with_image:false")

```nodejs
cloudinary.image("docs/small-wedding-couple", {transformation: [
  {effect: "gen_restore"},
  {effect: "upscale"},
  {effect: "enhance"},
  {effect: "improve"},
  {width: 300, crop: "scale"}
  ]})
```

```react
import { generativeRestore, upscale, enhance } from "@cloudinary/url-gen/actions/effect";
import { improve } from "@cloudinary/url-gen/actions/adjust";
import { scale } from "@cloudinary/url-gen/actions/resize";

new CloudinaryImage("docs/small-wedding-couple")
  .effect(generativeRestore())
  .effect(upscale())
  .effect(enhance())
  .adjust(improve())
  .resize(scale().width(300));
```

```vue
import { generativeRestore, upscale, enhance } from "@cloudinary/url-gen/actions/effect";
import { improve } from "@cloudinary/url-gen/actions/adjust";
import { scale } from "@cloudinary/url-gen/actions/resize";

new CloudinaryImage("docs/small-wedding-couple")
  .effect(generativeRestore())
  .effect(upscale())
  .effect(enhance())
  .adjust(improve())
  .resize(scale().width(300));
```

```angular
import { generativeRestore, upscale, enhance } from "@cloudinary/url-gen/actions/effect";
import { improve } from "@cloudinary/url-gen/actions/adjust";
import { scale } from "@cloudinary/url-gen/actions/resize";

new CloudinaryImage("docs/small-wedding-couple")
  .effect(generativeRestore())
  .effect(upscale())
  .effect(enhance())
  .adjust(improve())
  .resize(scale().width(300));
```

```js
import { generativeRestore, upscale, enhance } from "@cloudinary/url-gen/actions/effect";
import { improve } from "@cloudinary/url-gen/actions/adjust";
import { scale } from "@cloudinary/url-gen/actions/resize";

new CloudinaryImage("docs/small-wedding-couple")
  .effect(generativeRestore())
  .effect(upscale())
  .effect(enhance())
  .adjust(improve())
  .resize(scale().width(300));
```

```python
CloudinaryImage("docs/small-wedding-couple").image(transformation=[
  {'effect': "gen_restore"},
  {'effect': "upscale"},
  {'effect': "enhance"},
  {'effect': "improve"},
  {'width': 300, 'crop': "scale"}
  ])
```

```php
use Cloudinary\Transformation\Effect;
use Cloudinary\Transformation\Adjust;
use Cloudinary\Transformation\Resize;

(new ImageTag('docs/small-wedding-couple'))
	->effect(Effect::generativeRestore())
	->effect(Effect::upscale())
	->effect(Effect::enhance())
	->adjust(Adjust::improve())
	->resize(Resize::scale()->width(300));
```

```java
cloudinary.url().transformation(new Transformation()
  .effect("gen_restore").chain()
  .effect("upscale").chain()
  .effect("enhance").chain()
  .effect("improve").chain()
  .width(300).crop("scale")).imageTag("docs/small-wedding-couple");
```

```ruby
cl_image_tag("docs/small-wedding-couple", transformation: [
  {effect: "gen_restore"},
  {effect: "upscale"},
  {effect: "enhance"},
  {effect: "improve"},
  {width: 300, crop: "scale"}
  ])
```

```csharp
cloudinary.Api.UrlImgUp.Transform(new Transformation()
  .Effect("gen_restore").Chain()
  .Effect("upscale").Chain()
  .Effect("enhance").Chain()
  .Effect("improve").Chain()
  .Width(300).Crop("scale")).BuildImageTag("docs/small-wedding-couple")
```

```dart
cloudinary.image('docs/small-wedding-couple').transformation(Transformation()
	.effect(Effect.generativeRestore())
	.effect(Effect.upscale())
	.effect(Effect.enhance())
	.adjust(Adjust.improve())
	.resize(Resize.scale().width(300)));
```

```swift
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation()
  .setEffect("gen_restore").chain()
  .setEffect("upscale").chain()
  .setEffect("enhance").chain()
  .setEffect("improve").chain()
  .setWidth(300).setCrop("scale")).generate("docs/small-wedding-couple")!, cloudinary: cloudinary)
```

```android
MediaManager.get().url().transformation(new Transformation()
  .effect("gen_restore").chain()
  .effect("upscale").chain()
  .effect("enhance").chain()
  .effect("improve").chain()
  .width(300).crop("scale")).generate("docs/small-wedding-couple");
```

```flutter
cloudinary.image('docs/small-wedding-couple').transformation(Transformation()
	.effect(Effect.generativeRestore())
	.effect(Effect.upscale())
	.effect(Effect.enhance())
	.adjust(Adjust.improve())
	.resize(Resize.scale().width(300)));
```

```kotlin
cloudinary.image {
	publicId("docs/small-wedding-couple")
	 effect(Effect.generativeRestore())
	 effect(Effect.upscale())
	 effect(Effect.enhance())
	 adjust(Adjust.improve())
	 resize(Resize.scale() { width(300) }) 
}.generate()
```

```jquery
$.cloudinary.image("docs/small-wedding-couple", {transformation: [
  {effect: "gen_restore"},
  {effect: "upscale"},
  {effect: "enhance"},
  {effect: "improve"},
  {width: 300, crop: "scale"}
  ]})
```

```react_native
import { generativeRestore, upscale, enhance } from "@cloudinary/url-gen/actions/effect";
import { improve } from "@cloudinary/url-gen/actions/adjust";
import { scale } from "@cloudinary/url-gen/actions/resize";

new CloudinaryImage("docs/small-wedding-couple")
  .effect(generativeRestore())
  .effect(upscale())
  .effect(enhance())
  .adjust(improve())
  .resize(scale().width(300));
```

> **TIP**: [Watch a video tutorial](enhance_and_restore_images_tutorial) that shows how to apply these transformations using JavaScript.

## Change the aspect ratio of an image

If you need to change the aspect ratio of an image to fit a certain display layout, you have the options of padding the image to fill the extra dimensions, or cropping out certain parts of the image.

If padding, you can choose a [background color](color_effects#setting_background_color) for the padding, use an [automatically determined color](color_effects#content_aware_padding), or you can choose to use [generative AI](generative_fill) to fill the extra dimensions with realistic pixels. 

b_black 

b_auto

b_gen_fill

![Generative fill background](https://res.cloudinary.com/demo/image/upload/ar_1.0,b_gen_fill,c_pad,w_200/docs/bench-house.jpg "with_image:false")

```nodejs
cloudinary.image("docs/bench-house.jpg", {aspect_ratio: "1.0", background: "gen_fill", width: 200, crop: "pad"})
```

```react
import { pad } from "@cloudinary/url-gen/actions/resize";
import { generativeFill } from "@cloudinary/url-gen/qualifiers/background";

new CloudinaryImage("docs/bench-house.jpg").resize(
  pad()
    .width(200)
    .aspectRatio("1.0")
    .background(generativeFill())
);
```

```vue
import { pad } from "@cloudinary/url-gen/actions/resize";
import { generativeFill } from "@cloudinary/url-gen/qualifiers/background";

new CloudinaryImage("docs/bench-house.jpg").resize(
  pad()
    .width(200)
    .aspectRatio("1.0")
    .background(generativeFill())
);
```

```angular
import { pad } from "@cloudinary/url-gen/actions/resize";
import { generativeFill } from "@cloudinary/url-gen/qualifiers/background";

new CloudinaryImage("docs/bench-house.jpg").resize(
  pad()
    .width(200)
    .aspectRatio("1.0")
    .background(generativeFill())
);
```

```js
import { pad } from "@cloudinary/url-gen/actions/resize";
import { generativeFill } from "@cloudinary/url-gen/qualifiers/background";

new CloudinaryImage("docs/bench-house.jpg").resize(
  pad()
    .width(200)
    .aspectRatio("1.0")
    .background(generativeFill())
);
```

```python
CloudinaryImage("docs/bench-house.jpg").image(aspect_ratio="1.0", background="gen_fill", width=200, crop="pad")
```

```php
use Cloudinary\Transformation\Resize;
use Cloudinary\Transformation\Background;

(new ImageTag('docs/bench-house.jpg'))
	->resize(Resize::pad()->width(200)
->aspectRatio(1.0)
	->background(
	Background::generativeFill())
	);
```

```java
cloudinary.url().transformation(new Transformation().aspectRatio("1.0").background("gen_fill").width(200).crop("pad")).imageTag("docs/bench-house.jpg");
```

```ruby
cl_image_tag("docs/bench-house.jpg", aspect_ratio: "1.0", background: "gen_fill", width: 200, crop: "pad")
```

```csharp
cloudinary.Api.UrlImgUp.Transform(new Transformation().AspectRatio("1.0").Background("gen_fill").Width(200).Crop("pad")).BuildImageTag("docs/bench-house.jpg")
```

```dart
cloudinary.image('docs/bench-house.jpg').transformation(Transformation()
	.resize(Resize.pad().width(200)
.aspectRatio('1.0')
	.background(
	Background.generativeFill())
	));
```

```swift
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setAspectRatio("1.0").setBackground("gen_fill").setWidth(200).setCrop("pad")).generate("docs/bench-house.jpg")!, cloudinary: cloudinary)
```

```android
MediaManager.get().url().transformation(new Transformation().aspectRatio("1.0").background("gen_fill").width(200).crop("pad")).generate("docs/bench-house.jpg");
```

```flutter
cloudinary.image('docs/bench-house.jpg').transformation(Transformation()
	.resize(Resize.pad().width(200)
.aspectRatio('1.0')
	.background(
	Background.generativeFill())
	));
```

```kotlin
cloudinary.image {
	publicId("docs/bench-house.jpg")
	 resize(Resize.pad() { width(200)
 aspectRatio(1.0F)
	 background(
	Background.generativeFill())
	 }) 
}.generate()
```

```jquery
$.cloudinary.image("docs/bench-house.jpg", {aspect_ratio: "1.0", background: "gen_fill", width: 200, crop: "pad"})
```

```react_native
import { pad } from "@cloudinary/url-gen/actions/resize";
import { generativeFill } from "@cloudinary/url-gen/qualifiers/background";

new CloudinaryImage("docs/bench-house.jpg").resize(
  pad()
    .width(200)
    .aspectRatio("1.0")
    .background(generativeFill())
);
```

If cropping, you'll want to make sure you keep the most important part of the image in the crop, which may not necessarily be in the center. You can use [automatic cropping](image_crop_modes#c_auto) with [automatic gravity](image_automatic_gravity) to achieve this.

Uploaded image 

Automatic Crop

![Automatically cropped mountain scene](https://res.cloudinary.com/demo/image/upload/ar_1.0,c_auto,g_auto,w_200/mountain_scene.jpg "with_image:false")

```nodejs
cloudinary.image("mountain_scene.jpg", {aspect_ratio: "1.0", gravity: "auto", width: 200, crop: "auto"})
```

```react
import { auto } from "@cloudinary/url-gen/actions/resize";
import { autoGravity } from "@cloudinary/url-gen/qualifiers/gravity";

new CloudinaryImage("mountain_scene.jpg").resize(
  auto()
    .width(200)
    .aspectRatio("1.0")
    .gravity(autoGravity())
);
```

```vue
import { auto } from "@cloudinary/url-gen/actions/resize";
import { autoGravity } from "@cloudinary/url-gen/qualifiers/gravity";

new CloudinaryImage("mountain_scene.jpg").resize(
  auto()
    .width(200)
    .aspectRatio("1.0")
    .gravity(autoGravity())
);
```

```angular
import { auto } from "@cloudinary/url-gen/actions/resize";
import { autoGravity } from "@cloudinary/url-gen/qualifiers/gravity";

new CloudinaryImage("mountain_scene.jpg").resize(
  auto()
    .width(200)
    .aspectRatio("1.0")
    .gravity(autoGravity())
);
```

```js
import { auto } from "@cloudinary/url-gen/actions/resize";
import { autoGravity } from "@cloudinary/url-gen/qualifiers/gravity";

new CloudinaryImage("mountain_scene.jpg").resize(
  auto()
    .width(200)
    .aspectRatio("1.0")
    .gravity(autoGravity())
);
```

```python
CloudinaryImage("mountain_scene.jpg").image(aspect_ratio="1.0", gravity="auto", width=200, crop="auto")
```

```php
use Cloudinary\Transformation\Resize;
use Cloudinary\Transformation\Gravity;

(new ImageTag('mountain_scene.jpg'))
	->resize(Resize::auto()->width(200)
->aspectRatio(1.0)
	->gravity(
	Gravity::autoGravity())
	);
```

```java
cloudinary.url().transformation(new Transformation().aspectRatio("1.0").gravity("auto").width(200).crop("auto")).imageTag("mountain_scene.jpg");
```

```ruby
cl_image_tag("mountain_scene.jpg", aspect_ratio: "1.0", gravity: "auto", width: 200, crop: "auto")
```

```csharp
cloudinary.Api.UrlImgUp.Transform(new Transformation().AspectRatio("1.0").Gravity("auto").Width(200).Crop("auto")).BuildImageTag("mountain_scene.jpg")
```

```dart
cloudinary.image('mountain_scene.jpg').transformation(Transformation()
	.resize(Resize.auto().width(200)
.aspectRatio('1.0')
	.gravity(
	Gravity.autoGravity())
	));
```

```swift
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setAspectRatio("1.0").setGravity("auto").setWidth(200).setCrop("auto")).generate("mountain_scene.jpg")!, cloudinary: cloudinary)
```

```android
MediaManager.get().url().transformation(new Transformation().aspectRatio("1.0").gravity("auto").width(200).crop("auto")).generate("mountain_scene.jpg");
```

```flutter
cloudinary.image('mountain_scene.jpg').transformation(Transformation()
	.resize(Resize.auto().width(200)
.aspectRatio('1.0')
	.gravity(
	Gravity.autoGravity())
	));
```

```kotlin
cloudinary.image {
	publicId("mountain_scene.jpg")
	 resize(Resize.auto() { width(200)
 aspectRatio(1.0F)
	 gravity(
	Gravity.autoGravity())
	 }) 
}.generate()
```

```jquery
$.cloudinary.image("mountain_scene.jpg", {aspect_ratio: "1.0", gravity: "auto", width: 200, crop: "auto"})
```

```react_native
import { auto } from "@cloudinary/url-gen/actions/resize";
import { autoGravity } from "@cloudinary/url-gen/qualifiers/gravity";

new CloudinaryImage("mountain_scene.jpg").resize(
  auto()
    .width(200)
    .aspectRatio("1.0")
    .gravity(autoGravity())
);
```

## Change the aspect ratio of a video

Similar to changing the aspect ratio of an image, you can resize a video to fit specific dimensions either by padding the video to fill the extra dimensions, or by cropping out certain parts of the video.

If padding, you can choose a [background color](video_color_effects#background_color) for the padding, or [blur the video](video_resize_modes#pad_with_blurred_video_background) for the padding.

  
    
    
    
  
Pad with a pink background<code>b_pink,c_pad

  
    
    
    
  
Pad with blurred background<code>c_pad,b_blurred:400:15

![Blurred background](https://res.cloudinary.com/demo/video/upload/b_blurred:400:15,c_pad,h_300,w_300/q_auto/docs/g_auto_demo.mp4 "with_image:false")

```nodejs
cloudinary.video("docs/g_auto_demo", {transformation: [
  {background: "blurred:400:15", height: 300, width: 300, crop: "pad"},
  {quality: "auto"}
  ]})
```

```react
import { pad } from "@cloudinary/url-gen/actions/resize";
import { quality } from "@cloudinary/url-gen/actions/delivery";
import { auto } from "@cloudinary/url-gen/qualifiers/quality";
import { blurred } from "@cloudinary/url-gen/qualifiers/background";

new CloudinaryVideo("docs/g_auto_demo.mp4")
  .resize(
    pad()
      .width(300)
      .height(300)
      .background(blurred().intensity(400).brightness(15))
  )
  .delivery(quality(auto()));
```

```vue
import { pad } from "@cloudinary/url-gen/actions/resize";
import { quality } from "@cloudinary/url-gen/actions/delivery";
import { auto } from "@cloudinary/url-gen/qualifiers/quality";
import { blurred } from "@cloudinary/url-gen/qualifiers/background";

new CloudinaryVideo("docs/g_auto_demo.mp4")
  .resize(
    pad()
      .width(300)
      .height(300)
      .background(blurred().intensity(400).brightness(15))
  )
  .delivery(quality(auto()));
```

```angular
import { pad } from "@cloudinary/url-gen/actions/resize";
import { quality } from "@cloudinary/url-gen/actions/delivery";
import { auto } from "@cloudinary/url-gen/qualifiers/quality";
import { blurred } from "@cloudinary/url-gen/qualifiers/background";

new CloudinaryVideo("docs/g_auto_demo.mp4")
  .resize(
    pad()
      .width(300)
      .height(300)
      .background(blurred().intensity(400).brightness(15))
  )
  .delivery(quality(auto()));
```

```js
import { pad } from "@cloudinary/url-gen/actions/resize";
import { quality } from "@cloudinary/url-gen/actions/delivery";
import { auto } from "@cloudinary/url-gen/qualifiers/quality";
import { blurred } from "@cloudinary/url-gen/qualifiers/background";

new CloudinaryVideo("docs/g_auto_demo.mp4")
  .resize(
    pad()
      .width(300)
      .height(300)
      .background(blurred().intensity(400).brightness(15))
  )
  .delivery(quality(auto()));
```

```python
CloudinaryVideo("docs/g_auto_demo").video(transformation=[
  {'background': "blurred:400:15", 'height': 300, 'width': 300, 'crop': "pad"},
  {'quality': "auto"}
  ])
```

```php
use Cloudinary\Transformation\Resize;
use Cloudinary\Transformation\Delivery;
use Cloudinary\Transformation\Quality;
use Cloudinary\Transformation\Background;

(new VideoTag('docs/g_auto_demo.mp4'))
	->resize(Resize::pad()->width(300)
->height(300)
	->background(
	Background::blurred()->intensity(400)
->brightness(15))
	)
	->delivery(Delivery::quality(
	Quality::auto()));
```

```java
cloudinary.url().transformation(new Transformation()
  .background("blurred:400:15").height(300).width(300).crop("pad").chain()
  .quality("auto")).videoTag("docs/g_auto_demo");
```

```ruby
cl_video_tag("docs/g_auto_demo", transformation: [
  {background: "blurred:400:15", height: 300, width: 300, crop: "pad"},
  {quality: "auto"}
  ])
```

```csharp
cloudinary.Api.UrlVideoUp.Transform(new Transformation()
  .Background("blurred:400:15").Height(300).Width(300).Crop("pad").Chain()
  .Quality("auto")).BuildVideoTag("docs/g_auto_demo")
```

```dart
cloudinary.video('docs/g_auto_demo.mp4').transformation(Transformation()
	.resize(Resize.pad().width(300)
.height(300)
	.background(
	Background.blurred().intensity(400)
.brightness(15))
	)
	.delivery(Delivery.quality(
	Quality.auto())));
```

```swift
cloudinary.createUrl().setResourceType("video").setTransformation(CLDTransformation()
  .setBackground("blurred:400:15").setHeight(300).setWidth(300).setCrop("pad").chain()
  .setQuality("auto")).generate("docs/g_auto_demo.mp4")
```

```android
MediaManager.get().url().transformation(new Transformation()
  .background("blurred:400:15").height(300).width(300).crop("pad").chain()
  .quality("auto")).resourceType("video").generate("docs/g_auto_demo.mp4");
```

```flutter
cloudinary.video('docs/g_auto_demo.mp4').transformation(Transformation()
	.resize(Resize.pad().width(300)
.height(300)
	.background(
	Background.blurred().intensity(400)
.brightness(15))
	)
	.delivery(Delivery.quality(
	Quality.auto())));
```

```kotlin
cloudinary.video {
	publicId("docs/g_auto_demo.mp4")
	 resize(Resize.pad() { width(300)
 height(300)
	 background(
	Background.blurred() { intensity(400)
 brightness(15) })
	 })
	 delivery(Delivery.quality(
	Quality.auto())) 
}.generate()
```

```jquery
$.cloudinary.video("docs/g_auto_demo", {transformation: [
  {background: "blurred:400:15", height: 300, width: 300, crop: "pad"},
  {quality: "auto"}
  ]})
```

```react_native
import { pad } from "@cloudinary/url-gen/actions/resize";
import { quality } from "@cloudinary/url-gen/actions/delivery";
import { auto } from "@cloudinary/url-gen/qualifiers/quality";
import { blurred } from "@cloudinary/url-gen/qualifiers/background";

new CloudinaryVideo("docs/g_auto_demo.mp4")
  .resize(
    pad()
      .width(300)
      .height(300)
      .background(blurred().intensity(400).brightness(15))
  )
  .delivery(quality(auto()));
```

If cropping, you'll want to make sure you keep the most important part of the video in the crop, which may not necessarily be in the center. You can use [fill cropping](video_crop_modes#fill) with [automatic gravity](video_gravity) to achieve this.

  
    
    
    
  
Uploaded video

  
    
    
    
  
Crop with automatic gravity

![Crop with automatic gravity](https://res.cloudinary.com/demo/video/upload/ar_1.0,c_fill,g_auto,h_200/q_auto/docs/walking_talking.mp4 "with_image:false")

```nodejs
cloudinary.video("docs/walking_talking", {transformation: [
  {aspect_ratio: "1.0", gravity: "auto", height: 200, crop: "fill"},
  {quality: "auto"}
  ]})
```

```react
import { fill } from "@cloudinary/url-gen/actions/resize";
import { quality } from "@cloudinary/url-gen/actions/delivery";
import { auto } from "@cloudinary/url-gen/qualifiers/quality";
import { autoGravity } from "@cloudinary/url-gen/qualifiers/gravity";

new CloudinaryVideo("docs/walking_talking.mp4")
  .resize(
    fill()
      .height(200)
      .aspectRatio("1.0")
      .gravity(autoGravity())
  )
  .delivery(quality(auto()));
```

```vue
import { fill } from "@cloudinary/url-gen/actions/resize";
import { quality } from "@cloudinary/url-gen/actions/delivery";
import { auto } from "@cloudinary/url-gen/qualifiers/quality";
import { autoGravity } from "@cloudinary/url-gen/qualifiers/gravity";

new CloudinaryVideo("docs/walking_talking.mp4")
  .resize(
    fill()
      .height(200)
      .aspectRatio("1.0")
      .gravity(autoGravity())
  )
  .delivery(quality(auto()));
```

```angular
import { fill } from "@cloudinary/url-gen/actions/resize";
import { quality } from "@cloudinary/url-gen/actions/delivery";
import { auto } from "@cloudinary/url-gen/qualifiers/quality";
import { autoGravity } from "@cloudinary/url-gen/qualifiers/gravity";

new CloudinaryVideo("docs/walking_talking.mp4")
  .resize(
    fill()
      .height(200)
      .aspectRatio("1.0")
      .gravity(autoGravity())
  )
  .delivery(quality(auto()));
```

```js
import { fill } from "@cloudinary/url-gen/actions/resize";
import { quality } from "@cloudinary/url-gen/actions/delivery";
import { auto } from "@cloudinary/url-gen/qualifiers/quality";
import { autoGravity } from "@cloudinary/url-gen/qualifiers/gravity";

new CloudinaryVideo("docs/walking_talking.mp4")
  .resize(
    fill()
      .height(200)
      .aspectRatio("1.0")
      .gravity(autoGravity())
  )
  .delivery(quality(auto()));
```

```python
CloudinaryVideo("docs/walking_talking").video(transformation=[
  {'aspect_ratio': "1.0", 'gravity': "auto", 'height': 200, 'crop': "fill"},
  {'quality': "auto"}
  ])
```

```php
use Cloudinary\Transformation\Resize;
use Cloudinary\Transformation\Delivery;
use Cloudinary\Transformation\Quality;
use Cloudinary\Transformation\Gravity;

(new VideoTag('docs/walking_talking.mp4'))
	->resize(Resize::fill()->height(200)
->aspectRatio(1.0)
	->gravity(
	Gravity::autoGravity())
	)
	->delivery(Delivery::quality(
	Quality::auto()));
```

```java
cloudinary.url().transformation(new Transformation()
  .aspectRatio("1.0").gravity("auto").height(200).crop("fill").chain()
  .quality("auto")).videoTag("docs/walking_talking");
```

```ruby
cl_video_tag("docs/walking_talking", transformation: [
  {aspect_ratio: "1.0", gravity: "auto", height: 200, crop: "fill"},
  {quality: "auto"}
  ])
```

```csharp
cloudinary.Api.UrlVideoUp.Transform(new Transformation()
  .AspectRatio("1.0").Gravity("auto").Height(200).Crop("fill").Chain()
  .Quality("auto")).BuildVideoTag("docs/walking_talking")
```

```dart
cloudinary.video('docs/walking_talking.mp4').transformation(Transformation()
	.resize(Resize.fill().height(200)
.aspectRatio('1.0')
	.gravity(
	Gravity.autoGravity())
	)
	.delivery(Delivery.quality(
	Quality.auto())));
```

```swift
cloudinary.createUrl().setResourceType("video").setTransformation(CLDTransformation()
  .setAspectRatio("1.0").setGravity("auto").setHeight(200).setCrop("fill").chain()
  .setQuality("auto")).generate("docs/walking_talking.mp4")
```

```android
MediaManager.get().url().transformation(new Transformation()
  .aspectRatio("1.0").gravity("auto").height(200).crop("fill").chain()
  .quality("auto")).resourceType("video").generate("docs/walking_talking.mp4");
```

```flutter
cloudinary.video('docs/walking_talking.mp4').transformation(Transformation()
	.resize(Resize.fill().height(200)
.aspectRatio('1.0')
	.gravity(
	Gravity.autoGravity())
	)
	.delivery(Delivery.quality(
	Quality.auto())));
```

```kotlin
cloudinary.video {
	publicId("docs/walking_talking.mp4")
	 resize(Resize.fill() { height(200)
 aspectRatio(1.0F)
	 gravity(
	Gravity.autoGravity())
	 })
	 delivery(Delivery.quality(
	Quality.auto())) 
}.generate()
```

```jquery
$.cloudinary.video("docs/walking_talking", {transformation: [
  {aspect_ratio: "1.0", gravity: "auto", height: 200, crop: "fill"},
  {quality: "auto"}
  ]})
```

```react_native
import { fill } from "@cloudinary/url-gen/actions/resize";
import { quality } from "@cloudinary/url-gen/actions/delivery";
import { auto } from "@cloudinary/url-gen/qualifiers/quality";
import { autoGravity } from "@cloudinary/url-gen/qualifiers/gravity";

new CloudinaryVideo("docs/walking_talking.mp4")
  .resize(
    fill()
      .height(200)
      .aspectRatio("1.0")
      .gravity(autoGravity())
  )
  .delivery(quality(auto()));
```

## Standardize product images

If your website is a marketplace that allows businesses to sell their products, you can help them to standardize their product images, supporting branding, and saving them valuable time ensuring that images meet specific requirements of the platform. 

For example, [remove backgrounds](background_removal), apply the same background color, center objects, and round corners. 

Uploaded image 

Standardized product image

![Standardized product image](https://res.cloudinary.com/demo/image/upload/e_background_removal/e_trim/b_lightgray,c_lpad,w_1.1/r_20/docs/cupcake.png "with_image:false")

```nodejs
cloudinary.image("docs/cupcake.png", {transformation: [
  {effect: "background_removal"},
  {effect: "trim"},
  {background: "lightgray", width: "1.1", crop: "lpad"},
  {radius: 20}
  ]})
```

```react
import { backgroundRemoval } from "@cloudinary/url-gen/actions/effect";
import { trim } from "@cloudinary/url-gen/actions/reshape";
import { limitPad } from "@cloudinary/url-gen/actions/resize";
import { byRadius } from "@cloudinary/url-gen/actions/roundCorners";
import { color } from "@cloudinary/url-gen/qualifiers/background";

new CloudinaryImage("docs/cupcake.png")
  .effect(backgroundRemoval())
  .reshape(trim())
  .resize(
    limitPad()
      .width(1.1)
      .background(color("lightgray"))
  )
  .roundCorners(byRadius(20));
```

```vue
import { backgroundRemoval } from "@cloudinary/url-gen/actions/effect";
import { trim } from "@cloudinary/url-gen/actions/reshape";
import { limitPad } from "@cloudinary/url-gen/actions/resize";
import { byRadius } from "@cloudinary/url-gen/actions/roundCorners";
import { color } from "@cloudinary/url-gen/qualifiers/background";

new CloudinaryImage("docs/cupcake.png")
  .effect(backgroundRemoval())
  .reshape(trim())
  .resize(
    limitPad()
      .width(1.1)
      .background(color("lightgray"))
  )
  .roundCorners(byRadius(20));
```

```angular
import { backgroundRemoval } from "@cloudinary/url-gen/actions/effect";
import { trim } from "@cloudinary/url-gen/actions/reshape";
import { limitPad } from "@cloudinary/url-gen/actions/resize";
import { byRadius } from "@cloudinary/url-gen/actions/roundCorners";
import { color } from "@cloudinary/url-gen/qualifiers/background";

new CloudinaryImage("docs/cupcake.png")
  .effect(backgroundRemoval())
  .reshape(trim())
  .resize(
    limitPad()
      .width(1.1)
      .background(color("lightgray"))
  )
  .roundCorners(byRadius(20));
```

```js
import { backgroundRemoval } from "@cloudinary/url-gen/actions/effect";
import { trim } from "@cloudinary/url-gen/actions/reshape";
import { limitPad } from "@cloudinary/url-gen/actions/resize";
import { byRadius } from "@cloudinary/url-gen/actions/roundCorners";
import { color } from "@cloudinary/url-gen/qualifiers/background";

new CloudinaryImage("docs/cupcake.png")
  .effect(backgroundRemoval())
  .reshape(trim())
  .resize(
    limitPad()
      .width(1.1)
      .background(color("lightgray"))
  )
  .roundCorners(byRadius(20));
```

```python
CloudinaryImage("docs/cupcake.png").image(transformation=[
  {'effect': "background_removal"},
  {'effect': "trim"},
  {'background': "lightgray", 'width': "1.1", 'crop': "lpad"},
  {'radius': 20}
  ])
```

```php
use Cloudinary\Transformation\Effect;
use Cloudinary\Transformation\Reshape;
use Cloudinary\Transformation\Resize;
use Cloudinary\Transformation\RoundCorners;
use Cloudinary\Transformation\Background;

(new ImageTag('docs/cupcake.png'))
	->effect(Effect::backgroundRemoval())
	->reshape(Reshape::trim())
	->resize(Resize::limitPad()->width(1.1)
	->background(
	Background::color(Color::LIGHTGRAY))
	)
	->roundCorners(RoundCorners::byRadius(20));
```

```java
cloudinary.url().transformation(new Transformation()
  .effect("background_removal").chain()
  .effect("trim").chain()
  .background("lightgray").width(1.1).crop("lpad").chain()
  .radius(20)).imageTag("docs/cupcake.png");
```

```ruby
cl_image_tag("docs/cupcake.png", transformation: [
  {effect: "background_removal"},
  {effect: "trim"},
  {background: "lightgray", width: 1.1, crop: "lpad"},
  {radius: 20}
  ])
```

```csharp
cloudinary.Api.UrlImgUp.Transform(new Transformation()
  .Effect("background_removal").Chain()
  .Effect("trim").Chain()
  .Background("lightgray").Width(1.1).Crop("lpad").Chain()
  .Radius(20)).BuildImageTag("docs/cupcake.png")
```

```dart
cloudinary.image('docs/cupcake.png').transformation(Transformation()
	.effect(Effect.backgroundRemoval())
	.reshape(Reshape.trim())
	.resize(Resize.limitPad().width(1.1)
	.background(
	Background.color(Color.LIGHTGRAY))
	)
	.roundCorners(RoundCorners.byRadius(20)));
```

```swift
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation()
  .setEffect("background_removal").chain()
  .setEffect("trim").chain()
  .setBackground("lightgray").setWidth(1.1).setCrop("lpad").chain()
  .setRadius(20)).generate("docs/cupcake.png")!, cloudinary: cloudinary)
```

```android
MediaManager.get().url().transformation(new Transformation()
  .effect("background_removal").chain()
  .effect("trim").chain()
  .background("lightgray").width(1.1).crop("lpad").chain()
  .radius(20)).generate("docs/cupcake.png");
```

```flutter
cloudinary.image('docs/cupcake.png').transformation(Transformation()
	.addTransformation("e_background_removal/e_trim/b_lightgray,c_lpad,w_1.1/r_20"));
```

```kotlin
cloudinary.image {
	publicId("docs/cupcake.png")
	 effect(Effect.backgroundRemoval())
	 reshape(Reshape.trim())
	 resize(Resize.limitPad() { width(1.1F)
	 background(
	Background.color(Color.LIGHTGRAY))
	 })
	 roundCorners(RoundCorners.byRadius(20)) 
}.generate()
```

```jquery
$.cloudinary.image("docs/cupcake.png", {transformation: [
  {effect: "background_removal"},
  {effect: "trim"},
  {background: "lightgray", width: "1.1", crop: "lpad"},
  {radius: 20}
  ]})
```

```react_native
import { backgroundRemoval } from "@cloudinary/url-gen/actions/effect";
import { trim } from "@cloudinary/url-gen/actions/reshape";
import { limitPad } from "@cloudinary/url-gen/actions/resize";
import { byRadius } from "@cloudinary/url-gen/actions/roundCorners";
import { color } from "@cloudinary/url-gen/qualifiers/background";

new CloudinaryImage("docs/cupcake.png")
  .effect(backgroundRemoval())
  .reshape(trim())
  .resize(
    limitPad()
      .width(1.1)
      .background(color("lightgray"))
  )
  .roundCorners(byRadius(20));
```

## Conditionally apply transformations

You can apply [conditional transformations](video_conditional_expressions) to selectively transform certain images or videos. This is great for UGC use cases where you don't know what your users are uploading. You can test attributes of the media, or look at tags that may have been applied on upload.

For example, if the uploaded video has a portrait aspect ratio, then apply blurred padding when delivering it, otherwise fill the display area with the video:

  
    
    
    
  
Portrait video

  
    
    
    
  
Landscape video

![Conditional transformation](https://res.cloudinary.com/demo/video/upload/c_scale,h_200/if_ar_lt_1.0/b_blurred,c_pad,h_200,w_300/if_else/c_fill,h_200,w_300/if_end/docs/woman-camera-landscape.mp4 "with_image:false")

```nodejs
cloudinary.video("docs/woman-camera-landscape", {transformation: [
  {height: 200, crop: "scale"},
  {if: "ar_lt_1.0"},
  {background: "blurred", height: 200, width: 300, crop: "pad"},
  {if: "else"},
  {height: 200, width: 300, crop: "fill"},
  {if: "end"}
  ]})
```

```react
import { scale, pad, fill } from "@cloudinary/url-gen/actions/resize";
import { ifCondition } from "@cloudinary/url-gen/actions/conditional";
import { blurred } from "@cloudinary/url-gen/qualifiers/background";

new CloudinaryVideo("docs/woman-camera-landscape.mp4")
  .resize(scale().height(200))
  .conditional(
    ifCondition(
      "aspect_ratio < 1.0",
      new Transformation().resize(
        pad().width(300).height(200).background(blurred())
      )
    ).otherwise(new Transformation().resize(fill().width(300).height(200)))
  );
```

```vue
import { scale, pad, fill } from "@cloudinary/url-gen/actions/resize";
import { ifCondition } from "@cloudinary/url-gen/actions/conditional";
import { blurred } from "@cloudinary/url-gen/qualifiers/background";

new CloudinaryVideo("docs/woman-camera-landscape.mp4")
  .resize(scale().height(200))
  .conditional(
    ifCondition(
      "aspect_ratio < 1.0",
      new Transformation().resize(
        pad().width(300).height(200).background(blurred())
      )
    ).otherwise(new Transformation().resize(fill().width(300).height(200)))
  );
```

```angular
import { scale, pad, fill } from "@cloudinary/url-gen/actions/resize";
import { ifCondition } from "@cloudinary/url-gen/actions/conditional";
import { blurred } from "@cloudinary/url-gen/qualifiers/background";

new CloudinaryVideo("docs/woman-camera-landscape.mp4")
  .resize(scale().height(200))
  .conditional(
    ifCondition(
      "aspect_ratio < 1.0",
      new Transformation().resize(
        pad().width(300).height(200).background(blurred())
      )
    ).otherwise(new Transformation().resize(fill().width(300).height(200)))
  );
```

```js
import { scale, pad, fill } from "@cloudinary/url-gen/actions/resize";
import { ifCondition } from "@cloudinary/url-gen/actions/conditional";
import { blurred } from "@cloudinary/url-gen/qualifiers/background";

new CloudinaryVideo("docs/woman-camera-landscape.mp4")
  .resize(scale().height(200))
  .conditional(
    ifCondition(
      "aspect_ratio < 1.0",
      new Transformation().resize(
        pad().width(300).height(200).background(blurred())
      )
    ).otherwise(new Transformation().resize(fill().width(300).height(200)))
  );
```

```python
CloudinaryVideo("docs/woman-camera-landscape").video(transformation=[
  {'height': 200, 'crop': "scale"},
  {'if': "ar_lt_1.0"},
  {'background': "blurred", 'height': 200, 'width': 300, 'crop': "pad"},
  {'if': "else"},
  {'height': 200, 'width': 300, 'crop': "fill"},
  {'if': "end"}
  ])
```

```php
use Cloudinary\Transformation\Resize;
use Cloudinary\Transformation\Conditional;
use Cloudinary\Transformation\Background;

(new VideoTag('docs/woman-camera-landscape.mp4'))
	->resize(Resize::scale()->height(200))
	->conditional(Conditional::ifCondition("aspect_ratio < 1.0",(new Transformation())
	->resize(Resize::pad()->width(300)
->height(200)
	->background(
	Background::blurred())
	))
	->otherwise((new Transformation())
	->resize(Resize::fill()->width(300)
->height(200)))
	);
```

```java
cloudinary.url().transformation(new Transformation()
  .height(200).crop("scale").chain()
  .if("ar_lt_1.0").chain()
  .background("blurred").height(200).width(300).crop("pad").chain()
  .if("else").chain()
  .height(200).width(300).crop("fill").chain()
  .if("end")).videoTag("docs/woman-camera-landscape");
```

```ruby
cl_video_tag("docs/woman-camera-landscape", transformation: [
  {height: 200, crop: "scale"},
  {if: "ar_lt_1.0"},
  {background: "blurred", height: 200, width: 300, crop: "pad"},
  {if: "else"},
  {height: 200, width: 300, crop: "fill"},
  {if: "end"}
  ])
```

```csharp
cloudinary.Api.UrlVideoUp.Transform(new Transformation()
  .Height(200).Crop("scale").Chain()
  .If("ar_lt_1.0").Chain()
  .Background("blurred").Height(200).Width(300).Crop("pad").Chain()
  .If("else").Chain()
  .Height(200).Width(300).Crop("fill").Chain()
  .If("end")).BuildVideoTag("docs/woman-camera-landscape")
```

```dart
cloudinary.video('docs/woman-camera-landscape.mp4').transformation(Transformation()
	.addTransformation("c_scale,h_200/if_ar_lt_1.0/b_blurred,c_pad,h_200,w_300/if_else/c_fill,h_200,w_300/if_end"));
```

```swift
cloudinary.createUrl().setResourceType("video").setTransformation(CLDTransformation()
  .setHeight(200).setCrop("scale").chain()
  .setIf("ar_lt_1.0").chain()
  .setBackground("blurred").setHeight(200).setWidth(300).setCrop("pad").chain()
  .setIf("else").chain()
  .setHeight(200).setWidth(300).setCrop("fill").chain()
  .setIf("end")).generate("docs/woman-camera-landscape.mp4")
```

```android
MediaManager.get().url().transformation(new Transformation()
  .height(200).crop("scale").chain()
  .if("ar_lt_1.0").chain()
  .background("blurred").height(200).width(300).crop("pad").chain()
  .if("else").chain()
  .height(200).width(300).crop("fill").chain()
  .if("end")).resourceType("video").generate("docs/woman-camera-landscape.mp4");
```

```flutter
cloudinary.video('docs/woman-camera-landscape.mp4').transformation(Transformation()
	.addTransformation("c_scale,h_200/if_ar_lt_1.0/b_blurred,c_pad,h_200,w_300/if_else/c_fill,h_200,w_300/if_end"));
```

```kotlin
cloudinary.video {
	publicId("docs/woman-camera-landscape.mp4")
	 addTransformation("c_scale,h_200/if_ar_lt_1.0/b_blurred,c_pad,h_200,w_300/if_else/c_fill,h_200,w_300/if_end") 
}.generate()
```

```jquery
$.cloudinary.video("docs/woman-camera-landscape", {transformation: [
  {height: 200, crop: "scale"},
  {if: "ar_lt_1.0"},
  {background: "blurred", height: 200, width: 300, crop: "pad"},
  {if: "else"},
  {height: 200, width: 300, crop: "fill"},
  {if: "end"}
  ]})
```

```react_native
import { scale, pad, fill } from "@cloudinary/url-gen/actions/resize";
import { ifCondition } from "@cloudinary/url-gen/actions/conditional";
import { blurred } from "@cloudinary/url-gen/qualifiers/background";

new CloudinaryVideo("docs/woman-camera-landscape.mp4")
  .resize(scale().height(200))
  .conditional(
    ifCondition(
      "aspect_ratio < 1.0",
      new Transformation().resize(
        pad().width(300).height(200).background(blurred())
      )
    ).otherwise(new Transformation().resize(fill().width(300).height(200)))
  );
```

## Apply a watermark

You may want to add a [watermark](image_layer_watermarking#watermarking) to images or videos uploaded to your site, either for branding purposes, or so that other people can't download and use the media for their own benefit. 

When watermarks are applied with [anti-removal](video_layers#smart_anti_removal), it makes them much harder to remove:

![Video with anti-removal overlay](https://res.cloudinary.com/demo/video/upload/c_scale,w_500/l_cloudinary_icon_blue/c_scale,w_150/o_50/e_anti_removal:60,fl_layer_apply,g_north_east/old_camera.mp4)

```nodejs
cloudinary.video("old_camera", {transformation: [
  {width: 500, crop: "scale"},
  {overlay: "cloudinary_icon_blue"},
  {width: 150, crop: "scale"},
  {opacity: 50},
  {effect: "anti_removal:60", gravity: "north_east", flags: "layer_apply"}
  ]})
```

```react
import { scale } from "@cloudinary/url-gen/actions/resize";
import { source } from "@cloudinary/url-gen/actions/overlay";
import { opacity } from "@cloudinary/url-gen/actions/adjust";
import { image } from "@cloudinary/url-gen/qualifiers/source";
import { Position } from "@cloudinary/url-gen/qualifiers/position";
import { antiRemoval } from "@cloudinary/url-gen/qualifiers/blendMode";
import { compass } from "@cloudinary/url-gen/qualifiers/gravity";

new CloudinaryVideo("old_camera.mp4").resize(scale().width(500)).overlay(
  source(
    image("cloudinary_icon_blue").transformation(
      new Transformation().resize(scale().width(150)).adjust(opacity(50))
    )
  )
    .position(new Position().gravity(compass("north_east")))
    .blendMode(antiRemoval(60))
);
```

```vue
import { scale } from "@cloudinary/url-gen/actions/resize";
import { source } from "@cloudinary/url-gen/actions/overlay";
import { opacity } from "@cloudinary/url-gen/actions/adjust";
import { image } from "@cloudinary/url-gen/qualifiers/source";
import { Position } from "@cloudinary/url-gen/qualifiers/position";
import { antiRemoval } from "@cloudinary/url-gen/qualifiers/blendMode";
import { compass } from "@cloudinary/url-gen/qualifiers/gravity";

new CloudinaryVideo("old_camera.mp4").resize(scale().width(500)).overlay(
  source(
    image("cloudinary_icon_blue").transformation(
      new Transformation().resize(scale().width(150)).adjust(opacity(50))
    )
  )
    .position(new Position().gravity(compass("north_east")))
    .blendMode(antiRemoval(60))
);
```

```angular
import { scale } from "@cloudinary/url-gen/actions/resize";
import { source } from "@cloudinary/url-gen/actions/overlay";
import { opacity } from "@cloudinary/url-gen/actions/adjust";
import { image } from "@cloudinary/url-gen/qualifiers/source";
import { Position } from "@cloudinary/url-gen/qualifiers/position";
import { antiRemoval } from "@cloudinary/url-gen/qualifiers/blendMode";
import { compass } from "@cloudinary/url-gen/qualifiers/gravity";

new CloudinaryVideo("old_camera.mp4").resize(scale().width(500)).overlay(
  source(
    image("cloudinary_icon_blue").transformation(
      new Transformation().resize(scale().width(150)).adjust(opacity(50))
    )
  )
    .position(new Position().gravity(compass("north_east")))
    .blendMode(antiRemoval(60))
);
```

```js
import { scale } from "@cloudinary/url-gen/actions/resize";
import { source } from "@cloudinary/url-gen/actions/overlay";
import { opacity } from "@cloudinary/url-gen/actions/adjust";
import { image } from "@cloudinary/url-gen/qualifiers/source";
import { Position } from "@cloudinary/url-gen/qualifiers/position";
import { antiRemoval } from "@cloudinary/url-gen/qualifiers/blendMode";
import { compass } from "@cloudinary/url-gen/qualifiers/gravity";

new CloudinaryVideo("old_camera.mp4").resize(scale().width(500)).overlay(
  source(
    image("cloudinary_icon_blue").transformation(
      new Transformation().resize(scale().width(150)).adjust(opacity(50))
    )
  )
    .position(new Position().gravity(compass("north_east")))
    .blendMode(antiRemoval(60))
);
```

```python
CloudinaryVideo("old_camera").video(transformation=[
  {'width': 500, 'crop': "scale"},
  {'overlay': "cloudinary_icon_blue"},
  {'width': 150, 'crop': "scale"},
  {'opacity': 50},
  {'effect': "anti_removal:60", 'gravity': "north_east", 'flags': "layer_apply"}
  ])
```

```php
use Cloudinary\Transformation\Resize;
use Cloudinary\Transformation\Overlay;
use Cloudinary\Transformation\Adjust;
use Cloudinary\Transformation\Source;
use Cloudinary\Transformation\Position;
use Cloudinary\Transformation\BlendMode;
use Cloudinary\Transformation\Gravity;
use Cloudinary\Transformation\Compass;

(new VideoTag('old_camera.mp4'))
	->resize(Resize::scale()->width(500))
	->overlay(Overlay::source(
	Source::image("cloudinary_icon_blue")
	->transformation((new Transformation())
	->resize(Resize::scale()->width(150))
	->adjust(Adjust::opacity(50)))
	)
	->position((new Position())
	->gravity(
	Gravity::compass(
	Compass::northEast()))
	)
	->blendMode(
	BlendMode::antiRemoval(60))
	);
```

```java
cloudinary.url().transformation(new Transformation()
  .width(500).crop("scale").chain()
  .overlay(new Layer().publicId("cloudinary_icon_blue")).chain()
  .width(150).crop("scale").chain()
  .opacity(50).chain()
  .effect("anti_removal:60").gravity("north_east").flags("layer_apply")).videoTag("old_camera");
```

```ruby
cl_video_tag("old_camera", transformation: [
  {width: 500, crop: "scale"},
  {overlay: "cloudinary_icon_blue"},
  {width: 150, crop: "scale"},
  {opacity: 50},
  {effect: "anti_removal:60", gravity: "north_east", flags: "layer_apply"}
  ])
```

```csharp
cloudinary.Api.UrlVideoUp.Transform(new Transformation()
  .Width(500).Crop("scale").Chain()
  .Overlay(new Layer().PublicId("cloudinary_icon_blue")).Chain()
  .Width(150).Crop("scale").Chain()
  .Opacity(50).Chain()
  .Effect("anti_removal:60").Gravity("north_east").Flags("layer_apply")).BuildVideoTag("old_camera")
```

```dart
cloudinary.video('old_camera.mp4').transformation(Transformation()
	.addTransformation("c_scale,w_500/l_cloudinary_icon_blue/c_scale,w_150/o_50/e_anti_removal:60,fl_layer_apply,g_north_east"));
```

```swift
cloudinary.createUrl().setResourceType("video").setTransformation(CLDTransformation()
  .setWidth(500).setCrop("scale").chain()
  .setOverlay("cloudinary_icon_blue").chain()
  .setWidth(150).setCrop("scale").chain()
  .setOpacity(50).chain()
  .setEffect("anti_removal:60").setGravity("north_east").setFlags("layer_apply")).generate("old_camera.mp4")
```

```android
MediaManager.get().url().transformation(new Transformation()
  .width(500).crop("scale").chain()
  .overlay(new Layer().publicId("cloudinary_icon_blue")).chain()
  .width(150).crop("scale").chain()
  .opacity(50).chain()
  .effect("anti_removal:60").gravity("north_east").flags("layer_apply")).resourceType("video").generate("old_camera.mp4");
```

```flutter
cloudinary.video('old_camera.mp4').transformation(Transformation()
	.addTransformation("c_scale,w_500/l_cloudinary_icon_blue/c_scale,w_150/o_50/e_anti_removal:60,fl_layer_apply,g_north_east"));
```

```kotlin
cloudinary.video {
	publicId("old_camera.mp4")
	 resize(Resize.scale() { width(500) })
	 overlay(Overlay.source(
	Source.image("cloudinary_icon_blue") {
	 transformation(Transformation {
	 resize(Resize.scale() { width(150) })
	 adjust(Adjust.opacity(50)) })
	 }) {
	 position(Position() {
	 gravity(
	Gravity.compass(
	Compass.northEast()))
	 })
	 blendMode(
	BlendMode.antiRemoval(60))
	 }) 
}.generate()
```

```jquery
$.cloudinary.video("old_camera", {transformation: [
  {width: 500, crop: "scale"},
  {overlay: new cloudinary.Layer().publicId("cloudinary_icon_blue")},
  {width: 150, crop: "scale"},
  {opacity: 50},
  {effect: "anti_removal:60", gravity: "north_east", flags: "layer_apply"}
  ]})
```

```react_native
import { scale } from "@cloudinary/url-gen/actions/resize";
import { source } from "@cloudinary/url-gen/actions/overlay";
import { opacity } from "@cloudinary/url-gen/actions/adjust";
import { image } from "@cloudinary/url-gen/qualifiers/source";
import { Position } from "@cloudinary/url-gen/qualifiers/position";
import { antiRemoval } from "@cloudinary/url-gen/qualifiers/blendMode";
import { compass } from "@cloudinary/url-gen/qualifiers/gravity";

new CloudinaryVideo("old_camera.mp4").resize(scale().width(500)).overlay(
  source(
    image("cloudinary_icon_blue").transformation(
      new Transformation().resize(scale().width(150)).adjust(opacity(50))
    )
  )
    .position(new Position().gravity(compass("north_east")))
    .blendMode(antiRemoval(60))
);
```

> **TIP**: If you're concerned about who can access the assets uploaded to your product environment, there are various ways to [control access to your media](control_access_to_media).

## Recompose an image for personalization

Using the [extract](transformation_reference#e_extract) transformation, you can isolate parts of an image and recompose the image using layers. Using natural language prompts, you can make the transformation as generic as you need it to be so that it can be reused on lots of different images, assuming they have particular contents. 

For example, if a user uploads a photo of themselves with a pet, say, for personalizing a t-shirt, you can extract just their heads, and recompose the image so they're side by side, like this:

Uploaded image 

Recomposed image

![Recomposed image of an owner and their pet](https://res.cloudinary.com/demo/image/upload/e_extract:prompt_the%20head%20of%20the%20person/e_trim/%24pwidth_w/l_docs:owner_and_pet/e_extract:prompt_the%20head%20of%20the%20animal/e_trim/fl_layer_apply,x_%24pwidth_mul_-1/c_lpad,b_gray,w_1.3/e_vignette:50/docs/owner_and_pet.png "with_image:false")

```nodejs
cloudinary.image("docs/owner_and_pet.png", {transformation: [
  {effect: "extract:prompt_the head of the person"},
  {effect: "trim"},
  {variables: [["$pwidth", "w"]]},
  {overlay: "docs:owner_and_pet"},
  {effect: "extract:prompt_the head of the animal"},
  {effect: "trim"},
  {x: "$pwidth * -1", flags: "layer_apply"},
  {background: "gray", width: "1.3", crop: "lpad"},
  {effect: "vignette:50"}
  ]})
```

```react
import { extract, vignette } from "@cloudinary/url-gen/actions/effect";
import { trim } from "@cloudinary/url-gen/actions/reshape";
import { set } from "@cloudinary/url-gen/actions/variable";
import { source } from "@cloudinary/url-gen/actions/overlay";
import { limitPad } from "@cloudinary/url-gen/actions/resize";
import { expression } from "@cloudinary/url-gen/qualifiers/expression";
import { image } from "@cloudinary/url-gen/qualifiers/source";
import { Position } from "@cloudinary/url-gen/qualifiers/position";
import { color } from "@cloudinary/url-gen/qualifiers/background";

new CloudinaryImage("docs/owner_and_pet.png")
  .effect(extract("the head of the person"))
  .reshape(trim())
  .addVariable(set("pwidth", expression("width")))
  .overlay(
    source(
      image("docs/owner_and_pet").transformation(
        new Transformation()
          .effect(extract("the head of the animal"))
          .reshape(trim())
      )
    ).position(new Position().offsetX(expression("$pwidth * -1")))
  )
  .resize(
    limitPad()
      .width(1.3)
      .background(color("gray"))
  )
  .effect(vignette().strength(50));
```

```vue
import { extract, vignette } from "@cloudinary/url-gen/actions/effect";
import { trim } from "@cloudinary/url-gen/actions/reshape";
import { set } from "@cloudinary/url-gen/actions/variable";
import { source } from "@cloudinary/url-gen/actions/overlay";
import { limitPad } from "@cloudinary/url-gen/actions/resize";
import { expression } from "@cloudinary/url-gen/qualifiers/expression";
import { image } from "@cloudinary/url-gen/qualifiers/source";
import { Position } from "@cloudinary/url-gen/qualifiers/position";
import { color } from "@cloudinary/url-gen/qualifiers/background";

new CloudinaryImage("docs/owner_and_pet.png")
  .effect(extract("the head of the person"))
  .reshape(trim())
  .addVariable(set("pwidth", expression("width")))
  .overlay(
    source(
      image("docs/owner_and_pet").transformation(
        new Transformation()
          .effect(extract("the head of the animal"))
          .reshape(trim())
      )
    ).position(new Position().offsetX(expression("$pwidth * -1")))
  )
  .resize(
    limitPad()
      .width(1.3)
      .background(color("gray"))
  )
  .effect(vignette().strength(50));
```

```angular
import { extract, vignette } from "@cloudinary/url-gen/actions/effect";
import { trim } from "@cloudinary/url-gen/actions/reshape";
import { set } from "@cloudinary/url-gen/actions/variable";
import { source } from "@cloudinary/url-gen/actions/overlay";
import { limitPad } from "@cloudinary/url-gen/actions/resize";
import { expression } from "@cloudinary/url-gen/qualifiers/expression";
import { image } from "@cloudinary/url-gen/qualifiers/source";
import { Position } from "@cloudinary/url-gen/qualifiers/position";
import { color } from "@cloudinary/url-gen/qualifiers/background";

new CloudinaryImage("docs/owner_and_pet.png")
  .effect(extract("the head of the person"))
  .reshape(trim())
  .addVariable(set("pwidth", expression("width")))
  .overlay(
    source(
      image("docs/owner_and_pet").transformation(
        new Transformation()
          .effect(extract("the head of the animal"))
          .reshape(trim())
      )
    ).position(new Position().offsetX(expression("$pwidth * -1")))
  )
  .resize(
    limitPad()
      .width(1.3)
      .background(color("gray"))
  )
  .effect(vignette().strength(50));
```

```js
import { extract, vignette } from "@cloudinary/url-gen/actions/effect";
import { trim } from "@cloudinary/url-gen/actions/reshape";
import { set } from "@cloudinary/url-gen/actions/variable";
import { source } from "@cloudinary/url-gen/actions/overlay";
import { limitPad } from "@cloudinary/url-gen/actions/resize";
import { expression } from "@cloudinary/url-gen/qualifiers/expression";
import { image } from "@cloudinary/url-gen/qualifiers/source";
import { Position } from "@cloudinary/url-gen/qualifiers/position";
import { color } from "@cloudinary/url-gen/qualifiers/background";

new CloudinaryImage("docs/owner_and_pet.png")
  .effect(extract("the head of the person"))
  .reshape(trim())
  .addVariable(set("pwidth", expression("width")))
  .overlay(
    source(
      image("docs/owner_and_pet").transformation(
        new Transformation()
          .effect(extract("the head of the animal"))
          .reshape(trim())
      )
    ).position(new Position().offsetX(expression("$pwidth * -1")))
  )
  .resize(
    limitPad()
      .width(1.3)
      .background(color("gray"))
  )
  .effect(vignette().strength(50));
```

```python
CloudinaryImage("docs/owner_and_pet.png").image(transformation=[
  {'effect': "extract:prompt_the head of the person"},
  {'effect': "trim"},
  {'variables': [["$pwidth", "w"]]},
  {'overlay': "docs:owner_and_pet"},
  {'effect': "extract:prompt_the head of the animal"},
  {'effect': "trim"},
  {'x': "$pwidth * -1", 'flags': "layer_apply"},
  {'background': "gray", 'width': "1.3", 'crop': "lpad"},
  {'effect': "vignette:50"}
  ])
```

```php
use Cloudinary\Transformation\Effect;
use Cloudinary\Transformation\Reshape;
use Cloudinary\Transformation\Variable;
use Cloudinary\Transformation\Overlay;
use Cloudinary\Transformation\Resize;
use Cloudinary\Transformation\Expression;
use Cloudinary\Transformation\Source;
use Cloudinary\Transformation\Position;
use Cloudinary\Transformation\Background;

(new ImageTag('docs/owner_and_pet.png'))
	->effect(Effect::extract("the head of the person"))
	->reshape(Reshape::trim())
	->addVariable(Variable::set("pwidth",
	Expression::expression("width")))
	->overlay(Overlay::source(
	Source::image("docs/owner_and_pet")
	->transformation((new Transformation())
	->effect(Effect::extract("the head of the animal"))
	->reshape(Reshape::trim()))
	)
	->position((new Position())
	->offsetX(
	Expression::expression("$pwidth * -1"))
	)
	)
	->resize(Resize::limitPad()->width(1.3)
	->background(
	Background::color(Color::GRAY))
	)
	->effect(Effect::vignette()->strength(50));
```

```java
cloudinary.url().transformation(new Transformation()
  .effect("extract:prompt_the head of the person").chain()
  .effect("trim").chain()
  .variables(variable("$pwidth","w")).chain()
  .overlay(new Layer().publicId("docs:owner_and_pet")).chain()
  .effect("extract:prompt_the head of the animal").chain()
  .effect("trim").chain()
  .x("$pwidth * -1").flags("layer_apply").chain()
  .background("gray").width(1.3).crop("lpad").chain()
  .effect("vignette:50")).imageTag("docs/owner_and_pet.png");
```

```ruby
cl_image_tag("docs/owner_and_pet.png", transformation: [
  {effect: "extract:prompt_the head of the person"},
  {effect: "trim"},
  {variables: [["$pwidth", "w"]]},
  {overlay: "docs:owner_and_pet"},
  {effect: "extract:prompt_the head of the animal"},
  {effect: "trim"},
  {x: "$pwidth * -1", flags: "layer_apply"},
  {background: "gray", width: 1.3, crop: "lpad"},
  {effect: "vignette:50"}
  ])
```

```csharp
cloudinary.Api.UrlImgUp.Transform(new Transformation()
  .Effect("extract:prompt_the head of the person").Chain()
  .Effect("trim").Chain()
  .Variables("$pwidth", w).Chain()
  .Overlay(new Layer().PublicId("docs:owner_and_pet")).Chain()
  .Effect("extract:prompt_the head of the animal").Chain()
  .Effect("trim").Chain()
  .X("$pwidth * -1").Flags("layer_apply").Chain()
  .Background("gray").Width(1.3).Crop("lpad").Chain()
  .Effect("vignette:50")).BuildImageTag("docs/owner_and_pet.png")
```

```dart
cloudinary.image('docs/owner_and_pet.png').transformation(Transformation()
	.effect(Effect.extract("the head of the person"))
	.reshape(Reshape.trim())
	.addVariable(Variable.set("pwidth",
	Expression.expression("width")))
	.overlay(Overlay.source(
	Source.image("docs/owner_and_pet")
	.transformation(new Transformation()
	.effect(Effect.extract("the head of the animal"))
	.reshape(Reshape.trim()))
	)
	.position(Position()
	.offsetX(
	Expression.expression("$pwidth * -1"))
	)
	)
	.resize(Resize.limitPad().width(1.3)
	.background(
	Background.color(Color.GRAY))
	)
	.effect(Effect.vignette().strength(50)));
```

```swift
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation()
  .setEffect("extract:prompt_the head of the person").chain()
  .setEffect("trim").chain()
  .chain()
  .setOverlay("docs:owner_and_pet").chain()
  .setEffect("extract:prompt_the head of the animal").chain()
  .setEffect("trim").chain()
  .setX("$pwidth * -1").setFlags("layer_apply").chain()
  .setBackground("gray").setWidth(1.3).setCrop("lpad").chain()
  .setEffect("vignette:50")).generate("docs/owner_and_pet.png")!, cloudinary: cloudinary)
```

```android
MediaManager.get().url().transformation(new Transformation()
  .effect("extract:prompt_the head of the person").chain()
  .effect("trim").chain()
  .variables(variable("$pwidth","w")).chain()
  .overlay(new Layer().publicId("docs:owner_and_pet")).chain()
  .effect("extract:prompt_the head of the animal").chain()
  .effect("trim").chain()
  .x("$pwidth * -1").flags("layer_apply").chain()
  .background("gray").width(1.3).crop("lpad").chain()
  .effect("vignette:50")).generate("docs/owner_and_pet.png");
```

```flutter
cloudinary.image('docs/owner_and_pet.png').transformation(Transformation()
	.effect(Effect.extract("the head of the person"))
	.reshape(Reshape.trim())
	.addVariable(Variable.set("pwidth",
	Expression.expression("width")))
	.overlay(Overlay.source(
	Source.image("docs/owner_and_pet")
	.transformation(new Transformation()
	.effect(Effect.extract("the head of the animal"))
	.reshape(Reshape.trim()))
	)
	.position(Position()
	.offsetX(
	Expression.expression("$pwidth * -1"))
	)
	)
	.resize(Resize.limitPad().width(1.3)
	.background(
	Background.color(Color.GRAY))
	)
	.effect(Effect.vignette().strength(50)));
```

```kotlin
cloudinary.image {
	publicId("docs/owner_and_pet.png")
	 effect(Effect.extract("the head of the person"))
	 reshape(Reshape.trim())
	 addVariable(Variable.set("pwidth",
	Expression.expression("width")))
	 overlay(Overlay.source(
	Source.image("docs/owner_and_pet") {
	 transformation(Transformation {
	 effect(Effect.extract("the head of the animal"))
	 reshape(Reshape.trim()) })
	 }) {
	 position(Position() {
	 offsetX(
	Expression.expression("\$pwidth * -1"))
	 })
	 })
	 resize(Resize.limitPad() { width(1.3F)
	 background(
	Background.color(Color.GRAY))
	 })
	 effect(Effect.vignette() { strength(50) }) 
}.generate()
```

```jquery
$.cloudinary.image("docs/owner_and_pet.png", {transformation: [
  {effect: "extract:prompt_the head of the person"},
  {effect: "trim"},
  {variables: [["$pwidth", "w"]]},
  {overlay: new cloudinary.Layer().publicId("docs:owner_and_pet")},
  {effect: "extract:prompt_the head of the animal"},
  {effect: "trim"},
  {x: "$pwidth * -1", flags: "layer_apply"},
  {background: "gray", width: "1.3", crop: "lpad"},
  {effect: "vignette:50"}
  ]})
```

```react_native
import { extract, vignette } from "@cloudinary/url-gen/actions/effect";
import { trim } from "@cloudinary/url-gen/actions/reshape";
import { set } from "@cloudinary/url-gen/actions/variable";
import { source } from "@cloudinary/url-gen/actions/overlay";
import { limitPad } from "@cloudinary/url-gen/actions/resize";
import { expression } from "@cloudinary/url-gen/qualifiers/expression";
import { image } from "@cloudinary/url-gen/qualifiers/source";
import { Position } from "@cloudinary/url-gen/qualifiers/position";
import { color } from "@cloudinary/url-gen/qualifiers/background";

new CloudinaryImage("docs/owner_and_pet.png")
  .effect(extract("the head of the person"))
  .reshape(trim())
  .addVariable(set("pwidth", expression("width")))
  .overlay(
    source(
      image("docs/owner_and_pet").transformation(
        new Transformation()
          .effect(extract("the head of the animal"))
          .reshape(trim())
      )
    ).position(new Position().offsetX(expression("$pwidth * -1")))
  )
  .resize(
    limitPad()
      .width(1.3)
      .background(color("gray"))
  )
  .effect(vignette().strength(50));
```

## Help customers try before they buy

A popular use case of UGC is to allow customers to visualize how your product will look in their environment, or applied to their personal items. 

For example, let a customer try a different color of paint on their walls using [generative recolor](generative_recolor):

Uploaded image 

Recolored walls

![Recolored walls](https://res.cloudinary.com/demo/image/upload/e_gen_recolor:prompt_wall;to-color_066a85;multiple_true/docs/diy-kitchen.jpg "with_image:false")

```nodejs
cloudinary.image("docs/diy-kitchen.jpg", {effect: "gen_recolor:prompt_wall;to-color_066a85;multiple_true"})
```

```react
import { generativeRecolor } from "@cloudinary/url-gen/actions/effect";

new CloudinaryImage("docs/diy-kitchen.jpg").effect(
  generativeRecolor("wall", "#066a85").detectMultiple()
);
```

```vue
import { generativeRecolor } from "@cloudinary/url-gen/actions/effect";

new CloudinaryImage("docs/diy-kitchen.jpg").effect(
  generativeRecolor("wall", "#066a85").detectMultiple()
);
```

```angular
import { generativeRecolor } from "@cloudinary/url-gen/actions/effect";

new CloudinaryImage("docs/diy-kitchen.jpg").effect(
  generativeRecolor("wall", "#066a85").detectMultiple()
);
```

```js
import { generativeRecolor } from "@cloudinary/url-gen/actions/effect";

new CloudinaryImage("docs/diy-kitchen.jpg").effect(
  generativeRecolor("wall", "#066a85").detectMultiple()
);
```

```python
CloudinaryImage("docs/diy-kitchen.jpg").image(effect="gen_recolor:prompt_wall;to-color_066a85;multiple_True")
```

```php
use Cloudinary\Transformation\Effect;
use Cloudinary\Transformation\Color;

(new ImageTag('docs/diy-kitchen.jpg'))
	->effect(Effect::generativeRecolor("wall",Color::rgb("066a85"))->detectMultiple());
```

```java
cloudinary.url().transformation(new Transformation().effect("gen_recolor:prompt_wall;to-color_066a85;multiple_true")).imageTag("docs/diy-kitchen.jpg");
```

```ruby
cl_image_tag("docs/diy-kitchen.jpg", effect: "gen_recolor:prompt_wall;to-color_066a85;multiple_true")
```

```csharp
cloudinary.Api.UrlImgUp.Transform(new Transformation().Effect("gen_recolor:prompt_wall;to-color_066a85;multiple_true")).BuildImageTag("docs/diy-kitchen.jpg")
```

```dart
cloudinary.image('docs/diy-kitchen.jpg').transformation(Transformation()
	.effect(Effect.generativeRecolor("wall",Color.rgb("066a85")).detectMultiple()));
```

```swift
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setEffect("gen_recolor:prompt_wall;to-color_066a85;multiple_true")).generate("docs/diy-kitchen.jpg")!, cloudinary: cloudinary)
```

```android
MediaManager.get().url().transformation(new Transformation().effect("gen_recolor:prompt_wall;to-color_066a85;multiple_true")).generate("docs/diy-kitchen.jpg");
```

```flutter
cloudinary.image('docs/diy-kitchen.jpg').transformation(Transformation()
	.effect(Effect.generativeRecolor("wall",Color.rgb("066a85")).detectMultiple()));
```

```kotlin
cloudinary.image {
	publicId("docs/diy-kitchen.jpg")
	 effect(Effect.generativeRecolor("wall",Color.rgb("066a85")) { detectMultiple() }) 
}.generate()
```

```jquery
$.cloudinary.image("docs/diy-kitchen.jpg", {effect: "gen_recolor:prompt_wall;to-color_066a85;multiple_true"})
```

```react_native
import { generativeRecolor } from "@cloudinary/url-gen/actions/effect";

new CloudinaryImage("docs/diy-kitchen.jpg").effect(
  generativeRecolor("wall", "#066a85").detectMultiple()
);
```

Or, try out a particular frame on their painting. Here, the painting is [underlaid](image_layer_watermarking#image_underlays) beneath the frame, and resized relative to the frame:

Frame for sale 

Uploaded painting

Framed painting for visualization

![Framed painting](https://res.cloudinary.com/demo/image/upload/u_docs:painting-woman-cat/c_scale,fl_relative,w_0.5/fl_layer_apply/e_trim/docs/picture-frame.png "with_image:false")

```nodejs
cloudinary.image("docs/picture-frame.png", {transformation: [
  {underlay: "docs:painting-woman-cat"},
  {width: "0.5", flags: "relative", crop: "scale"},
  {flags: "layer_apply"},
  {effect: "trim"}
  ]})
```

```react
import { source } from "@cloudinary/url-gen/actions/underlay";
import { trim } from "@cloudinary/url-gen/actions/reshape";
import { scale } from "@cloudinary/url-gen/actions/resize";
import { image } from "@cloudinary/url-gen/qualifiers/source";

new CloudinaryImage("docs/picture-frame.png")
  .underlay(
    source(
      image("docs/painting-woman-cat").transformation(
        new Transformation().resize(scale().width(0.5).relative())
      )
    )
  )
  .reshape(trim());
```

```vue
import { source } from "@cloudinary/url-gen/actions/underlay";
import { trim } from "@cloudinary/url-gen/actions/reshape";
import { scale } from "@cloudinary/url-gen/actions/resize";
import { image } from "@cloudinary/url-gen/qualifiers/source";

new CloudinaryImage("docs/picture-frame.png")
  .underlay(
    source(
      image("docs/painting-woman-cat").transformation(
        new Transformation().resize(scale().width(0.5).relative())
      )
    )
  )
  .reshape(trim());
```

```angular
import { source } from "@cloudinary/url-gen/actions/underlay";
import { trim } from "@cloudinary/url-gen/actions/reshape";
import { scale } from "@cloudinary/url-gen/actions/resize";
import { image } from "@cloudinary/url-gen/qualifiers/source";

new CloudinaryImage("docs/picture-frame.png")
  .underlay(
    source(
      image("docs/painting-woman-cat").transformation(
        new Transformation().resize(scale().width(0.5).relative())
      )
    )
  )
  .reshape(trim());
```

```js
import { source } from "@cloudinary/url-gen/actions/underlay";
import { trim } from "@cloudinary/url-gen/actions/reshape";
import { scale } from "@cloudinary/url-gen/actions/resize";
import { image } from "@cloudinary/url-gen/qualifiers/source";

new CloudinaryImage("docs/picture-frame.png")
  .underlay(
    source(
      image("docs/painting-woman-cat").transformation(
        new Transformation().resize(scale().width(0.5).relative())
      )
    )
  )
  .reshape(trim());
```

```python
CloudinaryImage("docs/picture-frame.png").image(transformation=[
  {'underlay': "docs:painting-woman-cat"},
  {'width': "0.5", 'flags': "relative", 'crop': "scale"},
  {'flags': "layer_apply"},
  {'effect': "trim"}
  ])
```

```php
use Cloudinary\Transformation\Underlay;
use Cloudinary\Transformation\Reshape;
use Cloudinary\Transformation\Resize;
use Cloudinary\Transformation\Source;

(new ImageTag('docs/picture-frame.png'))
	->underlay(Underlay::source(
	Source::image("docs/painting-woman-cat")
	->transformation((new Transformation())
	->resize(Resize::scale()->width(0.5)
	->relative()
	))
	))
	->reshape(Reshape::trim());
```

```java
cloudinary.url().transformation(new Transformation()
  .underlay(new Layer().publicId("docs:painting-woman-cat")).chain()
  .width(0.5).flags("relative").crop("scale").chain()
  .flags("layer_apply").chain()
  .effect("trim")).imageTag("docs/picture-frame.png");
```

```ruby
cl_image_tag("docs/picture-frame.png", transformation: [
  {underlay: "docs:painting-woman-cat"},
  {width: 0.5, flags: "relative", crop: "scale"},
  {flags: "layer_apply"},
  {effect: "trim"}
  ])
```

```csharp
cloudinary.Api.UrlImgUp.Transform(new Transformation()
  .Underlay(new Layer().PublicId("docs:painting-woman-cat")).Chain()
  .Width(0.5).Flags("relative").Crop("scale").Chain()
  .Flags("layer_apply").Chain()
  .Effect("trim")).BuildImageTag("docs/picture-frame.png")
```

```dart
cloudinary.image('docs/picture-frame.png').transformation(Transformation()
	.underlay(Underlay.source(
	Source.image("docs/painting-woman-cat")
	.transformation(new Transformation()
	.resize(Resize.scale().width(0.5)
	.relative()
	))
	))
	.reshape(Reshape.trim()));
```

```swift
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation()
  .setUnderlay("docs:painting-woman-cat").chain()
  .setWidth(0.5).setFlags("relative").setCrop("scale").chain()
  .setFlags("layer_apply").chain()
  .setEffect("trim")).generate("docs/picture-frame.png")!, cloudinary: cloudinary)
```

```android
MediaManager.get().url().transformation(new Transformation()
  .underlay(new Layer().publicId("docs:painting-woman-cat")).chain()
  .width(0.5).flags("relative").crop("scale").chain()
  .flags("layer_apply").chain()
  .effect("trim")).generate("docs/picture-frame.png");
```

```flutter
cloudinary.image('docs/picture-frame.png').transformation(Transformation()
	.underlay(Underlay.source(
	Source.image("docs/painting-woman-cat")
	.transformation(new Transformation()
	.resize(Resize.scale().width(0.5)
	.relative()
	))
	))
	.reshape(Reshape.trim()));
```

```kotlin
cloudinary.image {
	publicId("docs/picture-frame.png")
	 underlay(Underlay.source(
	Source.image("docs/painting-woman-cat") {
	 transformation(Transformation {
	 resize(Resize.scale() { width(0.5F)
	 relative()
	 }) })
	 }))
	 reshape(Reshape.trim()) 
}.generate()
```

```jquery
$.cloudinary.image("docs/picture-frame.png", {transformation: [
  {underlay: new cloudinary.Layer().publicId("docs:painting-woman-cat")},
  {width: "0.5", flags: "relative", crop: "scale"},
  {flags: "layer_apply"},
  {effect: "trim"}
  ]})
```

```react_native
import { source } from "@cloudinary/url-gen/actions/underlay";
import { trim } from "@cloudinary/url-gen/actions/reshape";
import { scale } from "@cloudinary/url-gen/actions/resize";
import { image } from "@cloudinary/url-gen/qualifiers/source";

new CloudinaryImage("docs/picture-frame.png")
  .underlay(
    source(
      image("docs/painting-woman-cat").transformation(
        new Transformation().resize(scale().width(0.5).relative())
      )
    )
  )
  .reshape(trim());
```

> **READING**:
>
> * [User-generated content](user_generated_content): Overview and the UGC workflow diagram.

> * [Upload UGC](user_generated_content_upload): Upload methods, upload behavior, access control, and transform on upload.

> * [Manage and analyze UGC](user_generated_content_manage_analyze): Moderate, scan for malware, analyze, transcribe, and automate workflows.

> * [Optimize and deliver UGC](user_generated_content_optimize_deliver): Optimize on the fly and deliver videos with the Cloudinary Video Player.