Coordinates-based Cropping

docs/pages/cldimage/configuration.mdx

@@ -316,6 +316,16 @@ or it can accept an object or an array of objects which can take the following o
       type: 'string',
       example: () => (<a href="#required-props">See Width</a>),
     },
+    {
+      prop: 'x',
+      type: 'number | string',
+      example: () => (<code>100</code>),
+    },
+    {
+      prop: 'y',
+      type: 'number | string',
+      example: () => (<code>200</code>),
+    },
     {
       prop: 'zoom',
       type: 'string',
@@ -367,6 +377,20 @@ crop={{
 }}
 ```
 
+Using coordinates to crop to a specific location:
+
+```jsx copy
+crop={{
+  type: 'crop',
+  width: 400,
+  height: 400,
+  x: 80,
+  y: 350,
+  gravity: 'north_east',
+  source: true
+}}
+```
+
 [Learn more about the crop transformation](https://cloudinary.com/documentation/transformation_reference#c_crop_resize) on the Cloudinary docs.
 
 

docs/pages/cldimage/examples.mdx

@@ -136,12 +136,12 @@ position the subject in the center of the resulting image.
 
 <HeaderImage>
   <CldImage
+    src={`${process.env.IMAGES_DIRECTORY}/woman-headphones`}
     width="300"
     height="300"
-    src={`${process.env.IMAGES_DIRECTORY}/woman-headphones`}
-    sizes="100vw"
     crop="fill"
     alt=""
+    sizes="100vw"
   />
 </HeaderImage>
 
@@ -150,12 +150,12 @@ position the subject in the center of the resulting image.
   import { CldImage } from 'next-cloudinary';
 
   <CldImage
+    src="<Your Public ID>"
     width="300"
     height="300"
-    src="<Your Public ID>"
-    sizes="100vw"
     crop="fill"
     alt=""
+    sizes="100vw"
   />
   ```
 </CodeBlock>
@@ -172,16 +172,16 @@ resize it to the initial width and height, you can use:
 <HeaderImage>
   <CldImage
     width="300"
-    height="300"
     src={`${process.env.IMAGES_DIRECTORY}/woman-headphones`}
-    sizes="100vw"
+    height="300"
     crop={{
+      type: 'thumb',
       width: 600,
       height: 600,
-      type: 'thumb',
       source: true
     }}
     alt=""
+    sizes="100vw"
   />
 </HeaderImage>
 
@@ -190,23 +190,67 @@ resize it to the initial width and height, you can use:
   import { CldImage } from 'next-cloudinary';
 
   <CldImage
+    src="<Your Public ID>"
     width="300"
     height="300"
-    src="<Your Public ID>"
-    sizes="100vw"
     crop={{
+      type: 'thumb',
       width: 600,
       height: 600,
-      type: 'thumb',
       source: true
     }}
     alt=""
+    sizes="100vw"
   />
   ```
 </CodeBlock>
 
 Which will provide a consistent crop for all rendered sizes.
 
+You can also use coordinates to crop to the exact location you need:
+
+<HeaderImage>
+  <CldImage
+    src={`${process.env.IMAGES_DIRECTORY}/woman-headphones`}
+    width="300"
+    height="300"
+    crop={{
+      type: 'crop',
+      width: 400,
+      height: 400,
+      x: 80,
+      y: 350,
+      gravity: 'north_east',
+      source: true
+    }}
+    alt=""
+    sizes="100vw"
+  />
+</HeaderImage>
+
+<CodeBlock>
+  ```jsx copy showLineNumbers
+  import { CldImage } from 'next-cloudinary';
+
+  <CldImage
+    src="<Your Public ID>"
+    width="300"
+    height="300"
+    crop={{
+      type: 'crop',
+      width: 400,
+      height: 400,
+      x: 80,
+      y: 350,
+      gravity: 'north_east',
+      source: true
+    }}
+    alt=""
+    sizes="100vw"
+  />
+  ```
+</CodeBlock>
+
 Learn more about [cropping](/cldimage/configuration#crop) and [responsive images](/guides/responsive-images).
 
 #### Fill Parent

next-cloudinary/package.json

@@ -16,8 +16,8 @@
     "test:watch": "vitest"
   },
   "dependencies": {
-    "@cloudinary-util/types": "1.4.0",
-    "@cloudinary-util/url-loader": "5.9.0",
+    "@cloudinary-util/types": "1.5.3",
+    "@cloudinary-util/url-loader": "5.10.0",
     "@cloudinary-util/util": "^3.3.2",
     "@tsconfig/recommended": "^1.0.7"
   },