Ändern Sie das Layout von jeder zwei divs mit PHP

Question

Ich wickle derzeit alle zwei divs in einer Elternreihe mit PHP, das funktioniert gut.

Aber was ich tun muss, ist es so, dass die 3rd & 4th, 7th & 8th etc divs ein anderes Layout haben. Dies ist momentan mein Code, um alle zwei Divs in eine Elternzeile zu schreiben.

<?php 
    if(have_rows('products')) : 
     $counter = 1; 
     $i = 0; 
     ?> 
      <div class="o-table l-grid-half"> 
      <?php while(have_rows('products')) : 
      the_row(); 
      if ($i > 0 && ($i % 2 == 0)) { 
      // close row and open new row 
      ?> 
      </div> 
      <div class="o-table l-grid-half"> 
      <?php } ?> 
       <div class="o-table-cell l-grid-half__item "> 
        <div class="o-table-cell l-grid-half__item "> 
         <img src="<?php the_sub_field('product_image'); ?>"/> 
        </div> 
        <div class="o-table-cell o-table-vt l-grid-half__item o-full-sm-pd o-roman l-product__item o-bg-item-<?php echo($counter);?>"> 
         <h3 class="hd-panel-sm"><?php the_sub_field('product_heading'); ?></h3> 
         <?php the_sub_field('product_summary'); ?> 
         <a href="<?php the_sub_field('product_link'); ?>" class="link-std clearfix"><i class="icon-right-open"></i><span>Find out more</span></a> 
        </div> 
       </div> 
     <?php 
      $i++; 
      $counter++; 
     endwhile; 
    ?> 
     </div> 
    <?php endif; 
    ?> 

Alles, was ich habe versucht, es in den vorhandenen Code zu wickeln, hat das Skript gebrochen.

Das Endziel würde ich die html mag wie diese (vereinfachte Version) suchen:

<div class="o-table im-the-parent-row"> 
    <div class="o-table-cell im-the-child-div"> 
     <img src="img-on-the-left.jpg"/> 
     <p>text on the right</p> 
    </div> 
    <div class="o-table-cell im-the-child-div"> 
     <img src="img-on-the-left.jpg"/> 
     <p>text on the right</p> 
    </div> 
</div> 
<div class="o-table im-the-parent-row"> 
    <div class="o-table-cell im-the-child-div"> 
     <p>text on the left</p> 
     <img src="img-on-the-right.jpg"/> 
    </div> 
    <div class="o-table-cell im-the-child-div"> 
     <p>text on the left</p> 
     <img src="img-on-the-right.jpg"/> 
    </div> 
</div> 

---

Aktualisiert Code:

<?php 
    if(have_rows('products')) : 
     $counter = 1; 
     $i = 0; 
     ?> 
      <div class="o-table l-grid-half"> 
      <?php while(have_rows('products')) : 
      the_row(); 
      if ($i > 0 && ($i % 2 == 0)) { 
      // close row and open new row 
      ?> 
      </div> 
      <div class="o-table l-grid-half"> 
      <?php } ?> 

      <!--Row 3&4, 7&8 have the image on the left --> 
      <?php if($i > 0 && (($i % 4 == 0) || (($i+1) % 4 == 0))) { ?> 
       <div class="o-table-cell l-grid-half__item "> 

        <div class="o-table-cell o-table-vt l-grid-half__item o-full-sm-pd o-roman l-product__item o-bg-item-<?php echo($counter);?>"> 
         <h3 class="hd-std-sm"><?php the_sub_field('product_heading'); ?></h3> 
         <?php the_sub_field('product_summary'); ?> 
         <a href="<?php the_sub_field('product_link'); ?>" class="link-std clearfix"><i class="icon-right-open"></i><span>Find out more</span></a> 
        </div> 
        <div class="o-table-cell l-grid-half__item "> 
         <img src="<?php the_sub_field('product_image'); ?>"/> 
        </div> 
       </div> 

      <?php } else {?> 
      <!--Row 1&2, 5&6 have the image on the right --> 
       <div class="o-table-cell l-grid-half__item "> 
        <div class="o-table-cell l-grid-half__item "> 
         <img src="<?php the_sub_field('product_image'); ?>"/> 
        </div> 
        <div class="o-table-cell o-table-vt l-grid-half__item o-full-sm-pd o-roman l-product__item o-bg-item-<?php echo($counter);?>"> 
         <h3 class="hd-std-sm"><?php the_sub_field('product_heading'); ?></h3> 
         <?php the_sub_field('product_summary'); ?> 
         <a href="<?php the_sub_field('product_link'); ?>" class="link-std clearfix"><i class="icon-right-open"></i><span>Find out more</span></a> 
        </div> 
       </div> 


      <?php } ?> 

     <?php 
     $i++; 
     $counter++; 
     endwhile;?> 
     </div> 
    <?php endif; 
    ?> 

Answer 1

1. Nehmen Sie eine Variable beginnt mit 1
2. Inkrement mit jeder Schleife ... 1 2 3 4
3. Nach 4 zurück zu 1
4. Wenn seine 3 und 4 können Sie Ihren benutzerdefinierten Code schreiben.

(Sie können als Variable oder in der Sitzung speichern, wie Sie möchten)

Answer 2

Dieser Code gibt Ihnen ein "true", wenn $ i Vielfaches von 4:

($i > 0 && ($i % 4 == 0)) # -> 4rd, 8th, etc 

Sie können dann Verschiebung $ i der 3. und 7. itens zu erhalten:

($i > 0 && ($i+1) % 4 == 0) # -> 3rd, 7th, etc 

EDIT - um beide Fälle auf einmal zu bekommen:

if($i > 0 && (($i % 4 == 0) || (($i+1) % 4 == 0))) { 
    /* do something... when $i = 3,4,7,8,11,12,... */ 
}