Створення Drupal 8 фотогалереї за допомогою Views — блог Drudesk
050 640 98 44
support@drudesk.com

Створення красивих фотогалерей в Drupal 8 за допомогою Views

Якщо краса здатна врятувати світ, то уявіть, що вона може зробити для вашого сайту! Красиві фотогалереї могли б стати частиною вашого плану з урятування світу — але давайте почнемо з підкорення сердець користувачів. І це особливо легко робити з неймовірним Drupal 8, який спрощує презентування контенту. Він пропонує безліч способів створити фотогалерею, і сьогодні ми опишемо базовий спосіб — за допомогою Views. 

Модуль Views, фантастичний винахід Друпала, що допомагає виводити і структурувати контент, нарешті став частинкою ядра Друпала (хоча завжди був його серцем і душею). Сьогодні ми привідкриємо завісу над маленькою частинкою можливостей Views і використаємо його для створення простої фотогалереї. У нашому прикладі буде створена фотогалерея красивих міст, яку ми помістимо на головну сторінку сайту.

Фотогалерея в Drupal 8 з Views: покрокова інструкція

1. Створення типу контенту для міст

Перш за все, в Structure — Content types — Add content type (admin/structure/types/add) додамо контент-тип, який назвемо “City”. Потрібно зняти галочку з “Promoted to front page” у вкладці “Publishing options”, а також з “Display author and date information” у вкладці “Display settings”.

Створення красивих фотогалерей в Drupal 8 за допомогою Views

Після натискання “Save and manage fields” потрібно додати найважливіше поле для нашого контент-типу — поле “Image”. Клікаємо “Add field”, обираємо “Image” з доступних типів полів і називаємо його “Image for city”.

Створення красивих фотогалерей в Drupal 8 за допомогою Views

Наступні два кроки запропонують вам налаштувати формат поля (мінімальна і максимальна ширина і висота картинки, і так далі). Якщо хочете, можете пропустити це і натиснути “Save and continue” для обох кроків.

Також потрібно сховати від користувачів ярлик поля “Image for city”, позначивши його як “hidden” у admin/structure/types/manage/city/display

Створення красивих фотогалерей в Drupal 8 за допомогою Views

2. Додавання фотографій міст

Переходимо в Content — Add content — City (node/add/city) і додаємо міста одне за одним. Вводимо назву, додаємо фото, клікаючи на “choose file”, і вписуємо альтернативний текст для картинки, який розповість скрінт-рідерам і пошуковим системам, про що ця картинка. Давайте додамо 9 картинок для нашої галереї в 3x3 фотографії.

https://store.internetdevels.com/i/c358a611b6/753x490-4_-_creating_photo_galleries_in_drupal_8_with_views.png

3. Створення стилів картинок

Також потрібно подбати про те, щоб зображення були однакового розміру, який при цьому відповідає вашим побажанням. Для цього Drupal 8 пропонує можливість створення особливих стилів картинок.

Ми створимо два стилі: 

  • один (більший) для відображення конкретної картинки, коли користувач перейде на неї;
  • другий (менший) для «тізерів» картинок власне у фотогалереї.

Щоб зробити це, перейдемо в Configuration — Media — Image styles (admin/config/media/image-styles), створимо наші стилі один за одним і дамо їм назви. В нашому випадку стилі можна назвати “Image style for city” та “Image style for city gallery”.

При створенні кожного стилю клікаємо “Create a new effect”, обираємо “Scale and crop” і натискаємо “Add”. Внісши бажану ширину і висоту зображення, зберігаємо ефект, натиснувши “Update effect” і врешті-решт “Update style”.

Створення красивих фотогалерей в Drupal 8 за допомогою Views

Створення красивих фотогалерей в Drupal 8 за допомогою Views

Сюди можна вертатися і змінювати стилі, коли ви забажаєте — і вигляд фотогалереї буде оновлюватись. Це просто сила Drupal 8!

Менший стиль картинок (той, що для фотогалереї) нам знадобиться дуже скоро, уже в кроці 4. А більший можна застосувати просто зараз. Заходимо в Structure — Content types — City — Manage display (admin/structure/types/manage/city/display) і встановлюємо стиль “Image style for city” для поля “Image for city”.

Створення красивих фотогалерей в Drupal 8 за допомогою Views

Створення красивих фотогалерей в Drupal 8 за допомогою Views

4. Створення в’юшки з фотогалереєю

