Bootstrap Jumbotron Slider

The CMS Questions
1

Has anyone tried using bootstrap’s jumbotron slider with kirby? I don’t have a problem pulling the images from the active page directory but with the following code:

<?php foreach($page->files()->shuffle() as $image): ?>
<div class="active item">
  <div class="fill" style="background-image:url('<?php echo $image->url() ?>');"></div>
</div>
<div class="item">
  <div class="fill" style="background-image:url('<?php echo $image->url() ?>');"></div>
</div>
<?php endforeach ?>

It’s obvious to see I will repeat each image twice, when I want to show each image in a ABCDEF… sequence.
Let me know if this needs further explanation.

Thanks!
Shannon

2

You can use a helper variable together with an if-statement:

<?php 
$i= 0;
foreach($page->files()->shuffle() as $image): ?>
    <div class="<?php if($i == 0) {echo 'active'; } ?> item">
      <div class="fill" style="background-image:url('<?php echo $image->url() ?>');"></div>
    </div>
 <?php $i++; endforeach ?>
1 Like
3

Absolutely terrific! Kirby has been a pleasure to work with. Problem solved.

4

Just because I have some weird aversion against those counters - an alternative approach:


<?php
$images = $page->files()->shuffle();
foreach($images as $image): 
?> 
<div class="<?php e($images->first() == $image, 'active') ?> item">
  <div class="fill" style="background-image:url('<?php echo $image->url() ?>');"></div>
</div>
<?php endforeach ?>
4 Likes