phphtmlcssprocesswire

ProcessWire foreach loop to show 4 colums in each row


I've been working on the website for quite a while now and stumbled upon a problem in creating specific foreach loop. I am using ProcessWire to create CMS for the website. I want to display 4 columns in each row, but I am baffled. Here is my code so far;

<div class="container">
<? $count == 0; ?>      
        <? foreach($page->events_tickets as $cols): ?>
        <!-- portfolio item -->
        <? if ($count % 4 == 0)
            echo "<div class='row'>";
        ?>
            <? for($count = 0; $count < 4; $count++) { ?>
            <div class="span3  project-item graphics box">
                <div class="thumbnail" >
                    <!-- IMAGE CONTAINER-->
                    <a rel="prettyPhoto[gallery]" href="<?=$cols->event_url;?>" title="portfolio image">
                        <img src="<?=$cols->event_img->url;?>" alt="<?=$cols->event_img->description;?>" /> 
                    </a>
                    <!--END IMAGE CONTAINER-->
                    <!-- CAPTION --> 
                    <div class="caption">
                        <h4 class=""><?=$cols->event_title;?></h4>
                            <p class="caption-descr" id="opening-reception" style="height: 190px; overflow:auto;">
                            <?=$cols->event_desc;?> <a href="<?=$cols->event_url;?>" target="_blank" style="" title=""> BUY TICKETS</a> 
                            </p>    
                    </div><!--END CAPTION --> 
                </div><!-- END: THUMBNAIL -->
            </div><!-- END: portfolio item -->
            <? if($count % 1 = 1 ) break;} ?>
            </div>  <!--END OF ROW-->
        <? endforeach; ?>

Solution

  • Nevermind, I eventually found out how to solve it. Instead using nested loops I decided to run the loop through conditional if else statement.

    <div class="row">
                <? foreach($page->events_tickets as $cols): ?>
                <? if($cols->event_num % 4 != 0) {?>
                <!-- portfolio item -->
                    <div class="span3  project-item graphics box">
                        <div class="thumbnail" >
                            <!-- IMAGE CONTAINER-->
                            <a rel="prettyPhoto[gallery]" href="<?=$cols->event_url;?>" title="portfolio image">
                                <img src="<?=$cols->event_img->url;?>" alt="<?=$cols->event_img->description;?>" /> 
                            </a>
                            <!--END IMAGE CONTAINER-->
                            <!-- CAPTION --> 
                            <div class="caption">
                                <h4 class=""><?=$cols->event_title;?></h4>
                                    <p class="caption-descr" id="opening-reception" style="height: 190px; overflow:auto;">
                                    <?=$cols->event_desc;?> <a href="<?=$cols->event_url;?>" target="_blank" style="" title=""> BUY TICKETS</a> 
                                    </p>    
                            </div><!--END CAPTION --> 
                        </div><!-- END: THUMBNAIL -->
                    </div><!-- END: portfolio item -->
    
                <? } else if($cols->event_num%4 == 0) {?>
                <div class="row">
                    <div class="span3  project-item graphics box">
                            <div class="thumbnail" >
                                <!-- IMAGE CONTAINER-->
                                <a rel="prettyPhoto[gallery]" href="<?=$cols->event_url;?>" title="portfolio image">
                                    <img src="<?=$cols->event_img->url;?>" alt="<?=$cols->event_img->description;?>" /> 
                                </a>
                                <!--END IMAGE CONTAINER-->
                                <!-- CAPTION --> 
                                <div class="caption">
                                    <h4 class=""><?=$cols->event_title;?></h4>
                                        <p class="caption-descr" id="opening-reception" style="height: 190px; overflow:auto;">
                                        <?=$cols->event_desc;?> <a href="<?=$cols->event_url;?>" target="_blank" style="" title=""> BUY TICKETS</a> 
                                        </p>    
                                </div><!--END CAPTION --> 
                            </div><!-- END: THUMBNAIL -->
                        </div><!-- END: portfolio item -->
                        </div>  <!--END OF ROW-->
                    <? } ?> 
                <? endforeach; ?>
            </div>  <!--END OF ROW-->
    

    I added extra field to the events_tickets field and called it events_num. events_num starts with 1 and follows along until the end of the records.<? if($cols->event_num % 4 != 0) {?> then display the 4 columns. Then if number reached 5 the remainder when divided by 4 is odd number, thus it creates <div class="row"> and displays 4 more columns. Then this procedure continues. Thus there is no need in creating nested loop.