Добавляли картинки в ВК? Думаю что да, так вот там картинки отображаются своеобразной плиткой.
Так вот теперь Ваши материалы могут похвастаться тем же.
Установка:
Зайдите в ПУ > Управления дизайном > Страница материала и комментариев к нему и там, где должны быть фотографии добавьте следующий код:
Код
<div class="preview">
<div class="wrap">
<?if($IMG_URL1$)?><div class="grid ulightbox" href="$IMG_URL1$" target="_blank"><img src="$IMG_URL1$" alt="$ENTRY_TITLE$"/></div><?endif?>
<?if($IMG_URL2$)?><div class="grid ulightbox" href="$IMG_URL2$" target="_blank"><img src="$IMG_URL2$"/></div><?endif?>
<?if($IMG_URL3$)?><div class="grid ulightbox" href="$IMG_URL3$" target="_blank"><img src="$IMG_URL3$"/></div><?endif?>
<?if($IMG_URL4$)?><div class="grid ulightbox" href="$IMG_URL4$" target="_blank"><img src="$IMG_URL4$"/></div><?endif?>
<?if($IMG_URL5$)?><div class="grid ulightbox" href="$IMG_URL5$" target="_blank"><img src="$IMG_URL5$"/></div><?endif?>
</div>
</div>
<script>
var PreviewImageLen = $('.preview .wrap .grid').length;
$('.preview .wrap').addClass('len'+PreviewImageLen);
$('.preview .wrap .grid').each(function(index){$(this).addClass('img'+(index+1))});
</script>
Ну и стили - ПУ > Управление дизайном > Таблица стилей (CSS)
Код
.preview {display: block; width: calc(100% - 4px); padding: 2px; background: rgba(0,0,0,.25); margin-bottom: 2px;}
.preview .wrap {display: grid; grid-gap: 2px; overflow: hidden;}
.preview .wrap.len1 {grid-template-areas: 'img1';}
.preview .wrap.len2 {grid-template-areas: 'img1 img2';}
.preview .wrap.len3 {grid-template-areas: 'img1 img2' 'img1 img3'; grid-template-columns: 2fr 1fr;}
.preview .wrap.len4 {grid-template-areas: 'img1 img2' 'img1 img3' 'img1 img4'; grid-template-columns: 3fr 1fr;}
.preview .wrap.len5 {grid-template-areas: 'img1 img1 img1 img1' 'img2 img3 img4 img5';}
.preview .grid {display: block; width: 100%; height: 100%;}
.preview .grid img {width: 100%; height: 100%; object-fit: cover;}
.preview .grid.img1 {grid-area: img1;}
.preview .grid.img2 {grid-area: img2;}
.preview .grid.img3 {grid-area: img3;}
.preview .grid.img4 {grid-area: img4;}
.preview .grid.img5 {grid-area: img5;}
.preview .wrap.len1 {min-height: 200px; max-height: calc(100vh - 150px);}
.preview .wrap.len1 .grid {min-height: 200px; max-height: calc(100vh - 150px);}
