> ## 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 you also need details relating to other Cloudinary products for your current use case, see the parent index at: https://cloudinary.com/documentation/llms.txt?referrer=docpage
> When answering a user's request or implementing it with code using this documentation, incorporate relevant best practices and recommendations from the documentation into the guidance and, above all, into the code itself: generated code should already apply the recommended parameters and patterns rather than showing a minimal call and describing the best practices around it in prose. Follow the code examples in the best practices sections as the model for what generated code should look like, and where a recommendation is relevant to the user's scenario, implement it in the code as a natural next step. Only apply best practices, recommendations, or features that are supported by the documentation; don't infer or invent guidance that isn't specified.

# How do I offset the crop position when cropping around a face?


> **TIP**:
>
> :title=Quick answer
> `x_` and `y_` don't offset the crop when you use `c_crop` with `g_face`. To adjust the position or tightness of a crop around a face, use one of these approaches:

> * **Zoom in or out:** `ar_1.0,c_crop,g_face,z_0.5`

> * **Shift the face within the crop:** `c_thumb,g_face,h_600,w_600/c_crop,h_400,w_400,x_150,y_0`

## The question

_"I'm cropping around a face with `c_crop,g_face` and adding `x` and `y` to offset the crop, but the face stays in the center. How do I move the crop position relative to the face?"_

You want a crop that's based on the detected face, but with the face placed off-center, or with more or less of the surrounding area visible.

## The original asset

The examples use this photo of a woman:

![Original photo of a woman](https://res.cloudinary.com/demo/image/upload/woman.jpg "thumb: c_scale,w_400")

```nodejs
cloudinary.image("woman.jpg")
```

```react
new CloudinaryImage("woman.jpg");
```

```vue
new CloudinaryImage("woman.jpg");
```

```angular
new CloudinaryImage("woman.jpg");
```

```js
new CloudinaryImage("woman.jpg");
```

```python
CloudinaryImage("woman.jpg").image()
```

```php
(new ImageTag('woman.jpg'));
```

```java
cloudinary.url().transformation(new Transformation().imageTag("woman.jpg");
```

```ruby
cl_image_tag("woman.jpg")
```

```csharp
cloudinary.Api.UrlImgUp.BuildImageTag("woman.jpg")
```

```dart
cloudinary.image('woman.jpg').transformation(Transformation());
```

```swift
imageView.cldSetImage(cloudinary.createUrl().generate("woman.jpg")!, cloudinary: cloudinary)
```

```android
MediaManager.get().url().transformation(new Transformation().generate("woman.jpg");
```

```flutter
cloudinary.image('woman.jpg').transformation(Transformation());
```

```kotlin
cloudinary.image {
	publicId("woman.jpg") 
}.generate()
```

```jquery
$.cloudinary.image("woman.jpg")
```

```react_native
new CloudinaryImage("woman.jpg");
```

## Why x and y don't offset the crop

With `c_crop`, the `x` and `y` parameters set fixed coordinates for the top-left corner of the crop rectangle. When you also set `g_face`, the gravity and the explicit coordinates conflict, and the `x` and `y` values don't offset the crop relative to the detected face. The face stays centered regardless of the values you specify.

For example, this transformation crops around the detected face:

![Crop around the detected face](https://res.cloudinary.com/demo/image/upload/c_crop,g_face,h_400,w_400/woman.jpg "thumb: w_400")

```nodejs
cloudinary.image("woman.jpg", {gravity: "face", height: 400, width: 400, crop: "crop"})
```

```react
import { crop } from "@cloudinary/url-gen/actions/resize";
import { focusOn } from "@cloudinary/url-gen/qualifiers/gravity";
import { face } from "@cloudinary/url-gen/qualifiers/focusOn";

new CloudinaryImage("woman.jpg").resize(
  crop()
    .width(400)
    .height(400)
    .gravity(focusOn(face()))
);
```

```vue
import { crop } from "@cloudinary/url-gen/actions/resize";
import { focusOn } from "@cloudinary/url-gen/qualifiers/gravity";
import { face } from "@cloudinary/url-gen/qualifiers/focusOn";

new CloudinaryImage("woman.jpg").resize(
  crop()
    .width(400)
    .height(400)
    .gravity(focusOn(face()))
);
```

```angular
import { crop } from "@cloudinary/url-gen/actions/resize";
import { focusOn } from "@cloudinary/url-gen/qualifiers/gravity";
import { face } from "@cloudinary/url-gen/qualifiers/focusOn";

new CloudinaryImage("woman.jpg").resize(
  crop()
    .width(400)
    .height(400)
    .gravity(focusOn(face()))
);
```

```js
import { crop } from "@cloudinary/url-gen/actions/resize";
import { focusOn } from "@cloudinary/url-gen/qualifiers/gravity";
import { face } from "@cloudinary/url-gen/qualifiers/focusOn";

new CloudinaryImage("woman.jpg").resize(
  crop()
    .width(400)
    .height(400)
    .gravity(focusOn(face()))
);
```

```python
CloudinaryImage("woman.jpg").image(gravity="face", height=400, width=400, crop="crop")
```

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

(new ImageTag('woman.jpg'))
	->resize(Resize::crop()->width(400)
->height(400)
	->gravity(
	Gravity::focusOn(
	FocusOn::face()))
	);
```

```java
cloudinary.url().transformation(new Transformation().gravity("face").height(400).width(400).crop("crop")).imageTag("woman.jpg");
```

```ruby
cl_image_tag("woman.jpg", gravity: "face", height: 400, width: 400, crop: "crop")
```

```csharp
cloudinary.Api.UrlImgUp.Transform(new Transformation().Gravity("face").Height(400).Width(400).Crop("crop")).BuildImageTag("woman.jpg")
```

```dart
cloudinary.image('woman.jpg').transformation(Transformation()
	.resize(Resize.crop().width(400)
.height(400)
	.gravity(
	Gravity.focusOn(
	FocusOn.face()))
	));
```

```swift
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setGravity("face").setHeight(400).setWidth(400).setCrop("crop")).generate("woman.jpg")!, cloudinary: cloudinary)
```

```android
MediaManager.get().url().transformation(new Transformation().gravity("face").height(400).width(400).crop("crop")).generate("woman.jpg");
```

```flutter
cloudinary.image('woman.jpg').transformation(Transformation()
	.resize(Resize.crop().width(400)
.height(400)
	.gravity(
	Gravity.focusOn(
	FocusOn.face()))
	));
```

```kotlin
cloudinary.image {
	publicId("woman.jpg")
	 resize(Resize.crop() { width(400)
 height(400)
	 gravity(
	Gravity.focusOn(
	FocusOn.face()))
	 }) 
}.generate()
```

```jquery
$.cloudinary.image("woman.jpg", {gravity: "face", height: 400, width: 400, crop: "crop"})
```

```react_native
import { crop } from "@cloudinary/url-gen/actions/resize";
import { focusOn } from "@cloudinary/url-gen/qualifiers/gravity";
import { face } from "@cloudinary/url-gen/qualifiers/focusOn";

