adrianmak Posted December 20, 2016 Share Posted December 20, 2016 There is a page will number of child pages. A list of child's title will be listed in the parent page. The list of childs fill be listed in 3 of a row as following html markup. While using foreach loop how to create a new row for each of three child? <div class="row"> <div class="col-xs-4"></div> <div class="col-xs-4"></div> <div class="col-xs-4"></div> </div> <div class="row"> <div class="col-xs-4"></div> <div class="col-xs-4"></div> <div class="col-xs-4"></div> </div> <div class="row"> <div class="col-xs-4"></div> <div class="col-xs-4"></div> <div class="col-xs-4"></div> </div> <div class="row"> <div class="col-xs-4"></div> <div class="col-xs-4"></div> <div class="col-xs-4"></div> </div> My current code is. But it will not create three in a row html markup $out .= "<div class='row'>"; foreach($page->children as $p) { $out .= "<div class='col-xs-4'>"; $out .= "<img src='{$p->images->first->url}' class='img-responsive'>"; $out .= $p->title; $out .= "</div>"; } $out .= "</div>"; Link to comment Share on other sites More sharing options...
blynx Posted December 20, 2016 Share Posted December 20, 2016 <?php $out .= "<div class='row'>"; $i = 1; foreach($page->children as $p) { $out .= "<div class='col-xs-4'>"; $out .= "<img src='{$p->images->first->url}' class='img-responsive'>"; $out .= $p->title; $out .= "</div>"; if($i++ % 4 == 0) $out .= "</div><div class='row'>"; } $out .= "</div>"; Hi! For that stuff I use the handy modulo operator ... it is a division but you will get the remainder from the division. (See evaluations below) The divisor has to be n+1 of the number of inner sections of the division. (Your cols)Then I also do pre-increment the counter directly in the if statement to save some lines (Post- vs. Pre-imcrement). The counter gets incremented before the modulo operation and the comparison. Just changed it. Either you do pre-increment and put the line at the top ($i must start at 0), or post increment and put the line at the bottom ($i must start at 1). That way this logic fits into 2 lines (init the counter + the sectioning logic) Here some modulo results as a visualization: >>> $i = 0 => 0 >>> $i++ % 4 => 0 >>> $i++ % 4 => 1 >>> $i++ % 4 => 2 >>> $i++ % 4 => 3 >>> $i++ % 4 => 0 >>> $i++ % 4 => 1 >>> $i++ % 4 => 2 >>> $i++ % 4 => 3 >>> Hm. yep. Havent tested the code, but it should work. ..... .. I hope. cheers! 1 Link to comment Share on other sites More sharing options...
tpr Posted December 20, 2016 Share Posted December 20, 2016 According your markup you could also use CSS to format the list, eg using n:th-child or column-count. 2 Link to comment Share on other sites More sharing options...
BitPoet Posted December 20, 2016 Share Posted December 20, 2016 Depending on whether the last row needs to have a complete set of elements (not sure if bootstrap's css requires that), you could also use PHP's builtin array_chunk function to make the logic clearer. $out = ""; foreach(array_chunk($page->children->getArray(), 3) as $row) { $out .= "<div class='col-xs-4'>"; foreach($row as $p) { $out .= "<img src='{$p->images->first->url}' class='img-responsive'>"; $out .= $p->title; } $out .= "</div>"; } 5 Link to comment Share on other sites More sharing options...
Recommended Posts