How to put three posts in each loop? - php

Question

i need to create something like this picture
Picture
How to put three posts in each Wordpress loop? with different classes?
Within each loop, put three posts.
PHP
$args = array(
'order' => 'DESC',
'post_type' => 'post',
'post_status' => 'publish',
'posts_per_page' => 12,
'ignore_sticky_posts' => false,
'no_found_rows' => false,
'paged' => 1
);
$the_query = new WP_Query( $args );
if ( $the_query->have_posts() ) { ?>
<div class="owl-carousel">
<?php while ( $the_query->have_posts() ) : $the_query->the_post(); ?>
<div class="row">
<div class="col-md-6">
<?php the_post_thumbnail( 've' ); ?> <!-- Vertical Image Size : 300*600 px (width/height) -->
</div>
<div class="col-md-6">
<div class="row">
<div class="col-md-12">
<?php the_post_thumbnail( 'ho' ); ?> <!-- Horizontal Image Size : 600*300 px (width/height) -->
</div>
<div class="col-md-12">
<?php the_post_thumbnail( 'ho' ); ?> <!-- Horizontal Image Size : 600*300 px (width/height) -->
</div>
</div>
</div>
</div>
<?php
endwhile;
?> </div> <!-- / .owl-carousel --> <?php
}
I am using OWL Carousel and i Need to put three posts in each Slide,
HTML
<div class="owl-carousel">
<?php while ( $the_query->have_posts() ) : $the_query->the_post(); ?>
<div class="row">
<div class="col-md-6">
<img src="Vertical" alt="">
</div>
<div class="col-md-6">
<div class="row">
<div class="col-md-12">
<img src="Horizontal" alt="">
</div>
<div class="col-md-12">
<img src="Horizontal" alt="">
</div>
</div>
</div>
</div>
<?php endwhile; ?>
any Suggestion, any Ideas
Thanks a lot!

Answer 1

I would use a counting variable and use that with some if statements to determine output:
$args = array(
'order' => 'DESC',
'post_type' => 'post',
'post_status' => 'publish',
'posts_per_page' => 12,
'ignore_sticky_posts' => false,
'no_found_rows' => false,
'paged' => 1
);
$the_query = new WP_Query( $args );
$i = 1;
if ( $the_query->have_posts() ) { ?>
<div class="owl-carousel">
<?php while ( $the_query->have_posts() ) : $the_query->the_post(); ?>
<div class="post-<?php if ($i > 1) {echo "right";} else { echo "left"; } ?>">
<?php the_post_thumbnail(); ?>
</div>
<?php $i++; ?>
<?php endwhile;?>
</div>
<?php endif; ?>

Answer 2

I think you don't put three post in each lopp but you simply manage them with counter:
$args = array(
'order' => 'DESC',
'post_type' => 'post',
'post_status' => 'publish',
'posts_per_page' => 12,
'ignore_sticky_posts' => false,
'no_found_rows' => false,
'paged' => 1
);
$the_query = new WP_Query( $args );
$cont = 0;
if ( $the_query->have_posts() ) {
while ( $the_query->have_posts() ) : $the_query->the_post();
$supp = $cont % 3;
switch($supp)
{
case 0: $vert = get_the_post_thumbnail_url(); break;
case 1: $oriz1 = get_the_post_thumbnail_url(); break;
case 2: $oriz2 = get_the_post_thumbnail_url(); break;
}
$cont ++;
endwhile;
}
After you print html
<div class="row">
<div class="col-md-6">
<img src="<?php echo $vert; ?>" alt="">
</div>
<div class="col-md-6">
<div class="row">
<div class="col-md-12">
<img src="<?php echo $oriz1; ?>" alt="">
</div>
<div class="col-md-12">
<img src="<?php echo $oriz2; ?>" alt="">
</div>
</div>
</div>
</div>

Answer 3

First sort all posts by image type in another array like this:
<?php
$counter = 0;
$index = 0;
$all_posts = array();
while ( $the_query->have_posts() ) {
$the_query->the_post();
if ($counter != 3) {
$all_posts[$index][] = get_the_post_thumbnail_url();
$counter ++;
} else {
$index ++;
$counter = $index;
$all_posts[$index][] = get_the_post_thumbnail_url();
}
}
After this, You can foreach new array and set images by size
<?php foreach ($all_posts as $key => $current_posts): ?>
<div class="row">
<div class="col-md-6">
<img src="<?php $current_posts[$key][0]; ?>" alt="">
</div>
<div class="col-md-6">
<div class="row">
<div class="col-md-12">
<img src="<?php $current_posts[$key][1]; ?>" alt="">
</div>
<div class="col-md-12">
<img src="<?php $current_posts[$key][2]; ?>" alt="">
</div>
</div>
</div>
</div>