Custom Member Directory Grid

-
135495527_201244525068954_5770399547874223138_n

If you want to change the Member Directory Grid styles, you can override the template via your active theme.

  1. Copy the file /ultimate-member/templates/members-grid.php and add it to your theme’s directory in /wp-content/themes/your-active-theme/ultimate-member/members-grid.php
  2. Once you’ve added the template to the theme, ensure that you’ve selected the Default view type to Grid in the Directory settings:

3. You can now modify the template file that you added to the theme. You can copy the following sample template and paste it to your member-grid.php file:

<?php if ( ! defined( 'ABSPATH' ) ) exit;

$form_id = $args['form_id'];
$modify_directory = apply_filters("um_custom_member_directories", [ ]);
if( ! in_array( $form_id, $modify_directory ) ){
	   require_once um_path."/templates/members-grid.php";  
	  
}else{

$unique_hash = substr( md5( $args['form_id'] ), 10, 5 ); ?>

<script type="text/template" id="tmpl-um-member-grid-<?php echo esc_attr( $unique_hash ) ?>">
	<div class="um-members um-members-grid" >
		<div class="um-gutter-sizer"></div>
      
		<# if ( data.length > 0 ) { #>
			<# _.each( data, function( user, key, list ) { #>

				<div id="um-member-{{{user.card_anchor}}}-<?php echo esc_attr( $unique_hash ) ?>" class="um-member um-role-{{{user.role}}} {{{user.account_status}}} <?php if ( $cover_photos ) { echo 'with-cover'; } ?>">

				    <a href="{{{user.profile_url}}}" title="{{{user.display_name}}}">
                    
					<?php 
					if ( $profile_photo ) { ?>
					    <div class="cc-profile-photo" style="width:100%;background: url('{{{user.avatar_raw}}}'); background-position: center center; background-size: cover; height: 200px ">
				
				        </div>
							
					<?php } ?>


					<div class="um-member-card <?php if ( ! $profile_photo ) { echo 'no-photo'; } ?>">
						<?php if ( $show_name ) { ?>
							<div class="um-member-name" style="padding:10px 0px 0px 0px;">
									{{{user.display_name_html}}} 
							
							</div>
						<?php } ?>
					

					</div>

					</a>
				</div>

			<# }); #>
		<# } else { #>

			<div class="um-members-none">
				<p><?php echo $no_users; ?></p>
			</div>

		<# } #>

		<div class="um-clear"></div>
	</div>
</script>

<style type="text/css">
.um-directory .um-members-wrapper .um-members.um-members-grid .um-member{
    width: 15% !important;
}

.um-directory .um-members-wrapper .um-members.um-members-grid .um-member .cc-profile-photo{
	height: 270px ;

}

.um-directory.uimob800 .um-members-wrapper .um-members.um-members-grid .um-member{
    width: 20% !important;
	height: 250px !important;
	      
}

.um-directory.uimob500 .um-members-wrapper .um-members.um-members-grid .um-member{
    width: 30% !important;
	height: 200px !important;
	font-size:12px;
	margin: 3px;
	
}

.um-directory.uimob500 .um-members-wrapper .um-members.um-members-grid .um-member .cc-profile-photo{
    height: 150px !important;
	
}

.um-directory.uimob340 .um-members-wrapper .um-members.um-members-grid .um-member{
    width: 30% !important;
	height: 180px !important;
	font-size:12px;
	margin: 3px;
	
}

.um-directory.uimob340 .um-members-wrapper .um-members.um-members-grid .um-member .cc-profile-photo{
    height: 120px !important;
	
}

</style>

<?php } ?>

If you will notifce in the sample code, there are CSS code. The purpose of it is to fix the responsiveness for the custom grid template.

You will also notice that the Avatars are not showing up in the grid. Add the following code to enable the avatars for the custom code:

add_filter("um_ajax_get_members_data","um_profile_avatar_members_data", 10, 3 );
function um_profile_avatar_members_data( $data_array, $user_id, $directory_data ){

    um_fetch_user( $user_id );
    $data_array['avatar_raw'] = um_get_user_avatar_data( $user_id )['url'];

    return $data_array;

}

Using the filter hook um_ajax_get_members_data, you can modify the data you want to send to the front-end for you to bind it. In the 2nd example above, I wanted to display the full size of avatars so i added a new variable avatar_raw. And then in the template of the first sample code above, I’m able to bind the data with {{{user.avatar_raw}}}

That’s all and i hope you learned a new technique on how to customize the Member Directory Grid. If you have questions, just write it down in the comment box. Cheers!

Help me reach other people who need the help
Leave a Response

Leave a Reply

Your email address will not be published. Required fields are marked *