FRONTEND_MVC/views/news/view.php

<?php
/**
 * @var $this \yii\web\View
 * @var $model \app\models\News
 */

use yii\helpers\ArrayHelper;

$this->params['breadcrumbs'] = [
    [
        "text"=>"НОВОСТИ",
        "url"=>"/news"
    ]
];
$topic = ArrayHelper::getValue($model->topics,0);
if($topic instanceof \app\models\base\NewsTopic){
    $this->params['breadcrumbs'][] =
        [
            "text"=>$topic->title,
            "url"=>mb_strtoupper($topic->url)
        ];
}
?>
<div class="row">
    <div class="col-md-8">
        <div id="post" class="post">
            <?=$this->render("/layouts/breadcrumbs")?>
            <h1><?=$model->title?></h1>
            <p class="lead"><?=$model->lid?></p>
            <p class="published_at"><?=$model->publishedAt?> <?=date("Y, H:m")?></p>
            <p>
                <?php if($model->image instanceof \app\models\base\Image):?>
                    <div class="picture-cont-16x9">
                        <picture class="w-100">
                            <source srcset="<?=$model->image->url?>" media="(min-width: 600px)">
                            <img src="<?=$model->image->url?>" alt="<?=$model->photo_title?>" class="w-100">
                        </picture>
                    </div>

                    <div class="image-title"><?=$model->photo_title?></div>
                <?php endif;?>
            </p>
            <section class="text">
                <?=$model->renderBody()?>
            </section>

        </div>
    </div>
    <script>
        (function (){
            let main_view_cont = document.getElementById('post');
            let height = main_view_cont.offsetHeight;
            console.log(height)
            let style = document.createElement("style");
            style.innerHTML = "#lenta-container{ max-height:"+height+"px;}";
            main_view_cont.parentNode.append(style);
        })()
    </script>
    <div class="col-md-4" id="lenta-container">
        <?=$this->render("/layouts/lenta/lenta")?>
    </div>
    <div id="main-carousel" class="splide"></div>
</div>

<?php
    $this->registerJsFile("/js/splide/dist/js/splide.min.js");
    $this->registerCssFile("/js/splide/dist/css/splide.min.css")
?>
<script>
    var gallery = document.getElementById("gallery-0");
    var wrapper = document.createElement("div");
    wrapper.classList.add('gallery-wrapper')
    gallery.parentNode.insertBefore(wrapper,gallery)
    wrapper.append(gallery)
    var gallery_items = gallery.getElementsByTagName("img");
    var track = document.createElement("div");
    var list = document.createElement('ul');
    gallery.classList.add("splide")
    list.classList.add("splide__list")
    track.classList.add("splide__track")
    gallery.prepend(track)
    track.prepend(list)
    for(var i =0; i<gallery_items.length;i++){
        var img = gallery_items[i];
        var img_cont = document.createElement('li')
        img_cont.classList.add("splide__slide")
        img_cont.append(img)
        list.append(img_cont)
    }
    var main_view = document.createElement("div")
    main_view.classList.add("splide","gallery-view");
    main_view.innerHTML=gallery.innerHTML;
    wrapper.prepend(main_view)
    document.addEventListener( 'DOMContentLoaded', function () {
        var main = new Splide( '.gallery-view', {
            type      : 'fade',
            rewind    : true,
            pagination: false,
            arrows    : false,
        } );
        var thumbnails =new Splide( '.gallery', {
            fixedWidth: 100,
            fixedHeight: 60,
            gap       : 10,
            rewind    : true,
            pagination: false,
            isNavigation: true,
        } );

        main.sync( thumbnails );
        main.mount();
        thumbnails.mount();

    } );
</script>