how to make this picture in wordpress loop with owl carousel

Question

I need to create something like this in my picture, i want to do this with php, something like this

$count = 0;

while ( $query->have_posts() ) : $query->the_post(); ?>

  <div class="item">

  <?php if( $count == 1 ) { echo '<div class="col-sm-6">'; } ?>

  <?php echo '<div class="col-sm-6">'; ?>

    <img src="sample">

  <?php echo '</div>'; ?>

  <?php if( $count == 1 ) { echo '</div>'; } ?>

  </div>

<?php $count++; endwhile

with bootstrap like this :

<div class="owl-carousel">
  <div class="item">
    <div class="col-sm-6">
      <div class="col-sm-12">
        <img src="sample">
      </div>
      <div class="col-sm-12">
        <img src="sample">
      </div>
    </div>
    <div class="col-sm-6">
      <img src="sample">
    </div>
  </div>
</div>

my code is wrong, i know, i need an Idea, how to do this, thank you

Answer 1

You have to do this in 2 parts first you have to build an associative array which will contain all 12 images URL, then you can loop through that array to display the images

1st part to built an array:

$owl_array = [];
$args = array(
    'post_type' => 'post',
    'post_status' => 'publish'
);

$query = new WP_Query($args);

if (!empty($query->posts)) {
    foreach ($query->posts as $key => $post) {
        //custom logic to get the image URL
        $thumb_id = get_post_thumbnail_id($post->ID);
        $thumb_url_array = wp_get_attachment_image_src($thumb_id, 'thumbnail', true);
        $owl_array[++$key] = (!empty($thumb_url_array[0])) ? $thumb_url_array[0] : 'http://example.com/default-image.jpg'; //assiging each featured image url into owl_array
    }
}
//print_r($owl_array);

2nd part to diplay owl carousel:

<div class="owl-carousel">
    <?php for ($i = 1; $i <= count($owl_array); $i++) { ?>
        <div class="item">
            <div class="col-sm-6">
                <div class="col-sm-12 1">
                    <img src="<?php echo $owl_array[$i]; ?>">
                </div>
                <div class="col-sm-12 2">
                    <?php
                    $i++; //increment the counter
                    ?>
                    <img src="<?php echo $owl_array[$i]; ?>">
                </div>
            </div>
            <div class="col-sm-6 3">
                <?php
                $i++; //increment the counter
                ?>
                <img src="<?php echo $owl_array[$i]; ?>">
            </div>
        </div>
    <?php } ?>
</div>