Hi guys,
I am using a grid based layout with 4 columns per grid based row. I have successfully setup the repeater to do what I need in terms of displaying content but I have come to a point where I need a little help (if its possible).
Basically after every 4th row of data, (each row of data sits inside a column which is 25%) I need to create a new grid based row. Like below
1 2 3 4
———-
5 6 7 8
———-
9 10 11 12
———-
I can get it to just continually print 25% columns inside one row but ultimately this doesn’t work great especially when it comes to responsiveness. And each row should only really contain 4 columns not 10+ depending on how many rows are added.
Is this possible?
Thanks in advance!
Tom
Here is my code:
<?php if( have_rows('factsheets') ): ?>
<div class="vc_row wpb_row vc_row-fluid dt-default" style="margin-top: 0px; margin-bottom: 0px; min-height: 0px;">
<?php while( have_rows('factsheets') ): the_row();
// vars
$factsheet_title = get_sub_field('factsheet_title');
$factsheet_pdf = get_sub_field('factsheet_pdf');
?>
<div class="wpb_column vc_column_container vc_col-sm-3">
<div class="vc_column-inner ">
<div class="wpb_wrapper">
<a href="<?php echo $factsheet_pdf['url']; ?>"><img src="/pdf-logo.png" /></a>
<span><?php echo $factsheet_title; ?></span>
</div>
</div>
</div>
<?php endwhile; ?>
</div>
<?php endif; ?>
Hi @tombyrom
I think you can use the modulus operator and the get_row_index() function to check if it is the 4th column of the grid. It should be something like this:
<?php if( have_rows('factsheets') ): ?>
<div> <!-- This is the opening -->
<div class="vc_row wpb_row vc_row-fluid dt-default" style="margin-top: 0px; margin-bottom: 0px; min-height: 0px;">
<?php while( have_rows('factsheets') ): the_row();
// vars
$factsheet_title = get_sub_field('factsheet_title');
$factsheet_pdf = get_sub_field('factsheet_pdf');
?>
<div class="wpb_column vc_column_container vc_col-sm-3">
<div class="vc_column-inner ">
<div class="wpb_wrapper">
<a href="<?php echo $factsheet_pdf['url']; ?>"><img src="/pdf-logo.png" /></a>
<span><?php echo $factsheet_title; ?></span>
</div>
</div>
</div>
<?php
if( get_row_index() % 4 == 0 ){
// Close the div and open it again
echo "</div><div>";
}
?>
<?php endwhile; ?>
</div>
<div> <!-- This is the closing -->
<?php endif; ?>
I hope this helps 🙂
James, thank you for the help!
This doesn’t produce exactly what I need, I have attached a screenshot from inspector that shows you what this produces so you can hopefully diagnose where the issue lies.
https://drive.google.com/file/d/0B970Ybn1DAYcRV9JS2pGbGt0Z0U/view?usp=sharing
As you can see it creates a new div to contain the columns but the div is without the classes that make it a row… Btw I added a / to the closing div as I assume that was needed?
EDIT: The opening div and closing divs you added in don’t seem to do anything, when I take them out it still works the same way as above?
Thanks James
Tom
Hi James,
I solved it with a little tweak to your code, thanks for getting me pretty much there!
<?php if( have_rows('factsheets') ): ?>
<div class="vc_row wpb_row vc_row-fluid dt-default" style="margin-top: 0px; margin-bottom: 0px; min-height: 0px;">
<?php while( have_rows('factsheets') ): the_row();
// vars
$factsheet_title = get_sub_field('factsheet_title');
$factsheet_pdf = get_sub_field('factsheet_pdf');
?>
<div class="wpb_column vc_column_container vc_col-sm-3">
<div class="vc_column-inner ">
<div class="wpb_wrapper">
<a href="<?php echo $factsheet_pdf['url']; ?>"><img src="/pdf-logo.png" /></a>
<span><?php echo $factsheet_title; ?></span>
</div>
</div>
</div>
<?php
if( get_row_index() % 4 == 0 ){
// Close the div and open it again
echo '</div><div class="vc_row wpb_row vc_row-fluid dt-default" style="margin-top: 0px; margin-bottom: 0px; min-height: 0px;">';
}
?>
<?php endwhile; ?>
</div>
<?php endif; ?>
