Галерея как в Pinterest на Tilda: сетка и увеличение фото
Для портфолио фотографа редко подходят одинаковые квадраты. В одном проекте есть высокий портрет, широкий интерьер и несколько деталей. Если обрезать всё под один размер, часть работы просто исчезнет.
Мод «Pinterest-галерея с зум-лайтбоксом» собирает такие снимки в плитки разной высоты. Фото можно открыть крупнее и рассмотреть. Разберём, как подготовить галерею, подобрать сетку и проверить её на телефоне.
Какие фотографии подойдут для такой сетки
Начните с небольшой подборки: например, восемь снимков одного интерьера. Смешайте общие планы и детали, но не добавляйте несколько почти одинаковых кадров подряд. Сетка показывает всё сразу, поэтому повторы особенно заметны.
Сохраните вертикальные и горизонтальные пропорции. Проверьте резкость файлов: увеличение помогает рассмотреть существующие детали, но не добавляет их маленькому изображению. Очень тяжёлые исходники тоже не нужны — сначала подготовьте разумные по размеру копии для сайта.
Как выбрать галерею и ограничить область мода
Добавьте GL03 или другую подходящую галерею Tilda и загрузите снимки. Заполните подписи, если они нужны посетителю: название проекта, материал, год или короткое пояснение к кадру.
Откройте конструктор мода и в разделе «Где применять» укажите этот блок. Убедитесь, что в источник попали именно нужные фото. Если на странице есть ещё отзывы или фотографии команды, не выбирайте все изображения страницы одним общим правилом.
Как настроить колонки и промежутки
Для первой версии попробуйте три колонки на широком экране и две на телефоне. Это отправная точка, а не обязательное правило: мелким предметам может понадобиться больше места. Откройте сетку с настоящими фото, а не только с демонстрационными картинками.
Задайте отдельно горизонтальные и вертикальные промежутки. Слишком узкие щели склеивают соседние кадры, слишком широкие дробят подборку. Подберите ширину контейнера, скругления и подписи. На каждом размере проверьте самый высокий и самый широкий снимок.
Как оформить просмотр крупного фото
В конструкторе настройте окно просмотра: фон, поля вокруг изображения, кнопки, подпись и максимальное увеличение. Отдельно задаётся масштаб двойного нажатия. Посетитель должен понимать, как вернуться к обычному виду и закрыть фото.
Счётчик кадров полезен в длинной подборке. Слайдшоу включайте, если оно действительно нужно: в портфолио с подробными подписями человеку часто удобнее листать самому. Не включайте все дополнительные кнопки только потому, что они доступны.
Как подключить мод на опубликованной странице
- Сохраните настройки галереи и выбранного блока в конструкторе.
- Скопируйте полученный код в T123 после блока с фотографиями.
- Опубликуйте страницу и дождитесь загрузки снимков.
- Откройте первый, средний и последний кадр. Проверьте листание и закрытие.
- На компьютере попробуйте колесо и двойное нажатие; на телефоне — увеличение двумя пальцами.
Если меняете источник или сетку, проверяйте результат на сайте заново. Превью конструктора помогает с настройками, но не заменяет ваши реальные фотографии.
Что проверить, если галерея выглядит неаккуратно
Если пропал кадр, начните с исходной галереи и выбранного блока. Если фото размыто при увеличении, сравните его с исходным файлом. Если неудобно закрывать просмотр, проверьте размер кнопки и её положение на узком экране.
В конце пролистайте всю страницу на телефоне. Открытое фото не должно оставлять вас без понятного выхода, а после закрытия нужно вернуться к подборке. Проверьте подписи и порядок снимков: хорошая сетка не исправит случайно собранный набор.
Вопросы и ответы
Можно оставить фотографии разных пропорций?
Да. Плиточная сетка рассчитана на карточки разной высоты, поэтому вертикальные и горизонтальные фото можно смешивать.
Откуда мод берёт фотографии?
Из выбранной галереи Tilda. До подключения кода проверьте, какие снимки попали в этот источник.
Можно ограничить увеличение?
Да. Максимальный масштаб и масштаб двойного нажатия задаются в настройках просмотра.
Нужно ли включать слайдшоу?
Нет. Это дополнительная возможность. Для спокойного просмотра работ можно оставить ручное листание.