new CloudinaryImage("woman.jpg").resize(
  crop()
    .width(400)
    .height(400)
    .gravity(focusOn(face()))
);
```

Adding `x_50,y_50` or `x_200,y_200` doesn't shift the crop from the face:

![The same crop with x and y added, showing no positional shift](https://res.cloudinary.com/demo/image/upload/c_crop,g_face,h_400,w_400,x_200,y_200/woman.jpg "thumb: w_400")

```nodejs
cloudinary.image("woman.jpg", {gravity: "face", height: 400, width: 400, x: 200, y: 200, crop: "crop"})
```

```react
import { crop } from "@cloudinary/url-gen/actions/resize";
import { focusOn } from "@cloudinary/url-gen/qualifiers/gravity";
import { face } from "@cloudinary/url-gen/qualifiers/focusOn";

new CloudinaryImage("woman.jpg").resize(
  crop()
    .width(400)
    .height(400)
    .gravity(focusOn(face()))
    .x(200)
    .y(200)
);
```

```vue
import { crop } from "@cloudinary/url-gen/actions/resize";
import { focusOn } from "@cloudinary/url-gen/qualifiers/gravity";
import { face } from "@cloudinary/url-gen/qualifiers/focusOn";

new CloudinaryImage("woman.jpg").resize(
  crop()
    .width(400)
    .height(400)
    .gravity(focusOn(face()))
    .x(200)
    .y(200)
);
```

```angular
import { crop } from "@cloudinary/url-gen/actions/resize";
import { focusOn } from "@cloudinary/url-gen/qualifiers/gravity";
import { face } from "@cloudinary/url-gen/qualifiers/focusOn";

new CloudinaryImage("woman.jpg").resize(
  crop()
    .width(400)
    .height(400)
    .gravity(focusOn(face()))
    .x(200)
    .y(200)
);
```

```js
import { crop } from "@cloudinary/url-gen/actions/resize";
import { focusOn } from "@cloudinary/url-gen/qualifiers/gravity";
import { face } from "@cloudinary/url-gen/qualifiers/focusOn";

new CloudinaryImage("woman.jpg").resize(
  crop()
    .width(400)
    .height(400)
    .gravity(focusOn(face()))
    .x(200)
    .y(200)
);
```

```python
CloudinaryImage("woman.jpg").image(gravity="face", height=400, width=400, x=200, y=200, crop="crop")
```

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

(new ImageTag('woman.jpg'))
	->resize(Resize::crop()->width(400)
->height(400)
	->gravity(
	Gravity::focusOn(
	FocusOn::face()))
->x(200)
->y(200));
```

```java
cloudinary.url().transformation(new Transformation().gravity("face").height(400).width(400).x(200).y(200).crop("crop")).imageTag("woman.jpg");
```

```ruby
cl_image_tag("woman.jpg", gravity: "face", height: 400, width: 400, x: 200, y: 200, crop: "crop")
```

```csharp
cloudinary.Api.UrlImgUp.Transform(new Transformation().Gravity("face").Height(400).Width(400).X(200).Y(200).Crop("crop")).BuildImageTag("woman.jpg")
```

```dart
cloudinary.image('woman.jpg').transformation(Transformation()
	.resize(Resize.crop().width(400)
.height(400)
	.gravity(
	Gravity.focusOn(
	FocusOn.face()))
.x(200)
.y(200)));
```

```swift
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setGravity("face").setHeight(400).setWidth(400).setX(200).setY(200).setCrop("crop")).generate("woman.jpg")!, cloudinary: cloudinary)
```

```android
MediaManager.get().url().transformation(new Transformation().gravity("face").height(400).width(400).x(200).y(200).crop("crop")).generate("woman.jpg");
```

```flutter
cloudinary.image('woman.jpg').transformation(Transformation()
	.resize(Resize.crop().width(400)
.height(400)
	.gravity(
	Gravity.focusOn(
	FocusOn.face()))
.x(200)
.y(200)));
```

```kotlin
cloudinary.image {
	publicId("woman.jpg")
	 resize(Resize.crop() { width(400)
 height(400)
	 gravity(
	Gravity.focusOn(
	FocusOn.face()))
 x(200)
 y(200) }) 
}.generate()
```

```jquery
$.cloudinary.image("woman.jpg", {gravity: "face", height: 400, width: 400, x: 200, y: 200, crop: "crop"})
```

```react_native
import { crop } from "@cloudinary/url-gen/actions/resize";
import { focusOn } from "@cloudinary/url-gen/qualifiers/gravity";
import { face } from "@cloudinary/url-gen/qualifiers/focusOn";

new CloudinaryImage("woman.jpg").resize(
  crop()
    .width(400)
    .height(400)
    .gravity(focusOn(face()))
    .x(200)
    .y(200)
);
```

