Row loop

  • Resolved theredeclipse

    (@theredeclipse)


    7 years, 9 months ago

    Hello, I have a simple catalog which shows child pages with thumbnails. As my theme uses a bootstrap I need to change row every 4 colums otherwise layout crashes. Everything what I’ve tried not working or it disable ACF fields

    <?php
					$mypages = get_pages( array( 'child_of' => $post->ID,'parent' => $post->ID, 'sort_column' => 'post_date','sort_order' => 'desc' ) );

					foreach( $mypages as $page ) {		
						$content = $page->post_content;
						
						if ( ! $content ) // Check for empty page
							continue;
						$content = apply_filters( 'the_content', $content );
						
					?>
					              <div class="col-xs-12 col-sm-6 col-lg-3">
                <div class="shop-product-card">
										<?php echo get_the_post_thumbnail( $page->ID, 'subpage' ); ?>
						
                  <div class="product-image-wrapper">
                    <span class="label label-red sale-label"><?php the_field('field-special-offer', $page->ID ); ?></span>
                    <a href="#" class="fav-btn"><span class="linea-basic-star"></span></a>
                    <div class="shop-p-slider fancybox">
                      <a data-fancybox="field-10" href="<?php echo $image['url']; ?>"><img height="200px" src="<?php $image = get_field( 'image-1', $page->ID );
                        echo $image['url']; ?>"></a>
					  <a data-fancybox="field-10" href="<?php echo $image['url']; ?>"><img height="200px" src="<?php $image = get_field( 'image-2', $page->ID );
                        echo $image['url']; ?>"></a>
                    </div>
                  </div>
                  <div class="product-meta">
                    <a href="/"><h4 class="product-name"><?php echo get_the_title( $page->ID ); ?></h4></a>
                    <span class="product-sep"></span>
                    <p class="product"><?php the_field('field-short-description', $page->ID ); ?></p>
					<a class="btn-ghost btn-ghost-light ft-button" href="<?php echo get_page_link( $page->ID ); ?>">details</a>
                  </div>

					</div>
					</div>	
					<?php
						}	
					?>

    Any input would be appreciated

Viewing 2 replies - 1 through 2 (of 2 total)

  • Hey theredeclipse,

    So you’re trying to add a row div after every 4 loops?

    The modulus operator should be able to handle this for you.

    <?php
 $counter = 1;
 
foreach($mypages as $page) {

if($counter % 4 == 0) {
  echo '<div class="row">';
}

 the_content();

if($counter % 4 == 0) {
  echo '</div>';
}

$counter++;
}

    This checks the counter value against a division of 4 and returns the remainder. If it’s 0 we add the markup.

    You could always look at adding some media queries though and/or just display inline-block the div elements for a smoother layout.

    Hope this helps

    Adam

    Thread Starter theredeclipse

    (@theredeclipse)

    Thanks a lot! Everything works now.

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Row loop’ is closed to new replies.