Feature: Display image thumbnails in collection list views

packages/keystatic/src/app/CollectionPage.tsx

@@ -565,17 +565,42 @@ function CollectionTable(
                   ...(hideStatusColumn ? [] : [statusCell]),
                   nameCell,
                   ...collection.columns.map(column => {
-                    let val;
-                    val = item.data?.[column];
+                    const raw = item.data?.[column];
+                    const field = collection.schema[column];
+                    const FieldCell =
+                      field &&
+                      'kind' in field &&
+                      field.kind === 'form' &&
+                      'Cell' in field &&
+                      field.Cell;
+
+                    if (raw == null) {
+                      return (
+                        <Cell
+                          key={column + item.name}
+                          textValue=""
+                        >
+                          <Text weight="medium">{undefined}</Text>
+                        </Cell>
+                      );
+                    }
 
-                    if (val == null) {
-                      val = undefined;
-                    } else {
-                      val = val + '';
+                    const strVal = raw + '';
+
+                    if (FieldCell) {
+                      return (
+                        <Cell
+                          key={column + item.name}
+                          textValue={strVal}
+                        >
+                          <FieldCell value={raw} />
+                        </Cell>
+                      );
                     }
+
                     return (
-                      <Cell key={column + item.name} textValue={val}>
-                        <Text weight="medium">{val}</Text>
+                      <Cell key={column + item.name} textValue={strVal}>
+                        <Text weight="medium">{strVal}</Text>
                       </Cell>
                     );
                   }),
@@ -597,6 +622,7 @@ function CollectionTable(
   );
 }
 
+
 function getItemPath(
   basePath: string,
   collection: string,

packages/keystatic/src/form/api.tsx

@@ -1,4 +1,4 @@
-import { ReactElement, ReactNode } from 'react';
+import { ReactElement, ReactNode, ComponentType } from 'react';
 import { Glob } from '../config';
 
 import { ChildField } from './fields/child';
@@ -48,6 +48,7 @@ export type BasicFormField<
     parse(value: FormFieldStoredValue): ReaderValue;
   };
   label?: string;
+  Cell?: ComponentType<{ value: any }>;
 };
 
 export type SlugFormField<
@@ -85,6 +86,7 @@ export type SlugFormField<
     ): ReaderValueAsSlugField;
   };
   label?: string;
+  Cell?: ComponentType<{ value: any }>;
 };
 
 export type AssetFormField<
@@ -127,6 +129,7 @@ export type AssetFormField<
     parse(value: FormFieldStoredValue): ReaderValue;
   };
   label?: string;
+  Cell?: ComponentType<{ value: any }>;
 };
 
 export type AssetsFormField<

packages/keystatic/src/form/fields/empty-field-ui.tsx

@@ -19,6 +19,7 @@ export let SlugFieldInput = empty,
   IntegerFieldInput = empty,
   NumberFieldInput = empty,
   ImageFieldInput = empty,
+  ImageCell = empty,
   FileFieldInput = empty,
   DatetimeFieldInput = empty,
   DateFieldInput = empty,

packages/keystatic/src/form/fields/image/index.tsx

@@ -3,7 +3,7 @@ import { AssetFormField } from '../../api';
 import { FieldDataError } from '../error';
 import { RequiredValidation, assertRequired } from '../utils';
 import { getSrcPrefix } from './getSrcPrefix';
-import { ImageFieldInput } from '#field-ui/image';
+import { ImageFieldInput, ImageCell } from '#field-ui/image';
 
 export function image<IsRequired extends boolean | undefined>({
   label,
@@ -34,6 +34,7 @@ export function image<IsRequired extends boolean | undefined>({
     kind: 'form',
     formKind: 'asset',
     label,
+    Cell: ImageCell,
     Input(props) {
       return (
         <ImageFieldInput

packages/keystatic/src/form/fields/image/ui.tsx

@@ -1,7 +1,8 @@
 import { ButtonGroup, ActionButton } from '@keystar/ui/button';
 import { FieldDescription, FieldLabel, FieldMessage } from '@keystar/ui/field';
 import { Flex, Box } from '@keystar/ui/layout';
-import { tokenSchema } from '@keystar/ui/style';
+import { css, tokenSchema } from '@keystar/ui/style';
+import { Text } from '@keystar/ui/typography';
 import { TextField } from '@keystar/ui/text-field';
 
 import { useIsInDocumentEditor } from '../document/DocumentEditor';
@@ -171,3 +172,29 @@ export function ImageFieldInput(
     </Flex>
   );
 }
+
+export function ImageCell({ value }: { value: string | null }) {
+  const [errored, setErrored] = useState(false);
+  if (!value) return null;
+  if (errored) {
+    return (
+      <Text color="neutralTertiary" size="small">
+        {value}
+      </Text>
+    );
+  }
+  return (
+    <img
+      src={value}
+      alt=""
+      onError={() => setErrored(true)}
+      className={css({
+        width: tokenSchema.size.scale[400],
+        height: tokenSchema.size.scale[400],
+        objectFit: 'cover',
+        borderRadius: tokenSchema.size.radius.small,
+        flexShrink: 0,
+      })}
+    />
+  );
+}