I wanna make 4 column wrap a .row container, below is what I tried but there is a row in last not what I want.. How to remove the last row make it correct
<div class="article-list-container">
<?php $column_count = 1; ?>
<div class="row">
<?php foreach ($data_select_top_hits['article'] as $each_data_select_top_hits) { ?>
<div class="article-list">
<!-- .. -->
</div>
<?php if (($column_count % 4) == 0) { ?>
<div class="clear"></div>
</div>
<div class="row">
<?php } ?>
<?php $column_count++;?>
<?php } ?>
<div class="clear"></div>
</div>
</div>
output
<div class="article-list-container">
<div class="row">
<div class="article-list"></div>
<div class="article-list"></div>
<div class="article-list"></div>
<div class="article-list"></div>
<div class="clear"></div>
</div>
<div class="row">
<div class="article-list"></div>
<div class="article-list"></div>
<div class="article-list"></div>
<div class="article-list"></div>
<div class="clear"></div>
</div>
<div class="row">
<div class="clear"></div>
</div>
</div>
You could try something like this. Adding the rows into arrays and then going through that array and wrapping the rows.
<?php
$column_count = 1;
foreach ($data_select_top_hits['article'] as $each_data_select_top_hits) {
$row_chunk.="<div class='article-list'>$each_data_select_top_hits</div>";
if (($column_count % 4) == 0) {
$chunk_array[]=$row_chunk;
$row_chunk="";
}
$column_count++;
}
?>
<div class="article-list-container">
<?php foreach($chunk_array as $rows){ ?>
<div class="row">
<?php echo $rows; ?>
<div class="clear"></div>
</div>
<?php } ?>
</div>
Related
I am having difficulty while having the dual container div inside my for each array loop. Getting "two-half" div after each "wrap" div. But need to wrap "two-half" div with 2 "wrap" inside.
Expected:
<div class="item">
<div class="two-half">
<div class="wrap">1</div>
<div class="wrap">2</div>
</div>
<div class="two-half">
<div class="wrap">3</div>
<div class="wrap">4</div>
</div>
</div>
<div class="item">
<div class="two-half">
<div class="wrap">5</div>
<div class="wrap">6</div>
</div>
<div class="two-half">
<div class="wrap">7</div>
<div class="wrap">8</div>
</div>
</div>
Code:
<div class="item">
<?php
$count = 1;
$array = array(1,2,3,4,5,6,7,8);
foreach($array as $item) { ?>
<div class="two-half">
<div class="wrap">
<?php echo $item; ?>
</div>
</div>
<?php if ($count%4 == 0) { ?>
</div>
<?php } $count++; } ?>
Please help me to get the expected output. Thanks!
Use array_chunk to split an array into chunks.
<?php
$array = range(1, 8);
$half = array_chunk($array, 2); // chunk for halfs
$item = array_chunk($half, 2); // chunk for item
$count = 1;
?>
{{-- Create div-item --}}
<?php foreach ($item as $parent) {?>
<div class="item">
{{-- Create div-half --}}
<?php foreach ($parent as $half) {?>
<div class="two-half">
{{-- Create div-wrap --}}
<?php foreach ($half as $item) {?>
<div class="wrap"><?php echo $count; ?></div>
<?php $count++;?>
<?php }?>
</div>
<?php }?>
</div>
<?php }?>
Result
<div class="item">
<div class="two-half">
<div class="wrap">1</div>
<div class="wrap">2</div>
</div>
<div class="two-half">
<div class="wrap">3</div>
<div class="wrap">4</div>
</div>
</div>
<div class="item">
<div class="two-half">
<div class="wrap">5</div>
<div class="wrap">6</div>
</div>
<div class="two-half">
<div class="wrap">7</div>
<div class="wrap">8</div>
</div>
</div>
I have a list item Album contains 30 albums.
I tried to display all them in the browser with 1 rows contain 3 items.
With code like:
<div class="container">
<div class="row">
foreach($listAlbum as $item) {
<div class="col-md-4">$item['imgUrl']</div>
}
</div>
<div class="row">
<div class="col-md-4"></div>
<div class="col-md-4"></div>
<div class="col-md-4"></div>
</div>
<div class="row">
<div class="col-md-4"></div>
<div class="col-md-4"></div>
<div class="col-md-4"></div>
</div>
</div>
Note: I want for each continues to loop all .col-md-4.
If I again using foreach(listAlbum) through each .row. It will duplicate, I don't want this.
Have any idea to resolve my problem?
Edit: Full structure in .col-md-4:
<div class="news-post standard-post">
<div class="post-gallery">
<img src="upload/news-posts/st1.jpg" alt="">
</div>
<div class="post-content">
<h2>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</h2>
<ul class="post-tags">
<li><i class="fa fa-clock-o"></i>27-Nov-2016</li>
<li><i class="fa fa-comments-o"></i><span>23</span></li>
</ul>
</div>
</div>
You need a counter for the $listAlbum items. Increment the counter for each item and check if it is divisible by 3. If it is divisible by 3, re-open the row tag:
<?php
$listAlbum = [
['imgUrl' => 'url1'],
['imgUrl' => 'url2'],
['imgUrl' => 'url3'],
['imgUrl' => 'url4'],
['imgUrl' => 'url5'],
];
echo "<div class='container'>\n\t<div class='row'>\n";
$i = -1;
foreach ($listAlbum as $item) {
if (++$i && $i % 3 == 0)
echo "\t</div>\n\t<div class='row'>\n";
echo "\t\t<div class='col-md-4'>", $item['imgUrl'], "</div>\n";
}
if (++$i % 3)
echo str_repeat("\t\t<div class='col-md-4'></div>\n", 3 - $i % 3);
echo "\t</div>\n</div>";
Sample Output
<div class='container'>
<div class='row'>
<div class='col-md-4'>url1</div>
<div class='col-md-4'>url2</div>
<div class='col-md-4'>url3</div>
</div>
<div class='row'>
<div class='col-md-4'>url4</div>
<div class='col-md-4'>url5</div>
<div class='col-md-4'></div>
</div>
</div>
Try this:
<div class="container">
<div class="row">
<?php $col = 0; foreach($listAlbum as $item) {
if($col && !($col%3)){echo '</div><div class="row">';}
?>
<div class="col-md-4">$item['imgUrl']</div>
<?php $col++; } ?>
</div>
<div class="row">
<div class="col-md-4"></div>
<div class="col-md-4"></div>
<div class="col-md-4"></div>
</div>
<div class="row">
<div class="col-md-4"></div>
<div class="col-md-4"></div>
<div class="col-md-4"></div>
</div>
Sample code:
<?php
for($i=1;$i<30;$i++){
$listAlbum[]= 'item '.$i;
}
?>
<div class="container">
<div class="row">
<?php $col = 0; foreach($listAlbum as $item) {
if($col && !($col%3)){echo '</div><div class="row">';}
?>
<div class="col-md-4"><?php echo $item ?></div>
<?php $col++; } ?>
</div>
Try this out, I am not sure of the content of $item['imgUrl']
<div class="container row">
<div class="col-md-12">
<?php foreach($listAlbum as $item) { ?>
<div class="col-md-4"> <?php $item['imgUrl'] ?></div>
<?php } ?>
</div>
</div>
Here Is The Code
<div class="row">
<div class="col-md-9 column">
<div class="services-listing">
<?php if(!empty($data)):
foreach ($data as $rows ) : ?>
<div class="service">
<div class="service-img"><span><img src="dashboard/uploads/<?php echo $rows['img'];?>" alt="" /></div>
<div class="service-detail">
<h3><?php echo $rows['name'];?></h3>
</div>
</div>
<!-- Service -->
<?php endforeach; else : echo "No Record Found Against This Services"; endif;?>
</div>
<!-- Service Listing -->
</div>
i want to start design from <div class="row"> not from <div class="service"> now it repeating this div i want new <div class="row"> genrated after every 6 records
<div class="row">
<div class="col-md-9 column">
</div>
</div>
Looking for something like this, let me know if it works for you
<?php
$start = 6;
$end = 1;
if(!empty($data)){
foreach ($data as $rows ) {
if ($start % 6 == 0) { ?>
<div class="row">
<div class="col-md-9 column">
<?php } ?>
<div class="services-listing">
<div class="service">
<div class="service-img"><span><img src="dashboard/uploads/<?php echo $rows['img'];?>" alt="" /></div>
<div class="service-detail">
<h3><?php echo $rows['name'];?></h3>
</div>
</div>
<!-- Service -->
</div>
<?php if ($end % 6 == 0) { ?>
</div>
</div>
<?php } $start++; $end++;
}
}
else{ echo "No Record Found Against This Services"; }
?>
you need to wrap div row with foreach first and then:
<?php $i = 0; ?>
<?php if(!empty($data)):
foreach ($data as $rows ) : ?>
<?php $i++; ?>
<div class="row">
<div class="col-md-9 column">
<div class="services-listing">
<div class="service">
<div class="service-img"><span><img src="dashboard/uploads/<?php echo $rows['img'];?>" alt="" /></div>
<div class="service-detail">
<h3><?php echo $rows['name'];?></h3>
</div>
<!-- Service -->
</div>
<!-- Service Listing -->
</div>
<!-- col-md-9 column -->
</div>
<!-- Row -->
</div>
<?php if($i%6==0):?>
<div class="row">
<div class="col-md-9 column">
</div>
</div>
<?php endif; ?>
<?php endforeach; else : echo "No Record Found Against This Services"; endif;?>
just please re-check all divs structure to be sure whether all of them are closed
How Can I make it so that it only does foreach on the data and not the html columns?
<div class="columns">
<div class="title">Donation Amount</div>
<div class="title">Support</div>
<div class="title">View Grant</div>
<?php foreach ($results->result() as $grant) : ?>
<div class="col1"><p>AUD $<?php echo number_format($grant->user_budget);?></p></div>
<div class="col2"></div>
<div class="col3"></div>
</div>
<div class="clear"></div>
<?php endforeach ; ?>
Try this
<div class="columns">
<div class="title">Donation Amount</div>
<div class="title">Support</div>
<div class="title">View Grant</div>
<?php foreach ($results->result() as $grant) : ?>
<div class="col1"><p>AUD $<?php echo number_format($grant->user_budget);?></p></div>
<div class="col2"></div>
<div class="col3"></div>
<div class="clear"></div>
<?php endforeach ; ?>
</div>
I have a foreach loop which retrieves the subcategories of the current category.
<?php $_categories = $this->getCurrentChildCategories(); ?>
<?php foreach ($_categories as $_category): ?>
<div class="item">
<?php echo $this->htmlEscape($_category->getName()) ?>
</div>
<?php endforeach; ?>
I want to divide the results in rows of three columns. The desired format is then:
<div class="row">
<div class="item">
content
</div>
<div class="item">
content
</div>
<div class="item">
content
</div>
</div>
<div class="row">
<div class="item">
content
</div>
<div class="item">
content
</div>
<div class="item">
content
</div>
</div>
...
---------------EDIT----------------
My code is now as follows. How and where do i close the row div?
<?php $_categories = $this->getCurrentChildCategories(); ?>
<?php foreach ($_categories as $_category): ?>
<?php if ($i % 3 == 0) { ?>
<div class="row">
<?php } ?>
<div class="item">
<h2><?php echo $this->htmlEscape($_category->getName()) ?> »</h2>
</div>
<?php $i++; endforeach; ?>
---------------EDIT 2----------------
Getting closer. This is the result:
<div class="category-list">
<div class="row"></div>
<div class="row">
<div class="item">
content
</div>
<div class="item">
content
</div>
<div class="item">
content
</div>
</div>
<div class="row">
<div class="item">
content
</div>
<div class="item">
content
</div>
<div class="item">
content
</div>
</div>
<div class="row">
<div class="item">
content
</div>
<div class="item">
content
</div>
<div class="item">
content
</div>
</div>
</div>
How do I get rid of the empty row?
The code is now as follows:
<div class="category-list">
<?php
$i=0;
echo '<div class="row">';
$_categories = $this->getCurrentChildCategories();
foreach($_categories as $_category):
{
if($i %3 ==0)
{ ?>
</div>
<div class="row">
<div class="item">
<h2><?php echo $this->htmlEscape($_category->getName()) ?> »</h2>
</div>
<? }
else
{ ?>
<div class="item">
<h2><?php echo $this->htmlEscape($_category->getName()) ?> »</h2>
</div>
<? }
$i++;
}
endforeach;
?>
</div>
---------------EDIT 3----------------
Solved by hiding the empty row via CSS.
You have to introduce az iterator (?) variable for example $i = 0
if ($i % 3 == 0) { //modulo
// use for whatever you want
}
In every cycle (maybe at the end of it, it depends on your real solution) you have to increment $i (++$i);
Hope this helps
<?php
$i=0;
echo"<div class="row" >
foreach($category as $cat)
{
if($i %3 ==0)
{
echo"</div><div class='row'> <div class='item'> Content </div>";
}
else
{
echo"<div class='item'> Content </div>";
}
$i++;
}
echo"</div>";
?>