From b45ce972e9a74d8045d5c7be47e7af9f8d3d90d5 Mon Sep 17 00:00:00 2001 From: Doug Nelson Date: Thu, 10 Apr 2025 11:02:22 +0100 Subject: [PATCH] Reduce superfluous usage inside images transform docs --- src/content/partials/images/background.mdx | 35 ++++++------ src/content/partials/images/fit.mdx | 65 ++-------------------- src/content/partials/images/gravity.mdx | 65 ++++++++++++---------- src/content/partials/images/metadata.mdx | 43 +++----------- 4 files changed, 68 insertions(+), 140 deletions(-) diff --git a/src/content/partials/images/background.mdx b/src/content/partials/images/background.mdx index 621694bb039f2bf..18da672eac29aa5 100644 --- a/src/content/partials/images/background.mdx +++ b/src/content/partials/images/background.mdx @@ -1,31 +1,34 @@ --- {} --- -import { Tabs, TabItem } from "~/components" + +import { Tabs, TabItem } from "~/components"; Background color to add underneath the image. Applies to images with transparency (for example, PNG) and images resized with `fit=pad`. Accepts any CSS color using CSS4 modern syntax, such as `rgb(255 255 0)` and `rgba(255 255 0 100)`. - ```js - background=%23RRGGBB + ```js +background=%23RRGGBB - OR +OR - background=red +background=red - OR - - background= rgb%28240%2C40%2C145%29 - ``` - - - ```js - cf: {image: {background: "#RRGGBB"}} +OR + +background=rgb%28240%2C40%2C145%29 + +```` + + +```js +cf: {image: {background: "#RRGGBB"}} + +OR - OR +cf:{image: {background: "rgba(240,40,145,0)"}} +```` - cf:{image: {background: "rgba(240,40,145,0)"}} - ``` diff --git a/src/content/partials/images/fit.mdx b/src/content/partials/images/fit.mdx index 96f30fdfd578c8e..93f673b6d28de6a 100644 --- a/src/content/partials/images/fit.mdx +++ b/src/content/partials/images/fit.mdx @@ -1,86 +1,31 @@ --- {} --- -import { Tabs, TabItem } from "~/components" + +import { Tabs, TabItem } from "~/components"; Affects interpretation of `width` and `height`. All resizing modes preserve aspect ratio. Used as a string in Workers integration. Available modes are: -- `scale down`\ +- `scale-down`\ Similar to `contain`, but the image is never enlarged. If the image is larger than given `width` or `height`, it will be resized. Otherwise its original size will be kept. Example: - - - - ```js - fit=scale-down - ``` - - - ```js - cf: {image: {fit: "scale-down"}} - ``` - - - - `contain`\ Image will be resized (shrunk or enlarged) to be as large as possible within the given `width` or `height` while preserving the aspect ratio. If you only provide a single dimension (for example, only `width`), the image will be shrunk or enlarged to exactly match that dimension. - - - - ```js - fit=contain - ``` - - - ```js - cf: {image: {fit: "contain"}} - ``` - - - - `cover`\ Resizes (shrinks or enlarges) to fill the entire area of `width` and `height`. If the image has an aspect ratio different from the ratio of `width` and `height`, it will be cropped to fit. - - - - ```js - fit=cover - ``` - - - ```js - cf: {image: {fit: "cover"}} - ``` - - - - `crop`\ Image will be shrunk and cropped to fit within the area specified by `width` and `height`. The image will not be enlarged. For images smaller than the given dimensions, it is the same as `scale-down`. For images larger than the given dimensions, it is the same as `cover`. See also [`trim`](#trim) - - - - ```js - fit=crop - ``` - - - ```js - cf: {image: {fit: "crop"}} - ``` - - - - `pad`\ Resizes to the maximum size that fits within the given `width` and `height`, and then fills the remaining area with a `background` color (white by default). This mode is not recommended, since you can achieve the same effect more efficiently with the `contain` mode and the CSS `object-fit: contain` property. ```js - fit=pad + fit=scale-down ``` ```js - cf: {image: {fit: "pad"}} + cf: {image: {fit: "scale-down"}} ``` diff --git a/src/content/partials/images/gravity.mdx b/src/content/partials/images/gravity.mdx index c6b3aac9352e0eb..dd7762e02ae9262 100644 --- a/src/content/partials/images/gravity.mdx +++ b/src/content/partials/images/gravity.mdx @@ -1,32 +1,14 @@ --- {} --- -import { Tabs, TabItem } from "~/components" + +import { Tabs, TabItem } from "~/components"; When cropping with `fit: "cover"` and `fit: "crop"`, this parameter defines the side or point that should not be cropped. Available options are: -* `auto`\ +- `auto`\ Selects focal point based on saliency detection (using maximum symmetric surround algorithm). - - - - ```js - gravity=auto - ``` - - - ```js - g=auto - ``` - - - ```js - cf: {image: {gravity: "auto"}} - ``` - - - -* `side`\ +- `side`\ A side (`"left"`, `"right"`, `"top"`, `"bottom"`) or coordinates specified on a scale from `0.0` (top or left) to `1.0` (bottom or right), `0.5` being the center. The X and Y coordinates are separated by lowercase `x` in the URL format. For example, `0x1` means left and bottom, `0.5x0.5` is the center, `0.5x0.33` is a point in the top third of the image. For the Workers integration, use an object `{x, y}` to specify coordinates. It contains focal point coordinates in the original image expressed as fractions ranging from `0.0` (top or left) to `1.0` (bottom or right), with `0.5` being the center. `{fit: "cover", gravity: {x:0.5, y:0.2}}` will crop each side to preserve as much as possible around a point at 20% of the height of the source image. @@ -38,20 +20,45 @@ You must subtract the height of the image before you calculate the focal point. ```js + gravity=auto + + OR + gravity=left - or + OR gravity=0x1 ``` + + + + ```js + g=auto + + OR + + g=left + + OR + + g=0x1 + ``` + ```js - cf: {image: {gravity: "right"}} + cf: {image: {gravity: "auto"}} - or +OR - cf: {image: {gravity: {x:0.5, y:0.2}}} - ``` - - \ No newline at end of file +cf: {image: {gravity: "right"}} + +OR + +cf: {image: {gravity: {x:0.5, y:0.2}}} + +``` + + +``` diff --git a/src/content/partials/images/metadata.mdx b/src/content/partials/images/metadata.mdx index cfbf2d30e48f810..745036870fad1c6 100644 --- a/src/content/partials/images/metadata.mdx +++ b/src/content/partials/images/metadata.mdx @@ -1,7 +1,8 @@ --- {} --- -import { Tabs, TabItem } from "~/components" + +import { Tabs, TabItem } from "~/components"; Controls amount of invisible metadata (EXIF data) that should be preserved. @@ -10,48 +11,20 @@ Color profiles and EXIF rotation are applied to the image even if the metadata i Available options are `copyright`, `keep`, and `none`. The default for all JPEG images is `copyright`. WebP and PNG output formats will always discard EXIF metadata. :::note + - If Polish is enabled, then all metadata may already be removed and this option will have no effect. - Even when choosing to keep EXIF metadata, Cloudflare will modify JFIF data (potentially invalidating it) to avoid the known incompatibility between the two standards. For more details, refer to [JFIF Compatibility](https://en.wikipedia.org/wiki/JPEG_File_Interchange_Format#Compatibility). -::: + ::: Options include: -* `copyright`\ +- `copyright`\ Discards all EXIF metadata except copyright tag. If C2PA metadata preservation is enabled, then this option will preserve all Content Credentials. - - - - - ```js - metadata=copyright - ``` - - - ```js - cf: {image: {metadata: "copyright"}} - ``` - - - -* `keep`\ +- `keep`\ Preserves most of EXIF metadata, including GPS location if present. If C2PA metadata preservation is enabled, then this option will preserve all Content Credentials. - - - - ```js - metadata=keep - ``` - - - ```js - cf: {image: {metadata: "keep"}} - ``` - - - -* `none`\ +- `none`\ Discards all invisible EXIF and C2PA metadata. If the output format is WebP or PNG, then all metadata will be discarded. @@ -65,4 +38,4 @@ Options include: cf: {image: {metadata: "none"}} ``` - \ No newline at end of file +