Найважливіший момент наближається. Заходимо в Structure — Views — Add new view (admin/structure/views/add) і створюємо в’юшку. Прописуємо “View name” як “Beautiful cities” (або як забажаєте). У “View settings” обираємо “Show content” типу “City”. 

Далі перед нами дві опції: “Create a page” і “Create a block”. Ми хочемо розмістити блок з фотогалереєю на головну сторінку, тож обираємо “Create a block”. Обравши “Create a page”, ми б отримали окрему сторінку з фотогалереєю. Все залежить від ваших побажань!

Далі, встановлюємо формат показу як “grid of fields”, а кількість елементів у блоці —  9. Можете обрати іншу кількість, а також поставити галочку на “use a pager”, якщо у вас більше фотографій, ніж показує один блок згідно з налаштуваннями.

Створення красивих фотогалерей в Drupal 8 за допомогою Views

Зберігаємо налаштування і дивимось на в’юшку:

Створення красивих фотогалерей в Drupal 8 за допомогою Views

Ми обрали формат “grid of fields”, що означає, що в’юшка відображатиме поля. У правій колонці бачимо, що там є лише дефолтне поле “Content: Title”. Давайте додамо поле “Image for city”, клікнувши “Add” поруч із “Fields”. Знайти потрібне поле можна в списку, що з’явиться перед нами (можна для зручності використати функцію пошуку):

Створення красивих фотогалерей в Drupal 8 за допомогою Views

У віконці налаштувань цього поля встановлюємо стиль картинки “Image style for city gallery” (той, що ми недавно створювали). Крім того, обираємо “link image to content”, що зробить клікабельними фотографії, а не тільки назви.

Створення красивих фотогалерей в Drupal 8 за допомогою Views

Клікнемо на “Grid settings”, встановимо кількість стовпців як 3, щоб отримати структуру 3x3 фотографії в галереї. З цим можна експериментувати, змінюючи кількість стовпців.

На попередньому перегляді (внизу сторінки) уже можна побачити нашу фотогалерею. Однак, блок поки ніде на сайті не відображається. Давайте розмістимо його на головну сторінку.

5. Розміщення блоку фотогалереї на головній сторінці Drupal 8 сайту

Перейдемо в Structure — Block layout (admin/structure/block), переглянемо список регіонів сайту, оберемо блок “Content” і клікнемо “Place block” поряд із ним. Ми побачимо список блоків, в якому потрібно знайти щойно створений блок-в’юшку “Beautiful cities”. Можна скористатися функцією пошуку. Знаходимо і натискаємо “Place block”. Ми побачимо вікно налаштувань для цього блоку. У вкладці “Pages” друкуємо <front> — і блок з’являється на головній сторінці. 

Створення красивих фотогалерей в Drupal 8 за допомогою Views

Вітання! Чудова фотогалерея створена на сайті! 

Створення красивих фотогалерей в Drupal 8 за допомогою Views

Дизайн фотогалереї на головній сторінці відрізняється від того, що ми бачили на попередньому перегляді. Так конкретна тема сайту Drupal 8 працює з елементами, щоб вони ідеально вписалися в дизайн. В нашому випадку використовується респонсивна Drupal-тема Bootstrap.

Можна експериментувати зі стилями картинок (пам’ятаєте, admin/config/media/image-styles) і дивитись, як змінюється дизайн. Зменшення розмірів збільшуватиме простір між фотографіями. Давайте спробуємо це зараз, а також додамо іншу зміну — покажемо фотографії в зворотному порядку. Це можна зробити в “Sorting criteria” у лівому нижньому кутку налаштувань в’юшки (змінимо дефолтне налаштування “sort by descending” на “sort by ascending”). Не забуваємо зберігати в’юшку:

Створення красивих фотогалерей в Drupal 8 за допомогою Views

Це лише базові налаштування, з якими можна «гратися». У фотогалереї з Views вам доступні безмежні можливості з форматування та стилізації. 

Декілька «доторків» CSS змусить фотогалерею виглядати в точності з вашими побажаннями (включаючи проміжки між фото, шрифти, рамочки і багато іншого).

Крім того, можна створювати прекрасні слайдшоу, каруселі і багато іншого за допомогою додаткових модулів Drupal 8. Серед найпопулярніших — Colorbox і Slick Carousel. Однак, кожна з цих тем заслуговує на окремий блог.

В Drupal 8 можливо все. Наша команда вам це доведе! Зв’яжіться з нами, щоб зробити Drupal 8 сайт неймовірно привабливим — з кастомними фотогалереями та усім іншим, що ви тільки можете собі уявити!