Reply To: Repeater – Only Display First 3 Rows

• iamrobertandrews

• October 12, 2018 at 8:45 pm

I have the below in a WordPress theme file template part, called from page.php
The use case is, my ACF field set is used on Page screens as a page content creator.

The template files should spit out content. In the below case, it is a social-proof section in Bootstrap mark-up, comprising text fragment and logos.
This works fine when I display all logos, but there are too many for display on this section of the page. So (using this thread as a guide), I tried limiting this to six logos. That part works fine.

The weird thing is, it leads to a single, secondary repetition of the whole container, immediately beneath, just without any of the content – no logos_tee-up text, no logos files, just the mark-up.

I’m confused, because there is actually one instance of the social_proof row. Can’t understand why it has been repeated once and once only.

When I remove the iteration and break, the repeated container doesn’t happen. But I do need to limit. What is not right here?

<?php if ( have_rows( 'social_proof' ) ) : ?>
	<?php while ( have_rows( 'social_proof' ) ) : the_row(); ?>

    <div class="container-fluid bg-white p-4 px-md-5 pt-md-4 pb-md-5">

      <p class="text-muted"><?php the_sub_field( 'logos_tee-up' ); ?>:</p>

      <div class="row">

        <?php if ( have_rows( 'logos' ) ) : ?>
          <?php $i = 0; ?>
    			<?php while ( have_rows( 'logos' ) ) : the_row(); ?>
            <?php $i++; ?>
            		<?php if( $i > 6 ): ?>
            			<?php break; ?>
            		<?php endif; ?>
    				<?php $logo_image = get_sub_field( 'logo_image' ); ?>
    				<?php if ( $logo_image ) { ?>
    					<div class="col-4 col-sm-3 col-md-2 col-lg-2 col-xl-2 align-self-center  py-3"><img class="img-fluid" src="<?php echo $logo_image['url']; ?>" alt="<?php echo $logo_image['alt']; ?>"></div>
    				<?php } ?>
    			<?php endwhile; ?>
    		<?php else : ?>
    			<?php // no rows found ?>
    		<?php endif; ?>

      </div>

    </div>

  <?php endwhile; ?>
<?php endif; ?>