Добавляли картинки в ВК? Думаю что да, так вот там картинки отображаются своеобразной плиткой.
Так вот теперь Ваши материалы могут похвастаться тем же.
P.s. сразу хочу сказать, что данный вид предназначен если картинок не больше пяти штук, но при желание это можно изменить.
Установка:
Зайдите в ПУ > Управления дизайном > Страница материала и комментариев к нему и там, где должны быть фотографии добавьте следующий код:
Код
<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);}
Поиск
Список участников
Календарь
Правила форума
