Блок плитка изображений в виде мозаики Mosaic Gallery для Геткурс

Бесплатный шаблон для блока плитки Mosaic Gallery

Готовое оформление стандартного блока «Картинки плиткой» GetCourse в виде аккуратной журнальной фотогалереи с изображениями разной высоты.

Шаблон работает на базе обычного блока GetCourse — фотографии по-прежнему добавляются и заменяются через стандартный редактор страницы. Вам не нужно вручную собирать сетку из колонок или создавать отдельные HTML-блоки для каждой картинки.

Вместо стандартного одинакового расположения изображений пользователь видит динамичную композицию из вертикальных, горизонтальных и компактных плиток, похожую на Pinterest или журнальную фотоподборку.

Такой вариант хорошо подходит для портфолио, фотографий с мероприятий, кейсов, работ учеников, галерей курса, подборок изображений и визуального оформления лендинга.

Вид плитки ДО и ПОСЛЕ

Что меняет шаблон:

Код полностью перерабатывает расположение изображений внутри стандартной плитки GetCourse: формирует три колонки, задаёт разную высоту элементов, добавляет одинаковые аккуратные промежутки и автоматически обрезает изображения под форму каждой плитки.

При этом исходные пропорции фотографии не растягиваются. Изображение заполняет отведённую область, а лишняя часть аккуратно обрезается с помощью object-fit: cover.

Вам также не нужно заранее определять точное количество изображений. Добавили новые фотографии в стандартный блок GetCourse — галерея автоматически продолжается ниже.

В шаблоне предусмотрены:

нестандартная журнальная раскладка изображений;
три колонки на компьютере;
плитки разной высоты;
сочетание крупных и компактных изображений;
одинаковые промежутки между фотографиями;
автоматическая обрезка изображений без искажения пропорций;
центрирование фотографии внутри плитки;
единый размер колонок независимо от исходного размера файлов;
возможность использовать вертикальные, горизонтальные и квадратные фотографии;
автоматическое продолжение галереи при добавлении новых изображений;
повторяющийся рисунок раскладки — новые фотографии продолжают композицию автоматически;
отсутствие необходимости прописывать стили отдельно для каждой новой картинки;
стандартное открытие изображений через галерею GetCourse сохраняется;
возможность в любой момент заменить фотографию через редактор страницы;
адаптация под планшеты;
отдельная двухколоночная раскладка для смартфонов;
автоматическое уменьшение расстояний между плитками на небольших экранах.

Можно добавлять любое количество изображений
Для красивого отображения рекомендуется использовать 6, 9, 12 или 15 изображений

Вы сами загружаете фотографии в нужной цветовой палитре

При этом фон блока задается стандартными настройками

Так блок будет отображаться на мобильных устройствах

Установка на GetCourse

Шаблон устанавливается на обычный лендинг с блоком «Картинки плиткой»

В GetCourse откройте Сайт → Страницы кнопка «Создать пустую страницу».

В новом окне укажите необходимые параметры для её создания.

Добавьте на страницу блок «Картинки плиткой» в её настройках загрузите изображения. Желательно чтобы на изображениях не было текста, так как он может обрезаться.

Для красивого отображения рекомендуется использовать 6, 9, 12 или 15 изображений

Затем откройте стили блока и задайте класс блоку gc-mosaic-gallery и сохраните изменения

Под блоком плитки добавьте ещё два блока

1. JavaScript-код
2. CSS-код

В каждый из блоков добавьте соответствующий код, который размещен ниже на странице

Код для блока CSS-код

.gc-mosaic-gallery {
  --gallery-width:760px;
  --gap:14px;
  --vertical-ratio:2/3;
}

.gc-mosaic-gallery .modal-block-content {
  width:100%!important;
  max-width:none!important;
  margin-left:0!important;
  float:none!important;
}

.gc-mosaic-gallery .thumbnails-list {
  display:flex!important;
  align-items:flex-start!important;
  width:100%!important;
  max-width:var(--gallery-width)!important;
  margin:0 auto!important;
  gap:var(--gap)!important;
  text-align:left!important;
}

