adrianmak Posted December 20, 2016 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>";
blynx Posted December 20, 2016 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
tpr Posted December 20, 2016 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
BitPoet Posted December 20, 2016 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
Recommended Posts