need make loop this: http://prntscr.com/eswtyt
with 2 arrow styles (left , right).
1) item left arrow 2) item left arrow 3) item right arrow 4) item right arrow 5) item left arrow 6) item left arrow etc...
my loop now:
<?php $services = get_posts(array( 'meta_query' => array( array( 'key' => 'enable_service_in_homepage', 'compare' => '==', 'value' => '1' ) ) )); if( $services ): ?> <?php foreach( $services $post ): setup_postdata( $post ) ?> <div class="col-sm-6 nopadding"> <div class="item item-left"> <div class="col-sm-6 nopadding hidden-xs"> <a href="<?php the_permalink(); ?>"><?php the_post_thumbnail( array(700, 500) ); ?></a> <div class="arrow-left"></div> </div> <div class="col-md-6 nopadding"> <div class="content"> <h2><?php the_title(); ?></h2> <p><?php echo wp_trim_words( get_the_content(), 35, '...' ); ?></p> <a href="<?php the_permalink(); ?>" class="service-button"><?php echo __('Ətrafli','altus'); ?></a> </div> </div> </div> </div> <!-- start right arrow --> <div class="col-sm-6 nopadding"> <div class="item item-right"> <div class="col-md-6 nopadding"> <div class="content"> <h2><?php the_title(); ?></h2> <p><?php echo wp_trim_words( get_the_content(), 35, '...' ); ?></p> <a href="<?php the_permalink(); ?>" class="service-button"><?php echo __('Ətrafli','altus'); ?></a> </div> </div> <div class="col-sm-6 nopadding hidden-xs"> <a href="<?php the_permalink(); ?>"><?php the_post_thumbnail( array(700, 500) ); ?></a> <div class="arrow-right"></div> </div> </div> </div> <!-- end right arrow --> <?php endforeach; ?> <?php wp_reset_postdata(); ?> <?php endif; ?>
there might more clean way of doing this, can accomplish array_chunk():
<?php $services = get_posts(array( 'meta_query' => array( array( 'key' => 'enable_service_in_homepage', 'compare' => '==', 'value' => '1' ) ) )); ?> <?php if( $services ): ?> <?php $services_chunked = array_chunk( $services, 2 ); ?> <?php foreach( $services_chunked $key => $posts ): ?> <?php $alignment = $key % 2 ? "left" : "right"; ?> <?php foreach ( $posts $post ) : setup_postdata( $post ); ?> <div class="col-sm-6 nopadding"> <div class="item item-<?= $alignment ?>"> <div class="col-sm-6 nopadding hidden-xs"> <a href="<?php the_permalink(); ?>"><?php the_post_thumbnail( array(700, 500) ); ?></a> <div class="arrow-<?= $alignment ?>"></div> </div> <div class="col-md-6 nopadding"> <div class="content"> <h2><?php the_title(); ?></h2> <p><?php echo wp_trim_words( get_the_content(), 35, '...' ); ?></p> <a href="<?php the_permalink(); ?>" class="service-button">altus</a> </div> </div> </div> </div> <?php endforeach; ?> <?php wp_reset_postdata(); ?> <?php endforeach; ?> <?php endif; ?> 
Comments
Post a Comment