Entity Media и Slick Carousel Drupal 8.

Главные вкладки

Аватар пользователя LLC VelvetDev LLC VelvetDev 29 ноября 2017 в 17:25
4

Добрый день (надеюсь у вас день).
В недалеком прошлом, была поставлена задача сделать слайдер который содержит как видео так и изображения. Задача казалась тривиальной, но одним из главных пунктов было использование Media Entity и Slick Carousel модулей, которые нам любезно предоставляет Drupal.org.

Так как модули были достаточно новыми, а информация по ним отсутствовала (особенно на русском), мы решили опубликовать результаты своих трудов.

Итак, у нас есть Drupal версии 8.4.2. Версии пишем не случайно. На-момент написания статьи некоторые версии были либо нестабильны, либо конфликтовали с ядром. Пришлось потратить полдня для сбора рабочей версии.

Модули:

После установки всех модулей приступаем к работе. Кстати, Admin Toolbar не обязателен, но к нему все давно привыкли.

После установки в админ меню появится новая ссылка /admin/structure/media,
в меню Structure→Media Bundle. Заходим.

Media Bundle

Нажимаем «Add media bundle».
Add media bundle

Переходим на страницу создания Media bundles. Заполняем поля со звездочкой.
В поле Type provider выбираем тип нужного нам медиа.

Media type provider

Для примера - создадим Video и остальные типы по аналогии. Нажимаем «Save media bundle».
После нажатия кнопки нас перебросит на страницу со списком Media bundles, видим созданный нами Video нажимаем «Edit».

Video Edit

Ничего не трогаем, переходим в Manage fields. Создаем новое поле («Add field»).
Add field

В поле «Add a new field» выбираем Reference/File.
Reference/File

Появится поле Label, заполняем его. Нажимаем «Save and continue» , переходим на следующую страницу, нажимаем «Save field settings».
На следующей странице заполняем необходимые поля. Нажимаем «Save setting»
Save setting

Далее переходим в пункт меню Manage display.Для нашего поля выбираем нужную конфигурацию, в моем случае Video Player(HTML 5) . Нажимаем «Save».
Save

Нажимаем пункт меню «Edit» и видим что поле «TYPE PROVIDER CONFIGURATION» заполнилось автоматически (если нет нажимаем на стрелочку и выбираем созданное нами поле). Нажимаем синюю кнопку внизу «Save media bundle». Медиа видео готов.
Save media bundle

Хочется заметить, что в Manage fields создаем только одно поле (если не хотите кучу ошибок).
По аналогии создаем Media Image и другие необходимые Медиа. Изменения будут только при создании Slideshow.

Итак, Slideshow. Переходим на страницу создания Медиа и в поле Type provider выбираем Slideshow.
Slideshow

При создании поля в Manage fields выбираем Reference/Other
Reference

На следующей странице вносим изменения. В Type of item to reference / Media. В Allowed number of values / Unlimited.
Нажимаем «Save field settings».
img12

На следующей странице внизу выбираем те Медиа, на которые мы хотим ссылаться.В нашем случае это Video и Image(Создано после Video).
img13

В пункте меню Manage display напротив нашего поля в колонке FORMAT выбираем Slick Media . Нажав на шестеренку в конце строки, мы можем выбрать настройки для нашего слайдера, но об этом позже.
img14

Сохраняем, нажимаем на пункт меню Edit проверяем заполнено ли TYPE PROVIDER CONFIGURATION и, если да, то продолжаем.

Как видим, у нас создано 3 Media bungle.Всё отлично, значит можем начинать заполнять контентом.
img15

Для наполнения контентом переходим по /media/add или в меню. У нас появилась новая ссылка Content → Media → Add a new media.
img16

Вероятно, с наполнением Video и Image проблем возникнуть не должно, поэтому сразу переходим к Slideshow.
Мы уже создали несколько медиа, свои вы можете увидеть нажав Content → Media.
img17

Заходим в Add a new media → Slideshow, заполняем Media name и поле, которое назвали Slide.
У нас поля с автодополнением. Вы же можете настроить любой удобный для вас вариант. Сохраняем.
img18

Мы переходим на страницу просмотра, видим наше изображение из слайдера. Можете полистать, всё “должно” работать.
img19

Всё готово! Далее можем перейти к настройке внешнего вида слайдера.
Переходим по пути Structure → Media Bundles → Slideshow → Manage display.
img20

Нажимаем на шестеренку напротив нашего поля Slide (ранее говорилось уже, что ее не трогать).
img21

Нажав на шестеренку, мы переходим на страницу настроек слайдера.
img22

На этой странице настраиваем наш слайдер как душе угодно (в рамках дозволенного библиотекой Slick ). Для демонстрации - изменим лишь несколько параметров.
img23

Как видим в нашем слайдере уже произошли некоторые изменения.
img24

Также мы можем создавать уже готовые наборы опций. Нажимаем на пункт меню Configuration и в блоке Media видим Slick. Нажимаем на ссылку, заходим.
img25

Далее «Add slick optionset»
img26

Попадаем на страницу создания набора опций и выбираем необходимые вам настройки.
(не забываем вписать название вашего набора).
img27

На этом всё, Удачи.

ВложениеРазмер
Иконка изображения Media Bundle69.88 КБ
Иконка изображения Add media bundle53.95 КБ
Иконка изображения Media type provider 120.5 КБ
Иконка изображения Video Edit58.54 КБ
Иконка изображения Add field62.72 КБ
Иконка изображения Reference/File76.74 КБ
Иконка изображения Save setting127.24 КБ
Иконка изображения Save104.49 КБ
Иконка изображения Save media bundle126.08 КБ
Иконка изображения Slideshow136.76 КБ
Иконка изображения Reference99.52 КБ
Иконка изображения 1287.01 КБ
Иконка изображения 1397.09 КБ
Иконка изображения 14107.37 КБ
Иконка изображения 1576.15 КБ
Иконка изображения 1680.61 КБ
Иконка изображения 17189.69 КБ
Иконка изображения 18104.55 КБ
Иконка изображения 19680.44 КБ
Иконка изображения 20718.38 КБ
Иконка изображения 21113.94 КБ
Иконка изображения 2293.29 КБ
Иконка изображения 2395.57 КБ
Иконка изображения 24497.71 КБ
Иконка изображения 25160.79 КБ
Иконка изображения 26161.25 КБ
Иконка изображения 27107.03 КБ

Комментарии