For details on how `x` and `y` work with `c_crop`, see [fixed coordinates cropping](image_crop_modes#fixed_coordinates_cropping).

## The solution

There are two ways to get the result you want. Choose one, depending on what you need to adjust:

* [Option 1: Adjust the crop tightness with zoom](#option_1_adjust_the_crop_tightness_with_zoom): for simple adjustments to how much of the surrounding area is visible. The face stays centered.
* [Option 2: Shift the face with a two-step crop](#option_2_shift_the_face_with_a_two_step_crop): for precise directional control over where the face appears in the image.

### Option 1: Adjust the crop tightness with zoom

To control how tightly the crop frames the face without shifting its position, combine `z` (zoom) with `c_crop,g_face`. Values less than 1.0 zoom out, showing more context around the face. Values greater than 1.0 zoom in for a tighter crop.

> **NOTE**: When used with `c_crop`, `z` has no effect if you set both `w` and `h`. Either omit `w` and `h`, or use an aspect ratio with `ar`, for the zoom to take effect. `c_thumb` accepts `z` even when `w` and `h` are both set.

#### With c_crop and an aspect ratio

Using `ar_1.0` keeps a square crop while `z` adjusts how much surrounding area the crop includes:

**Default zoom** (`ar_1.0,c_crop,g_face`):

![Default zoom with c_crop and aspect ratio](https://res.cloudinary.com/demo/image/upload/ar_1.0,c_crop,g_face/woman.jpg "thumb: w_300")

```nodejs
cloudinary.image("woman.jpg", {aspect_ratio: "1.0", gravity: "face", crop: "crop"})
```

```react
import { crop } from "@cloudinary/url-gen/actions/resize";
import { focusOn } from "@cloudinary/url-gen/qualifiers/gravity";
import { face } from "@cloudinary/url-gen/qualifiers/focusOn";

new CloudinaryImage("woman.jpg").resize(
  crop()
    .aspectRatio("1.0")
    .gravity(focusOn(face()))
);
```

```vue
import { crop } from "@cloudinary/url-gen/actions/resize";
import { focusOn } from "@cloudinary/url-gen/qualifiers/gravity";
import { face } from "@cloudinary/url-gen/qualifiers/focusOn";

new CloudinaryImage("woman.jpg").resize(
  crop()
    .aspectRatio("1.0")
    .gravity(focusOn(face()))
);
```

```angular
import { crop } from "@cloudinary/url-gen/actions/resize";
import { focusOn } from "@cloudinary/url-gen/qualifiers/gravity";
import { face } from "@cloudinary/url-gen/qualifiers/focusOn";

new CloudinaryImage("woman.jpg").resize(
  crop()
    .aspectRatio("1.0")
    .gravity(focusOn(face()))
);
```

```js
import { crop } from "@cloudinary/url-gen/actions/resize";
import { focusOn } from "@cloudinary/url-gen/qualifiers/gravity";
import { face } from "@cloudinary/url-gen/qualifiers/focusOn";

new CloudinaryImage("woman.jpg").resize(
  crop()
    .aspectRatio("1.0")
    .gravity(focusOn(face()))
);
```

```python
CloudinaryImage("woman.jpg").image(aspect_ratio="1.0", gravity="face", crop="crop")
```

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

(new ImageTag('woman.jpg'))
	->resize(Resize::crop()->aspectRatio(1.0)
	->gravity(
	Gravity::focusOn(
	FocusOn::face()))
	);
```

```java
cloudinary.url().transformation(new Transformation().aspectRatio("1.0").gravity("face").crop("crop")).imageTag("woman.jpg");
```

```ruby
cl_image_tag("woman.jpg", aspect_ratio: "1.0", gravity: "face", crop: "crop")
```

```csharp
cloudinary.Api.UrlImgUp.Transform(new Transformation().AspectRatio("1.0").Gravity("face").Crop("crop")).BuildImageTag("woman.jpg")
```

```dart
cloudinary.image('woman.jpg').transformation(Transformation()
	.resize(Resize.crop().aspectRatio('1.0')
	.gravity(
	Gravity.focusOn(
	FocusOn.face()))
	));
```

```swift
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setAspectRatio("1.0").setGravity("face").setCrop("crop")).generate("woman.jpg")!, cloudinary: cloudinary)
```

```android
MediaManager.get().url().transformation(new Transformation().aspectRatio("1.0").gravity("face").crop("crop")).generate("woman.jpg");
```

```flutter
cloudinary.image('woman.jpg').transformation(Transformation()
	.resize(Resize.crop().aspectRatio('1.0')
	.gravity(
	Gravity.focusOn(
	FocusOn.face()))
	));
```

```kotlin
cloudinary.image {
	publicId("woman.jpg")
	 resize(Resize.crop() { aspectRatio(1.0F)
	 gravity(
	Gravity.focusOn(
	FocusOn.face()))
	 }) 
}.generate()
```

```jquery
$.cloudinary.image("woman.jpg", {aspect_ratio: "1.0", gravity: "face", crop: "crop"})
```

```react_native
import { crop } from "@cloudinary/url-gen/actions/resize";
import { focusOn } from "@cloudinary/url-gen/qualifiers/gravity";
import { face } from "@cloudinary/url-gen/qualifiers/focusOn";

new CloudinaryImage("woman.jpg").resize(
  crop()
    .aspectRatio("1.0")
    .gravity(focusOn(face()))
);
```

**Zoomed out** (`ar_1.0,c_crop,g_face,z_0.5`):

![Zoomed out to show more context around the face](https://res.cloudinary.com/demo/image/upload/ar_1.0,c_crop,g_face,z_0.5/woman.jpg "thumb: w_300")

```nodejs
cloudinary.image("woman.jpg", {aspect_ratio: "1.0", gravity: "face", zoom: "0.5", crop: "crop"})
```

```react
import { crop } from "@cloudinary/url-gen/actions/resize";
import { focusOn } from "@cloudinary/url-gen/qualifiers/gravity";
import { face } from "@cloudinary/url-gen/qualifiers/focusOn";

new CloudinaryImage("woman.jpg").resize(
  crop()
    .aspectRatio("1.0")
    .zoom(0.5)
    .gravity(focusOn(face()))
);
```

```vue
import { crop } from "@cloudinary/url-gen/actions/resize";
import { focusOn } from "@cloudinary/url-gen/qualifiers/gravity";
import { face } from "@cloudinary/url-gen/qualifiers/focusOn";

new CloudinaryImage("woman.jpg").resize(
  crop()
    .aspectRatio("1.0")
    .zoom(0.5)
    .gravity(focusOn(face()))
);
```

```angular
import { crop } from "@cloudinary/url-gen/actions/resize";
import { focusOn } from "@cloudinary/url-gen/qualifiers/gravity";
import { face } from "@cloudinary/url-gen/qualifiers/focusOn";

new CloudinaryImage("woman.jpg").resize(
  crop()
    .aspectRatio("1.0")
    .zoom(0.5)
    .gravity(focusOn(face()))
);
```

```js
import { crop } from "@cloudinary/url-gen/actions/resize";
import { focusOn } from "@cloudinary/url-gen/qualifiers/gravity";
import { face } from "@cloudinary/url-gen/qualifiers/focusOn";

new CloudinaryImage("woman.jpg").resize(
  crop()
    .aspectRatio("1.0")
    .zoom(0.5)
    .gravity(focusOn(face()))
);
```

```python
CloudinaryImage("woman.jpg").image(aspect_ratio="1.0", gravity="face", zoom="0.5", crop="crop")
```

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

(new ImageTag('woman.jpg'))
	->resize(Resize::crop()->aspectRatio(1.0)
->zoom(0.5)
	->gravity(
	Gravity::focusOn(
	FocusOn::face()))
	);
```

```java
cloudinary.url().transformation(new Transformation().aspectRatio("1.0").gravity("face").zoom(0.5).crop("crop")).imageTag("woman.jpg");
```

```ruby
cl_image_tag("woman.jpg", aspect_ratio: "1.0", gravity: "face", zoom: 0.5, crop: "crop")
```

```csharp
cloudinary.Api.UrlImgUp.Transform(new Transformation().AspectRatio("1.0").Gravity("face").Zoom(0.5).Crop("crop")).BuildImageTag("woman.jpg")
```

```dart
cloudinary.image('woman.jpg').transformation(Transformation()
	.resize(Resize.crop().aspectRatio('1.0')
.zoom(0.5)
	.gravity(
	Gravity.focusOn(
	FocusOn.face()))
	));
```

```swift
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setAspectRatio("1.0").setGravity("face").setZoom(0.5).setCrop("crop")).generate("woman.jpg")!, cloudinary: cloudinary)
```

```android
MediaManager.get().url().transformation(new Transformation().aspectRatio("1.0").gravity("face").zoom(0.5).crop("crop")).generate("woman.jpg");
```

```flutter
cloudinary.image('woman.jpg').transformation(Transformation()
	.resize(Resize.crop().aspectRatio('1.0')
.zoom(0.5)
	.gravity(
	Gravity.focusOn(
	FocusOn.face()))
	));
```

```kotlin
cloudinary.image {
	publicId("woman.jpg")
	 resize(Resize.crop() { aspectRatio(1.0F)
 zoom(0.5F)
	 gravity(
	Gravity.focusOn(
	FocusOn.face()))
	 }) 
}.generate()
```

```jquery
$.cloudinary.image("woman.jpg", {aspect_ratio: "1.0", gravity: "face", zoom: "0.5", crop: "crop"})
```

```react_native
import { crop } from "@cloudinary/url-gen/actions/resize";
import { focusOn } from "@cloudinary/url-gen/qualifiers/gravity";
import { face } from "@cloudinary/url-gen/qualifiers/focusOn";

new CloudinaryImage("woman.jpg").resize(
  crop()
    .aspectRatio("1.0")
    .zoom(0.5)
    .gravity(focusOn(face()))
);
```

**Zoomed in** (`ar_1.0,c_crop,g_face,z_1.5`):

![Zoomed in for a tighter crop on the face](https://res.cloudinary.com/demo/image/upload/ar_1.0,c_crop,g_face,z_1.5/woman.jpg "thumb: w_300")

```nodejs
cloudinary.image("woman.jpg", {aspect_ratio: "1.0", gravity: "face", zoom: "1.5", crop: "crop"})
```

```react
import { crop } from "@cloudinary/url-gen/actions/resize";
import { focusOn } from "@cloudinary/url-gen/qualifiers/gravity";
import { face } from "@cloudinary/url-gen/qualifiers/focusOn";

new CloudinaryImage("woman.jpg").resize(
  crop()
    .aspectRatio("1.0")
    .zoom(1.5)
    .gravity(focusOn(face()))
);
```

```vue
import { crop } from "@cloudinary/url-gen/actions/resize";
import { focusOn } from "@cloudinary/url-gen/qualifiers/gravity";
import { face } from "@cloudinary/url-gen/qualifiers/focusOn";

new CloudinaryImage("woman.jpg").resize(
  crop()
    .aspectRatio("1.0")
    .zoom(1.5)
    .gravity(focusOn(face()))
);
```

```angular
import { crop } from "@cloudinary/url-gen/actions/resize";
import { focusOn } from "@cloudinary/url-gen/qualifiers/gravity";
import { face } from "@cloudinary/url-gen/qualifiers/focusOn";

new CloudinaryImage("woman.jpg").resize(
  crop()
    .aspectRatio("1.0")
    .zoom(1.5)
    .gravity(focusOn(face()))
);
```

```js
import { crop } from "@cloudinary/url-gen/actions/resize";
import { focusOn } from "@cloudinary/url-gen/qualifiers/gravity";
import { face } from "@cloudinary/url-gen/qualifiers/focusOn";

new CloudinaryImage("woman.jpg").resize(
  crop()
    .aspectRatio("1.0")
    .zoom(1.5)
    .gravity(focusOn(face()))
);
```

```python
CloudinaryImage("woman.jpg").image(aspect_ratio="1.0", gravity="face", zoom="1.5", crop="crop")
```

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

(new ImageTag('woman.jpg'))
	->resize(Resize::crop()->aspectRatio(1.0)
->zoom(1.5)
	->gravity(
	Gravity::focusOn(
	FocusOn::face()))
	);
```

```java
cloudinary.url().transformation(new Transformation().aspectRatio("1.0").gravity("face").zoom(1.5).crop("crop")).imageTag("woman.jpg");
```

```ruby
cl_image_tag("woman.jpg", aspect_ratio: "1.0", gravity: "face", zoom: 1.5, crop: "crop")
```

```csharp
cloudinary.Api.UrlImgUp.Transform(new Transformation().AspectRatio("1.0").Gravity("face").Zoom(1.5).Crop("crop")).BuildImageTag("woman.jpg")
```

```dart
cloudinary.image('woman.jpg').transformation(Transformation()
	.resize(Resize.crop().aspectRatio('1.0')
.zoom(1.5)
	.gravity(
	Gravity.focusOn(
	FocusOn.face()))
	));
```

```swift
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setAspectRatio("1.0").setGravity("face").setZoom(1.5).setCrop("crop")).generate("woman.jpg")!, cloudinary: cloudinary)
```

```android
MediaManager.get().url().transformation(new Transformation().aspectRatio("1.0").gravity("face").zoom(1.5).crop("crop")).generate("woman.jpg");
```

```flutter
cloudinary.image('woman.jpg').transformation(Transformation()
	.resize(Resize.crop().aspectRatio('1.0')
.zoom(1.5)
	.gravity(
	Gravity.focusOn(
	FocusOn.face()))
	));
```

```kotlin
cloudinary.image {
	publicId("woman.jpg")
	 resize(Resize.crop() { aspectRatio(1.0F)
 zoom(1.5F)
	 gravity(
	Gravity.focusOn(
	FocusOn.face()))
	 }) 
}.generate()
```

```jquery
$.cloudinary.image("woman.jpg", {aspect_ratio: "1.0", gravity: "face", zoom: "1.5", crop: "crop"})
```

```react_native
import { crop } from "@cloudinary/url-gen/actions/resize";
import { focusOn } from "@cloudinary/url-gen/qualifiers/gravity";
import { face } from "@cloudinary/url-gen/qualifiers/focusOn";

new CloudinaryImage("woman.jpg").resize(
  crop()
    .aspectRatio("1.0")
    .zoom(1.5)
    .gravity(focusOn(face()))
);
```

#### With c_thumb for resolution-independent sizing

When you need a specific output size that's the same across source images of different resolutions, use `c_thumb`. The `z` parameter keeps working even with `w` and `h` set:

**Default zoom** (`c_thumb,g_face,h_300,w_300`):

![Face thumbnail with default zoom](https://res.cloudinary.com/demo/image/upload/c_thumb,g_face,h_300,w_300/woman.jpg "thumb: w_300")

```nodejs
cloudinary.image("woman.jpg", {gravity: "face", height: 300, width: 300, crop: "thumb"})
```

```react
import { thumbnail } from "@cloudinary/url-gen/actions/resize";
import { focusOn } from "@cloudinary/url-gen/qualifiers/gravity";
import { face } from "@cloudinary/url-gen/qualifiers/focusOn";

new CloudinaryImage("woman.jpg").resize(
  thumbnail()
    .width(300)
    .height(300)
    .gravity(focusOn(face()))
);
```

```vue
import { thumbnail } from "@cloudinary/url-gen/actions/resize";
import { focusOn } from "@cloudinary/url-gen/qualifiers/gravity";
import { face } from "@cloudinary/url-gen/qualifiers/focusOn";

new CloudinaryImage("woman.jpg").resize(
  thumbnail()
    .width(300)
    .height(300)
    .gravity(focusOn(face()))
);
```

```angular
import { thumbnail } from "@cloudinary/url-gen/actions/resize";
import { focusOn } from "@cloudinary/url-gen/qualifiers/gravity";
import { face } from "@cloudinary/url-gen/qualifiers/focusOn";

new CloudinaryImage("woman.jpg").resize(
  thumbnail()
    .width(300)
    .height(300)
    .gravity(focusOn(face()))
);
```

```js
import { thumbnail } from "@cloudinary/url-gen/actions/resize";
import { focusOn } from "@cloudinary/url-gen/qualifiers/gravity";
import { face } from "@cloudinary/url-gen/qualifiers/focusOn";

new CloudinaryImage("woman.jpg").resize(
  thumbnail()
    .width(300)
    .height(300)
    .gravity(focusOn(face()))
);
```

```python
CloudinaryImage("woman.jpg").image(gravity="face", height=300, width=300, crop="thumb")
```

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

(new ImageTag('woman.jpg'))
	->resize(Resize::thumbnail()->width(300)
->height(300)
	->gravity(
	Gravity::focusOn(
	FocusOn::face()))
	);
```

```java
cloudinary.url().transformation(new Transformation().gravity("face").height(300).width(300).crop("thumb")).imageTag("woman.jpg");
```

```ruby
cl_image_tag("woman.jpg", gravity: "face", height: 300, width: 300, crop: "thumb")
```

```csharp
cloudinary.Api.UrlImgUp.Transform(new Transformation().Gravity("face").Height(300).Width(300).Crop("thumb")).BuildImageTag("woman.jpg")
```

```dart
cloudinary.image('woman.jpg').transformation(Transformation()
	.resize(Resize.thumbnail().width(300)
.height(300)
	.gravity(
	Gravity.focusOn(
	FocusOn.face()))
	));
```

```swift
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setGravity("face").setHeight(300).setWidth(300).setCrop("thumb")).generate("woman.jpg")!, cloudinary: cloudinary)
```

```android
MediaManager.get().url().transformation(new Transformation().gravity("face").height(300).width(300).crop("thumb")).generate("woman.jpg");
```

```flutter
cloudinary.image('woman.jpg').transformation(Transformation()
	.resize(Resize.thumbnail().width(300)
.height(300)
	.gravity(
	Gravity.focusOn(
	FocusOn.face()))
	));
```

```kotlin
cloudinary.image {
	publicId("woman.jpg")
	 resize(Resize.thumbnail() { width(300)
 height(300)
	 gravity(
	Gravity.focusOn(
	FocusOn.face()))
	 }) 
}.generate()
```

```jquery
$.cloudinary.image("woman.jpg", {gravity: "face", height: 300, width: 300, crop: "thumb"})
```

```react_native
import { thumbnail } from "@cloudinary/url-gen/actions/resize";
import { focusOn } from "@cloudinary/url-gen/qualifiers/gravity";
import { face } from "@cloudinary/url-gen/qualifiers/focusOn";

new CloudinaryImage("woman.jpg").resize(
  thumbnail()
    .width(300)
    .height(300)
    .gravity(focusOn(face()))
);
```

**Zoomed in** (`c_thumb,g_face,h_300,w_300,z_2.0`):

![Face thumbnail zoomed in for a tighter crop](https://res.cloudinary.com/demo/image/upload/c_thumb,g_face,h_300,w_300,z_2.0/woman.jpg "thumb: w_300")

```nodejs
cloudinary.image("woman.jpg", {gravity: "face", height: 300, width: 300, zoom: "2.0", crop: "thumb"})
```

```react
import { thumbnail } from "@cloudinary/url-gen/actions/resize";
import { focusOn } from "@cloudinary/url-gen/qualifiers/gravity";
import { face } from "@cloudinary/url-gen/qualifiers/focusOn";

new CloudinaryImage("woman.jpg").resize(
  thumbnail()
    .width(300)
    .height(300)
    .zoom("2.0")
    .gravity(focusOn(face()))
);
```

```vue
import { thumbnail } from "@cloudinary/url-gen/actions/resize";
import { focusOn } from "@cloudinary/url-gen/qualifiers/gravity";
import { face } from "@cloudinary/url-gen/qualifiers/focusOn";

new CloudinaryImage("woman.jpg").resize(
  thumbnail()
    .width(300)
    .height(300)
    .zoom("2.0")
    .gravity(focusOn(face()))
);
```

```angular
import { thumbnail } from "@cloudinary/url-gen/actions/resize";
import { focusOn } from "@cloudinary/url-gen/qualifiers/gravity";
import { face } from "@cloudinary/url-gen/qualifiers/focusOn";

new CloudinaryImage("woman.jpg").resize(
  thumbnail()
    .width(300)
    .height(300)
    .zoom("2.0")
    .gravity(focusOn(face()))
);
```

```js
import { thumbnail } from "@cloudinary/url-gen/actions/resize";
import { focusOn } from "@cloudinary/url-gen/qualifiers/gravity";
import { face } from "@cloudinary/url-gen/qualifiers/focusOn";

new CloudinaryImage("woman.jpg").resize(
  thumbnail()
    .width(300)
    .height(300)
    .zoom("2.0")
    .gravity(focusOn(face()))
);
```

```python
CloudinaryImage("woman.jpg").image(gravity="face", height=300, width=300, zoom="2.0", crop="thumb")
```

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

(new ImageTag('woman.jpg'))
	->resize(Resize::thumbnail()->width(300)
->height(300)
->zoom(2.0)
	->gravity(
	Gravity::focusOn(
	FocusOn::face()))
	);
```

```java
cloudinary.url().transformation(new Transformation().gravity("face").height(300).width(300).zoom(2.0).crop("thumb")).imageTag("woman.jpg");
```

```ruby
cl_image_tag("woman.jpg", gravity: "face", height: 300, width: 300, zoom: 2.0, crop: "thumb")
```

```csharp
cloudinary.Api.UrlImgUp.Transform(new Transformation().Gravity("face").Height(300).Width(300).Zoom(2.0).Crop("thumb")).BuildImageTag("woman.jpg")
```

```dart
cloudinary.image('woman.jpg').transformation(Transformation()
	.resize(Resize.thumbnail().width(300)
.height(300)
.zoom('2.0')
	.gravity(
	Gravity.focusOn(
	FocusOn.face()))
	));
```

```swift
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setGravity("face").setHeight(300).setWidth(300).setZoom(2.0).setCrop("thumb")).generate("woman.jpg")!, cloudinary: cloudinary)
```

```android
MediaManager.get().url().transformation(new Transformation().gravity("face").height(300).width(300).zoom(2.0).crop("thumb")).generate("woman.jpg");
```

```flutter
cloudinary.image('woman.jpg').transformation(Transformation()
	.resize(Resize.thumbnail().width(300)
.height(300)
.zoom('2.0')
	.gravity(
	Gravity.focusOn(
	FocusOn.face()))
	));
