Additional template for member-list

Resolved bramroos
(@bramroos)

3 years, 5 months ago

Hi,

I’m trying to add an additional member-list.php template and struggle to get this done.

I’ve changed the member-list.php slightly with a different layout.
However, on another page I would like to use another layout.

I’m following the instructions on: https://docs.ultimatemember.com/article/120-adding-your-custom-profile-templates but this does not seem to work. Is there a different way for the member-list.php? Is it possible at all?

Many thanks,
Bram

Viewing 3 replies - 1 through 3 (of 3 total)

Plugin Contributor

Champ Camba

(@champsupertramp)

3 years, 5 months ago

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,