I'm using Bootstrap slider and want to display 3 items per slide generated from a foreach loop.
This loop counter keeps adding and extra <div> at the end of the loop, there are 6 items in the loop so I get an empty slide. How can I fix this?
<?php if (database_querySelect($sql,$rows)) {
$spCounter = 0;
?>
<div class="panel">
<div class="panel-heading">
<h4><?php print translate("Related Products"); ?></h4>
</div>
<div id="relatedSlider" class="carousel slide">
<div class="carousel-inner">
<div class="item active">
<?php foreach($searchresults["products"] as $product): ?>
<?php include("html/search/style1.php"); ?>
<?php if(($spCounter) % 3 == 0) : ?>
</div>
<div class="item">
<?php endif; ?>
<?php $spCounter++; endforeach; ?>
</div>
</div>
</div>
</div>
<?php } ?>
<div class="item">
<?php endif; ?>
<?php $spCounter++; endforeach; ?>
</div>
The div with class item is inside foreach loop, and you have conditional statement that passes after every 3rd counter.
Related
The $counter variable is working fine counting the loop, but I need to get the total amount of elements for each loop. How would I go about doing that?
<div id="<?php echo $term->slug; ?>" class="lity-hide resource-pop-up">
<?php
if($the_posts->have_posts()):
$counter = 1;
while($the_posts->have_posts()):
$the_posts->the_post();
//vars
$section_one = apply_filters('the_content', get_field('section_one'));
$section_two = apply_filters('the_content', get_field('section_two'));
$learn_more_link = get_field('learn_more_link');
?>
<section class="pop-up">
<div class="title">
<div class="brand">
<img src="https://via.placeholder.com/125x125" alt="Brand">
<?php the_title('<h3>','</h3>'); ?>
</div>
<aside>
<h4><?php echo $counter; ?>/<?php echo $counter->length; ?></h4>
</aside>
</div>
<div class="row pop-up-content">
<aside class="col-sm-12 col-md-6">
<?php echo $section_one; ?>
</aside>
<aside class="col-sm-12 col-md-6">
<?php echo $section_one; ?>
</aside>
</div>
<div class="learn-more">Learn More</div>
</section>
<?php
$counter++;
endwhile;
wp_reset_postdata();
endif;
?>
</div>
I should expect (number of element)/(total number of elements) or 2/10, basically like saying 2 of 10.
For the number of posts, you need
echo $the_posts->post_count
which is a total of all the posts, as opposed to
echo $counter->length
$counter is only a number and wouldn't have a length property anyway.
I'm creating a theme, and I used a condition to create an additional div with the class of "row" after 3 posts/columns are created. It works as expected, except when I minimize the screen to 1024x768, the columns have no margin in between them. And then they finally goes one under another one as expected on a smaller viewport. Not sure what to do, here's the code ...
<?php get_header(); ?>
<div class="container">
<div class="row">
<div class="col-xs-10 col-xs-offset-1">
<div class="row ">
<?php
if (have_posts() ):
$counter = 0;
while (have_posts() ) : the_post();
$counter++; ?>
<div class="col-sm-4">
<div class="card">
<div class="card_img_container">
<?php the_post_thumbnail( array(450, 450), array('alt' => get_the_title(), 'class' => 'card_image img-responsive') ); ?>
<span class="card_readmore">View Post</span>
</div>
<div class="card_excerpt">
<p class="content_category1"> <?php the_category( ', ' ); ?></p>
<?php the_excerpt(); ?>
<p> <span class="read_more">Read More</span> </p>
</div>
</div>
</div>
<?php if ($counter % 3 == 0) {
echo '</div><div class="row">';
} ?>
<?php
endwhile;
endif;
?>
</div> <!--Inner div ROW-->
</div> <!--Main Div ROW-->
</div> <!--Main Div ROW-->
</div> <!--Container-->
<?php // get_sidebar(); ?>
<?php get_footer(); ?>
I'd probably do it like this:
<div class="col-md-4 col-sm-12">
content
</div>
Remember that the classes can be stacked on top of each other to get widht of 4 in MD-sized screen, and full width (12) in SM-Sized screen.
I hope I understand your problem.
I have a horizontal carousel that is working fine, here is the code for it
Now i wish to fetch the data from database and display it that corousel. Following is the code that i used
<div class='row'>
<div class='col-xs-12'>
<div class="carousel slide media-carousel" id="media">
<div class="carousel-inner">
<div class="item active">
<div class="row">
<?php foreach($student as $student): ?>
<div class="col-md-3">
<a class="thumbnail" href="#"><?php echo $student->fullname;?></a>
</div>
<?php endforeach; ?>
</div>
</div>
</div>
<a data-slide="prev" href="#media" class="left carousel-control">‹</a>
<a data-slide="next" href="#media" class="right carousel-control">›</a>
</div>
</div>
</div>
but the view is distorted and instead of all the slides sliding in one row, the view is coming like this
That's because unless the row is active, the other .item row gets the property display:none; If you were to remove the display:none; it should work as you want.
Create the class="row" inside the loop. Also keep in mind that the screen consists of 12 units only, so if you create a row of more than 12 units it will go to next line automatically. As you have created the loop that creates "col-md-3" for more than 4 times which sums more than 12, so it moves to next line.
For reference view this
As you have not given the php code, i am giving u sample of it
The array that you are getting divide it into a group of 4 (or as many as you want) like given below
$query = $this->db->get('student');
$r = $query->result();
$s = (array_chunk($r, 4));
return $s;
And then on the code you have given, change into following
<div class="carousel-inner">
<?php foreach($s as $key => $per_student): ?>
<?php if($key=='0'): ?>
<div class="item active">
<?php else: ?>
<div class="item ">
<?php endif; ?>
<div class="row">
<?php foreach($per_student as $student): ?>
<div class="col-md-3">
<a class="thumbnail" href="#"><?php echo $student->fullname;?></a>
</div>
<?php endforeach; ?>
</div>
</div>
<?php endforeach; ?>
</div>
I'm using foundation and Wordpress with Advanced Custom Field to build a services module.
I'm using the repeater field to insert the data.
Currently I have the row element outside of the while loop.
I need the div row to wrap every two "small-6 columns tgs-single-service" divs so the foundation grid displays properly. If I insert the row div in the while statement, it will wrap every single div in a row, which I do not want.
<?php if( have_rows('services_content') ):
$classNumber = 0
?>
<section class="full-width tgs-services-section">
<div class="row">
<?php while( have_rows('services_content') ): the_row(); ?>
<div class="small-6 columns tgs-single-service-<?php echo $classNumber = $classNumber + 1 ?>">
<figure class="effect-goliath">
<?php while( have_rows('service_images') ): the_row(); ?>
<img src="<?php the_sub_field('small_image');?>" srcset="<?php the_sub_field('medium_image');?> 1000w, <?php the_sub_field('large_image');?> 2000w" alt="Byoungz Poet Logo">
<?php endwhile; ?>
<figcaption>
<h3><?php the_sub_field('service_title');?></h3>
<?php the_sub_field('service_text');?>
</figcaption>
</figure>
</div><!-- end service section -->
<?php endwhile; ?>
</div><!--end row -->
</section>
<?php endif; ?>
Currently this displays as:
<div class="row">
<div class="small-6 columns tgs-service-section-1"></div>
<div class="small-6 columns tgs-service-section-2"></div>
<div class="small-6 columns tgs-service-section-3"></div>
<div class="small-6 columns tgs-service-section-4"></div>
</div>
I would like to achieve
<div class="row">
<div class="small-6 columns tgs-service-section-1"></div>
<div class="small-6 columns tgs-service-section-2"></div>
</div>
<div class="row">
<div class="small-6 columns tgs-service-section-3"></div>
<div class="small-6 columns tgs-service-section-4"></div>
</div>
Is there a way to have row wrap every two tgs-single-service divs?
<section class="full-width tgs-services-section">
<div class="row">
<!-- Create a counter i -->
<?php $i=1; while( have_rows('services_content') ): the_row(); ?>
<div class="small-6 columns tgs-single-service-<?php echo $classNumber = $classNumber + 1 ?>">
<figure class="effect-goliath">
<?php while( have_rows('service_images') ): the_row(); ?>
<img src="<?php the_sub_field('small_image');?>" srcset="<?php the_sub_field('medium_image');?> 1000w, <?php the_sub_field('large_image');?> 2000w" alt="Byoungz Poet Logo">
<?php endwhile; ?>
<figcaption>
<h3><?php the_sub_field('service_title');?></h3>
<?php the_sub_field('service_text');?>
</figcaption>
</figure>
</div><!-- end service section -->
<?php if($i % 2 == 0): ?><!-- Check if its divisable by 2 -->
</div>
<div class="row">
<?php endif; ?>
<?php $i++; ?>
<?php endwhile; ?>
</div><!--end row -->
</section>
Declare a counter, then determine if the count is a multiple of 2:
$i = 0;
//during your loop:
if(($i % 2) == 0){
//echo opening and closing tag
}
Please try this:
<?php
if( have_rows('services_content') ):
$classNumber = 0
$rowPerSection = 2;
$rows = get_field('services_content');
$sections = array_chunk($rows, $rowPerSection);
?>
<?php foreach ($sections as $section): ?>
<section class="full-width tgs-services-section">
<div class="row">
<?php foreach ($section as $row): ?>
# code...
<?php endforeach; ?>
</div>
</section>
<?php endforeach; ?>
<?php endif; ?>
this is the code of my custom post.I am not so expert in php.So Please help me in this matter.
<?php $featuresitems=new WP_Query(array( 'post_type'=>'scbleftfeatures' )); ?>
<?php while( $featuresitems->have_posts()) : $featuresitems->the_post(); ?>
<div class="col-md-6 left-grid">
<div class="features-grid1">
<div class="feature">
<h4><?php the_title(); ?></h4>
<?php the_content(); ?>
</div>
<div class="icon5">
<?php the_post_thumbnail('features_icon_size'); ?>
</div>
<div class="clearfix"></div>
</div>
</div>
<div class="col-md-6 right-grid">
<div class="features-grid1">
<div class="feature">
<h4><?php the_title(); ?></h4>
<?php the_content(); ?>
</div>
<div class="icon5">
<?php the_post_thumbnail(); ?>
</div>
<div class="clearfix"></div>
</div>
</div>
<?php endwhile; ?>
Question is a little vague but I'm assuming what you actually want to do is just change the classes left-grid and right-grid for every second div. In that case you don't have to repeat the whole divs, just change the classes. This can done with help of a "counter" ($i).
<?php
$featuresitems = new WP_Query(array(
'post_type' => 'scbleftfeatures'
));
$i = 0;
?>
<?php
while( $featuresitems->have_posts()) : $featuresitems->the_post();
$i_is_even = ($i % 2 == 0);
?>
<div class="col-md-6 <?php if ($i_is_even) {echo 'left-grid'; } else { echo 'right-grid'; }; ?>">
<div class="features-grid1">
<div class="feature">
<h4><?php the_title(); ?></h4>
<?php the_content(); ?>
</div>
<div class="icon5">
<?php the_post_thumbnail('features_icon_size'); ?>
</div>
<div class="clearfix"></div>
</div>
</div>
<?php
$i ++;
endwhile;
?>
If you're curious about the % operator I suggest you check out the Modulus operator on http://php.net/manual/en/language.operators.arithmetic.php
And if you actually want to alter between different divs you can put the whole divs inside the if/else blocks instead of just the classes.
Edit:
Not sure why you'd want this as it seems you're using the bootstrap grid anyways.