Rotate or switch through different css classes when entries displayed

Hi! I’m Marco and I’m new to the Kirby Universe. And am not very good with php.

I hope I get my question clear:

I have a list of articles and would like to rotate through different CSS classes in the HTML template.

There is a CMS called Expression Engine where there is a parameter called “Switch”.
https://docs.expressionengine.com/latest/channels/entries.html#switch
It looks like this:

{exp:channel:entries channel="yourchannel"}
    <div class="{switch='one|two'}">
        <h2>{title}</h2>
        {body}
    </div>
{/exp:channel:entries}

The entries would then alternate between <div class="one"> and <div class="two">

And this is not limited to two values ​​but rotates through all of them.

Can I do something similar in Kirby as well?

Yes, but you would have to create the logic yourself. Here is an example. It uses the modulo operator and an array of classes:

<?php

$classes = [
  '0' => 'class-for-zero',
  '1' => 'class-for-one',
  '2' => 'class-for-two'
];
$notes = $page->children();

foreach($notes as $note) {
  $mod = $notes->indexOf($note) % 3;
  echo $classes[$mod]  . '<br>';
}

If you call indexOf() on the collection with the current item as parameter, you get the position of that item in the collection, starting with 0.

Since we have three class items in the example, the index number mod 3 will always return either 0, 1 or 2, and so we get one of the classes from the classes array in turn.

This logic could be hidden away in a custom page method: Page methods | Kirby CMS

For two items, you would use an array with two items and change the number after the modulo operator from 3 to 2.

1 Like

I’d also add that unless you really need the classes you can target those items using the nth-child() selector in css.

Thanks for the reply. Yes i tried it with the nth-of-type(odd) method. but I only get that alternately and not that it rotates through 3 states.

You have a lot more options with nth-child()/nth-of-type() than even/odd.

I also thank you for the quick reply.

I just tried this with modulo operator. I didn’t understand it :wink: but built into the template and it works well.

Basically, I think a CSS-based solution is also good, but I get a knot in my head with this pseudo class.

How would you assess that, is a CSS solution always better or is such a class hack in the kirby template okay. What’s your opinion on that?

OK. I actually managed to do it with the CSS. It just clicked in my head. Here’s the example, maybe interesting for others too, now it rotates through 3 states.

.event-overview li:nth-of-type(3n+1) .switch-stern {
	clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}
.event-overview li:nth-of-type(3n+2) .switch-stern {
	clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}
.event-overview li:nth-of-type(3n+3) .switch-stern {
	clip-path: polygon(50% 0%, 83% 12%, 100% 43%, 94% 78%, 68% 100%, 32% 100%, 6% 78%, 0% 43%, 17% 12%);
}

I’m still wondering which is the smarter method, I have the feeling that the PHP method is the safer one because it’s not so dependent on the browser

Browser support for nth-of-type is pretty good: "nth-of-type" | Can I use... Support tables for HTML5, CSS3, etc

But using PHP logic to assign classes is fine, I think, given that many people today use the like of TailwindCSS where you plaster classes all over the place.

1 Like