<?php foreach ($rows as $id => $row): ?>
<li class="<?php print $classes[$id]; ?>"><?php print $row; ?></li>
<?php endforeach; ?>
the above code is used to output an article list. now i want to add big space after the lines which is the multiple of 10.namely,add a big space (eg:margin-bottom:30px,only to after every 10 bullet points but the space between other li is 15px )after every 10 bullet points. how to change the above code. then i can use css to get that.
–
Although I don't have a clue what you mean by 'big space', I assume you want to place an arbitry HTML tag after every 10th list item. You can do this like so, for example:
<?php $i = 0; ?>
<?php foreach ($rows as $id => $row): ?>
<li class="<?php print $classes[$id]; ?>"><?php print $row; ?></li>
<?php if ($i++ === 10): ?><br /><?php $i = 0; endif; ?>
<?php endforeach; ?>
EDIT, you clarified:
no,eg:30px, but the space between other <li> is 20px.
Which can be done like so:
<?php $i = 1; ?>
<?php foreach ($rows as $id => $row): ?>
<?php $i++; ?>
<li style="margin-bottom:<?php echo ($i === 10) ? : '30' : '20'); ?>px;" class="<?php print $classes[$id]; ?>"><?php print $row; ?></li>
<?php if ($i === 10) $i = 1; ?>
<?php endforeach; ?>
The modulus operator (%) is ideal for this:
<?php $i = 0; foreach ( $rows as $id => $row ): ?>
<li style="margin-bottom: <?php echo $i ++ % 10 ? '30' : '20' ?>px;" class="<?php echo $classes[$id] ?>">
<?php echo $row ?>
</li>
<?php endforeach ?>
As a slight amendment to Aron's code, if you wanted to use CSS to style the <li>:
<?php $i = 1;
foreach ($rows as $id => $row):
if($i === 10){
$end_class = ' end-class';
$i = 1;
} else {
$end_class = '';
$i++;
}
echo '<li class="' . $classes[$id] . $end_class . '">' . $row . '</li>';
endforeach;
?>
You can then apply the style to .end-class.
Related
How could I limit this foraech statement to just 5 loops? I think I should just use Break but I'm not sure where to put it.
<?php if(!empty($locations)): foreach($locations as $location): ?>
<?php if(empty($location["title"])) continue; ?>
<li>
<a href="<?php esc_attr_e($url.$glue.http_build_query($location["query"])) ?>">
<?php esc_html_e($location["title"]) ?>
</a>
<?php if($param->count): ?>
<div class="wpjb-widget-item-count">
<div class="wpjb-widget-item-num"><?php echo intval($location["count"]) ?></div>
</div>
<?php endif; ?>
</li>
<?php endforeach; ?>
You can use array_slice() first to get a new array with no more than 5 elements.
$locations = array_slice($locations, 0, 5);
Then everything unchanged.
There are three methods:
Method 1: foreach with a counter var
$counter = 1;
foreach($locations as $location) {
// use $location here
if($counter++ == 5) {
break;
}
}
Method 2: foreach using $key=>$val
foreach($locations as $key=>$val) {
// Your content goes here
if($key === 4) {
break;
}
}
Method 3: for loop
for($i = 0; $i < 5; $i++) {
// Use $locations[$i] here and do something with it
}
Using a counter variable into your loop you can control/limit to any number.
Example:
$counter = 0;
foreach($locations as $location):
if($counter++ == 5):
break;
// Your other content goes here
endif;
endforeach;
Add a variable ... increment it each iteration ... after reach 5 just break loop.
<?php $i = 1;?>
<?php if(!empty($locations)): foreach($locations as $location): ?>
<?php if(empty($location["title"])) continue; ?>
<li>
<a href="<?php esc_attr_e($url.$glue.http_build_query($location["query"])) ?>">
<?php esc_html_e($location["title"]) ?>
</a>
<?php if($param->count): ?>
<div class="wpjb-widget-item-count">
<div class="wpjb-widget-item-num"><?php echo intval($location["count"]) ?></div>
</div>
<?php endif; ?>
</li>
<?php if ($i++ == 5) break; ?>
<?php endforeach; ?>
You can use for():
<?php if(!empty($locations)):
for($i=0; $i<5; $i++) {
$location = $locations[$i];
<?php if(empty($locations["title"])) continue; ?>
<li>
<a href="<?php esc_attr_e($url.$glue.http_build_query($location["query"])) ?>">
<?php esc_html_e($location["title"]) ?>
</a>
<?php if($param->count): ?>
<div class="wpjb-widget-item-count">
<div class="wpjb-widget-item-num"><?php echo intval($location["count"]) ?></div>
</div>
<?php endif; ?>
</li>
}
I have the following function which grabs and displays the categories associated with the post, which works perfect however i want to place separators between them and not 100% sure how to achieve this. Can anyone lend me a hand?
CAT1 CAT2 CAT3
ideally would like to have like:
CAT1 / CAT2 / CAT3
Notice no seperator on the last one
PHP
<ul class="inline-list">
<?php
$id = get_the_ID();
$cats = get_the_category($id);
foreach ( $cats as $cat ):
?>
<li><?php echo $cat->name; ?></li>
<?php
endforeach;
?>
<li><?php FoundationPress_entry_meta(); ?></li>
</ul>
As explained by others, CSS would be the prefered way. But if you really want to do this in PHP, you could save the html code for the list to a variable, either by concatenation or output buffering:
ob_start();
foreach ( $cats as $cat ) {
echo '<li>'.$cat->name.' /</li>';
}
$list = ob_get_clean();
Then you could remove the last 7 characters (" /</li>") using the substr function and put "</li>" back before outputting the code:
echo substr($list, 0, -7).'</li>;
mikemike's answer is a perfect solution but if for some reason you want to do it using code you could try this.
<ul class="inline-list">
<?php
$id = get_the_ID();
$cats = get_the_category($id);
$count = 1;
foreach ( $cats as $cat ):
?>
<li><?php echo $cat->name; ?> </li>
<?php
if($count < count($cats)):
echo '/';
endif;
$count++;
endforeach;
?>
<li><?php FoundationPress_entry_meta(); ?></li>
</ul>
To do this in your code you can simply do the following:
<ul class="inline-list">
<?php
$id = get_the_ID();
$cats = get_the_category($id);
foreach ( $cats as $cat ):
?>
<li><?php echo $cat->name; ?></li>
<?php
endforeach;
?>
<li class="no-border"><?php FoundationPress_entry_meta(); ?></li>
</ul>
CSS:
ul.inline-list li{
border-right:1px solid #eee;
}
ul.inline-list li.no-border{
border-right:none;
}
Alternatively, you can achieve this using nth-child, first-child or last-child CSS selectors.
For example:
ul.inline-list li {
border-left:1px solid #eee;
}
ul.inline-list li:first-child{
border-left:none;
}
This code sets a light-grey border to the left of all the lis. The second statement then removes the border from the first li.
The same can be achieved with border-right and last-child (removing the border from the last li).
In both cases you can use CSS for the separator, whether that's a border, a background or by using before to add a / character.
You can count how many iterations you have done, and if less that the total, output the separator:
$count = count($cats);
$i = 0;
foreach ( $cats as $cat ):?>
<li>
<?php echo $cat->name; ?>
<?php echo ++$i < $count ? '/' : '';?>
</li>
<?php endforeach;
Live example: http://codepad.viper-7.com/7QU7x9
If you solely want to do this in php, I'd change from a foreach loop to a for loop, then you can decipher between the two.
IE:
$length = count($cat);
for ($i = 0; $i < $length; $i++) {
$cat = $cats[i];
if ($i + 1 == $length) {?>
<li><?php echo $cat->name; ?></li>
<?php } else { ?>
<li><?php echo $cat->name; ?> / </li>
<?php }
}
<?php foreach ($rows as $id => $row): ?>
Basically i want my output for the first 5 rows to be inside <div class = "firstcolumn">
Once I have reached my five rows I want it to generate a second <div class = "secondcolumn"> for the rest of the rows. Also the row outputs have to come inside the div tags. So I only generate one div that fills up with rows
Can anyone help me to achieve this?
Try this
$cnt = 1;//Counter variable
foreach ($rows as $id => $row){
if($cnt <= 5){
$var = '<div class = "firstcolumn">';
}
else if($cnt > 5){
$var = '<div class = "secondcolumn">'
}
$cnt++;
}
In keeping with your style of coding, a loop counter will do the trick.
<?php $i = 0; ?>
<?php foreach ($rows as $id => $row): ?>
<?php $i++; ?>
<?php $colName = $i > 5 ? "secondcolumn" : "firstcolumn"; ?>
<div class="<?php echo $colName; ?>">
<?php endforeach; ?>
$count = 1;
foreach ($rows as $id => $row)
{
if($count <= 5)
{
if($count==1){
?>
<div class = "firstcolumn">
<?php }?>
<?php print $row; ?>
<?php
}
else
{
if($count==6){
?>
<div class = "secondcolumn">
<?php }?>
<?php print $row; ?>
<?php
}
if($count == 5){
?>
</div>
<?php
}
$count++;
}
if($count != 1 && $count!=6){
?>
</div>
<?php
}
I use Kirby CMS as backend.
I want following structure for my html output:
<ul>
<li class="link-1">Link</li>
<li class="link-2">Link</li>
<li class="link-3">Link</li>
<li class="link-4">Link</li>
</ul>
I have following code:
<?php foreach($pages->visible() AS $p): ?>
<?php $nbr = $pages->countVisible()?>
<li class="link-<?php for ($i = 1; $i <= $nbr; $i++){echo $i;} ?>">
<a<?php echo ($p->isOpen()) ? ' class="active"' : '' ?> href="<?php echo $p->url() ?>"><?php echo html($p->title()) ?></a></li>
<?php endforeach ?>
But instead I only get the css class
link-1234
in each of the links, so it is making the for loop, but I need only one number per foreach loop.
This code made it work:
<li class="link-<?php static $x=1; echo $x; $x++; ?>">
<li class="link-<?php for ($i = 1; $i <= $nbr; $i++){echo $i;} ?>">
only loops inside that element
<?php for ($i = 1; $i <= $nbr; $i++){
echo "<li class=\"link-$i\">";
echo 'the rest of the line';
} ?>
should loop the whole block
At the moment, with the code from below, I have the data shown like this:
http://img27.imageshack.us/img27/8083/29769986.jpg
but I want it to be shown like this:
http://img259.imageshack.us/img259/3233/24033830.jpg
The code for the data shown, as it is on the first image, is:
<div id="content">
<?php foreach ($categories as $category) { ?>
<div class="manufacturer-list">
<div class="manufacturer-heading"><?php echo $category['name']; ?><a id="<?php echo $category['name']; ?>"></a></div>
<div class="manufacturer-content">
<?php if ($category['manufacturer']) { ?>
<?php for ($i = 0; $i < count($category['manufacturer']);) { ?>
<ul>
<?php $j = $i + ceil(count($category['manufacturer']) / 4); ?>
<?php for (; $i < $j; $i++) { ?>
<?php if (isset($category['manufacturer'][$i])) { ?>
<li><?php echo $category['manufacturer'][$i]['name']; ?></li>
<?php } ?>
<?php } ?>
</ul>
<?php } ?>
<?php } ?>
</div>
</div>
<?php } ?>
</div>
I order to get the "Hewlett-Packard" text under the "HTC" text, I've changed the "/ 4" into "/ 1", but I have no idea how to make the data to be shown into three columns (like on the second picture), instead of one, as it is now (as shown on the first picture).
Thanks in advance.
EDIT: What I actually need, is to count and to do the calculation on this code:
<?php foreach ($categories as $category) { ?>
.
.
.
<?php } ?>
So it needs to count the number of categoris, do the calculations, and present the code between into three columns.
Try this one.
<div id="content">
<div class="content-column">
<?php
$cols = 3; // Change to columns needed.
$catcount = count($categories);
$catpercol = ceil($catcount / $cols);
$c = 0;
foreach ($categories as $category) {
if ( $c == $catpercol ) {
$c = 0;
print "</div><div class='content-column'>";
}
?>
<div class="manufacturer-list">
<div class="manufacturer-heading"><?php echo $category['name']; ?><a id="<?php echo $category['name']; ?>"></a></div>
<div class="manufacturer-content">
<?php if ($category['manufacturer']) { ?>
<?php for ($i = 0; $i < count($category['manufacturer']);) { ?>
<ul>
<?php $j = $i + ceil(count($category['manufacturer']) / 4); ?>
<?php for (; $i < $j; $i++) { ?>
<?php if (isset($category['manufacturer'][$i])) { ?>
<li><?php echo $category['manufacturer'][$i]['name']; ?></li>
<?php } ?>
<?php } ?>
</ul>
<?php } ?>
<?php } ?>
</div>
</div>
<?php $c++; } ?>
</div>
</div>
Add .content-column { float: left; width: 33.33333%; } to your CSS.
Details:
$cols = 3; enables you to set the desired number of columns (note: you might need to change CSS accordingly).
$catcount = count($categories); gives you the total number of categories about to be rendered.
$catpercol = ceil($catcount / $cols); divides that total number evenly into the required number of columns with the last column having eventually less items than the others.
$c = 0; is your counter. It increases at the end of the outer foreach loop.
Within the loop, $cis checked if it matches the $catpercol number and if so, the current parent div is closed and a new one created. You end up with as many parent divs as you need columns. Just add appropiate CSS to make them appear besides each other.
understand the following code that according to your requirement, the code just give the hint to achieve that you want according to your given screen shoot http://img259.imageshack.us/img259/3233/24033830.jpg
echo "<table>";
echo "<tr>";
$i = 1;
do{
// column range
$range = 3;
echo "<td>" . $i;
if( $i % $range == 0 ){
echo "</tr>";
echo "<tr>";
}
echo "</td>";
$i++;
}while( $i <= 10 );
echo "</tr>";
echo "</table>";
Hope this will help you
I think it is possible to create three column layout via html/css and without any change of your PHP code. Just use float:left; width: 33%. You can also use absolute value for width property because of margins and borders.