Shuffle over multiple foreach loops

Kirby 4 Solved ✔️
1

Hey there!

i have a page with multiple foreach loops. Each loop contains a different type of content (loop through all projects, through all workshops, through all events…). Now I want to shuffle these loops. If I add it to every single foreach loop the items get only shuffled within their div. but I want to shuffle everything together, so projects, workshops and events are mixed together.
I hope I could deliver my problem properly.

Thanks so much in advance for any help!

Here you can see the code:

   <?php
      $allProjects = $site->find("projekte")->children();
      $allWorkshops = $site->find("workshops")->children();
      $events = $site->find("events")->children();
   ?>

        <ul class="shelf-wrapper">
            <!-- PROJEKTE -->
            <?php foreach ($allProjects as $projekt): ?>
                <a href="<?= $projekt->url() ?> " class="book-spine-wrapper">
                    <li class="book-spine draggable" title="<?= $projekt->title() ?>">
                        <div class="book-3d-top"></div>
                        <img class="spine-img" src="<?= $projekt->image()->url() ?>" alt="<?= $projekt->title() ?>">
                        <div class="spine-p-wrapper">
                            <p><?= $projekt->title() ?></p>
                        </div>
                    </li>
                </a>
            <?php endforeach ?>
            
            <!-- WORKSHOPS -->
            <?php foreach ($allWorkshops as $workshop): ?>
                <a href="<?= $workshop->url() ?> " class="book-spine-wrapper">
                    <li class="book-spine draggable" title="<?= $workshop->title() ?>">
                        <div class="book-3d-top"></div>
                        <img class="spine-img" src="<?= $workshop->image()->url() ?>" alt="<?= $workshop->title() ?>">
                        <div class="spine-p-wrapper">
                            <p><?= $workshop->title() ?></p>
                        </div>
                    </li>
                </a>
            <?php endforeach ?>

            <!-- EVENTS -->
            <?php foreach ($events as $event): ?>
                <a href="<?= $event->url() ?> " class="book-spine-wrapper">
                    <li class="book-spine draggable" title="<?= $event->title() ?>">
                        <div class="book-3d-top"></div>
                        <img class="spine-img" src="<?= $event->image()->url() ?>" alt="<?= $event->title() ?>">
                        <div class="spine-p-wrapper">
                            <p><?= $event->title() ?></p>
                        </div>
                    </li>
                </a>
            <?php endforeach ?>
        </ul>
2

So if i follow correctly, you actually want to end up with a single div with all three data sources mixed in?

You can infact get from multiple places in one go and shuffle that and feed that into your for loop…

$data = $site->find('projekte', 'workshops, 'events')->children()->shuffle();
3

Exactly!
When I do that, can I still access the infos like $project->title() then? Or, how would I access that information?

4

So everything now is stored in the $data variable rather then 3 seperate ones, so you can do something like…

<?php foreach ($data as $item): ?>
    <a href="<?= $item->url() ?> " class="book-spine-wrapper">
    ...
<?php endforeach ?>
1 Like
5

Of course!
Thank you so much! Sometimes I am just too much in my head to see the obvious solution.