```

```kotlin
cloudinary.image {
	publicId("woman.jpg")
	 resize(Resize.thumbnail() { width(300)
 height(300)
 zoom(2.0F)
	 gravity(
	Gravity.focusOn(
	FocusOn.face()))
	 }) 
}.generate()
```

```jquery
$.cloudinary.image("woman.jpg", {gravity: "face", height: 300, width: 300, zoom: "2.0", crop: "thumb"})
```

```react_native
import { thumbnail } from "@cloudinary/url-gen/actions/resize";
import { focusOn } from "@cloudinary/url-gen/qualifiers/gravity";
import { face } from "@cloudinary/url-gen/qualifiers/focusOn";

new CloudinaryImage("woman.jpg").resize(
  thumbnail()
    .width(300)
    .height(300)
    .zoom("2.0")
    .gravity(focusOn(face()))
);
```

For more details, see [c_crop](transformation_reference#c_crop), [c_thumb](transformation_reference#c_thumb), and [z (zoom)](transformation_reference#z_zoom) in the Transformation Reference.

### Option 2: Shift the face with a two-step crop

If you need precise directional control over where the face appears in the final image, use a two-step crop:

1. **First step:** Use `c_thumb` with `g_face` and dimensions larger than your target size. The `c_thumb` crop mode scales the cropped region proportionally to the detected face, so the technique gives consistent results across source images of different resolutions.
2. **Second step:** Apply `c_crop` with `x` and `y` to shift the crop window within the region from step 1.

Because the second `c_crop` operates on the already-cropped intermediate image, `x` and `y` work as expected, since there's no gravity to conflict with.

In the second step, `x` and `y` set the top-left corner of the final crop rectangle within the intermediate image:

* **Increasing `x`:** Moves the crop window to the right, which shifts the face to the left in the output.
* **Increasing `y`:** Moves the crop window down, which shifts the face up in the output.

This example first extracts a 600x600 region proportional to the detected face, and then crops a 400x400 region with different offsets.

**x=0, y=0** (top-left of the face region):

![Two-step crop with x=0 and y=0](https://res.cloudinary.com/demo/image/upload/c_thumb,g_face,h_600,w_600/c_crop,h_400,w_400,x_0,y_0/woman.jpg "thumb: w_400")

```nodejs
cloudinary.image("woman.jpg", {transformation: [
  {gravity: "face", height: 600, width: 600, crop: "thumb"},
  {height: 400, width: 400, x: 0, y: 0, crop: "crop"}
  ]})
