Skip to content

Commit 56cb36c

Browse files
dochneGregBrimble
dochne
authored and
GregBrimble
committed
Reduce superfluous <Tabs> usage inside images transform docs (#21593)
1 parent 02a35ae commit 56cb36c

File tree

4 files changed

+66
-139
lines changed

4 files changed

+66
-139
lines changed

‎src/content/partials/images/background.mdx

+19-16
Original file line numberDiff line numberDiff line change
@@ -1,31 +1,34 @@
11
---
22
{}
33
---
4-
import { Tabs, TabItem } from "~/components"
4+
5+
import { Tabs, TabItem } from "~/components";
56

67
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)`.
78

89
<Tabs>
910
<TabItem label="URL format">
10-
```js
11-
background=%23RRGGBB
11+
```js
12+
background=%23RRGGBB
1213

13-
OR
14+
OR
1415

15-
background=red
16+
background=red
1617

17-
OR
18-
19-
background= rgb%28240%2C40%2C145%29
20-
```
21-
</TabItem>
22-
<TabItem label="Workers">
23-
```js
24-
cf: {image: {background: "#RRGGBB"}}
18+
OR
19+
20+
background=rgb%28240%2C40%2C145%29
21+
22+
````
23+
</TabItem>
24+
<TabItem label="Workers">
25+
```js
26+
cf: {image: {background: "#RRGGBB"}}
27+
28+
OR
2529
26-
OR
30+
cf:{image: {background: "rgba(240,40,145,0)"}}
31+
````
2732
28-
cf:{image: {background: "rgba(240,40,145,0)"}}
29-
```
3033
</TabItem>
3134
</Tabs>

‎src/content/partials/images/fit.mdx

+5-60
Original file line numberDiff line numberDiff line change
@@ -1,86 +1,31 @@
11
---
22
{}
33
---
4-
import { Tabs, TabItem } from "~/components"
4+
5+
import { Tabs, TabItem } from "~/components";
56

67
Affects interpretation of `width` and `height`. All resizing modes preserve aspect ratio. Used as a string in Workers integration. Available modes are:
78

8-
- `scale down`\
9+
- `scale-down`\
910
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:
10-
11-
<Tabs>
12-
<TabItem label="URL format">
13-
```js
14-
fit=scale-down
15-
```
16-
</TabItem>
17-
<TabItem label="Workers">
18-
```js
19-
cf: {image: {fit: "scale-down"}}
20-
```
21-
</TabItem>
22-
</Tabs>
23-
2411
- `contain`\
2512
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.
26-
27-
<Tabs>
28-
<TabItem label="URL format">
29-
```js
30-
fit=contain
31-
```
32-
</TabItem>
33-
<TabItem label="Workers">
34-
```js
35-
cf: {image: {fit: "contain"}}
36-
```
37-
</TabItem>
38-
</Tabs>
39-
4013
- `cover`\
4114
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.
42-
43-
<Tabs>
44-
<TabItem label="URL format">
45-
```js
46-
fit=cover
47-
```
48-
</TabItem>
49-
<TabItem label="Workers">
50-
```js
51-
cf: {image: {fit: "cover"}}
52-
```
53-
</TabItem>
54-
</Tabs>
55-
5615
- `crop`\
5716
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)
58-
59-
<Tabs>
60-
<TabItem label="URL format">
61-
```js
62-
fit=crop
63-
```
64-
</TabItem>
65-
<TabItem label="Workers">
66-
```js
67-
cf: {image: {fit: "crop"}}
68-
```
69-
</TabItem>
70-
</Tabs>
71-
7217
- `pad`\
7318
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.
7419

7520
<Tabs>
7621
<TabItem label="URL format">
7722
```js
78-
fit=pad
23+
fit=scale-down
7924
```
8025
</TabItem>
8126
<TabItem label="Workers">
8227
```js
83-
cf: {image: {fit: "pad"}}
28+
cf: {image: {fit: "scale-down"}}
8429
```
8530
</TabItem>
8631
</Tabs>

‎src/content/partials/images/gravity.mdx

+36-29
Original file line numberDiff line numberDiff line change
@@ -1,32 +1,14 @@
11
---
22
{}
33
---
4-
import { Tabs, TabItem } from "~/components"
4+
5+
import { Tabs, TabItem } from "~/components";
56

67
When cropping with `fit: "cover"` and `fit: "crop"`, this parameter defines the side or point that should not be cropped. Available options are:
78

8-
* `auto`\
9+
- `auto`\
910
Selects focal point based on saliency detection (using maximum symmetric surround algorithm).
10-
11-
<Tabs>
12-
<TabItem label="URL format">
13-
```js
14-
gravity=auto
15-
```
16-
</TabItem>
17-
<TabItem label="URL format alias">
18-
```js
19-
g=auto
20-
```
21-
</TabItem>
22-
<TabItem label="Workers">
23-
```js
24-
cf: {image: {gravity: "auto"}}
25-
```
26-
</TabItem>
27-
</Tabs>
28-
29-
* `side`\
11+
- `side`\
3012
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.
3113

3214
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.
3820
<Tabs>
3921
<TabItem label="URL format">
4022
```js
23+
gravity=auto
24+
25+
OR
26+
4127
gravity=left
4228

