Insert in between repeater fields

• AvWijk

• June 15, 2016 at 11:52 pm

Hi,

I’m building a logo slider based off repeater fields. I would like to wrap list tags per each 3 items (see output below). Much appreciated!

Code:

 <li>
							<?php if( have_rows('klantslider') ): while ( have_rows('klantslider') ) : the_row(); ?>
                            <?php $image = get_sub_field('logo'); if( !empty($image) ):  $size = 'clients'; $thumbclient = $image['sizes'][ $size ]; ?>
                            <div class="slideitem"><img class="img-responsive" src="<?php echo $thumbclient; ?>"></div>
                            <?php endif; ?>
                             <?php endwhile; else : endif; ?>
                        </li>

Output should be like this:

<li>
<div class="slideitem"></div>
<div class="slideitem"></div>
<div class="slideitem"></div>
</li>
<li>
<div class="slideitem"></div>
<div class="slideitem"></div>
<div class="slideitem"></div>
</li>
<li>
<div class="slideitem"></div>
<div class="slideitem"></div>
<div class="slideitem"></div>
</li>

• John Huebner

• June 16, 2016 at 8:23 am

Something like this will give you the second code snippet you included

<li>
  <?php 
    if (have_rows('klantslider')) {
      $count = 0;
      while (have_rows('klantslider')) {
        if ($count > 0 && ($count % 3 == 0)) {
          // after first itteration
          // close li and open a new one every 3 rows
          ?>
            </li>
            <li>
          <?php 
        }
        the_row();
        ?>
          <div class="slideitem"></div>
        <?php 
        $count++;
      }
    } else {
    }
  ?>
</li>

• AvWijk

• June 16, 2016 at 10:30 am

WOW! You’re my hero. +99

• surfsup74

• December 12, 2016 at 7:14 am

The code John posted for AvWijk is pretty much what I am looking for however I need insert a further break within the rows. So the output would be…

<div>// outer container for 4 figure elements
   <div>//inner container for 2 of the 4 figure elements
     <figure>Repeater Field Content</figure>
     <figure>Repeater Field Content</figure>
   </div>
   <div>//inner container for 2 of the 4 figure elements
     <figure>Repeater Field Content</figure>
     <figure>Repeater Field Content</figure>
   </div>
</div>

<div>// outer container for 4 figure elements
   <div>//inner container for 2 of the 4 figure elements
     <figure>Repeater Field Content</figure>
     <figure>Repeater Field Content</figure>
   </div>
   <div>//inner container for 2 of the 4 figure elements
     <figure>Repeater Field Content</figure>
     <figure>Repeater Field Content</figure>
   </div>
</div>

Many thanks in advance to any help offered!

• John Huebner

• December 12, 2016 at 7:57 am

something like this should work. Let me know if you have any questions about what’s happening.

<?php 
  
  if (have_rows('repeater')) {
    $count = 0;
    while (have_rows('repeater')) {
      the_row();
      if (($count % 4) == 0) {
        ?>
          <div><!-- open outer container for 4 figure elements -->
        <?php 
      }
      if (($count % 2) == 0) {
        ?>
          <div><!-- open inner container for 2 of the 4 figure elements-->
        <?php 
      }
      ?><figure>Repeater Field Content</figure><?php 
      if (($count % 2) == 1) {
        ?>
          </div><!-- close inner container for 2 of the 4 figure elements-->
        <?php 
      }
      if (($count % 4) == 3) {
        ?>
          </div><!-- close outer container for 4 figure elements -->
        <?php 
      }
      $count++;
    } // end while have rows
  } // end if have rows
  
?>

• surfsup74

• December 12, 2016 at 9:28 pm

Thanks for the swift reply John. The code example you posted work so long as there are exact multiples of 4 ‘Repeater Field Content’ blocks. Is it possible to modify the code so that the div elelments close where there are not 4, 8 or 12 and so on – so if (for example) there were only 5 blocks of ‘Repeater Field Content’ the divs are closed in the approriate place (as below)

<div><!–- outer container for 4 figure elements -–>
  <div><!–- inner container for 2 of the 4 figure elements -–>
    <figure>Repeater Field Content</figure>
    <figure>Repeater Field Content</figure>
  </div>
  <div><!–- inner container for 2 of the 4 figure elements -–>
    <figure>Repeater Field Content</figure>
    <figure>Repeater Field Content</figure>
  </div>
</div>

<div><!–- outer container for maximum of 4 figure elements -–>
  <div><!–- inner container for up to 2 of the 4 figure elements -–>
    <figure>Repeater Field Content</figure>
  </div>
</div>

• John Huebner

• December 13, 2016 at 12:26 am

That’s something that I didn’t think about. I just used similar code on a site I am working on…. looks like I need to go back and make some changes. The only thing I can think to do in this case is to add flags to test if the divs are closed and if not to close them.

<?php 
  
  if (have_rows('repeater')) {
    $count = 0;
    $first_closed = true;
    $second_closed = true;
    while (have_rows('repeater')) {
      the_row();
      if (($count % 4) == 0) {
        $first_closed = false;
        ?>
          <div><!-- open outer container for 4 figure elements -->
        <?php 
      }
      if (($count % 2) == 0) {
        $second_closed = false;
        ?>
          <div><!-- open inner container for 2 of the 4 figure elements-->
        <?php 
      }
      ?><figure>Repeater Field Content</figure><?php 
      if (($count % 2) == 1) {
        $second_closed = true;
        ?>
          </div><!-- close inner container for 2 of the 4 figure elements-->
        <?php 
      }
      if (($count % 4) == 3) {
        $first_closed = true;
        ?>
          </div><!-- close outer container for 4 figure elements -->
        <?php 
      }
      $count++;
    } // end while have rows
  } // end if have rows
  if (!$second_closed) {
    echo '</div>';
  }
  if (!$first_closed) {
    echo '</div>';
  }
?>

• surfsup74

• December 13, 2016 at 7:21 am

This works perfectly – thankyou for taking the time to help out.