Ultimate Member customization. Display custom images in the member directory grid.

um_directory_grid_images.php

<?php

/**
 * Display custom images in the member directory grid.
 */
add_filter( 'um_ajax_get_members_data', function( $data_array, $user_id, $directory_data ) {

	// List needed fields here.
	$fields = array(
		'um_image_upload',
		'upload_logo',
	);

	foreach ( $fields as $meta_key ) {
		$file_name = um_user( $meta_key );
		if ( $file_name ) {
			$file_path = trailingslashit( UM()->uploader()->get_upload_user_base_dir( um_user( 'ID' ) ) ) . $file_name;
			$file_url  = trailingslashit( UM()->uploader()->get_upload_user_base_url( um_user( 'ID' ) ) ) . $file_name;
			if ( file_exists( $file_path ) ) {
				$data_array[ 'hook_after_user_name' ] .= '<div class="um-photo"><a href="#" class="um-photo-modal" data-src="' . esc_attr( $file_url ) . '"><img src="' . esc_attr( $file_url ) . '" alt="' . esc_attr( $meta_key ) . '"/></a></div>';
			}
		}
	}

	return $data_array;
}, 10, 3 );

This code displays the custom image fields in the member directory.
Images are clickable. You'll see an enlarged image in the popup on click.

Add fields you want to display to the $fields array then add this code to the functions.php file in the theme directory.

Expected result

Directory grid

Popup

There is an alternative solution. Read the article Add an image field into the profile card in the member directory.