Auto Adjust Width Based on Amount of Repeats

• toad78

• July 9, 2016 at 4:36 am

On this page you can see that there are only three tabs. Usually there is four, but I need to know how I can automatically adjust the width of the tabs based upon the amount of tabs created.

If this is more of a PHP question, then please let me know and I’ll move to research an alternative method.

What I’m looking for is this:

If there are two tabs, then class=”col-sm-6″
If there are three tabs, then class=”col-sm-4″
If there are four tabs, then class=”col-sm-3″

and so on.

My code:

				<?php if( have_rows('tabs') ): ?>
					<?php
                    
                    // vars
                    $c = 0;
                    $class = '';
                    $linkid = get_sub_field('tab_id');
                    $background = get_sub_field('background_image');
                    $title = get_sub_field('title');
                    $description = get_sub_field('content');
                    ?>
                        <div role="tabpanel" class="tab-panels largetabs">                        
                            <div class="tab-content">
                                <div role="tabpanel" class="tab-pane fade in active">            
                                            <ul class="nav nav-tabs">
												<?php $c = 0; ?>
													<?php while( have_rows('tabs') ): the_row(); $c++;  ?>
														<?php if( get_row_layout() == 'image' ):    ?>                                  
                                                            <li class="<?php if($c==1) {echo "active down-arrow"; } ?>  col-sm-3"  style="background: url('<?php echo the_sub_field('background_image'); ?>'); background-repeat: no-repeat; background-size: cover; background-position: top center;"><a href="#<?php echo the_sub_field('tab_id');?>" data-toggle="tab"><?php the_sub_field('title'); ?></a></li>
                                                        <?php endif; ?>
                                                    <?php endwhile; ?>
                                            </ul>

												<div class="tabcontent container">   
												<?php $c = 0; ?>
													<?php while( have_rows('tabs') ): the_row(); $c++;  ?>                                        
                                                        <div id="<?php echo the_sub_field('tab_id');?>" class="tab-pane fade in <?php if( $c == 1 ){ echo "active"; } ?>"><?php echo the_sub_field('content'); ?></div>
                                                    <?php endwhile; ?>
                                                    </div><!--end container-->    
                                </div><!--end tabpanel tab-pane class-->
                            <?php endif; ?><!--endif tabs rows-->
                            </div><!--end tab-content-->
                        </div><!--end tab-panels.top-->

• John Huebner

• July 10, 2016 at 11:53 pm

There are several ways to get the number of rows

// using get_post_meta
$row_count = intval(get_post_meta($post->ID, 'tabs', true));

// using get_field
$tabs = get_field('tabs');
$row_count = count($tabs);

• toad78

• July 12, 2016 at 5:47 am

Awesome!

This is what I came up with that worked VERY well.

<?php if( have_rows('tabs') ): ?>
					<?php
                    
                    // vars
                    $c = 0;
                    $class = '';
                    $linkid = get_sub_field('tab_id');
                    $background = get_sub_field('background_image');
                    $title = get_sub_field('title');
                    $description = get_sub_field('content');
                    $tabs = get_field('tabs');
					$row_count = count($tabs);
					
					?>
                        <div role="tabpanel" class="tab-panels largetabs">                        
                            <div class="tab-content">
                                <div role="tabpanel" class="tab-pane fade in active">            
                                            <ul class="nav nav-tabs">
												<?php $c = 0; ?>
													<?php while( have_rows('tabs') ): the_row(); $c++;  ?>
														<?php if( get_row_layout() == 'image' ):    ?>                                  
                                                            <li class="<?php if($c==1) {echo "active down-arrow"; } ?>  <?php if ($row_count==1) { echo "col-sm-12"; } elseif ($row_count==2) { echo "col-sm-6"; } elseif ($row_count==3) { echo "col-sm-4"; } elseif ($row_count==4) { echo "col-sm-3"; } elseif ($row_count==6) { echo "col-sm-2"; } ?>"  style="background: url('<?php echo the_sub_field('background_image'); ?>'); background-repeat: no-repeat; background-size: cover; background-position: top center;"><a href="#<?php echo the_sub_field('tab_id');?>" data-toggle="tab"><?php the_sub_field('title'); ?></a></li>
                                                        <?php endif; ?>
                                                    <?php endwhile; ?>
                                            </ul>

												<div class="tabcontent container">   
												<?php $c = 0; ?>
													<?php while( have_rows('tabs') ): the_row(); $c++;  ?>                                        
                                                        <div id="<?php echo the_sub_field('tab_id');?>" class="tab-pane fade in <?php if( $c == 1 ){ echo "active"; } ?>"><?php echo the_sub_field('content'); ?></div>
                                                    <?php endwhile; ?>
                                                    </div><!--end container-->    
                                </div><!--end tabpanel tab-pane class-->
                            <?php endif; ?><!--endif tabs rows-->
                            </div><!--end tab-content-->
                        </div><!--end tab-panels.top-->
                        
                    <?php comments_template( '', true ); ?>
                    <?php if ( is_active_sidebar( 'page-widget' ) ) : ?>
                    <?php dynamic_sidebar( 'page-widget' ); ?>
                    <?php endif; ?>
                    <?php endwhile; // end of the loop. ?>