Thumbnail Column From an ACF Image Field
Shows a small preview of an ACF image field in a post type's admin list, handy for logos, headshots or product photos that are not the featured image.
Opens WPIDE on
Code
// Post type and image field name.
$wpide_acf_img_type = 'post';
$wpide_acf_img_field = 'logo';
add_filter( "manage_{$wpide_acf_img_type}_posts_columns", function ( $columns ) {
return array_slice( $columns, 0, 1, true ) + array( 'acf_thumb' => '<span class="screen-reader-text">Image</span>' ) + array_slice( $columns, 1, null, true );
} );
add_action( "manage_{$wpide_acf_img_type}_posts_custom_column", function ( $column, $post_id ) use ( $wpide_acf_img_field ) {
if ( 'acf_thumb' !== $column || ! function_exists( 'get_field' ) ) {
return;
}
$value = get_field( $wpide_acf_img_field, $post_id, false );
$id = is_array( $value ) ? (int) ( $value['ID'] ?? 0 ) : absint( $value );
echo $id ? wp_get_attachment_image( $id, array( 48, 48 ), false, array( 'style' => 'width:48px;height:48px;object-fit:cover;border-radius:4px' ) ) : '';
}, 10, 2 );
add_action( 'admin_head', function () use ( $wpide_acf_img_type ) {
$screen = get_current_screen();
if ( $screen && 'edit-' . $wpide_acf_img_type === $screen->id ) {
echo '<style>.column-acf_thumb{width:56px}</style>';
}
} );Notes
Set the post type and the image field name.
How to add this snippet
- Install WPIDE on your WordPress site (it is free) and open Code Snippets.
- Use snippet above adds it from the library in one click. Or copy the code into a new snippet with the same code type.
- It is added inactive: review the code and settings, then switch it on.