Rotating CSS Classes in a loop )foreach)

[MilenKo]

Hello all. Yesterday working on my Cooking Recipes profile I stumbled across an interesting issue - how to show pages published/created on a specific time interval without the use of any plugins but just the default API of PW. Thanks to @abdus the sollution was implemented and was working perfectly fine (here)

Everything was good until I started working on my main page and discovered that our web designer made the recipes appear in threee columns and to differentiate the columns he used 3 different classes (first, second, last). So it was supposed to look like this:

<li><class="cs-recipes first"></li>     |     <li><class="cs-recipes second"></li>     |     <li><class="cs-recipes last"></li>

At first I thought it would be easy to just create another loop and insert it within the first one, but that got me unprepared as instead of 5 posts (as the limit was), I was showing 15. So moving here and there, trying and trying for quite some time to find a solution, I got stuck and asked for some help. Mr @abdus saved the day again offering something simple and most important - fully working. As far as it was a PM, I decided that it would be a shame if I don't share it with anybody else who might sooner or later search for similar functionality, so here is the complete sollution that works perfectly fine and applies the first, second, last as it should without creating unnecessary loops etc.:

Spoiler

Quote

<div class="cs-recipes-category three-recipes">
    <ul class="cs-recipes"> 

<?php     $today = new \DateTime();
        $aFewDaysAgo = $today->modify('-2 days')->format('c'); // convert to ISO format
        // $aFewDaysAgo = $today->modify('-2 days')->getTimestamp(); // or use UNIX timestamp
        // $lastYear = $today->modify('-1 year')->format('c'); // convert to ISO format
        // $lastYear = $today->modify('-1 year')->format('c'); // or use UNIX timestamp
        if($pages->get('/recipes/')->children) { 
        $latest = $pages->find("template=recipes-inner, published>=$aFewDaysAgo, sort=-published, limit=9");
        foreach($latest as $index => $rotd) {
            
        if ($index % 3 === 0) $class = 'first';
        else if ($index % 3 === 1) $class = 'second';
        else if ($index % 3 === 2) $class = 'last'; ?>
        
        <li class="cs-recipe <?= $class ?>">

        <div class="cs-recipe-image">
            <div class="cs-recipe-details-button">
                <a href="<?=$rotd->url?>">Details</a>
            </div>
            <img src="<?=$rotd->recipe_images->first->size(220,165)->url?>" alt="<?=$rotd->recipe_images->description?>">
        </div>
        <div class="cs-recipe-meta">
            <span><i class="fa fa-hourglass-half"></i> <?=$rotd->recipe_cooking_time?></span>
            <span><i class="fa fa-cutlery"></i> <?=$rotd->recipe_servings?></span>
        </div>
        <h3>    
            <a href="<?=$rotd->url?>"><?=$rotd->title?></a>
        </h3>
    </li>  

        <?php }; 
        }?>
        
    </ul>
</div> 

 

Hope it helps and don't thank me, I am just the messenger

[cb2004]

You could potentially also use just CSS for this:

:nth-child(3n+0)

This would select all elements where an index is a multiple of 3.

[MilenKo]

Thanks for the suggestion cb2004. That could also do the trick