Галлерея Isotope в drupal 9

vityan 1 декабря 2020 в 23:18

Вступление

данная инструкция создана по горячим следам работы с реальным проектом. Отдельная благодарность Ивану Абраменко и его уроку Галерея Isotope для Drupal 8. Инструкция делалась для себя, чтобы потом не тратить лишнее время на воспроизводство, т. к. довольно редкий кейс. Инструкция предполагает определенный уровень знаний особенностей работы с Drupal.

Задачи

создать галерею изображений на базе media
изображения должны создаваться в одном материале (одно окно)
изображения должны иметь привязку к нескольким категориям
максимально обойтись возможностями админки drupal
тема css не рассматривается

Пример того, что должно получиться на выходе

Процесс

1. Необходимые модули и js-скрипты

Не будем рассматривать процесс установки модулей и их библиотек. Все стандартно. Исключение — photoswipe (на его страничке все подробно описано) и сам isotope (о нем подробнее ниже).

- media — входит в ядро

- paragraphs:

- photoswipe (модуль и его библиотека):

Библиотека после установки (через composer), должна появиться в папке libraries:

Проверяем статус библиотеки photoswipe в системе — /admin/reports/status

- isotope:

1.1. файл isotope.pkgd.min.js размещаем в папке js вашей темы. Там же создаем файл инициализации — isotope_init.js

1.2. прописываем isotope в библиотеках темы — у меня это файл mytheme.libraries.yml

isotope_lib:

  js:

    js/isotope.pkgd.min.js: {}

    js/isotope_init.js: {}

подключать саму библиотеку в дальнейшем будем в twig того блока, где она должна работать.

2. Настройки и создание необходимых справочников и материалов

2.1. Создаем справочник Категорий (/admin/structure/taxonomy/add) — у меня его машинное имя categories. Заполняем его терминами.

2.2. Создаем новый тип Медиа - /admin/structure/media/add, где прописываем необходимое поле:

Все настройки — на ваше усмотрение.

2.3. Создаем новый тип параграфа Photo (/admin/structure/paragraphs_type/add), где прописываем необходимые поля:

поле категорий (field_category_img) предполагает выбор опции:

«Допустимое количество значений» - неограниченно

2.4. Добавляем новый тип материалов Photos (/admin/structure/types/add), где создаем поле:

опция «Допустимое количество значений» - неограниченно.

2.5. Переходим в content (содержимое) и создаем новый материал, тип Photos (/node/add/photos). Заполняем картинками с указанием на их категории:

3. Создание представления по выводу картинок и его предварительная настройка

3.1. Создаем представление по выводу картинок в виде галлереи (/admin/structure/views/add). У меня это «Лучшие Проекты» с машинным именем best_projects.

3.2. Сохраняем и переходим на страницу работы с полями и фильтрами.

3.3. Сначала прописываем необходимые связи. Цель — получить прямой доступ к картинке (она у нас загружена через медиа)

3.4. Добавляем поля категорий и картинки в блоке «Поля»:

3.5. Во время настройки поля Категории есть 3 момента:

выбираем Форматер — «идентификатор сущности»
оставляем «Настройка множественного фильтра» — по умолчанию
в «Перезаписать результаты» подставляем шаблон нашего поля. Цель — получить вывод в формате «cat-77» идентификаторы всех категорий, привязанных к картинке
исключаем из вывода данное поле

3.6. Настройка поля картинки заключается в выборе форматера и прописывании его опций.

3.7. Для подключения режима галереи к блоку фотографий, необходимо в настройках общего класса указать photoswipe-gallery

3.8. На данном этапе оканчиваем настройку этого представления прописыванием в настройках раздела "Формат" в классе строки шаблон нашего поля категорий:

Это обеспечивает вывод в html в классах картинки перечня из её категорий, что важно для работы скрипта isotope.

Предварительная настройка окончена, на следующем этапе мы к нему еще вернемся.

4. Создание представления по выводу фильтров и его настройка

4.1. Создаем представление для вывода фильтров (выбираем блок)

4.2. Сохраняем и переходим на страницу настроек полей и фильтров.
К полю наименование термина добавляем второе поле — его id. Сразу же исключаем его из вывода.

4.3. Для ограничения списка терминов только теми, по которым есть привязка к фотографиям, в связях выбираем:

и ставим признак «Эта связь обязательна». В результате в выдачу попадут только категории, имеющие привязку к картинкам.

Для устранения дублирования некоторых категорий включаем агрегацию (Расширенное-Другое):

4.4. В завершение в настройках Формата классу сроки присваиваем класс «views-button»

4.5. Сохраняем представление и переходим к файлу mytheme.theme для написания препроцесс-функции:

<?php
// projects photos block - make filters buttons
function mytheme_preprocess_views_view_field(&$variables) {
  $view = $variables['view'];
  if ($view->id() == 'projects_filters') {
    $term = $variables['row']->{'_entity'};
    $tid = $term->id();
    $name = $variables['row']->{'_entity'}->getName();
    $variables['category'] = '<button class="button" data-filter=".cat-' . $tid . '">' . $name . '</button>';
  }
}
?>

4.6. Создаем в папке темплейтов twig блока фильтров views-view-field—projects-filters—block-1—name.html, где:

подключаем нашу isotope — библиотеку
выводим кнопки фильтров (см. в препроцессоре переменная category )

5. Возвращаемся к доработке представления

«Лучшие Проекты» с машинным именем best_projects) и подключаем в шапке «Область представления» и выбираем наше представление фильтров.

Итоговая форма представления картинок

6. Скрипт инициализации isotope

Прописываем следующий код:

(function($){

    Drupal.behaviors.portfolioBlock={

      attach:function(context, settings){        $('.view-projects-filters > .view-content').once('add-all').prepend('<button class="button" data-filter="*">Все</button>');
        // init Isotope

        var $grid = $('.view-best-projects > .view-content').isotope({

          itemSelector: '.best-projects-photo',

          layoutMode: 'fitRows'

        });
        // bind filter button click

        $('.view-projects-filters').once().on( 'click', 'button', function() {

          var filterValue = $( this ).attr('data-filter');

          $grid.isotope({ filter: filterValue });

        });
        $('.view-projects-filters .button').on('click', function () {

          var activeGallery = ($(this).data('filter')); //get the current filter 

          $(".photoswipe-gallery .best-projects-photo a").each(function () {

              $(this).removeClass('photoswipe'); //remove all photoswipe classes

          });

          $(".photoswipe-gallery .best-projects-photo" + activeGallery +" a").each(function () {

              $(this).addClass('photoswipe');  //add photoswipe class only for active images

          });

      });

      }

    };

  })(jQuery);

Который состоит из условных 2 частей:

инициализация isotope
устранение косяка, когда во всплывающее окно подгружались все картинки страницы, а не только те, которые отфильтровались.

Всё.

Автор

vityan

Drupal9

Веб-мастерам и владельцам сайтов

Drupal Drupal на русском