Additional template for member-list

Hi @bramroos

Unfortunately, the options to change template in the Member Directory settings is still not fully functional.

You can override the members-grid.php file instead to change the profile items styles in the directory.

Here’s an example:

<?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-<code>user.card_anchor</code>-<?php echo esc_attr( $unique_hash ) ?>" class="um-member um-role-<code>user.role</code> <code>user.account_status</code> <?php if ( $cover_photos ) { echo 'with-cover'; } ?>">

				    <a href="<code>user.profile_url</code>" title="<code>user.display_name</code>">
                    
					<?php 
					if ( $profile_photo ) { ?>
					    <div class="cc-profile-photo" style="width:100%;background: url('<code>user.avatar_raw</code>'); 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;">
									<code>user.display_name_html</code> 
							
							</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;
	
}

.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;
	
}

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

</style>

	<?php } ?>'

You must use this filter hook to apply the template to the specific member directory:

add_filter(“um_custom_member_directories”, function( $directory_ids ){

$directory_ids = [
8, // <==== change this with your member directory ID
// 1,
// 2,
// so on,
];
return $directory_ids;
});`

Regards,

• This reply was modified 4 years, 4 months ago by Champ Camba.
• This reply was modified 4 years, 4 months ago by Champ Camba.

Thanks for your reply. Think I will try with conditionals is_page_template first as I only need to swap 1 class.

Many thanks,
Bram

Hi @bramroos

Thanks for letting us know.

Feel free to re-open this thread if there’s any question that may come up.

Regards,