fix: collection card image preview

packages/core/dev-test/index.js

@@ -11,13 +11,14 @@ const PostPreview = ({ entry, widgetFor }) => {
   );
 };
 
-const PostPreviewCard = ({ entry, theme, hasLocalBackup, widgetFor }) => {
+const PostPreviewCard = ({ entry, theme, hasLocalBackup, collection }) => {
   const date = new Date(entry.data.date);
 
   const month = date.getMonth() + 1;
   const day = date.getDate();
 
-  const image = entry.data.image;
+  const imageField = useMemo(() => collection.fields.find((f) => f.name === 'image'), []);
+  const image = useMediaAsset(entry.data.image, collection, imageField, entry);
 
   return h(
     'div',

packages/core/src/components/collections/entries/EntryCard.tsx

@@ -130,12 +130,20 @@ const EntryCard: FC<TranslatedProps<EntryCardProps>> = ({
   }
 
   return (
-    <Card className="h-full">
+    <Card className="h-full" title={summary}>
       <CardActionArea to={path}>
-        {image && imageField ? <CardMedia height="140" image={image} /> : null}
+        {image && imageField ? (
+          <CardMedia
+            height="140"
+            image={image}
+            collection={collection}
+            field={imageField}
+            entry={entry}
+          />
+        ) : null}
         <CardContent>
           <div className="flex w-full items-center justify-between">
-            <div>{summary}</div>
+            <div className="whitespace-nowrap overflow-hidden text-ellipsis">{summary}</div>
             {hasLocalBackup ? (
               <InfoIcon
                 className="

packages/core/src/components/common/card/Card.tsx

@@ -7,9 +7,10 @@ import type { ReactNode } from 'react';
 interface CardProps {
   children: ReactNode | ReactNode[];
   className?: string;
+  title?: string;
 }
 
-const Card = ({ children, className }: CardProps) => {
+const Card = ({ children, className, title }: CardProps) => {
   return (
     <div
       className={classNames(
@@ -28,6 +29,7 @@ const Card = ({ children, className }: CardProps) => {
         `,
         className,
       )}
+      title={title}
     >
       {children}
     </div>

packages/core/src/components/common/card/CardMedia.tsx

@@ -2,14 +2,33 @@ import React from 'react';
 
 import Image from '../image/Image';
 
-interface CardMediaProps {
+import type {
+  BaseField,
+  Collection,
+  Entry,
+  MediaField,
+  UnknownField,
+} from '@staticcms/core/interface';
+
+interface CardMediaProps<EF extends BaseField> {
   image: string;
   width?: string | number;
   height?: string | number;
   alt?: string;
+  collection?: Collection<EF>;
+  field?: MediaField;
+  entry?: Entry;
 }
 
-const CardMedia = ({ image, width, height, alt = '' }: CardMediaProps) => {
+const CardMedia = <EF extends BaseField = UnknownField>({
+  image,
+  width,
+  height,
+  alt = '',
+  collection,
+  field,
+  entry,
+}: CardMediaProps<EF>) => {
   return (
     <Image
       className="rounded-t-lg bg-cover bg-no-repeat bg-center w-full object-cover"
@@ -19,6 +38,9 @@ const CardMedia = ({ image, width, height, alt = '' }: CardMediaProps) => {
       }}
       src={image}
       alt={alt}
+      collection={collection}
+      field={field}
+      entry={entry}
     />
   );
 };

packages/core/src/components/common/image/Image.tsx

@@ -7,7 +7,13 @@ import { selectEditingDraft } from '@staticcms/core/reducers/selectors/entryDraf
 import { useAppSelector } from '@staticcms/core/store/hooks';
 import { isEmpty } from '@staticcms/core/lib/util/string.util';
 
-import type { BaseField, Collection, MediaField, UnknownField } from '@staticcms/core/interface';
+import type {
+  BaseField,
+  Collection,
+  Entry,
+  MediaField,
+  UnknownField,
+} from '@staticcms/core/interface';
 import type { CSSProperties } from 'react';
 
 export interface ImageProps<EF extends BaseField> {
@@ -17,6 +23,7 @@ export interface ImageProps<EF extends BaseField> {
   style?: CSSProperties;
   collection?: Collection<EF>;
   field?: MediaField;
+  entry?: Entry;
   'data-testid'?: string;
 }
 
@@ -27,11 +34,12 @@ const Image = <EF extends BaseField = UnknownField>({
   style,
   collection,
   field,
+  entry,
   'data-testid': dataTestId,
 }: ImageProps<EF>) => {
-  const entry = useAppSelector(selectEditingDraft);
+  const editingDraft = useAppSelector(selectEditingDraft);
 
-  const assetSource = useMediaAsset(src, collection, field, entry);
+  const assetSource = useMediaAsset(src, collection, field, entry ?? editingDraft);
 
   if (isEmpty(src)) {
     return (