как сделать эту картинку в цикле WordPress с совой карусели

Question

как сделать эту картинку в цикле WordPress с совой карусели

Мне нужно создать что-то подобное на моей картинке, я хочу сделать это с помощью PHP, что-то вроде этого

$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

с начальной загрузкой вот так:

<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>

мой код неверен, я знаю, мне нужна идея, как это сделать, спасибо

0

loops owl-carousel php wordpress

Решение

Другие решения

Других решений пока нет …

Источник

Accepted Answer

Вы должны сделать это в 2 части, сначала вы должны создать ассоциативный массив, который будет содержать URL всех 12 изображений, затем вы можете перебрать этот массив для отображения изображений.

1-я часть для построения массива:

$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);

2-я часть окунать 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>

1