Hi I am using Bootstrap 2 with a PHP content management system.
I am rendering 12 items from the database, each 3 items needs to be wrapped in a row. However I am unable to achieve this my last attempt is below (with simplified markup):
$i = 1;
echo "<div class='row-fluid'>";
foreach($posts as $p) {
if ($i % 3 == 0) {
echo "</div>";
}
if ($i % 4 == 0) {
echo "<div class='row-fluid'>";
}
echo "<div class='span4'><h5>$p->title</h5></div>";
$i++;
}
In affect what I am looking for is something like this:
<div class="row">
<div class="item></item>
<div class="item"</item>
<div class="item"></item>
</div>
<div class="row">
<div class="item></item>
<div class="item"</item>
<div class="item"></item>
</div>
<div class="row">
<div class="item></item>
<div class="item"</item>
<div class="item"></item>
</div>
<div class="row">
<div class="item></item>
<div class="item"</item>
<div class="item"></item>
</div>
I have tried everything I can think of any help would be great thanks.
Try if there are 12 rows :
echo "<div class='row-fluid'>";
foreach($posts as $p) {
echo "<div class='span4'><h5>$p->title</h5></div>";
if ($i % 3 == 0) {
echo "</div>";
echo ( $i< 12 )? "<div class='row-fluid'>" : "";
}
$i++;
}
I think this will work
$i = 0;
echo "<div class='row-fluid'>";
foreach($posts as $p) {
echo "<div class='span4'><h5>$p->title</h5></div>";
if ($i % 3 == 0) {
echo "</div><div class='row-fluid'>";
}
$i++;
}
echo "</div>";
Related
<div class="puffar">
<?php
//Set up the objects needed
$my_wp_query = new WP_Query();
$all_wp_pages = $my_wp_query->query(array('post_type' => 'page'));
//Get children
$children = ($post->post_parent) ? get_page_children($post->post_parent, $all_wp_pages) : get_page_children($post->ID, $all_wp_pages);
$i = 0;
//Build custom items
echo "<div class='row'>";
foreach ($children as $child) {
?>
<div class="col-sm-6">
<div class="puff">
<div class="puff-image-holder">
<?php echo get_the_post_thumbnail($child->ID, 'full'); ?>
</div>
<fieldset class="linedHeadline hlmedium">
<legend><?php echo get_the_title($child->ID); ?></legend>
</fieldset>
<?php echo get_field("puff_introtext", $child->ID); ?>
<?php
$values = get_field('puff_lanktext', $child->ID);
if (get_field("popup_eller_lank", $child->ID) == "popup") {
?>
<fieldset class="linedHeadline hlmedium">
<legend><a class="linktopage open-popup"
href="<?php echo get_page_link($child->ID); ?>"><?php echo get_field("puff_lanktext", $child->ID); ?> </a>
</legend>
</fieldset>
<?php
} elseif (get_field("popup_eller_lank", $child->ID) == "extern") {
?>
<fieldset class="linedHeadline hlmedium">
<legend><a class="linktopage"
href="<?php echo get_field("puff_lank", $child->ID); ?>"><?php echo get_field("puff_lanktext", $child->ID); ?> </a>
</legend>
<?php
$i++;
if ($i % 2 == 0) {
echo "</div><div class='row'>";
}
} else {
}
?>
</div>
</div>
<?php } ?>
</div>
</div>
I want every 2 items that's rendered out to be wrapped in a <div class="row">, however I can't figure it out. Can anyone help me?
So basically the row should wrap every 2 elements that is getting looped. I have been stuck on this forever... Hopefully anyone got better expertise than me hehe.
The div="row" should wrap the col-sm-6 and class="puff".
$i = 0;
foreach ($children as $child) {
$i++;
// your code goes here
if($i % 2 == 0) {
echo "</div><div class='row'>";
// reset the counter to 0
$i = 0 ;
}
}
use proper logic
if ($i % 2 == 0) {
echo "</div><div class='row'>";
}
$i++;
First check if its mod by 2 or not (Gives 0 value after MOD), then close div , open new.
Now increase counter . Because for the first time , i will be 0 , then you increment it and then you use logic. So in short counter shoul be incremented at the end only not in between before you do any operation/logic.
Updated
Use code as it is **: issue was you have i++ and your condition in 3rd else if which never executed. So took it outside All and just before foreach.
<div class="puffar">
<?php
//Set up the objects needed
$my_wp_query = new WP_Query();
$all_wp_pages = $my_wp_query->query(array('post_type' => 'page'));
//Get children
$children = ($post->post_parent) ? get_page_children($post->post_parent, $all_wp_pages) : get_page_children($post->ID, $all_wp_pages);
$i = 0;
//Build custom items
echo "<div class='row'>";
foreach ($children as $child) {
?>
<div class="col-sm-6">
<div class="puff">
<div class="puff-image-holder">
<?php echo get_the_post_thumbnail($child->ID, 'full'); ?>
</div>
<fieldset class="linedHeadline hlmedium">
<legend><?php echo get_the_title($child->ID); ?></legend>
</fieldset>
<?php echo get_field("puff_introtext", $child->ID); ?>
<?php
$values = get_field('puff_lanktext', $child->ID);
if (get_field("popup_eller_lank", $child->ID) == "popup") {
?>
<fieldset class="linedHeadline hlmedium">
<legend><a class="linktopage open-popup"
href="<?php echo get_page_link($child->ID); ?>"><?php echo get_field("puff_lanktext", $child->ID); ?> </a>
</legend>
</fieldset>
<?php
} elseif (get_field("popup_eller_lank", $child->ID) == "extern") {
?>
<fieldset class="linedHeadline hlmedium">
<legend><a class="linktopage"
href="<?php echo get_field("puff_lank", $child->ID); ?>"><?php echo get_field("puff_lanktext", $child->ID); ?> </a>
</legend>
<?php
} else {
}
?>
</div>
</div>
<?php
if ($i % 2 == 0) {
echo "</div><div class='row'>";
}
$i++;
} ?>
</div>
</div>
First set $i=0;
if ($i % 2 == 0) {
echo "</div><div class='row'>";
}
$i++;
I need a little help with a php loop for OpenCart.
I need to do is wrap a div around the output of the data every 4 loops.
I have the following
<?php foreach ($categories as $category) { ?>
<div class="col-lg-3 col-md-3">.....</div>
<?php } ?>
I get this
<div class="col-lg-3 col-md-3">.....</div>
<div class="col-lg-3 col-md-3">.....</div>
<div class="col-lg-3 col-md-3">.....</div>
<div class="col-lg-3 col-md-3">.....</div>
<div class="col-lg-3 col-md-3">.....</div>
<div class="col-lg-3 col-md-3">.....</div>
<div class="col-lg-3 col-md-3">.....</div>
<div class="col-lg-3 col-md-3">.....</div>
<div class="col-lg-3 col-md-3">.....</div>
<div class="col-lg-3 col-md-3">.....</div>
But what I'm hoping to get is
<div class="row">
<div class="col-lg-3 col-md-3">.....</div>
<div class="col-lg-3 col-md-3">.....</div>
<div class="col-lg-3 col-md-3">.....</div>
<div class="col-lg-3 col-md-3">.....</div>
</div>
<div class="row">
<div class="col-lg-3 col-md-3">.....</div>
<div class="col-lg-3 col-md-3">.....</div>
<div class="col-lg-3 col-md-3">.....</div>
<div class="col-lg-3 col-md-3">.....</div>
</div>
<div class="row">
<div class="col-lg-3 col-md-3">.....</div>
<div class="col-lg-3 col-md-3">.....</div>
</div>
Any help would be greatly appreciated :)
try this
<?php
$i=0;
$wrap_count = 4; // you can change this no of divs to wrap
foreach ($categories as $category)
{
$i+=1;
if($i%$wrap_count==1)
{
echo '<div class="row">';
}
?>
<div class="col-lg-3 col-md-3">.....</div>
<?php
if($i%$wrap_count==0)
{
echo '</div>';
}
}
if($i%$wrap_count!=0)
{
echo '</div>';
}
?>
<?php
$i = 0;
foreach ($categories as $category) {
if (($i % 4) === 0) {
echo "<div class='row'>";
}
echo '<div class="col-lg-3 col-md-3"></div>';
if (($i % 4) === 3) {
echo "</div>";
}
$i++;
}
?>
Ps, If $categories is a non keyed array, ie array('a', 'b', 'c') then you can get rid of the i = 0; and i++; and change the foreach to foreach ($categories as $i => $category) {
And as zerkms mentioned in a comment, the magic here is coming from % (Modulo operation), which is essentially like a clock- the numbers will increment from 0 upwards until they hit 12, at which point it is reset to 0 again. So the clock is said to be modulo twelve. In this instance we're using modulo four to cyclically print our our opening and closing row elements.
Modulo four would be the sequence 0, 1, 2, 3, 0, 1, 2, 3, 0, 1, etc
Try this :-
<div class="row">
<?php
$i = 1;
foreach ($categories as $category) { ?>
<div class="col-lg-3 col-md-3">.....</div>
<?php if ($i % 4 == 0){ ?>
</div><div class="row">
<?php } ?>
<?php $i++; ?>
<?php } ?>
You may use a counter variable. Initially set it to equal 0. Then for each loop check its value. If it is equal to 0 then output <div class="row"> and add 1 to the variable's value. If its value is > 0 and < 5 then output <div class="col-lg-3 col-md-3">.....</div> and add 1 to it's value. If it is equal to 5 output </div> and reset the counter variable to 0.
Something like (code tested):
<?php
$counter = 0;
foreach ($categories as $category) {
If ($counter == 0) {
echo '<div class="row">
<div class="col-lg-3 col-md-3">.....</div>
';
$counter++;
} elseif ($counter > 0 && $counter < 3) {
echo '<div class="col-lg-3 col-md-3">.....</div>
';
$counter++;
} elseif ($counter == 3) {
echo '<div class="col-lg-3 col-md-3">.....</div>
</div>
';
$counter = 0;
}
}
if ($counter > 0) {
echo '</div>
';
}
?>
The Modulo operator will be equal to zero when used in a comparison with the number of items you would like in a row. So you can output your starting <div> there.
To add a closing div you will need to check the modulo of 4 is equal to 3 or if we have reached the total number of items, to prevent a missing close </div>.
<?php
// set a counter
$rowCount = 0;
// store the total number of categories minus 1 as we will be
// counting from 0 with the counter
$categoryTotal = count($categories) - 1;
foreach($categories as $c){
if($rowCount % 4 == 0){
echo '<div class="row">';
}?>
<div class="col-lg-3 col-md-3""></div>
<?php
// add your closing div if it is the end of a row or if there are no more items
if($rowCount % 4 == 3 || $rowCount == $categoryTotal){
echo '</div>';
}
// increment your counter
$rowCount++;
} ?>
I have an alternative option that might work depending on your array.
$new_array = array_chunk($your_array, 4);
foreach($new_array as $group_of_$four){
echo '<div class="row">';
foreach($group_of_four as $one){
// Single Item
}
echo '</div>';
}
Well, add this to your code:
//before foreach
$i = 0;
// inside the foreach before its closing }
$i++;
}//this closes the foreach
And then before adding any div (probably in the beginning of the foreach:
if($i % 4 == 0)
{
echo "<div class='each-four-iterations'>";
}
And before the $i++ statement, add this :
if($i % 4 == 0)
{
echo "</div>";
}
<?php
$wrap_count = 2; // you can change this no of divs to wrap
foreach ($categories as $category) :
$i+=1;
if($i%$wrap_count==1):
echo '<div class="row">';
endif;?>
<div class="col-lg-3 col-md-3">.....</div>
if($i%$wrap_count==0) : echo '</div>'; endif; endforeach;
?>
Works Fine For me
Try this one. It works for me.
<?php $count = 1; ?>
<?php foreach ($model->userProfile->portfolio as $item): ?>
<?php if ($count % 4 == 1): ?>
<div class="row" style="margin-bottom: 30px;">
<?php endif ?>
<div class="col-md-3">
</div>
<?php if ($count % 4 == 0): ?>
</div>
<?php endif ?>
<?php $count++ ?>
<?php endforeach ?>
Hi I have been chasing my tail for a while on this one and wondered if someone could solve my headache.
Basically I am rendering 12 items to the page. Each 3 items need to be wrapped in a row like:
<div class='row'>
<div class='item'>
</div>
<div class='item'>
</div>
<div class='item'>
</div>
</div>
<div class='row'>
<div class='item'>
</div>
<div class='item'>
</div>
<div class='item'>
</div>
</div>
<div class='row'>
<div class='item'>
</div>
<div class='item'>
</div>
<div class='item'>
</div>
</div>
<div class='row'>
<div class='item'>
</div>
<div class='item'>
</div>
<div class='item'>
</div>
</div>
Thanks in advance.
Hi I think some code would help:
$i=0;
foreach($posts as $p) {
$i++
}
So basically within the for each I will be outputting a row and 3 items.The results are coming from a database query. I have tried a few different approaches such as
if($i == 1) {echo "<div class='row'>";}
if ($counter % 4 == 0) {
echo "</div><div class='row'>";
}
However I keep failing, please note these are just snippets of code.
You need to use two loops:
// Outer loop for each row
for ($row = 0; $row < 4; $row++) {
echo '<row>';
// Inner loop for the items
for ($item = 0; $item < 3; $item++) {
echo '<item>';
}
echo '</row>';
}
You should have done it yourself. it needs to know very basic of loop.
try like this:
for($i=0;$i <= 3; $i++){ //outer loop for 12 times
echo "<row>"; // start row
for ($j=0;$j<3;$j++){ // inner loops for echoing 3 times
echo "<item>"; //echo item
}
echo "</row>"; // end row
}
demo : https://eval.in/107129
I have used "\n" for new line in demo. if you needed new line then you can use <br />
I want to create a row if columns greater than 3 using PHP loop because i am using wordpress
My code is here
<div class="row">
<div class="column">column1</div>
<div class="column">column2</div>
<div class="column">column3</div>
</div>
If columns are greater than 3, then it should create a new row like this
<div class="row">
<div class="column">column1</div>
<div class="column">column2</div>
<div class="column">column3</div>
</div>
<div class="row">
<div class="column">column1</div>
</div>
Any help will be highly appreciated.
Thanks in advance
Sure - just use modulus:
<?php
$elements = array('foo', 'bar', 'rab', 'oof');
echo '<div class="row">';
foreach ($elements as $i => $element) {
if ($i > 0 && $i % 3 == 0) {
echo '</div><div class="row">';
}
echo '<div class="column">' . $element . '</div>';
}
echo '</div>';
?>
DEMO
Output:
<div class="row">
<div class="column">foo</div>
<div class="column">bar</div>
<div class="column">rab</div>
</div>
<div class="row">
<div class="column">oof</div>
</div>
You need something like this:
<?
echo '<div class="row">';
for ($i=0; $i<15;$i++){
if ($i%3 == 0 && $i != 0){
echo '</div><div class="row">';
}
echo '<div class="column">column '.($i+1).'</div>';
}
echo '</div>';
?>
WORKING CODE
There is alternative solution with function.
<?php
// Managing the Code -- Functions: Handling a Variable Number of Parameters
// building a row of 10 <td> columns with a variable number of items
function preferencesRow()
{
// initialize $output
$output = '';
// use "func_get_args()" to collect all parameters into an array
$params = func_get_args();
// used to make sure 10 columns are filled
$maxCols = 10;
// loop through the parameters
foreach ($params as $item) {
$output .= "<td width='80px' align='center'>$item</td>\n";
$maxCols--;
}
// fill in the rest of the row with empty columns
for ($x = 0; $x < $maxCols; $x++) {
$output .= "<td width='80px'> </td>\n";
}
return $output;
}
// NOTE: you can use "." or "," with echo
echo '<h1>Preferences</h1><hr />' . PHP_EOL;
echo '<table border=1>' . PHP_EOL;
echo '<tr><th>Tarzan</th>';
echo preferencesRow('Africa', 'jungles', 'tantor', 'mangani', 'cabin in the woods',
'hunting', 'swinging in trees', 'Jane');
echo '</tr>';
echo '<tr><th>Jane</th>';
echo preferencesRow('London', 'parties', 'dancing', 'social events', 'lavish estates');
echo '</tr>';
echo '</table>' . PHP_EOL;
I would like to make this in a loop:
<div class="global">
<div class="left">1</div>
<div class="right">2</div>
</div>
<div class="global">
<div class="left">3</div>
<div class="right">4</div>
</div>
<div class="global">
<div class="left">5</div>
<div class="right">6</div>
</div>
<div class="global">
<div class="left">7</div>
<div class="right">8</div>
</div>
<div class="global">
<div class="left">9</div>
<div class="right">10</div>
</div>
I know do something link this :
for($i=0;$i<4;$i++){
if($i %2){
$classe='class="right"';
}
else{
$classe='class="left"';
}
echo "<div ".$classe." >".$i."</div>";
}
which result:
<div class="left">1</div>
<div class="right">2</div>
<div class="left">3</div>
<div class="right">4</div>
How Can I integrate the div "global" between ?
Thanks a lot for your help
Iterate two by two:
for ($i = 1; $i <= 4; $i += 2) {
echo '<div class="global">';
echo '<div class="left">' . $i . '</div>'
echo '<div class="right">' . ($i+1) . '</div>'
echo '</div>';
}
You just need a little extra...
echo '<div class="global">'; //start the first global div
for($i=0;$i<4;$i++){
if($i %2){
$classe='class="right"';
}
else{
$classe='class="left"';
}
echo "<div ".$classe." >".$i."</div>";
if($i %2)
{
//after each "right" div, close and open a new global div
echo "</div>\n<div class=\"global\">";
}
}
echo '</div>'; //close the final global div
You can also compact the whole thing a bit:
echo '<div class="global">'; //start the first div
for($i=0;$i<4;$i++)
{
if($i %2)
{
echo "<div class=\"right\" >$i</div>\n</div>\n<div class=\"global\">";
}
else
{
echo "<div class=\"right\" >$i</div>";
}
}
echo '</div>'; //close the final global div
I like printf.
$i=1;
while ($i < 8) {
printf('<div class="global"><div class="left">%d</div><div class="right">%d</div></div>', $i++, $i++);
}
Edit:
Although this doesn't really answer the OP question, and none of the other answers (yet) use modulus as per the question title. So, here is another far more ugly way :)
echo '<div class="global">';
for($i=0;$i<8;$i++){
if ($i %2) {
$classe='right';
$sep='</div><div class="global">';
}
else{
$classe='left';
$sep='';
}
printf('<div class="%s">%d</div>%s', $classe, $i+1, $i<7?$sep:'');
}
echo '</div>';
This code works :
echo '<div class="global">'; //start the first global div
for($i=0;$i<7;$i++){
if($i %2){
$classe='class="right"';
}
else{
$classe='class="left"';
}
echo "<div ".$classe." >".$i."</div>";
if($i %2)
{
//after each "right" div, close and open a new global div
echo "</div>\n<div class=\"global\">";
}
}
echo '</div>';