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