Grid based layout and repeater help needed

• tombyrom

• August 4, 2016 at 2:36 am

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; ?>

• James

• August 4, 2016 at 2:47 pm

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 🙂

• tombyrom

• August 4, 2016 at 6:35 pm

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

• tombyrom

• August 4, 2016 at 7:28 pm

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; ?>