Multiple sliders on one page

Kirby 2 Solved ✅
1

Hi, i´m trying to put multiple sliders on a portfolio page with the following code and folder structure:

    <main class="main" role="main">
  <div class="wrap wide">
    <ul class="showcase grid gutter-1">
     <li class="showcase-item column">
      <?php $projects = page('home')->children()->visible();?>
      <?php foreach ($projects as $project): ?>
        <div class="slider">
            <?php foreach (page('home')->Children()->images() as $image): ?>
                <img src="<?= $image->url() ?>">
            <?php endforeach ?>
        </div>
      <?php endforeach ?>
      </li>
    </ul>
  </div>
</main>

but i always end up with all images of all folders in every slider.

10
Bildschirmfoto 2018-11-11 um 23.34.10.jpg900×994 160 KB

2

It’s because of that second inner for each loop…

    <div class="slider">
        <?php foreach (page('home')->Children()->images() as $image): ?>
            <img src="<?= $image->url() ?>">
        <?php endforeach ?>
    </div>

That is telling it to fetch all images, repeatedly, for as many times as there are $projects

You need to change it to this, i think…

    <div class="slider">
        <?php foreach ($project->images() as $image): ?>
            <img src="<?= $image->url() ?>">
        <?php endforeach ?>
    </div>
3

percfect. works as expected, thanks!

1 Like
4

No problem… you might want to consider using the thumb class though, depending on what you want to achieve. This opens up the ability to crop or resize the images, so you end up with nice uniformly sized images in your slider. This means you don’t have to be careful that all your source images are the right size for the slider. You can see how this works here.