43-
or
29+
OR
4430

4531
gravity=0x1
4632
```
33+
34+
</TabItem>
35+
<TabItem label="URL format alias">
36+
```js
37+
g=auto
38+
39+
OR
40+
41+
g=left
42+
43+
OR
44+
45+
g=0x1
46+
```
47+
4748
</TabItem>
4849
<TabItem label="Workers">
4950
```js
50-
cf: {image: {gravity: "right"}}
51+
cf: {image: {gravity: "auto"}}
5152

52-
or
53+
OR
5354

54-
cf: {image: {gravity: {x:0.5, y:0.2}}}
55-
```
56-
</TabItem>
57-
</Tabs>
55+
cf: {image: {gravity: "right"}}
56+
57+
OR
58+
59+
cf: {image: {gravity: {x:0.5, y:0.2}}}
60+
61+
```
62+
</TabItem>
63+
</Tabs>
64+
```

‎src/content/partials/images/metadata.mdx

+6-34
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
11
---
22
{}
33
---
4-
import { Tabs, TabItem } from "~/components"
4+
5+
import { Tabs, TabItem } from "~/components";
56

67
Controls amount of invisible metadata (EXIF data) that should be preserved.
78

@@ -12,46 +13,17 @@ Available options are `copyright`, `keep`, and `none`. The default for all JPEG
1213
:::note
1314
- If [Polish](/images/polish/) is enabled, then all metadata may already be removed and this option will have no effect.
1415
- 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).
15-
:::
16+
:::
1617

1718
Options include:
1819

19-
* `copyright`\
20+
- `copyright`\
2021
Discards all EXIF metadata except copyright tag.
2122
If C2PA metadata preservation is enabled, then this option will preserve all Content Credentials.
22-
23-
24-
<Tabs>
25-
<TabItem label="URL format">
26-
```js
27-
metadata=copyright
28-
```
29-
</TabItem>
30-
<TabItem label="Workers">
31-
```js
32-
cf: {image: {metadata: "copyright"}}
33-
```
34-
</TabItem>
35-
</Tabs>
36-
37-
* `keep`\
23+
- `keep`\
3824
Preserves most of EXIF metadata, including GPS location if present.
3925
If C2PA metadata preservation is enabled, then this option will preserve all Content Credentials.
40-
41-
<Tabs>
42-
<TabItem label="URL format">
43-
```js
44-
metadata=keep
45-
```
46-
</TabItem>
47-
<TabItem label="Workers">
48-
```js
49-
cf: {image: {metadata: "keep"}}
50-
```
51-
</TabItem>
52-
</Tabs>
53-
54-
* `none`\
26+
- `none`\
5527
Discards all invisible EXIF and C2PA metadata. If the output format is WebP or PNG, then all metadata will be discarded.
5628

5729
<Tabs>

0 commit comments

Comments
 (0)