```

```react
import { thumbnail, crop } from "@cloudinary/url-gen/actions/resize";
import { focusOn } from "@cloudinary/url-gen/qualifiers/gravity";
import { face } from "@cloudinary/url-gen/qualifiers/focusOn";

new CloudinaryImage("woman.jpg")
  .resize(
    thumbnail()
      .width(600)
      .height(600)
      .gravity(focusOn(face()))
  )
  .resize(crop().width(400).height(400).x(0).y(0));
```

```vue
import { thumbnail, crop } from "@cloudinary/url-gen/actions/resize";
import { focusOn } from "@cloudinary/url-gen/qualifiers/gravity";
import { face } from "@cloudinary/url-gen/qualifiers/focusOn";

new CloudinaryImage("woman.jpg")
  .resize(
    thumbnail()
      .width(600)
      .height(600)
      .gravity(focusOn(face()))
  )
  .resize(crop().width(400).height(400).x(0).y(0));
```

```angular
import { thumbnail, crop } from "@cloudinary/url-gen/actions/resize";
import { focusOn } from "@cloudinary/url-gen/qualifiers/gravity";
import { face } from "@cloudinary/url-gen/qualifiers/focusOn";

new CloudinaryImage("woman.jpg")
  .resize(
    thumbnail()
      .width(600)
      .height(600)
      .gravity(focusOn(face()))
  )
  .resize(crop().width(400).height(400).x(0).y(0));
