From 9028e9c71419d3735a02aef8ab92738e9fcdbcd4 Mon Sep 17 00:00:00 2001 From: K Heiner Date: Wed, 17 Jun 2026 20:27:59 -0700 Subject: [PATCH 1/2] Add default transformation keys (#748) --- content/guides/05.files/5.transform.md | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/content/guides/05.files/5.transform.md b/content/guides/05.files/5.transform.md index 7f1db594..e5b7de6c 100644 --- a/content/guides/05.files/5.transform.md +++ b/content/guides/05.files/5.transform.md @@ -173,3 +173,14 @@ The following options are available: [Sharp](https://sharp.pixelplumbing.com/api-constructor). You can then use this `key` as a parameter to when requesting a file to apply the preset. + +::callout{icon="i-lucide-info"} +**Default Transformation Keys** +Directus enables the following transformation keys by default: + - `system-small-cover` + - `system-small-contain` + - `system-medium-cover` + - `system-medium-contain` + - `system-large-cover` + - `system-large-contain` +:: From bf92416204622ca600f2642189a217919160d166 Mon Sep 17 00:00:00 2001 From: K Heiner Date: Tue, 23 Jun 2026 10:02:24 -0700 Subject: [PATCH 2/2] Apply feedback from @ComfortablyCoding --- content/guides/05.files/5.transform.md | 17 ++++++++++------- 1 file changed, 10 insertions(+), 7 deletions(-) diff --git a/content/guides/05.files/5.transform.md b/content/guides/05.files/5.transform.md index e5b7de6c..8902623c 100644 --- a/content/guides/05.files/5.transform.md +++ b/content/guides/05.files/5.transform.md @@ -175,12 +175,15 @@ The following options are available: You can then use this `key` as a parameter to when requesting a file to apply the preset. ::callout{icon="i-lucide-info"} -**Default Transformation Keys** +**Default Transformation Keys** Directus enables the following transformation keys by default: - - `system-small-cover` - - `system-small-contain` - - `system-medium-cover` - - `system-medium-contain` - - `system-large-cover` - - `system-large-contain` + +| Key | Width | Height | +| ---- | ----- | ------ | +| `system-small-cover` | 64px | 64px | +| `system-small-contain` | 64px | - | +| `system-medium-cover` | 300px | 300px | +| `system-medium-contain` | 300px | - | +| `system-large-cover` | 800px | 800px | +| `system-large-contain` | 800px | - | ::