I am trying to achieve to show 4 divs on 1 line and after those 4 divs it should automatically end the line and continue with the new line of 4 divs. What I have right now is;
<?php
// Make sure to just show items if there are any.
if ($is_empty)
{
echo 'There are no products found.';
}
else
{
// Start counting the products.
$i = 1;
// List up all products.
foreach ($results as $item):
// Count up the productcount.
$i++;
?>
<a href="<?php echo base_url(); ?>product/<?php echo $item['product_id']."-".$item['name_clean']; ?>.html">
<?php echo $item['name']; ?>
</a>
<?php
endforeach;
}
?>
So like, if $i = 4, 8, 12 etc etc, cut off the line (maybe add a div that's holding those 4?) and start a new one.
Is that possible? I know it is with tables, as I found here PHP: End and start a new <tr> after 6 rows
Thanks.
Use modulus (%) to calculate every 4th element.
<?php
// Start counting the products.
$i = 0;
// List up all products.
foreach ($results as $item):
// Count up the productcount.
$i++;
?>
<a href="<?php echo base_url(); ?>product/<?php echo $item['product_id']."-".$item['name_clean']; ?>.html">
<?php echo $item['name']; ?>
</a>
<?php
if($i%4 == 0):
?>
<br />
<?php
endif;
?>
endforeach;
?>
Related
I wondered if anyone could help me combine two blocks of code I have. I have one block looping though items and the start of another block showing a count and hopefully enabling me to display the items looping through in rows by adding a div around them every two items... Heres the first bit of code, the loop:
<?php if(get_field('areas')): ?>
<?php while(has_sub_field('areas')): ?>
<div class="single-area-item six columns">
<p> <img src="<?php the_sub_field('area_icon'); ?>" style="width:100%;"> <p>
<h4> <?php the_sub_field('area_title'); ?> </h4>
<p> <?php the_sub_field('area_info'); ?> <p>
</div>
<?php endwhile; ?>
<?php endif; ?>
I'm using Advance Custom Fields for Wordpress and this is pulling through repeater fields... this displays them just one after the other.
Here's the code I have found to hopefully display them in rows.
<?php
$num = 1;
foreach ( $terms as $term ) {
if($num%2) {
echo '<div class="area-row">';
}
// Other Code
if($num %2) {
echo '</div>';
}
$num++
}
?>
I would like to display them in rows of two...
ONE TWO
THREE FOUR
FIVE SIX
Etc...
So, Im guessing I need to combine the code somehow... I currently have this: but it doesn't seem to work:
<?php
$num = 1;
foreach ( $terms as $term ) {
if($num%2) {
echo '<div class="area-row">';
}
if(get_field('areas')): ?>
<?php while(has_sub_field('areas')): ?>
<div class="single-area-item six columns">
<p> <img src="<?php the_sub_field('area_icon'); ?>" style="width:100%;"> <p>
<h4> <?php the_sub_field('area_title'); ?> </h4>
<p> <?php the_sub_field('area_info'); ?> <p>
</div>
<?php endwhile; ?>
<?php endif; ?>
if($num %2) {
echo '</div>';
}
$num++
}
?>
Okay so it looks like there was a couple of simple issues with this, you had closed the php tag after your if statment and then continued to write php without reopening the php tags. Also there is a slight logic error with the if($num%2) statements as one of these needs to be if, the other needs to be if not, so that the alternate.
Give this code a try and let me know how you get on:
<?php
if(get_field('areas')):
$num = 1;
?>
<?php while(has_sub_field('areas')):
if($num%2) {
echo '<div class="area-row">';
} ?>
<div class="single-area-item six columns">
<p> <img src="<?php the_sub_field('area_icon'); ?>" style="width:100%;"> <p>
<h4> <?php the_sub_field('area_title'); ?> </h4>
<p> <?php the_sub_field('area_info'); ?> <p>
</div>
<?php
if(!$num%2) {
echo '</div>';
}
$num++
endwhile; ?>
<?php endif; ?>
The main reason behind this question was for me to be able to target the third item of the looped through items, as it had padding on it that was breaking the rows that I needed to remove.
I have since found another solution that seems to be working.
By using the nth-child element, I have been able to target and remove the padding on every third item that's looped through - fixing the issue.
.single-area-item:nth-child(3n+3) {
margin-left: 0;
}
This is for rows or 2 items, if it were rows of 3 or 4 then it would need to target every 4th or 5th item respectively.
I am looking to offset a group of PHP array results to create multiple rows of data.
For example, the first row will contain the first four array results, with the second row displaying results 5-8 and the third row containing results 9-12.
Currently, I am printing out all 12 in one list, however I'd like a bit more display control (i.e. ordering the results into columns which I can style independent of each), hence why I'd like to offset the results.
My current PHP is below:
<?php
if (empty($tmdb_cast['cast'])) {
} else {?>
<section class="cast">
<p class="title">Cast</p>
<ul class="section_body"><?php
foreach($tmdb_cast['cast'] as $key => $castMember){
if ($key < 12) {?>
<li class="actor_instance clearfix"><?php
if ($castMember['profile_path'] != '') {?>
<img src="http://cf2.imgobject.com/t/p/w45<?php echo $castMember['profile_path']; ?>" class="actor_image pull-left" alt="<?php echo $castMember['name']; ?>" title="<?php echo $castMember['name']; ?>" /><?php
} else {?>
<img src="assets/images/castpic_unavailable.png" class="actor_image pull-left" alt="No image available" title="No image available" /><?php
}?>
<p class="actor"><?php echo $castMember['character']; ?> - <?php echo $castMember['name']; ?></p>
</li><?php
}
}?>
<div class="morecast pull-right">[...view all cast]</div>
</ul>
</section><?php
}?>
P.S. Apologies for how I've formatted the code in the above block - I'm still not 100% sure how to make it look "nice" on StackOverflow.
Use array_chunk to break a single dimension array into a 2D array. Then you can loop through each chunk, and then each result, to get that "offset" effect between them.
$chunks = array_chunk($tmdb_cast['cast'], 4); // 4 here, is the number you want each group to have
foreach($chunks as $key => $chunk)
{
foreach($chunk as $castMember)
{
//display castMember here
}
// add code between groups of 4 cast members here
}
First: mixing php and html this way is a very bad habbit... one day you will have to maintain your code and that day you will vomit all over your desk because you mixed different languages in one file...
That being said..
and without creating a new array:
foreach($tmdb_cast['cast'] as $key => $castMember)
{
if ($key < 12)
{
// your code goes here
// if key is 3, or 7 the code below will close the listcontainer and open a new one...
if( ($key+1)%4 == 0 AND $key <11)
echo '</ul> <ul class="section_body">';
}
}
Also replace this:
if (empty($tmdb_cast['cast']))
{
}
else {
with this:
if (!empty($tmdb_cast['cast']))
{
I'm not entirely sure what you're looking for but here's how I would format your code. Alternative syntax for 'if' is a little more readable, and the use of for loops instead of a foreach will give you the control over row numbers you say you're looking for.
<?php if( ! empty($tmdb_cast['cast'])): ?>
<section class="cast">
<p class="title">Cast</p>
<ul class="section_body">
<?php
for($i = 0; $i < 12; $i++):
$castMember = $tmdb_cast['cast'][$i];
?>
<li class="actor_instance clearfix">
<?php if($castMember['profile_path'] != ''): ?>
<img src="http://cf2.imgobject.com/t/p/w45<?php echo $castMember['profile_path']; ?>" class="actor_image pull-left" alt="<?php echo $castMember['name']; ?>" title="<?php echo $castMember['name']; ?>" />
<?php else: ?>
<img src="assets/images/castpic_unavailable.png" class="actor_image pull-left" alt="No image available" title="No image available" />
<?php endif; ?>
<p class="actor"><?php echo $castMember['character']; ?> - <?php echo $castMember['name']; ?></p>
</li>
<?php endfor; ?>
<div class="morecast pull-right">[...view all cast]</div>
</ul>
</section>
<?php endif; ?>
I am using cake PHP and on my view/technical_slider/index.ctp is the following:
I am using a heavily modified version of this tutorial Featured Content Slider Using jQuery
<?php foreach ($technicalSlides as $technicalSlide):?>
<div id="nav-fragment-1" class="ui-tabs-panel">
<h2><?php echo $technicalSlide['TechnicalSlide']['title'];?></h2>
<p><?php echo $technicalSlide['TechnicalSlide']['description'] ; ?></p>
</div>
<?php endforeach; ?>
My question is: How can I display only certain id's or items and apply different class on the same div ? Because I only want record 1-3 skip 4-7 then show record 8-15?
I am applying different classes on them because they have different backgrounds, but share the same id.
You coud add a counter and then display only those you want.
<?php int $i = 0; ?>
<?php foreach ($technicalSlides as $technicalSlide):?>
<?php if ($i < 4 || $i > 7): ?>
<div id="nav-fragment-1" class="ui-tabs-panel">
<h2><?php echo $technicalSlide['TechnicalSlide']['title'];?></h2>
<p><?php echo $technicalSlide['TechnicalSlide']['description'] ; ?></p>
<?php endif; ?>
</div>
<?php endforeach; ?>
Although I would merge all classes and use attributes.
Add a counter variable (in this case $i), increment it ($i++) so it increases by one for every loop, and add your checks to an if() block to make sure you only write the ones you want to:
<?php
$i = 1;
foreach ($technicalSlides as $technicalSlide):
if($i < 4 || $i > 7) {
?>
<div id="nav-fragment-1" class="ui-tabs-panel">
<h2><?php echo $technicalSlide['TechnicalSlide']['title'];?></h2>
<p><?php echo $technicalSlide['TechnicalSlide']['description'] ; ?></p>
</div>
<?php
}
$i++;
endforeach;
?>
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.
I have a simple problem which I simply can't find the answer too. I have a multi-dimentional array coming from my Joomla which currently shows all the blog articles on my website. I only want to show the most recent 5.
Here's the code:
<?php
foreach($list as $item) {
?>
<li>
<a href="<?php echo $item->link; ?>" class="latestnews<?php echo $params->get('moduleclass_sfx'); ?>">
<?php echo $item->text; ?></a>
</li>
}
?>
I've seen a few similar posts but none of them seem to do what I'm looking for. Hopefully a simple one to the trained eye. Please help me on my day off! :-)
Newbie :-(
You can use array_slice() to slice off the first 5, assuming they are ordered from newest to oldest.
<?php
foreach(array_slice($list, 0, 5) as $item) {
?>
If they are ordered the opposite way, use array_slice($list, -5).
Either you use array_slice() to get only the part of the array that you need, or you can use a counter in your loop and break when you reach you desired number.
As array_slice() is displayed in another answer, I'll just give you an example using a counter and break:
<?php
$i = 0;
foreach($list as $item) {
if ($i > 4)
break;
$i++;
?>
<li>
<a href="<?php echo $item->link; ?>" class="latestnews<?php echo $params->get('moduleclass_sfx'); ?>">
<?php echo $item->text; ?></a>
</li>
<? } ?>