```

```js
import { thumbnail, crop } from "@cloudinary/url-gen/actions/resize";
import { focusOn } from "@cloudinary/url-gen/qualifiers/gravity";
import { face } from "@cloudinary/url-gen/qualifiers/focusOn";

new CloudinaryImage("woman.jpg")
  .resize(
    thumbnail()
      .width(600)
      .height(600)
      .gravity(focusOn(face()))
  )
  .resize(crop().width(400).height(400).x(0).y(0));
```

```python
CloudinaryImage("woman.jpg").image(transformation=[
  {'gravity': "face", 'height': 600, 'width': 600, 'crop': "thumb"},
  {'height': 400, 'width': 400, 'x': 0, 'y': 0, 'crop': "crop"}
  ])
```

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

(new ImageTag('woman.jpg'))
	->resize(Resize::thumbnail()->width(600)
->height(600)
	->gravity(
	Gravity::focusOn(
	FocusOn::face()))
	)
	->resize(Resize::crop()->width(400)
->height(400)
->x(0)
->y(0));
```

```java
cloudinary.url().transformation(new Transformation()
  .gravity("face").height(600).width(600).crop("thumb").chain()
  .height(400).width(400).x(0).y(0).crop("crop")).imageTag("woman.jpg");
```

```ruby
cl_image_tag("woman.jpg", transformation: [
  {gravity: "face", height: 600, width: 600, crop: "thumb"},
  {height: 400, width: 400, x: 0, y: 0, crop: "crop"}
  ])
```

```csharp
cloudinary.Api.UrlImgUp.Transform(new Transformation()
  .Gravity("face").Height(600).Width(600).Crop("thumb").Chain()
  .Height(400).Width(400).X(0).Y(0).Crop("crop")).BuildImageTag("woman.jpg")
```

```dart
cloudinary.image('woman.jpg').transformation(Transformation()
	.resize(Resize.thumbnail().width(600)
.height(600)
	.gravity(
	Gravity.focusOn(
	FocusOn.face()))
	)
	.resize(Resize.crop().width(400)
.height(400)
.x(0)
.y(0)));
```

```swift
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation()
  .setGravity("face").setHeight(600).setWidth(600).setCrop("thumb").chain()
  .setHeight(400).setWidth(400).setX(0).setY(0).setCrop("crop")).generate("woman.jpg")!, cloudinary: cloudinary)
```

```android
MediaManager.get().url().transformation(new Transformation()
  .gravity("face").height(600).width(600).crop("thumb").chain()
  .height(400).width(400).x(0).y(0).crop("crop")).generate("woman.jpg");
```

```flutter
cloudinary.image('woman.jpg').transformation(Transformation()
	.resize(Resize.thumbnail().width(600)
.height(600)
	.gravity(
	Gravity.focusOn(
	FocusOn.face()))
	)
	.resize(Resize.crop().width(400)
.height(400)
.x(0)
.y(0)));
```

