Random overview and page grid

Kirby 3 Solved ✅
1

Hello,

I am trying to call random projects with random thumbs over an overview page.
So far nothing crazy with shuffle , but I’d like to be able to assign each loaded thumb to a unique position in css.

something like this with 9-12 positions:

.uniqueposition-1 {
width: 10vw;
left: 0%;
top:15%
}

how would you guys set up the php / html side of things ? Sorry if the question is dumb, pretty new to kirby and code in general…

So far I am stuck with a list that doesn’t work since it’s calling all random thumbs well, as a list, and not individual items I can assign or style.

If anyone as the answer, I would also like to do something similar for a project page, but this time with randomness applied to the page images alone. Shuffling a broken grid if that makes sense.

Many thanks for the help,
v

2

Hey and welcome to the forum!

If you have a list, you can loop through this list and apply a different class to each item?

If that’s not what you want, maybe you can post the code you already have and elaborate a bit more?

3

Many thanks for the quick answer !
What you’re suggesting would be ideal but I just don’t know how to apply multiple classes or isolate items from this:

<main class="main">
    <h1><?= $page->title() ?></h1>
    <ul>
        <?php foreach ($page->children()->listed()->shuffle() as $project): ?>
        <li>
            <a href="<?= $project->url() ?>">
                <figure>
                    <img src="<?= $project->image()->url() ?>">                      
                    <figcaption><?= $project->title() ?></figcaption>
                </figure>
            </a>
        </li>
        <?php endforeach ?>
    </ul>        
</main>

Again, pretty new to this :slight_smile:
Thank you,
v

4

As I wrote, to me it’s not quite clear what you want to achieve.

Let’s assume you wanted to add a class name to each item based on number in the list. $projects->indexOf($project) + 1 then gives you this number, so you can assign class names like position-1, position-2 etc. Here I put it on the li element.

<?php $projects = $page->children()->listed()->shuffle(); ?>

<ul>
        <?php foreach ($projects as $project): ?>
        <li class="<?= 'position-' . $projects->indexOf($project) + 1 ?>">
            <a href="<?= $project->url() ?>">
                <figure>
                    <img src="<?= $project->image()->url() ?>">                      
                    <figcaption><?= $project->title() ?></figcaption>
                </figure>
            </a>
        </li>
        <?php endforeach ?>
    </ul>
5

Yes that’s correct, I’d like to be able to add a class name to each random item/thumb loaded from a list, and have my positions (limited to a number of positions) controlled with css. A bit like this overview grid here: https://www.schneiderstyling.com

The animation delay on loading is not critical but would be a nice to have.

Ran the code you’re suggesting but unfortunately getting a non-numeric value error.

Thanks a lot for the help,
v

6

Caused by which line of the code?

8

I’m breaking on the li class line

9

Did you copy the code exactly as I wrote it above?

10

yes I did, and line 10 still seems to break:

<?php snippet('header') ?>
 
    <main class="main">
        <h1><?= $page->title() ?></h1>
 
        <?php $projects = $page->children()->listed()->shuffle(); ?>
 
        <ul>
            <?php foreach ($projects as $project): ?>
            <li class="<?= 'position-' . $projects->indexOf($project) + 1 ?>">
                <a href="<?= $project->url() ?>">
                    <figure>
                        <img src="<?= $project->image()->url() ?>">                      
                        <figcaption><?= $project->title() ?></figcaption>
                    </figure>
                </a>
            </li>
            <?php endforeach ?>
        </ul>
11

Try

 <li class="<?= 'position-' . ($projects->indexOf($project) + 1) ?>">
12

And… It’s working :slight_smile:
awesome, thank you so much @texnixe !

Now I need to style my positions to make sure I have the flexibility I need but so far the page source is indeed returning a unique number for each list item so I should be fine.

One last question and I’m done bothering on this topic, If I want to add a limiter to the # of positions how would I do this ?

Or maybe the proper way to do this would be to add a limit to the number of random projects that are featured instead ?

with ```
$featured = page(‘projects’)->children()->listed()->shuffle()->limit(12);

?

Thanks again,
v
13

Yes, that’s the way to go.

14

Thanks again @texnixe , styled my thumbs positions, worked like a charm.