Improve image quality

WordPress · Oct 17, 2023 · 115cacd · 115cacd
1 parent b5f408f
commit 115cacd
Show file tree

Hide file tree

Showing 4 changed files with 13 additions and 11 deletions.
diff --git a/packages/edit-site/src/components/dataviews/view-grid.js b/packages/edit-site/src/components/dataviews/view-grid.js
@@ -30,7 +30,7 @@ export function ViewGrid( { data, fields, view, actions } ) {
 					<VStack key={ index }>
 						<div className="dataviews-view-grid__media">
 							{ ( mediaField &&
-								mediaField.render( { item } ) ) || (
+								mediaField.render( { item, view } ) ) || (
 								<Placeholder
 									withIllustration
 									style={ {
@@ -47,7 +47,7 @@ export function ViewGrid( { data, fields, view, actions } ) {
 									{ visibleFields.map( ( field ) => (
 										<div key={ field.id }>
 											{ field.render
-												? field.render( { item } )
+												? field.render( { item, view } )
 												: field.accessorFn( item ) }
 										</div>
 									) ) }

diff --git a/packages/edit-site/src/components/dataviews/view-list.js b/packages/edit-site/src/components/dataviews/view-list.js
@@ -138,7 +138,7 @@ function ViewList( {
 				delete column.render;
 				column.cell = ( props ) => {
 					return field.render
-						? field.render( { item: props.row.original } )
+						? field.render( { item: props.row.original, view } )
 						: field.accessorFn( props.row.original );
 				};
 				return column;

diff --git a/packages/edit-site/src/components/media/index.js b/packages/edit-site/src/components/media/index.js
@@ -3,14 +3,12 @@
  */
 import { useEntityRecord } from '@wordpress/core-data';
 
-function Media( { id, size, ...props } ) {
+function Media( { id, size = [ 'large', 'medium', 'thumbnail' ], ...props } ) {
 	const { record: media } = useEntityRecord( 'root', 'media', id );
-	const sizesPerPriority = [ 'large', 'thumbnail' ];
-	const currentSize =
-		size ??
-		sizesPerPriority.find( ( s ) => !! media?.media_details?.sizes[ s ] );
+	const currentSize = size.find(
+		( s ) => !! media?.media_details?.sizes[ s ]
+	);
 	const mediaDetails = media?.media_details?.sizes[ currentSize ];
-
 	if ( ! mediaDetails ) {
 		return null;
 	}

diff --git a/packages/edit-site/src/components/page-pages/index.js b/packages/edit-site/src/components/page-pages/index.js
@@ -89,12 +89,16 @@ export default function PagePages() {
 				id: 'featured-image',
 				header: __( 'Featured Image' ),
 				accessorFn: ( page ) => page.featured_media,
-				render: ( { item } ) =>
+				render: ( { item, view: currentView } ) =>
 					!! item.featured_media ? (
 						<Media
 							className="edit-site-page-pages__featured-image"
 							id={ item.featured_media }
-							size="thumbnail"
+							size={
+								currentView.type === 'list'
+									? [ 'thumbnail', 'medium', 'large', 'full' ]
+									: [ 'large', 'medium', 'full', 'thumbnail' ]
+							}
 						/>
 					) : null,
 				enableSorting: false,