Jump to content

Rotating CSS Classes in a loop )foreach)


MilenKo
 Share

Recommended Posts

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 :)

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...