Support

Account

Home Forums Add-ons Repeater Field Grid based layout and repeater help needed

Solved

Grid based layout and repeater help needed

  • 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; ?>
Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.