如何使用猫头鹰旋转木马在wordpress循环中制作这张照片

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>