Kirby + Bootstrap: alternate rows in foreach loop

Kirby 2 Solved ✅
1

Hi everyone,

Relatively new to KirbyCMS and this is my first question here. Hope I can explain my question well :slight_smile:

On the website I’m building I have a page for testimonials. I’ve set up the template, blueprint and content file so that this page has subpages. Currently, there are three subpages (one for each testimonial). Each of these subpages has a featured image.

I use the following foreach loop:

<div id="testimonial-previews">

  <?php foreach($page -> children() -> visible() as $testimonial): ?>
  
  <div class="testimonial">
    <div class="left-half">
      <img src="http://placehold.it/100x100" class="img-responsive" />
    </div>
    
    <div class="right-half">
      <h3><?= $testimonial -> title() ?></h3>
    </div>
  </div>

  <?php endforeach ?>

</div>

What I’d like to accomplish is alternating the content for the left and the right half in this loop. To be more precise: the first testimonial has to have the image in the left half and the title in the right half, the second has to have the image in the right half and the title to the left. The third then follows the first, and so on, so the grid comes to look like:

image - title
title - image
image - title
title - image

I’m stuck - I get the foreach loop to work but all testimonials are rendered (expectedly) the same way. How can I make this work?

2

If you are using floats or flexbox, you can do this with CSS only. Otherwise you can use indexof() to apply the classes.

<?php
$testimonials = $page->children()->visible();
foreach($testimonials as $testimonial): 
  if($collection->indexOf($testimonial) % 2 == 0): ?>
    <!-- your code for even elements -->
  <?php else: ?>
    <!-- your code for odd elements -->
  <?php endif ?>
<?php endforeach ?>
3

Thanks, solved the problem thanks to your if else. Also found another part of the solution somewhere in the documentation :slight_smile:

Code is modified heavily, so I’m not sure if this is useful to anyone… “testimonials” is also changed to “referenties” (website is in Dutch), and I have a feeling code could be a lot less repetitive, but here it is:

<section id="referenties">
  <div class="container-fluid">
  
  <?php $n = 0; foreach($page->children() as $child): $n++; ?>
  
  <?php if($n%2 == 1): ?>
  
    <div class="row">
      <div class="col-md-6" style="min-height: 20vh; background-image: url('<?= $child -> url() ?>/<?= $child -> coverImage() ?>'); background-size: cover;">
      </div>
      <div class="col-md-6" style="background: skyblue;">
        <h3><?= $child -> title() ?></h3>
        <h5><?= $child -> organisatie() ?></h5>
        <h5><?= $child -> contactpersoon() ?></h5>
        <p><?php echo excerpt($child->text(), 2, 'words') ?></p>
        <a class="btn btn-default" href="<?= $child -> url() ?>">Lees verder</a>
      </div>
    </div><!-- .row -->

    <?php else: ?>
    <div class="row">
      <div class="col-md-6 col-md-push-6" style="min-height: 20vh; background-image: url('<?= $child -> url() ?>/<?= $child -> coverImage() ?>'); background-size: cover;">
      </div>
      <div class="col-md-6 col-md-pull-6" style="background: skyblue;">
        <h3><?= $child -> title () ?></h3>
        <h5><?= $child -> organisatie() ?></h5>
        <h5><?= $child -> contactpersoon() ?></h5>
        <p><?php echo excerpt($child->text(), 3, 'words') ?></p>
        <a class="btn btn-default" href="<?= $child -> url() ?>">Lees verder</a>
      </div>
    </div><!-- .row -->
    <?php endif ?>
  
    <?php endforeach ?>

   </div><!-- .container-fluid -->
 </section><!-- #referenties -->