```kotlin
cloudinary.image {
	publicId("woman.jpg")
	 resize(Resize.thumbnail() { width(600)
 height(600)
	 gravity(
	Gravity.focusOn(
	FocusOn.face()))
	 })
	 resize(Resize.crop() { width(400)
 height(400)
 x(0)
 y(0) }) 
}.generate()
```

```jquery
$.cloudinary.image("woman.jpg", {transformation: [
  {gravity: "face", height: 600, width: 600, crop: "thumb"},
  {height: 400, width: 400, x: 0, y: 0, crop: "crop"}
  ]})
```

```react_native
import { thumbnail, crop } from "@cloudinary/url-gen/actions/resize";
import { focusOn } from "@cloudinary/url-gen/qualifiers/gravity";
import { face } from "@cloudinary/url-gen/qualifiers/focusOn";

new CloudinaryImage("woman.jpg")
  .resize(
    thumbnail()
      .width(600)
      .height(600)
      .gravity(focusOn(face()))
  )
  .resize(crop().width(400).height(400).x(0).y(0));
```

**x=150, y=0** (face shifted left):

![Two-step crop with x=150 shifting the face to the left](https://res.cloudinary.com/demo/image/upload/c_thumb,g_face,h_600,w_600/c_crop,h_400,w_400,x_150,y_0/woman.jpg "thumb: w_400")

```nodejs
cloudinary.image("woman.jpg", {transformation: [
  {gravity: "face", height: 600, width: 600, crop: "thumb"},
  {height: 400, width: 400, x: 150, y: 0, crop: "crop"}
  ]})
```

```react
import { thumbnail, crop } from "@cloudinary/url-gen/actions/resize";
import { focusOn } from "@cloudinary/url-gen/qualifiers/gravity";
import { face } from "@cloudinary/url-gen/qualifiers/focusOn";

new CloudinaryImage("woman.jpg")
  .resize(
    thumbnail()
      .width(600)
      .height(600)
      .gravity(focusOn(face()))
  )
  .resize(crop().width(400).height(400).x(150).y(0));
```

```vue
import { thumbnail, crop } from "@cloudinary/url-gen/actions/resize";
import { focusOn } from "@cloudinary/url-gen/qualifiers/gravity";
import { face } from "@cloudinary/url-gen/qualifiers/focusOn";

new CloudinaryImage("woman.jpg")
  .resize(
    thumbnail()
      .width(600)
      .height(600)
      .gravity(focusOn(face()))
  )
  .resize(crop().width(400).height(400).x(150).y(0));
```

```angular
import { thumbnail, crop } from "@cloudinary/url-gen/actions/resize";
import { focusOn } from "@cloudinary/url-gen/qualifiers/gravity";
import { face } from "@cloudinary/url-gen/qualifiers/focusOn";

new CloudinaryImage("woman.jpg")
  .resize(
    thumbnail()
      .width(600)
      .height(600)
      .gravity(focusOn(face()))
  )
  .resize(crop().width(400).height(400).x(150).y(0));
```

```js
import { thumbnail, crop } from "@cloudinary/url-gen/actions/resize";
import { focusOn } from "@cloudinary/url-gen/qualifiers/gravity";
import { face } from "@cloudinary/url-gen/qualifiers/focusOn";

new CloudinaryImage("woman.jpg")
  .resize(
    thumbnail()
      .width(600)
      .height(600)
      .gravity(focusOn(face()))
  )
  .resize(crop().width(400).height(400).x(150).y(0));
```

```python
CloudinaryImage("woman.jpg").image(transformation=[
  {'gravity': "face", 'height': 600, 'width': 600, 'crop': "thumb"},
  {'height': 400, 'width': 400, 'x': 150, 'y': 0, 'crop': "crop"}
  ])
```

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

(new ImageTag('woman.jpg'))
	->resize(Resize::thumbnail()->width(600)
->height(600)
	->gravity(
	Gravity::focusOn(
	FocusOn::face()))
	)
	->resize(Resize::crop()->width(400)
->height(400)
->x(150)
->y(0));
```

```java
cloudinary.url().transformation(new Transformation()
  .gravity("face").height(600).width(600).crop("thumb").chain()
  .height(400).width(400).x(150).y(0).crop("crop")).imageTag("woman.jpg");
```

```ruby
cl_image_tag("woman.jpg", transformation: [
  {gravity: "face", height: 600, width: 600, crop: "thumb"},
  {height: 400, width: 400, x: 150, y: 0, crop: "crop"}
  ])
```

```csharp
cloudinary.Api.UrlImgUp.Transform(new Transformation()
  .Gravity("face").Height(600).Width(600).Crop("thumb").Chain()
  .Height(400).Width(400).X(150).Y(0).Crop("crop")).BuildImageTag("woman.jpg")
```

```dart
cloudinary.image('woman.jpg').transformation(Transformation()
	.resize(Resize.thumbnail().width(600)
.height(600)
	.gravity(
	Gravity.focusOn(
	FocusOn.face()))
	)
	.resize(Resize.crop().width(400)
.height(400)
.x(150)
.y(0)));
```

```swift
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation()
  .setGravity("face").setHeight(600).setWidth(600).setCrop("thumb").chain()
  .setHeight(400).setWidth(400).setX(150).setY(0).setCrop("crop")).generate("woman.jpg")!, cloudinary: cloudinary)
```

```android
MediaManager.get().url().transformation(new Transformation()
  .gravity("face").height(600).width(600).crop("thumb").chain()
  .height(400).width(400).x(150).y(0).crop("crop")).generate("woman.jpg");
```

```flutter
cloudinary.image('woman.jpg').transformation(Transformation()
	.resize(Resize.thumbnail().width(600)
.height(600)
	.gravity(
	Gravity.focusOn(
	FocusOn.face()))
	)
	.resize(Resize.crop().width(400)
.height(400)
.x(150)
.y(0)));
```

```kotlin
cloudinary.image {
	publicId("woman.jpg")
	 resize(Resize.thumbnail() { width(600)
 height(600)
	 gravity(
	Gravity.focusOn(
	FocusOn.face()))
	 })
	 resize(Resize.crop() { width(400)
 height(400)
 x(150)
 y(0) }) 
}.generate()
```

```jquery
$.cloudinary.image("woman.jpg", {transformation: [
  {gravity: "face", height: 600, width: 600, crop: "thumb"},
  {height: 400, width: 400, x: 150, y: 0, crop: "crop"}
  ]})
```

```react_native
import { thumbnail, crop } from "@cloudinary/url-gen/actions/resize";
import { focusOn } from "@cloudinary/url-gen/qualifiers/gravity";
import { face } from "@cloudinary/url-gen/qualifiers/focusOn";

new CloudinaryImage("woman.jpg")
  .resize(
    thumbnail()
      .width(600)
      .height(600)
      .gravity(focusOn(face()))
  )
  .resize(crop().width(400).height(400).x(150).y(0));
