Insert Clear Fix After Certain Amount of DIVs in PHP - php

Question

I'm struggling with a problem and I thought someone could help me. I'm trying to insert a clear div after a certain amount div containers. Now in this example I've managed to get it to work that after the first three a clear div is placed, but I want it to be inserted after each set of 3 divs depending on how many featured articles I've setup (3, 6, 9 etc).
$featured_articles = get_field('featured_articles', false, false );
$id = $featured_articles[0];
//var_dump();
$numberOfArticles = count($featured_articles);
//var_dump($featured_articles);
echo "<div class='container'>";
echo "<div class='row-fluid'>";
for ($i=0; $i < $numberOfArticles; $i++) {
if ($featured_articles) {
$id = $featured_articles[$i];
//var_dump($featured_articles);
if ( has_post_thumbnail($id) ) {
echo "<div class='span4'>";
echo "<article class='post__holder recipes'>";
echo "<a href='".get_permalink($id)."' class='image'>";
echo get_the_post_thumbnail( $id, 'medium-thumb' );
$image_large = wp_get_attachment_image_src( get_post_thumbnail_id($id), 'large');
echo "</a>";
}
echo "<a href='".get_permalink($id)."'><h3>".get_the_title($id)."</h3></a>";
echo "<div class='starRating'>";
echo "<img src='".home_url()."/wp-content/themes/BUZZBLOG-theme/images/StarRating.svg' alt='Testergebnis'>";
echo "<div class='bar' style='width:".get_field('rating', $id)."%'></div>";
echo "</div>";/** end starrating **/
echo "<a href='".get_permalink($id)."'><div class='readmore-button'>Zum Testbericht...</div></a>";
echo "</div>";
echo "</article>";
if ($i >= 2) {
if($i == 2) {
echo "<div class='clearfix'>";
}
if ($i == $numberOfArticles) {
echo "</div>";
}
}
}
}
echo "</div>";
echo "</div>";

Answer 1

Try this It will check for multiples of 3 and place a clearfix div
Also dont forget to start the $i from 1 upto $i <= $numberOfArticles
$featured_articles = get_field('featured_articles', false, false );
$id = $featured_articles[0];
//var_dump();
$numberOfArticles = count($featured_articles);
//var_dump($featured_articles);
echo "<div class='container'>";
echo "<div class='row-fluid'>";
for ($i=1; $i <= $numberOfArticles; $i++) {
if ($featured_articles) {
$id = $featured_articles[$i-1];
//var_dump($featured_articles);
if ( has_post_thumbnail($id) ) {
echo "<div class='span4'>";
echo "<article class='post__holder recipes'>";
echo "<a href='".get_permalink($id)."' class='image'>";
echo get_the_post_thumbnail( $id, 'medium-thumb' );
$image_large = wp_get_attachment_image_src( get_post_thumbnail_id($id), 'large');
echo "</a>";
}
echo "<a href='".get_permalink($id)."'><h3>".get_the_title($id)."</h3></a>";
echo "<div class='starRating'>";
echo "<img src='".home_url()."/wp-content/themes/BUZZBLOG-theme/images/StarRating.svg' alt='Testergebnis'>";
echo "<div class='bar' style='width:".get_field('rating', $id)."%'></div>";
echo "</div>";/** end starrating **/
echo "<a href='".get_permalink($id)."'><div class='readmore-button'>Zum Testbericht...</div></a>";
echo "</div>";
echo "</article>";
if($i%3==0) {
echo "<div class='clearfix'></div>";
}
}
}
echo "</div>";
echo "</div>";

Answer 2

You can do like this:-
for ($i=0; $i < $numberOfArticles; $i++) {
// your code
if($i%3==0) echo '<div class="clearfix"></div>';
}

Answer 3

You can use array_chunk() function to divide your array in group of 3 members each and you can iterate over each array.
PHP is a server side scripting language that is embedded in HTML.
So use this feature in your code instead of writing echo "html element" every where in code.
I think you have miss match of div element. Because <article> must be close before the <div class='span4'> but in your code it is not there.
$featured_articles = get_field('featured_articles', false, false );
$dividedIn3GroupsEach = array_chunk($featured_articles, 3);
foreach ($dividedIn3GroupsEach as $array) {
?>
<div class='container'>
<div class='row-fluid'>
<?php
foreach ($array as $key => $value) {
$id = $featured_articles[$key];
if (has_post_thumbnail($id)) {
?>
<div class='span4'>
<article class='post__holder recipes'>
<a href='<?php echo get_permalink($id); ?>' class='image'>
<?php
echo get_the_post_thumbnail($id, 'medium-thumb');
$image_large = wp_get_attachment_image_src(get_post_thumbnail_id($id), 'large');
?>
</a>
<?php } ?>
<a href='<?php echo get_permalink($id); ?>'><h3><?php echo get_the_title($id); ?></h3></a>
<div class='starRating'>
<img src='<?php echo home_url() ?>"/wp-content/themes/BUZZBLOG-theme/images/StarRating.svg' alt='Testergebnis'>
<div class='bar' style='width:<?php echo get_field('rating', $id); ?>%'></div>
</div>
<a href='<?php echo get_permalink($id); ?>'><div class='readmore-button'>Zum Testbericht...</div></a>
</article>
</div>
<?php }
?>
</div> <!-- row-fluid end -->
</div> <!-- container end -->
<div class='clearfix'></div>
<?php } ?>
I hope this may help you.