Реализация вертикальной галереи постов в WP?

как правильно реализовать, чтобы при нажатии один из постов в правом блоке, который имеет класс related_video пост переходил в левый блок и занимал место левого поста. Надеюсь все понятно объяснил. Буду благодарен за любую помощь. Спасибо. введите сюда описание изображения

Вот код блока секции:

<section id="videos" class="mb80">
<div class="row">
   <div class="col-md-6 p0">
       <div class="related_videos">
           <?php
           $videosPosts = get_posts(array(
               'numberposts' => -1,
               'orderby' => 'date',
               'order' => 'DESC',
               'post_type' => 'videos'
           ));
           for ($v = 1; $v < count($videosPosts); $v++) {
               $getPostDateInLoop = $videosPosts[$v]->post_date;
               $explodePostPublishDate = explode(' ', $getPostDateInLoop);
               $replaceInDate = str_replace('-', '/', $explodePostPublishDate[0]);
               $post_id = $videosPosts[$v]->ID;
               $featured_img_url = wp_get_attachment_url(get_post_thumbnail_id($post_id));
               $post_date = $replaceInDate;
               ?>
               <div class="related_video" <?php if($v == 0){ echo 'style="opacity:0"';}?>>
                   <div class="related-video-bg">
                        <video width="100%"  controls>
                            <source src="<?php echo site_url()?>/wp-content/uploads/2020/10/solarDesktopBg.mp4" type="video/mp4">
                            </video>
                   </div>
                   <div class="related-video-data">
                       <h2 class="related-video-title">
                           <?php echo $videosPosts[$v]->post_title ?>
                       </h2>
                       <p class="related-video-description">
                           <?php echo $videosPosts[$v]->post_excerpt ?>
                       </p>
                       <div class="related-video-data-reviews">
                           <p class="related-video-data">
                               01:14:02
                           </p>
                           <p class="related-video-review">
                               <img src="wp-content/themes/insolar-theme/assets/images/reviews-count.png"
                                    alt="">
                               3450
                           </p>
                       </div>
                   </div>
               </div>
           <?php } ?>
       </div>
   </div>
   <div class="col-md-6 p0">
       <div class="big-video-container">
           <?php
           $videosPosts = get_posts(array(
               'numberposts' => -1,
               'orderby' => 'date',
               'order' => 'DESC',
               'post_type' => 'videos'
           ));
           for ($v = 0; $v < count($videosPosts); $v++) {
               if ($v == 0) {
                   $getPostDateInLoop = $videosPosts[$v]->post_date;
                   $explodePostPublishDate = explode(' ', $getPostDateInLoop);
                   $replaceInDate = str_replace('-', '/', $explodePostPublishDate[0]);
                   $post_id = $videosPosts[$v]->ID;
                   $featured_img_url = wp_get_attachment_url(get_post_thumbnail_id($post_id));
                   $post_date = $replaceInDate;
                   ?>
                   <div class="player-container" >
                       <video width="100%"  controls>
                           <source src="<?php echo site_url()?>/wp-content/uploads/2020/10/solarDesktopBg.mp4" type="video/mp4">
                       </video>
                   </div>
                   <div class="big-video-title-and-reviews-count">
                       <p class="video-views-count">
                           <img src="<?php echo site_url()?>/wp-content/themes/insolar-theme/assets/images/reviews-count.png"
                                alt="">
                           3450
                       </p>
                       <h2 class="video-title">
                           <?php echo $videosPosts[$v]->post_title ?>
                       </h2>
                   </div>
                   <p class="video-description">
                       <?php echo $videosPosts[$v]->post_excerpt ?>
                   </p>
                   <div class="post-date-and-share-links">
                       <p class="date">
                           <?php echo $post_date ?>
                       </p>
    
                   </div>
               <?php }
           } ?>
       </div>
   </div>
</div>
</div>
</section>

Ответы (0 шт):