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
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?
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 
Thank you,
v
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>
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
Caused by which line of the code?
I’m breaking on the li class line
Did you copy the code exactly as I wrote it above?
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>
Try
<li class="<?= 'position-' . ($projects->indexOf($project) + 1) ?>">
And… It’s working
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
Yes, that’s the way to go.
Thanks again @texnixe , styled my thumbs positions, worked like a charm.