Створення галереї зображень.

Вивчення DXPR BuilderСтворення сторінокПокрокові інструкції

Тут ви створюєте фотогалерею: центрований заголовок, три фото поруч із альтернативним текстом і слайдшоу на сірій смузі. Використовуйте її, щоб показати місце чи подію в зображеннях. Щоб показати проєкти, кожен із описом, натомість виконайте посібник Створення галереї портфоліо.

Відео створює галерею студентських картин для університету.

Перед початком

  • Ваша роль має дозвіл Edit with DXPR Builder.
  • Медіабібліотека містить щонайменше шість фото, обрізаних в однакових пропорціях.
  • Сторінка відкрита в конструкторі. Для нової перейдіть до Content > Add content > Landing Page (/node/add/landing_page) і натисніть Save.

Крок 1: додавання заголовка

  1. Натисніть Add Elements на порожній сторінці й виберіть Section на вкладці Layout.
  2. Наведіть курсор на розділ і відкрийте More > Settings. У розділі HTML classes виберіть Align text center, потім натисніть Save.
  3. Натисніть + на розділі й виберіть Text на вкладці Content.
  4. Введіть «Student art gallery» як Heading 2, додайте один рядок вступу й натисніть Save. Тема виводить заголовок сторінки як Heading 1 сторінки. Щоб натомість зробити цей заголовок Heading 1, див. Створення SEO-дружніх сторінок.

Крок 2: додавання сітки фото

  1. Наведіть курсор на розділ і натисніть Add Section Below. Натисніть + на новому розділі й виберіть Row; спочатку він має два рівні стовпці.
  2. Натисніть піктограму сітки рядка (Column layout), виберіть пресет 1/3 + 1/3 + 1/3 і натисніть Save.
  3. Натисніть + у першому стовпці й виберіть Image.
  4. Натисніть Select Image, знайдіть у медіабібліотеці за допомогою Apply filters, натисніть фото й натисніть Insert selected.
  5. Відкрийте панель SEO і введіть Alt attribute: те, що має знати той, хто не бачить фото. Натисніть Save.
  6. Повторіть для другого й третього стовпця.

Якщо фото обрізано в однакових пропорціях, рядок лишається рівним.

Крок 3: додавання слайдшоу

  1. Додайте третій розділ за допомогою Add Section Below і відкрийте його More > Settings. Виберіть Align text center у розділі HTML classes і світло-сірий Background на панелі Style. Натисніть Save.
  2. Натисніть + на розділі й виберіть Image carousel.
  3. Натисніть Select Image, знайдіть у бібліотеці, натисніть три фото й натисніть Insert selected, потім натисніть Save.
  4. Натисніть + на розділі знову й виберіть Text; він стане над каруселлю. Введіть «Slideshow» як Heading 2 і натисніть Save.

Крок 4: збереження й попередній перегляд

  1. Натисніть Save на панелі інструментів конструктора.
  2. Відкрийте меню перегляду (піктограма ока) і виберіть Preview.

Далі

Не показано у відео:

  • Captions: розмістіть Card у стовпці й додайте всередину елемент Text із підписом. Потім додайте Image усередині картки; він стане над підписом.
  • Full-size photos: установіть Image link на повнорозмірний файл, а Image link target на New window.
  • Style: на кожному зображенні встановіть Border radius на 4, а Drop shadow на 1 на панелі Style для м’якого підйому.
  • Slideshow timing: установіть Interval на каруселі, у мілісекундах. У розділі Hide позначте Hide pagination control або Hide prev/next buttons, щоб прибрати ці елементи керування.
  • Gallery that fills itself: у розділі Structure > Views > Add view створіть вигляд медіа типу Image з відображенням типу «блок» у форматі Grid. Вставте його з вкладки Drupal Views, і нові завантаження з’являтимуться самі.

Що ви бачите

Центрований заголовок відкриває сторінку, далі три фото поруч. На сірій смузі під ними слайдшоу показує по одному фото й переходить до наступного кожні п’ять секунд.

Якщо фото виглядають не так, як показано

  • Insert selected не додає фото. Бібліотека досі перезавантажувалася після Apply filters, тож ваше натискання не позначило фото. Зачекайте, доки сітка встоїться, перевірте, що фото показує позначку, і натисніть Insert selected знову.
  • Медіабібліотека порожня. Зображення ще не завантажено або браузер медіа не налаштовано. Див. Зображення не завантажуються чи зникають.
  • Три фото мають різну висоту. Їхні пропорції різняться. Обріжте їх в однакових пропорціях, завантажте знову й виберіть нові копії.
  • Ваші зміни зникли після перезавантаження. Ви покинули сторінку, не натиснувши Save на панелі інструментів конструктора. Якщо Save показує помилку, див. Зміни не зберігаються.

Що далі?