FRONTEND_MVC/views/news/archive/_archive_item.php

<?php
/**
 * @var $model \app\models\News
 * @var $key
 * @var $index
 * @var $widget
 */

use app\models\base\Image;

$preview = $model->image;
?>
<div class="">
    <div class="archive-news-item" data-key="<?=$key?>">
        <div class="illustration">
            <?php if($preview instanceof \app\models\base\Image):?>
                <div class="picture-cont-16x9">
                    <a href="<?=$model->url?>">
                        <picture class="w-100">
                            <source srcset="<?=$preview->getUrl(Image::SIZE_680x383,"jpg")?>" media="(min-width: 600px)">
                            <source srcset="<?=$preview->getUrl(Image::SIZE_680x383,"webp")?>" media="(min-width: 600px)">
                            <img src="<?=$preview->getUrl(Image::SIZE_680x383)?>" alt="<?=$model->photo_title?>" class="w-100" loading="lazy">
                        </picture>
                    </a>
                </div>
            <?php else:?>
                <div class="picture-cont-16x9">
                    <a href="<?=$model->url?>">

                    </a>
                </div>
            <?php endif;?>
        </div>

        <div class="meta">
            <h2 class="title"><a href="<?=$model->url?>"><?=$model->title?></a></h2>
            <div class="published_at">
                <?=$model->publishedAt?> <?=date("Y, H:m")?>
            </div>
        </div>
    </div>
</div>