Галерея на Тильде: свои превью, лайтбокс и мобильный свайп

Галерея в Тильде из коробки закрывает базовую задачу: показывает фото сеткой или слайдером и открывает крупный план по клику. Но как только нужен свой дизайн превью, лайтбокс в стиле проекта и нормальный свайп на телефоне без рывков и залипаний, штатных настроек блока уже не хватает. За последние проекты на Tilda, от лендингов до каталога на пару сотен товаров, такие доработки галереи заказывали чаще, чем любые другие правки вёрстки. Разберу, что реально настраивается в редакторе без кода, а что требует кастомного скрипта, и почему свайп на телефоне в большинстве случаев работает и без вмешательства в код.

Что умеет штатная галерея в Тильде и где её предел

Блоков под фотогалерею в Тильде несколько: есть сеточная раскладка, есть слайдер с превью-лентой снизу, есть коллаж с разным размером карточек. В настройках каждого можно выбрать раскладку, задать количество фото в ряду, включить стрелки и точки навигации, настроить скорость автопрокрутки и включить открытие увеличенного фото по клику во встроенном лайтбоксе. Отдельно для мобильной версии Тильда даёт свою сетку настроек блока, поэтому галерея на телефоне не обязана дублировать десктопную раскладку один в один, можно, например, на мобильном показывать один столбец вместо трёх.

Слайдерные блоки в Тильде уже построены на библиотеке, которая понимает touch-события, поэтому свайп пальцем по слайдеру на телефоне работает и без единой строчки дополнительного кода. Это часть штатного поведения блока, а не то, что нужно отдельно включать где-то в настройках.

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

Свои превью: кастомная обрезка и hover-эффекты

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

Код добавляю через блок с кодом (в Тильде это отдельный HTML-блок или ячейка кода внутри Zero Block), а самой галерее в настройках блока прописываю дополнительный CSS-класс, это поле есть у большинства блоков Тильды и не требует правки основного шаблона страницы. Дальше стилизую превью через этот класс:

.tilda-gallery-custom img {
  object-fit: cover;
  transition: transform 0.3s ease;
}
.tilda-gallery-custom a:hover img {
  transform: scale(1.05);
}

Такой hover сразу делает превью живее на десктопе, а на телефоне, где наведения нет, просто оставляю ровную обрезку без анимации. Если нужен ещё и текст поверх фото при наведении, добавляю оверлей через псевдоэлемент с position: absolute поверх картинки и полупрозрачным фоном под подпись. На мобильной версии эту же обрезку проверяю отдельно, потому что там часто другая ширина карточек и фото может обрезаться иначе, чем на десктопе, поэтому смотрю превью на реальном телефоне, а не только в панели адаптива редактора Тильды.

Лайтбокс со своим дизайном и подписями к фото

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

Для такого подключаю отдельную библиотеку лайтбокса, например GLightbox: она компактная, поддерживает подписи, зум по клику и свайп из коробки без дополнительной настройки. Подключение делаю через тот же блок с кодом:

<link href="https://cdn.jsdelivr.net/npm/glightbox/dist/css/glightbox.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/glightbox/dist/js/glightbox.min.js"></script>
<script>
  const lightbox = GLightbox({
    selector: '.glightbox',
    touchNavigation: true,
    loop: true,
    zoomable: true
  });
</script>

Каждому изображению в галерее добавляю класс glightbox и атрибут data-glightbox с текстом подписи в формате caption. После инициализации библиотека сама собирает все элементы с этим классом в один лайтбокс с общей навигацией между фото, даже если разметка галереи на странице разбита на несколько визуальных блоков Тильды.

Добавляет это один блок с кодом и вес самой библиотеки, который на фоне десятков фото в галерее практически незаметен для скорости загрузки страницы. Для сравнения, что меняется при переходе со штатного лайтбокса на кастомный:

Мобильный свайп: что уже работает, а что стоит донастроить

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

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

Тестирую это только на реальных телефонах, а не в режиме адаптива в браузере: iOS Safari и Android Chrome по-разному обрабатывают touch-события, и то, что плавно работает в эмуляторе на ноутбуке, на живом iPhone иногда ощущается рывками. На одном интернет-магазине галерея товаров открывалась в лайтбоксе нормально на Android, а на iPhone первый свайп срабатывал с заметной задержкой, оказалось, дело было в конфликте с другим скриптом инерционного скролла страницы, который перехватывал touch-событие раньше библиотеки лайтбокса.

Вес галереи и скорость загрузки на телефоне

Галерея на несколько десятков фото легко становится самым тяжёлым блоком на странице, особенно на мобильном интернете. Первое, что проверяю на новом проекте, это включена ли в настройках сайта опция оптимизации изображений: Тильда сама сжимает загруженные фото и отдаёт версию под размер экрана устройства, но это работает хорошо только если оригиналы не были заранее пережаты вручную до плохого качества перед загрузкой.

Второй момент, на который смотрю: атрибут loading, равный lazy, у изображений, которые не попадают в первый экран. Он поддерживается всеми современными браузерами и откладывает загрузку фото до момента, пока пользователь не долистает до галереи, экономя трафик на мобильном интернете и ускоряя первую отрисовку страницы.

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

Когда доработку галереи стоит доверить разработчику

Если нужно поправить одну деталь вроде hover-эффекта на превью или подписи в лайтбоксе, обычно хватает пары часов работы с кодом, точечную кастомную доработку Тильды такого масштаба делаю от 3 000 ₽.

Другое дело, если галерея часть более крупной задачи: свой фильтр по категориям фото, синхронизация карточек с каталогом товаров или сложная вёрстка на Zero Block с несколькими типами карточек и разной логикой на десктопе и мобильном. Здесь проще сразу закладывать бюджет на комплексную доработку блока целиком, а не чинить деталь за деталью в несколько заходов. В такую доработку обычно закладываю не только сам лайтбокс, но и проверку на нескольких браузерах и разрешениях экрана, потому что баг вида «не открывается лайтбокс на Safari» почти всегда всплывает уже после сдачи, если тестировать только в Chrome на ноутбуке.

Условия и возможности Тильды меняются, поэтому перед запуском я уточняю их у самого сервиса.

Частые вопросы

Почему свайп в галерее срабатывает через раз?

Обычно это конфликт порога свайпа с чувствительностью экрана: слишком большое значение порога заставляет слайд возвращаться назад при коротком движении пальцем. В GLightbox и большинстве слайдер-библиотек это значение можно уменьшить в конфиге при инициализации.

Можно ли добавить подписи к фото без замены всей галереи?

Да, штатная сетка и раскладка блока остаются в Тильде как есть, меняется только сам лайтбокс. Подключаю GLightbox отдельным блоком с кодом только для показа увеличенного фото с подписью, а превью и сетку не трогаю.

Слетит ли кастомный код галереи после обновления Тильды?

Код в HTML-блоке или Zero Block живёт отдельно от базовых блоков платформы и не завязан на их внутреннюю разметку, так что плановые обновления Тильды его не задевают. Кастомизация обычно ломается только если сам потом меняешь структуру блока, к которому был привязан код, или удаляешь его CSS-класс.

Сколько будет весить страница с большой фотогалереей?

Зависит от количества и разрешения фото, но включённая оптимизация изображений и атрибут loading, равный lazy, у фото вне первого экрана снижают вес заметно, потому что грузится не вся галерея сразу, а только то, что уже попало в область экрана пользователя.