.gc-mosaic-gallery .gc-mosaic-col {
  display:flex!important;
  flex-direction:column!important;
  flex:1 1 0!important;
  min-width:0!important;
  gap:var(--gap)!important;
}

.gc-mosaic-gallery .gc-mosaic-col>a {
  display:block!important;
  width:100%!important;
  margin:0!important;
  padding:0!important;
  overflow:hidden!important;
  line-height:0!important;
}

.gc-mosaic-gallery .gc-mosaic-col>a>img {
  display:block!important;
  width:100%!important;
  height:100%!important;
  max-width:none!important;
  object-fit:cover!important;
  object-position:center!important;
  margin:0!important;
  padding:0!important;
}

.gc-mosaic-gallery .gc-mosaic-left>a,
.gc-mosaic-gallery .gc-mosaic-right>a {
  aspect-ratio:var(--vertical-ratio)!important;
}

.gc-mosaic-gallery .gc-mosaic-center>a:nth-child(odd) {
  aspect-ratio:1/1!important;
}

.gc-mosaic-gallery .gc-mosaic-center>a:nth-child(even) {
  aspect-ratio:var(--vertical-ratio)!important;
}

@media(max-width:767px) {
  .gc-mosaic-gallery {
    --gap:10px;
  }

  .gc-mosaic-gallery .thumbnails-list {
    max-width:650px!important;
  }
}

@media(max-width:500px) {
  .gc-mosaic-gallery {
    --gallery-gap:8px;
  }

  .gc-mosaic-gallery .thumbnails-list {
    display:grid!important;
    width:100%!important;
    max-width:100%!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:var(--gallery-gap)!important;
    align-items:start!important;
  }

  .gc-mosaic-gallery .gc-mosaic-col {
    display:contents!important;
  }

  .gc-mosaic-gallery .gc-mosaic-col>a,
  .gc-mosaic-gallery .gc-mosaic-left>a,
  .gc-mosaic-gallery .gc-mosaic-center>a,
  .gc-mosaic-gallery .gc-mosaic-right>a,
  .gc-mosaic-gallery .gc-mosaic-center>a:nth-child(odd),
  .gc-mosaic-gallery .gc-mosaic-center>a:nth-child(even) {
    display:block!important;
    position:relative!important;
    grid-column:auto!important;
    grid-row:auto!important;
    width:100%!important;
    height:auto!important;
    aspect-ratio:3/4!important;
    margin:0!important;
    padding:0!important;
    overflow:hidden!important;
  }

  .gc-mosaic-gallery .gc-mosaic-col>a>img {
    position:absolute!important;
    inset:0!important;
    display:block!important;
    width:100%!important;
    height:100%!important;
    max-width:none!important;
    max-height:none!important;
    margin:0!important;
    padding:0!important;
    object-fit:cover!important;
    object-position:center!important;
  }

  .gc-mosaic-gallery .gc-mosaic-last {
    grid-column:1/-1!important;
    aspect-ratio:3/2!important;
  }
}

Код для блока JavaScript-код

$(()=>{$(".gc-mosaic-gallery .thumbnails-list").each(function(){const $g=$(this);if($g.find(".gc-mosaic-col").length){const $i=$g.find(".gc-mosaic-col>a").detach();$g.empty().append($i)}const $i=$g.children("a");if(!$i.length)return;$i.removeClass("gc-mosaic-last").each(function(){const $a=$(this),$img=$a.find("img").first(),src=$a.attr("href");src&&$img.length&&$img.attr("src",src)});$i.length%2&&$i.last().addClass("gc-mosaic-last");const $l=$('<div class="gc-mosaic-col gc-mosaic-left"></div>'),$c=$('<div class="gc-mosaic-col gc-mosaic-center"></div>'),$r=$('<div class="gc-mosaic-col gc-mosaic-right"></div>');$i.each(function(i){i%3===0?$l.append(this):i%3===1?$c.append(this):$r.append(this)});$g.empty().append($l,$c,$r)})});

Готово! Теперь ваш блок будет выглядеть так →

Остались вопросы?

По вопросам установки, настройки или изменения оформления напишите в Telegram:
https://t.me/GetCourseCode

Канал с бесплатными решениями для Геткурс