Adding face cropping parameters to image transformation

Author: deven96

src/content/docs/images/transform-images/transform-via-url.mdx

@@ -135,6 +135,10 @@ You must specify at least one option. Options are comma-separated (spaces are no
 
 <Render file="width" />
 
+### `zoom`
+
+<Render file="zoom" />
+
 ## Recommended image sizes
 
 Ideally, image sizes should match exactly the size they are displayed on the page. If the page contains thumbnails with markup such as `<img width="200" …>`, then images should be resized to `width=200`. If the exact size is not known ahead of time, use the [responsive images technique](/images/manage-images/create-variants/).

src/content/docs/images/transform-images/transform-via-workers.mdx

@@ -118,6 +118,10 @@ The `fetch()` function accepts parameters in the second argument inside the `{cf
 
 <Render file="width" />
 
+### `zoom`
+
+<Render file="zoom" />
+
 In your worker, where you would fetch the image using `fetch(request)`, add options like in the following example:
 
 ```js
@@ -281,4 +285,4 @@ When testing image resizing, please deploy the script first. Resizing will not b
 
 Resized images are always cached. They are cached as additional variants under a cache entry for the URL of the full-size source image in the `fetch` subrequest. Do not worry about using many different Workers or many external URLs — they do not influence caching of resized images, and you do not need to do anything for resized images to be cached correctly.
 
-If you use the `cacheKey` fetch option to unify caches of multiple different source URLs, you must not add any resizing options to the `cacheKey`, as this will fragment the cache and hurt caching performance. The `cacheKey` option is meant for the full-size source image URL only, not for its resized variants.
+If you use the `cacheKey` fetch option to unify caches of multiple different source URLs, you must not add any resizing options to the `cacheKey`, as this will fragment the cache and hurt caching performance. The `cacheKey` option is meant for the full-size source image URL only, not for its resized variants.

src/content/partials/images/gravity.mdx

@@ -17,6 +17,9 @@ When cropping with `fit: "cover"` and `fit: "crop"`, this parameter defines the
 You must subtract the height of the image before you calculate the focal point.
 :::
 
+- `face`\
+	Selects focal point based on face detection (with minimum bounding box surounding all faces within the image). Only works with `fit: "crop"` and falls back to the center of the image as focalpoint if face(s) are not found.
+
 <Tabs>
   <TabItem label="URL format">
     ```js
@@ -29,6 +32,10 @@ You must subtract the height of the image before you calculate the focal point.
     OR
 
     gravity=0x1
+
+    OR
+
+    gravity=face
     ```
 
   </TabItem>
@@ -43,6 +50,10 @@ You must subtract the height of the image before you calculate the focal point.
     OR
 
     g=0x1
+
+    OR
+
+    g=face
     ```
 
   </TabItem>
@@ -58,7 +69,10 @@ OR
 
 cf: {image: {gravity: {x:0.5, y:0.2}}}
 
+OR
+
+cf: {image: {gravity: "face"}}
 ```
 </TabItem>
 </Tabs>
-```
+```

src/content/partials/images/zoom.mdx

@@ -0,0 +1,30 @@
+---
+{}
+---
+import { Tabs, TabItem } from "~/components"
+
+Used alongside `gravity: "face"` and `fit: "crop"` to control the zoom level.
+
+Valid options range from 0 to 1 where 0 should return the entire image and 1 should return only the face.
+Only takes effect if face(s) are found.
+
+<Tabs>
+  <TabItem label="URL format">
+    ```js
+    zoom=0.1
+    ```
+  </TabItem>
+  <TabItem label="URL format alias">
+    ```js
+    zoom=0.2
+    OR
+
+    face-zoom=0.2
+    ```
+  </TabItem>
+  <TabItem label="Workers">
+  ```js
+  cf: {image: {zoom: 0.5}}
+  ```
+  </TabItem>
+</Tabs>