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

Галерея – це загальноприйнятий спосіб показу кількох зображень або відео на сайті. Розглянемо у статті, які галереї є у ​​Тільді та як їх налаштувати.

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

Усі доступні варіанти галерей можна переглянути у списку категорії «Галерея».

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

Для того, щоб додати зображення до галереї, зайдіть у Контент блоку та завантажте файли, натиснувши кнопку «Завантажити файли». Стандартні зображення в блоці можна або видалити, або замінити, натиснувши посилання «Замінити» поряд з ним.

Поряд із кожним зображенням у Контенті блоку є посилання «Текст». Вкажіть заголовок, опис та alt-текст для SEO. Залежно від дизайну блоку заголовок і опис будуть відображатися або під фотографією, або при збільшенні кліку.

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

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

• Розмір контейнера: встановлює ширину контейнера з усіма фотографіями
• Співвідношення сторін: вказує, яке співвідношення сторін буде у кожного блоку з фото.
• Відступ між колонками: встановлює відступ між рядами зображень
• Збільшення зображення по кліку: при використанні цієї опції при кліку на зображення з'явиться спливаюче вікно з цим зображенням на повний розмір
• Налаштування анімації: в залежності від дизайну блоку встановлює параметри ефекту появи або наведення на блок
• Висота блоку: встановлення висоти всього блоку, можна вказати в пікселях або vh (відсотках від висоти екрана)

Для того, щоб додати зображення до галереї, зайдіть в Контент блоку і завантажте файли, натиснувши кнопку «Завантажити файли».

Поряд із кожним зображенням у Контенті блоку є посилання «Текст» Вкажіть заголовок, опис та alt-текст для SEO.

SEO-текст потрібен для вказівки пошуковим системам, що зображено на фотографії.

Розглянемо налаштування слайдера Більшість слайдерів мають такі налаштування:

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

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

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

Для того, щоб налаштувати анімацію перемикання слайдів, існують 2 налаштування: швидкість анімації та швидкість зміни слайдів у мілісекундах. Швидкість анімації встановлює швидкість самого ефекту зміни зображення (стандартно, швидко та повільно), а швидкість зміни слайдів – час, через який зображення змінюватимуться. Цей час потрібно вказати у мілісекундах (1 секунда – це 1000 мілісекунд).

Робота з редактором зображень

Редактор зображень — вбудований інструмент, який дозволяє відредагувати завантажене на сайт зображення.

Обробити зображення можна у будь-якому з блоків, де передбачено його наявність. Винятком є ​​блоки із категорії «Магазин». Картки товарів рекомендується підготувати перед завантаженням на сайт.

Завантаження зображення та активація редактора

Виберіть відповідний для вашої сторінки блок, перейдіть в меню «Контент» цього блоку, а потім у розділі із зображенням завантажте потрібну картинку.

Після успішного завантаження поруч із зображенням з'явиться іконка олівця.

Інтерфейс редактора

Доступні базові операції, які можна зробити із зображеннями: змінити розмір, відобразити по горизонталі та вертикалі, обрізати, додати текст, обробити фільтрами.

Якщо вам потрібна складна обробка зображення, ми рекомендуємо скористатися спеціалізованими графічними редакторами і після цього завантажити зображення на сайт.

Змінити розмір

Ви можете встановити власну роздільну здатність для зображення. Але необхідно враховувати вихідний розмір картинки.

Розмір можна вказати вручну або встановити галочку у параметра «Зберегти пропорції», щоб система автоматично підбирала оптимальну роздільну здатність.

Рекомендований максимальний розмір зображення для завантаження на сайт — 1680x900 пікселів.

Обрізання зображення

Якщо потрібно залишити лише частину зображення, для цього можна скористатися спеціальним інструментом.

Ви можете виділити поле на зображенні, яке ви хочете залишити.

Також можна використовувати готові пропорції: 1:1, 3:2, 4:3, 5:4, 7:5, 16:9.

Орієнтація зображення

У деяких випадках для ідеального поєднання тексту та зображення достатньо його відобразити по горизонталі чи вертикалі. Це можна зробити за допомогою інструмента «Розгорнути».

Поворот зображення

Якщо ви хочете повернути зображення на певний градус, то відкрийте в редакторі відповідний пункт.

За допомогою повзунка можна встановити будь-яке значення від -360 до +360 градусів. Або використовувати крок 30 градусів.

Додавання тексту

При роботі з більшістю блоків нашої бібліотеки ви можете додати текстовий елемент окремо від зображення. Для цього є відповідні поля в меню Контент.

Але іноді може виникнути потреба додати текст прямо до зображення. У цьому випадку допоможе прийде інструмент «Текст».

Після активації інструмента натисніть на будь-якому місці зображення, щоб з'явився контейнер із текстом. Контейнер можна задати відповідний розмір і змінити його нахил. Також доданий текст можна відформатувати: змінити колір, встановити курсив, додати жирність, або підкреслити слово.

Додатково можна задати вирівнювання тексту по центру, лівій та правій сторонах.

Намалювати лінію

Якщо потрібно щось швидко підкреслити на зображенні, для цього можна додати лінію.

Ви можете намалювати лінію або стрілку в унікальній формі або використовувати фіксовану пряму. Також можна змінити колір та товщину лінії.