Как настроить галерею изображений

Галереи в библиотеке блоков Тильды находятся в категории Галерея.

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

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

Большинство блоков, где изображения формируют комбинацию, имеют похожие настройки. Ниже в справочном видео мы рассмотрели настройки блока на примере блока GL11 «Полноэкранная комбинация из изображений в колонках».

Для того, чтобы добавить изображения в галерею, зайдите в Контент блока и загрузите файлы, кликнув на кнопку «Загрузить файлы». Стандартные изображения в блоке можно либо удалить, либо заменить, кликнув на ссылку «Заменить» рядом с ним.

Рядом с каждым изображением в Контенте блока есть ссылка «Текст». Укажите заголовок, описание и alt-текст для SEO. В зависимости от дизайна блока заголовок и описание будут показываться или под фотографией, или при увеличении при клике.

SEO-текст нужен для указания поисковым системам, что изображено на фотографии. Данный текст прописывается или тегом alt, или с помощью специальной разметки, которая работает аналогичным образом.

Рассмотрим настройки блока. Большинство галерей с комбинацией изображений имеют следующие настройки:

• Размер контейнера: устанавливает ширину контейнера со всеми фотографиями
• Соотношение сторон: указывает, какое соотношение сторон будет у каждого блока с фото. Если у вас фотографии с определеннм соотношением, например, вертикальные, то нужно изменить соотношение сторон на максимально подходящее
• Отступ между колонками: устанавливает отступ между рядами изображений
• Увеличение изображения по клику: при использовании этой опции при клике на изображение будет появляться всплывающее окно с этим изображением в полный размер
• Настройки анимации: в зависимости от дизайна блока устанавливает параметры эффекта появления или наведения на блок
• Высота блока: установка высоты всего блока, можно указать в пикселях или vh (процентах от высоты экрана)

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

Для того, чтобы добавить изображения в галерею, зайдите в Контент блока и загрузите файлы, кликнув на кнопку «Загрузить файлы». Стандартные изображения в блоке можно либо удалить, либо заменить, кликнув на ссылку «Заменить» рядом с ним.

Рядом с каждым изображением в Контенте блока есть ссылка «Текст». Укажите заголовок, описание и alt-текст для SEO. В зависимости от дизайна блока заголовок и описание будут показываться или под фотографией, или при увеличении при клике.

SEO-текст нужен для указания поисковым системам, что изображено на фотографии. Данный текст прописывается или тегом alt, или с помощью специальной разметки, которая работает аналогичным образом.

Рассмотрим настройки слайдера. Большинство слайдеров изображений имеют следующие настройки:

• Ширина (указывается в количестве колонок, от 6 до 12)
• Высота блока: установка высоты всего блока, можно указать в пикселях или vh (процентах от высоты экрана)
• Масштабирование изображения: укажите, как будет показываться изображение: в оригинальном размере или подстраиваться под высоту блока
• Настройки анимации: в зависимости от дизайна блока устанавливает параметры эффекта появления или наведения на блок
• Настройки описания: настройки типографики подписей под фотографиями
• Настройка стиля галереи (рассмотрим их ниже)

В настройках стиля находятся все опции, влияющие на поведение галереи: настройка управляющих элементов, иконки старта видео и настройка анимации (чтобы слайды переключались по таймеру).

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

Для того, чтобы настроить анимацию переключения слайдов, существуют 2 настройки: скорость анимации и скорость смены слайдов в миллисекундах. Скорость анимации устанавливает скорость самого эффекта смены изображения (стандартно, быстро и медленно), а скорость смены слайдов — время, через которое изображения будут меняться. Это время нужно указать в миллисекундах (1 секунда — это 1000 миллисекунд).