```

**x=0, y=150** (face shifted up):

![Two-step crop with y=150 shifting the face upward](https://res.cloudinary.com/demo/image/upload/c_thumb,g_face,h_600,w_600/c_crop,h_400,w_400,x_0,y_150/woman.jpg "thumb: w_400")

```nodejs
cloudinary.image("woman.jpg", {transformation: [
  {gravity: "face", height: 600, width: 600, crop: "thumb"},
  {height: 400, width: 400, x: 0, y: 150, crop: "crop"}
  ]})
```

```react
import { thumbnail, crop } from "@cloudinary/url-gen/actions/resize";
import { focusOn } from "@cloudinary/url-gen/qualifiers/gravity";
import { face } from "@cloudinary/url-gen/qualifiers/focusOn";

new CloudinaryImage("woman.jpg")
  .resize(
    thumbnail()
      .width(600)
      .height(600)
      .gravity(focusOn(face()))
  )
  .resize(crop().width(400).height(400).x(0).y(150));
```

```vue
import { thumbnail, crop } from "@cloudinary/url-gen/actions/resize";
import { focusOn } from "@cloudinary/url-gen/qualifiers/gravity";
import { face } from "@cloudinary/url-gen/qualifiers/focusOn";

new CloudinaryImage("woman.jpg")
  .resize(
    thumbnail()
      .width(600)
      .height(600)
      .gravity(focusOn(face()))
  )
  .resize(crop().width(400).height(400).x(0).y(150));
```

```angular
import { thumbnail, crop } from "@cloudinary/url-gen/actions/resize";
import { focusOn } from "@cloudinary/url-gen/qualifiers/gravity";
import { face } from "@cloudinary/url-gen/qualifiers/focusOn";

new CloudinaryImage("woman.jpg")
  .resize(
    thumbnail()
      .width(600)
      .height(600)
      .gravity(focusOn(face()))
  )
  .resize(crop().width(400).height(400).x(0).y(150));
```

```js
import { thumbnail, crop } from "@cloudinary/url-gen/actions/resize";
import { focusOn } from "@cloudinary/url-gen/qualifiers/gravity";
import { face } from "@cloudinary/url-gen/qualifiers/focusOn";

new CloudinaryImage("woman.jpg")
  .resize(
    thumbnail()
      .width(600)
      .height(600)
      .gravity(focusOn(face()))
  )
  .resize(crop().width(400).height(400).x(0).y(150));
```

```python
CloudinaryImage("woman.jpg").image(transformation=[
  {'gravity': "face", 'height': 600, 'width': 600, 'crop': "thumb"},
  {'height': 400, 'width': 400, 'x': 0, 'y': 150, 'crop': "crop"}
  ])
```

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

(new ImageTag('woman.jpg'))
	->resize(Resize::thumbnail()->width(600)
->height(600)
	->gravity(
	Gravity::focusOn(
	FocusOn::face()))
	)
	->resize(Resize::crop()->width(400)
->height(400)
->x(0)
->y(150));
```

```java
cloudinary.url().transformation(new Transformation()
  .gravity("face").height(600).width(600).crop("thumb").chain()
  .height(400).width(400).x(0).y(150).crop("crop")).imageTag("woman.jpg");
```

```ruby
cl_image_tag("woman.jpg", transformation: [
  {gravity: "face", height: 600, width: 600, crop: "thumb"},
  {height: 400, width: 400, x: 0, y: 150, crop: "crop"}
  ])
```

```csharp
cloudinary.Api.UrlImgUp.Transform(new Transformation()
  .Gravity("face").Height(600).Width(600).Crop("thumb").Chain()
  .Height(400).Width(400).X(0).Y(150).Crop("crop")).BuildImageTag("woman.jpg")
```

```dart
cloudinary.image('woman.jpg').transformation(Transformation()
	.resize(Resize.thumbnail().width(600)
.height(600)
	.gravity(
	Gravity.focusOn(
	FocusOn.face()))
	)
	.resize(Resize.crop().width(400)
.height(400)
.x(0)
.y(150)));
```

```swift
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation()
  .setGravity("face").setHeight(600).setWidth(600).setCrop("thumb").chain()
  .setHeight(400).setWidth(400).setX(0).setY(150).setCrop("crop")).generate("woman.jpg")!, cloudinary: cloudinary)
```

```android
MediaManager.get().url().transformation(new Transformation()
  .gravity("face").height(600).width(600).crop("thumb").chain()
  .height(400).width(400).x(0).y(150).crop("crop")).generate("woman.jpg");
```

```flutter
cloudinary.image('woman.jpg').transformation(Transformation()
	.resize(Resize.thumbnail().width(600)
.height(600)
	.gravity(
	Gravity.focusOn(
	FocusOn.face()))
	)
	.resize(Resize.crop().width(400)
.height(400)
.x(0)
.y(150)));
```

```kotlin
cloudinary.image {
	publicId("woman.jpg")
	 resize(Resize.thumbnail() { width(600)
 height(600)
	 gravity(
	Gravity.focusOn(
	FocusOn.face()))
	 })
	 resize(Resize.crop() { width(400)
 height(400)
 x(0)
 y(150) }) 
}.generate()
```

```jquery
$.cloudinary.image("woman.jpg", {transformation: [
  {gravity: "face", height: 600, width: 600, crop: "thumb"},
  {height: 400, width: 400, x: 0, y: 150, crop: "crop"}
  ]})
```

```react_native
import { thumbnail, crop } from "@cloudinary/url-gen/actions/resize";
import { focusOn } from "@cloudinary/url-gen/qualifiers/gravity";
import { face } from "@cloudinary/url-gen/qualifiers/focusOn";

new CloudinaryImage("woman.jpg")
  .resize(
    thumbnail()
      .width(600)
      .height(600)
      .gravity(focusOn(face()))
  )
  .resize(crop().width(400).height(400).x(0).y(150));
```

> **NOTES**:
>
> * Make the first crop dimensions large enough to give the second step room to adjust. If the first crop is too tight, there's no space to nudge.

> * The difference between the first and second crop dimensions determines how far you can shift. For example, a 600x600 first crop with a 400x400 second crop allows up to 200 pixels of adjustment in each direction.

> * Experiment with the `x` and `y` values to find the right positioning for your image.

## Focus on objects other than faces

If your images feature subjects other than people (products, animals, or specific objects), replace `g_face` with object-detection gravity from the [Cloudinary AI Content Analysis](cloudinary_ai_content_analysis_addon) add-on. Use `g_auto:<object>` (for example, `g_auto:cat`), or `g_<object>` (for example, `g_cat`), with any of the techniques on this page to center and nudge the crop around that subject.

## Related topics

* [Face-detection based transformations](face_detection_based_transformations)
* [Image crop modes](image_crop_modes)
* [Image gravity for crops](image_gravity)