Insert div after 2nd row of ACF repeater

• labedzde

• March 17, 2017 at 6:10 am

I’ve got a grid of content that I’m loading with an ACF repeater.

After the second row of the repeater, I’d like to add a div containing another ACF text field. It will span the width of the page once styled.

Then, the rest of the repeater will loop as usual. I’ve looked at several examples using a php counter, but can’t seem to figure out how to implement it into my code.

Here’s my repeater code from the page template:

<div class="article-container">

<?php if( have_rows('news_article') ): ?>

	

	<?php while( have_rows('news_article') ): the_row(); 

		// vars
		$title = get_sub_field('article_title');
		$url = get_sub_field('source_link');
		$source = get_sub_field('source_link_text');
		$date = get_sub_field('article_date');
		$quote= get_sub_field('article_pull_quote');
		$text= get_sub_field('article_description');
		$link= get_sub_field('article_link');

		?>
			
			<div class="article-block">
				   <h4><?php echo $title; ?></h4>
				<p><a href="<?php echo $url; ?>" target="_blank"><?php echo $source; ?></a> - <?php echo $date; ?></p>
				 <div class="pull-quote"><p><?php echo $quote; ?></p></div>
				 	<img src="/../wp-content/uploads/2017/03/3plus.svg" class="plus-border">
				 <p><?php echo $text; ?></p>
				 <a href="<?php echo $link; ?>" target="_blank">Read the full story</a>

		</div>

		

	<?php endwhile; ?>

<?php endif; ?>

</div>

Here’s the code of the div I’d like to insert after the 2nd repeater row:

<div class="quote-block">
	<div class="quote-block-inner">
	<h5><?php the_field('news_feature_quote'); ?></h5>
	<p><?php the_field('news_quote_author'); ?></p>
</div>
</div>

• John Huebner

• March 17, 2017 at 11:21 pm

<div class="article-container">
  <?php 
    if( have_rows('news_article') ):
      // add counter
      $count = 0;
      while( have_rows('news_article') ): the_row(); 

        // vars
        $title = get_sub_field('article_title');
        $url = get_sub_field('source_link');
        $source = get_sub_field('source_link_text');
        $date = get_sub_field('article_date');
        $quote= get_sub_field('article_pull_quote');
        $text= get_sub_field('article_description');
        $link= get_sub_field('article_link');

        ?>
      
          <div class="article-block">
            <h4><?php echo $title; ?></h4>
            <p><a href="<?php echo $url; ?>" target="_blank"><?php echo $source; ?></a> - <?php echo $date; ?></p>
            <div class="pull-quote"><p><?php echo $quote; ?></p></div>
            <img src="/../wp-content/uploads/2017/03/3plus.svg" class="plus-border">
            <p><?php echo $text; ?></p>
            <a href="<?php echo $link; ?>" target="_blank">Read the full story</a>
          </div>
        <?php 
        // increment counter and see if 2 rows have been shown
        $counter++;
        if ($counter == 2) {
          // yes, show something else
          ?>
            <div class="quote-block">
              <div class="quote-block-inner">
                <h5><?php the_field('news_feature_quote'); ?></h5>
                <p><?php the_field('news_quote_author'); ?></p>
              </div>
            </div>
          <?php 
        }
      endwhile;
    endif;
  ?>
</div>

• labedzde

• March 18, 2017 at 4:24 am

That worked! Thank you so much! I see that the syntax I was trying before was way off, and I hadn’t properly wrapped the div content to be inserted the correct way. I kept getting parse errors.