Skip to content

Reduce superfluous <Tabs> usage inside images transform docs #21593

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
May 1, 2025
Merged

Reduce superfluous <Tabs> usage inside images transform docs #21593

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
b45ce97
Reduce superfluous <Tabs> usage inside images transform docs
dochne Apr 10, 2025
2f4b5b5
Merge branch 'production' into doug/images-improvements
dochne Apr 22, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
35 changes: 19 additions & 16 deletions src/content/partials/images/background.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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)`.

<Tabs>
<TabItem label="URL format">
```js
background=%23RRGGBB
```js
background=%23RRGGBB

OR
OR

background=red
background=red

OR

background= rgb%28240%2C40%2C145%29
```
</TabItem>
<TabItem label="Workers">
```js
cf: {image: {background: "#RRGGBB"}}
OR

background=rgb%28240%2C40%2C145%29

````
</TabItem>
<TabItem label="Workers">
```js
cf: {image: {background: "#RRGGBB"}}

OR

OR
cf:{image: {background: "rgba(240,40,145,0)"}}
````

cf:{image: {background: "rgba(240,40,145,0)"}}
```
</TabItem>
</Tabs>
65 changes: 5 additions & 60 deletions src/content/partials/images/fit.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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:

<Tabs>
<TabItem label="URL format">
```js
fit=scale-down
```
</TabItem>
<TabItem label="Workers">
```js
cf: {image: {fit: "scale-down"}}
```
</TabItem>
</Tabs>

- `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.

<Tabs>
<TabItem label="URL format">
```js
fit=contain
```
</TabItem>
<TabItem label="Workers">
```js
cf: {image: {fit: "contain"}}
```
</TabItem>
</Tabs>

- `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.

<Tabs>
<TabItem label="URL format">
```js
fit=cover
```
</TabItem>
<TabItem label="Workers">
```js
cf: {image: {fit: "cover"}}
```
</TabItem>
</Tabs>

- `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)

<Tabs>
<TabItem label="URL format">
```js
fit=crop
```
</TabItem>
<TabItem label="Workers">
```js
cf: {image: {fit: "crop"}}
```
</TabItem>
</Tabs>

- `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.

<Tabs>
<TabItem label="URL format">
```js
fit=pad
fit=scale-down
```
</TabItem>
<TabItem label="Workers">
```js
cf: {image: {fit: "pad"}}
cf: {image: {fit: "scale-down"}}
```
</TabItem>
</Tabs>
65 changes: 36 additions & 29 deletions src/content/partials/images/gravity.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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).

<Tabs>
<TabItem label="URL format">
```js
gravity=auto
```
</TabItem>
<TabItem label="URL format alias">
```js
g=auto
```
</TabItem>
<TabItem label="Workers">
```js
cf: {image: {gravity: "auto"}}
```
</TabItem>
</Tabs>

* `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.
Expand All @@ -38,20 +20,45 @@ You must subtract the height of the image before you calculate the focal point.
<Tabs>
<TabItem label="URL format">
```js
gravity=auto

OR

gravity=left

or
OR

gravity=0x1
```

</TabItem>
<TabItem label="URL format alias">
```js
g=auto

OR

g=left

OR

g=0x1
```

</TabItem>
<TabItem label="Workers">
```js
cf: {image: {gravity: "right"}}
cf: {image: {gravity: "auto"}}

or
OR

cf: {image: {gravity: {x:0.5, y:0.2}}}
```
</TabItem>
</Tabs>
cf: {image: {gravity: "right"}}

OR

cf: {image: {gravity: {x:0.5, y:0.2}}}

```
</TabItem>
</Tabs>
```
40 changes: 6 additions & 34 deletions src/content/partials/images/metadata.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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.

Expand All @@ -12,46 +13,17 @@ Available options are `copyright`, `keep`, and `none`. The default for all JPEG
:::note
- If [Polish](/images/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.


<Tabs>
<TabItem label="URL format">
```js
metadata=copyright
```
</TabItem>
<TabItem label="Workers">
```js
cf: {image: {metadata: "copyright"}}
```
</TabItem>
</Tabs>

* `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.

<Tabs>
<TabItem label="URL format">
```js
metadata=keep
```
</TabItem>
<TabItem label="Workers">
```js
cf: {image: {metadata: "keep"}}
```
</TabItem>
</Tabs>

* `none`\
- `none`\
Discards all invisible EXIF and C2PA metadata. If the output format is WebP or PNG, then all metadata will be discarded.

<Tabs>
Expand Down