feat(collection-editor): allow configuring image preview property for Cards/Kanban views - #943
Open
marianmoldovan with Copilot wants to merge 1 commit into
Open
feat(collection-editor): allow configuring image preview property for Cards/Kanban views#943marianmoldovan with Copilot wants to merge 1 commit into
marianmoldovan with Copilot wants to merge 1 commit into
Conversation
Copilot created this pull request from a session on behalf of
marianmoldovan
July 29, 2026 08:10
View session
marianmoldovan
marked this pull request as ready for review
July 29, 2026 08:16
There was a problem hiding this comment.
Pull request overview
This PR adds a configurable collection-level image thumbnail selector for Cards and Kanban views by introducing an imageProperty setting, updating the preview-resolution logic to prefer that setting, and exposing it in the collection editor UI (with i18n + tests + docs updates).
Changes:
- Added
imagePropertytoEntityCollectionand surfaced it in the Collection Editor display settings UI. - Updated
getEntityImagePreviewPropertyKeyto prefer the configured property (with new unit tests). - Updated documentation and added new translation keys across all supported locales.
Reviewed changes
Copilot reviewed 14 out of 14 changed files in this pull request and generated 4 comments.
Show a summary per file
| File | Description |
|---|---|
| website-astro/src/content/docs/docs/collections/view_modes.md | Documents how to configure the Cards/Kanban thumbnail property and updates Cloud UI steps. |
| packages/firecms_core/test/entity_image_preview_property_key.test.ts | Adds unit tests for explicit vs auto-detected image preview property resolution. |
| packages/firecms_core/src/util/previews.ts | Prefers a configured image property key during thumbnail resolution. |
| packages/firecms_core/src/types/translations.ts | Extends the translation contract with new image-property-related strings. |
| packages/firecms_core/src/types/collections.ts | Introduces the new imageProperty collection setting and its docstring. |
| packages/firecms_core/src/locales/en.ts | Adds English strings for the new image property selector. |
| packages/firecms_core/src/locales/de.ts | Adds German strings for the new image property selector. |
| packages/firecms_core/src/locales/es.ts | Adds Spanish strings for the new image property selector. |
| packages/firecms_core/src/locales/fr.ts | Adds French strings for the new image property selector. |
| packages/firecms_core/src/locales/hi.ts | Adds Hindi strings for the new image property selector. |
| packages/firecms_core/src/locales/it.ts | Adds Italian strings for the new image property selector. |
| packages/firecms_core/src/locales/pl.ts | Adds Polish strings for the new image property selector. |
| packages/firecms_core/src/locales/pt.ts | Adds Portuguese strings for the new image property selector. |
| packages/collection_editor/src/ui/collection_editor/DisplaySettingsForm.tsx | Adds a new “Image Property” select field under Display settings to configure thumbnails. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Comment on lines
+47
to
+53
| if (collection.imageProperty) { | ||
| const imagePropertyKey = collection.imageProperty as keyof ResolvedProperties<M>; | ||
| if (collection.properties[imagePropertyKey]) { | ||
| return collection.imageProperty as string; | ||
| } | ||
| } | ||
|
|
| name: buildProperty({ dataType: "string", name: "Name" }), | ||
| coverPhoto: buildProperty({ | ||
| dataType: "string", | ||
| storage: { mediaType: "image", storagePath: "products" } |
Comment on lines
+104
to
+110
| /** | ||
| * Property used as the image thumbnail in Cards and Kanban view modes. | ||
| * Must reference a storage/image property (or an array of them), or a | ||
| * string property with `url: "image"`. | ||
| * If not specified, the first matching image property will be used. | ||
| */ | ||
| imageProperty?: keyof M; |
| dataType: "array", | ||
| of: buildProperty({ | ||
| dataType: "string", | ||
| storage: { mediaType: "image", storagePath: "products" } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Adds a new
displayEntityImagePropertyKeycollection setting so users can explicitly choose which image/file property should be used as the preview image in Cards and Kanban collection views, instead of relying purely on automatic detection of the first image-like property.Changes
DisplaySettingsForm.tsxto pick the preview image propertyEntityCollectiontypes withdisplayEntityImagePropertyKeyutil/previews.tsto prefer the configured propertyview_modes.mddocumentationCommit
Message follows Conventional Commits (
feat(collection-editor): ...).