Support » Plugin: Ultimate Member - User Profile & Membership Plugin » custom directory template not responsive

  • Hello, making a custom grid template of the member directory automatically makes the profile cards smaller and in 3 columns instead of the default 2.

    Not only this but it also loses its responsiveness – this is with no modifications made to the template.

    Is there anything that can be done about this? perhaps you need to copy some CSS to the custom template directory?

    Any help would be much appreciated!

    Thanks in advance!

Viewing 8 replies - 1 through 8 (of 8 total)
  • Paste your “custom grid template” code here to see. Also, where are you pasting it?
    And, have you already tried making a test for theme conflict?

    Hi,

    Thanks for your help! This is the code I am using which comes directly from the members-grid.php UM template and im pasting it into

    /wp-content/themes/theme-child/ultimate-member/templates

    <?php /* Template: Members Grid Custom */ ?>
    
    <div class="um-members">
    			
    	<div class="um-gutter-sizer"></div>
    	
    	<?php $i = 0; foreach( um_members('users_per_page') as $member) { $i++; um_fetch_user( $member ); ?>
    			
    	<div class="um-member um-role-<?php echo um_user('role'); ?> <?php echo um_user('account_status'); ?> <?php if ($cover_photos) { echo 'with-cover'; } ?>">
    				
    		<span class="um-member-status <?php echo um_user('account_status'); ?>"><?php echo um_user('account_status_name'); ?></span>
    					
    		<?php
    		if ($cover_photos) {
    			$sizes = um_get_option('cover_thumb_sizes');
    			if ( $ultimatemember->mobile->isTablet() ) {
    				$cover_size = $sizes[1];
    			} else {
    				$cover_size = $sizes[0];
    			}
    		?>
    
    		<div class="um-member-cover" data-ratio="<?php echo um_get_option('profile_cover_ratio'); ?>">
    			<div class="um-member-cover-e"><a href="<?php echo um_user_profile_url(); ?>" title="<?php echo esc_attr(um_user('display_name')); ?>"><?php echo um_user('cover_photo', $cover_size); ?></a></div>
    		</div>
    
    		<?php } ?>
    		
    		<?php if ($profile_photo) {
    			$default_size = str_replace( 'px', '', um_get_option('profile_photosize') );
    			$corner = um_get_option('profile_photocorner');
    		?>
    		<div class="um-member-photo radius-<?php echo $corner; ?>"><a href="<?php echo um_user_profile_url(); ?>" title="<?php echo esc_attr(um_user('display_name')); ?>"><?php echo get_avatar( um_user('ID'), $default_size ); ?></a></div>
    		<?php } ?>
    					
    					<div class="um-member-card <?php if (!$profile_photo) { echo 'no-photo'; } ?>">
    						
    						<?php if ( $show_name ) { ?>
    						<div class="um-member-name"><a href="<?php echo um_user_profile_url(); ?>" title="<?php echo esc_attr(um_user('display_name')); ?>"><?php echo um_user('display_name', 'html'); ?></a></div>
    						<?php } ?>
    						
    						<?php do_action('um_members_just_after_name', um_user('ID'), $args); ?>
    						
    						<?php do_action('um_members_after_user_name', um_user('ID'), $args); ?>
    						
    						<?php
    						if ( $show_tagline && is_array( $tagline_fields ) ) {
    							foreach( $tagline_fields as $key ) {
    								if ( $key && um_filtered_value( $key ) ) {
    									$value = um_filtered_value( $key );
    
    						?>
    						
    						<div class="um-member-tagline"><?php echo $value; ?></div>
    						
    						<?php
    								}
    							}
    						}
    						?>
    						
    						<?php if ( $show_userinfo ) { ?>
    						
    						<div class="um-member-meta-main">
    						
    							<?php if ( $userinfo_animate ) { ?>
    							<div class="um-member-more"><a href="#"><i class="um-faicon-angle-down"></i></a></div>
    							<?php } ?>
    							
    							<div class="um-member-meta <?php if ( !$userinfo_animate ) { echo 'no-animate'; } ?>">
    							
    								<?php foreach( $reveal_fields as $key ) {
    										if ( $key && um_filtered_value( $key ) ) {
    											$value = um_filtered_value( $key );
    											
    								?>
    								
    								<div class="um-member-metaline um-member-metaline-<?php echo $key; ?>"><span><strong><?php echo $ultimatemember->fields->get_label( $key ); ?>:</strong> <?php echo $value; ?></span></div>
    								
    								<?php 
    									}
    								} 
    								?>
    								
    								<?php if ( $show_social ) { ?>
    								<div class="um-member-connect">
    								
    									<?php $ultimatemember->fields->show_social_urls(); ?>
    
    								</div>
    								<?php } ?>
    								
    							</div>
    
    							<div class="um-member-less"><a href="#"><i class="um-faicon-angle-up"></i></a></div>
    						
    						</div>
    						
    						<?php } ?>
    						
    					</div>
    					
    	</div>
    				
    	<?php 
    	um_reset_user_clean();
    	} // end foreach
    
    	um_reset_user();
    	?>
    
    	<div class="um-clear"></div>
    
    </div>
    

    Yes, you would have to add new php/css/js to display everything as you want it.

    Just so you know, it is supposed to be 3 per row not 2 so pasting the code back in your child-theme didn’t change anything but broke the code. If your mind is set in having 2 per row change the pagination in edit member directory. FWIW.

    • This reply was modified 3 years, 3 months ago by borisv.

    Thanks for your replies!

    I believe what you say about it being 3 per row is true – but only if the size of the page allows like in a full screen template. My member directory is currently contained in a column of around 600px in width and when not using the custom template, each profile card is the same width as the profile cards in the ultimate member demo directory. It is also responsive to window size changes so making the window small results in just one per row etc.

    However, when using the custom template, the profile cards are a lot smaller in width than what is the default, and the layout is no longer responsive so changing the screen size doesnt change the number per row – its always 3.

    You mentioned changing the pagination in edit member directory – but I do not see this option when editing the member directory? so I presume I have misunderstood.

    So because the default values aren’t being adhered to im sure there is either a bug somewhere as I have followed the customising rules exactly, or a step is missing somewhere.

    I have also tried using a different theme (wordpress 2016) with the same results so can rule out it being a theme conflict.

    Something isn’t quite linking correctly to the css or the js. Perhaps I could force the width of the profile card?

    Thanks!

    Creating the custom template in the original ultimate-member plugin directory (not overriding in the custom theme) produces the same issue.

    Dont know if this helps, but the search menu won’t show even when selected in the Edit Directory page.

    You mentioned changing the pagination in edit member directory – but I do not see this option when editing the member directory?

    Go to Admin panel> UM > Member Directories > Member (your directory) > Edit.
    Find Results & Pagination:
    Number of profiles per page: 2
    Maximum number of profiles: (leave blank to show all users in the directory)
    Yes, this means that there will be lots of page index numbers.

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘custom directory template not responsive’ is closed to new replies.