Skip to content

Feature: Display image thumbnails in collection list views#1525

Open
mrprkr wants to merge 1 commit intoThinkmill:mainfrom
mrprkr:feat/collection-image-thumbnails
Open

Feature: Display image thumbnails in collection list views#1525
mrprkr wants to merge 1 commit intoThinkmill:mainfrom
mrprkr:feat/collection-image-thumbnails

Conversation

@mrprkr
Copy link
Copy Markdown

@mrprkr mrprkr commented Mar 31, 2026

Summary

  • Adds thumbnail rendering for image fields when included in a collection's columns configuration
  • Asset fields with image file extensions are detected and displayed as 32x32 rounded thumbnails instead of raw file paths
  • Falls back gracefully to showing the path string if the image fails to load

Changes

  • packages/keystatic/src/app/CollectionPage.tsx — Added ImageThumbnail component, isImageColumn() and isImagePath() helpers, updated cell rendering logic
  • dev-projects/next-app/keystatic.config.tsx — Added columns config with heroImage to posts collection for testing; configured publicPath and directory on the image field

Test plan

  • Create a collection with an image field and include it in the columns array
  • Add entries with images and verify thumbnails appear in the collection list
  • Verify entries without images show an empty cell
  • Verify non-image asset fields (e.g. file) still display as text
  • Verify broken image paths fall back to showing the path string

@changeset-bot
Copy link
Copy Markdown

changeset-bot bot commented Mar 31, 2026

⚠️ No Changeset found

Latest commit: e86097f

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

@mrprkr mrprkr force-pushed the feat/collection-image-thumbnails branch from a598e75 to 62f07bc Compare March 31, 2026 05:45
…ering

Fields can now define an optional Cell component to control how their
values are rendered in collection list views. The image field provides
a default Cell that renders 32x32 rounded thumbnails with a fallback
to displaying the path string if the image fails to load.
@mrprkr mrprkr force-pushed the feat/collection-image-thumbnails branch from 62f07bc to e86097f Compare March 31, 2026 05:46
parse(value: FormFieldStoredValue): ReaderValue;
};
label?: string;
Cell?: ComponentType<{ value: any }>;
Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

value should be ParsedValue here and etc.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants