Подробное руководство по модулю ColorBox для Drupal 9 (и как его расширить)

Опубликовано: 2020-09-29

Изображения играют важную роль в улучшении пользовательского опыта веб-сайта. Исследование показывает, что 90% информации, которую мы передаем нашему мозгу, носит визуальный характер. Многие веб-сайты работают только вокруг этой теории и засыпают пользователей массой мультимедийных материалов, таких как изображения и видеофайлы. Большинство из них упускают из виду аспект представления этих медиафайлов и в конечном итоге вызывают разочарование у пользователей. Им нужен такой инструмент, как ColorBox, который представляет собой чрезвычайно легкий плагин jQuery, который позволяет отображать изображения элегантно и интуитивно. Стили и функциональные возможности легко настраиваются с помощью CSS и Javascript. Модуль Drupal ColorBox совместим с Drupal 6, 7, 8, а теперь и с Drupal 9! В этой статье вы узнаете, как настроить, реализовать и расширить модуль ColorBox для Drupal 9.

ColorBox для Drupal

Модуль ColorBox интегрируется с плагином ColorBox jQuery в Drupal. Плагин представляет собой легкий настраиваемый лайтбокс для jQuery. Среди других «коробочных» модулей конкурентов, которые используются для аналогичных целей (Thickbox, Lightbox2, Shadowbox, Greybox и т. Д.), Модуль ColorBox является наиболее популярным и имеет наибольшее количество установок. Использование Drupal ColorBox не заканчивается красивым отображением загруженных изображений. Он также поддерживает стили для видео, PDF-файлов, узлов, таксономии, веб-форм, содержимого iframe и многого другого. Стилем можно управлять с помощью CSS, поэтому внешний вид можно легко настраивать. Функциональность также легко настраивается с помощью файла JS без необходимости касаться HTML. Он также поддерживает группировку фотографий и предварительно загружает предстоящие изображения.

Шаги по установке модуля ColorBox

1. Установите модуль ColorBox с композитором.

 composer require 'drupal/colorbox:^1.6'
composer require 'drupal/colorbox:^1.6'

2. Загрузите плагин ColorBox 1.x.
1. Использование команды Drush
(Примечание: если вы используете команду drush для установки плагина ColorBox, вы должны включить модуль, а затем выполнить следующую команду)

 drush colorbox-plugin
drush colorbox-plugin

2. Загрузите плагин ColorBox вручную.
Скачайте плагин Colorbox и распакуйте в / библиотеки. Убедитесь, что путь к файлу плагина выглядит так:

 “/libraries/colorbox/jquery.colorbox-min.js”
“/libraries/colorbox/jquery.colorbox-min.js”

3. Включите модуль Drupal ColorBox.

 drush en -y colorbox
drush en -y colorbox

Поздравляю! Теперь вы готовы использовать функции модуля ColorBox.

Настройка модуля ColorBox

Настройте модуль Drupal ColorBox, перейдя в Configuration -> Media -> Colorbox settings .

Как создать галерею изображений с помощью ColorBox

1. Чтобы создать галерею изображений, нам сначала нужно добавить поле изображения для одного из типов контента. Выберите имя метки и нажмите кнопку «Сохранить и продолжить».

2. Следующим шагом является настройка параметров поля. Мы можем добавить изображение по умолчанию, когда изображения не загружены. Альтернативный текст для целей доступности и заголовок. Допустимое количество настроек значений говорит о максимальном лимите загрузки для поля. Выберите желаемый вариант и нажмите кнопку сохранения настроек поля.

3. Затем мы установим другие конфигурации для этого поля изображения, такие как Разрешенные расширения файлов, Каталог файлов, Максимальное и Минимальное разрешение изображения, Максимальный размер загружаемого изображения, alt и заголовок для изображения, а затем нажмите на «Сохранить настройки».

4. На этом мы закончили настройку поля изображения. Установим параметр форматирования для поля изображения, созданного для ColorBox. Перейдите к разделу «Управление отображением типа контента», а затем установите параметр формата в раскрывающемся списке как ColorBox. Нажав на шестеренку рядом с опцией формата, мы можем настроить отображаемое изображение. Как только все параметры будут обновлены, нажмите кнопку обновления, а затем нажмите кнопку сохранения.

5. Теперь давайте добавим контент в нашу галерею изображений ColorBox, щелкнув Добавить контент. Мы можем изменить порядок загрузки изображений в зависимости от веса изображения. Затем нажмите кнопку сохранения. Отображение содержимого будет выглядеть, как показано ниже.

6. Наконец, щелчок по любому из изображений отображает изображение в модальном окне ColorBox, как показано ниже.

Вы также можете сделать то же самое со встроенным полем видео.

Как интегрироваться со встроенным модулем ColorBox

Модуль Colorbox Inline позволяет пользователю открывать содержимое, которое уже находится на странице в ColorBox.

1. Установите встроенный модуль colorbox.

 composer require 'drupal/colorbox_inline:^1.2'
composer require 'drupal/colorbox_inline:^1.2'

2. Включение модуля с помощью команды drush / Включение вручную через пользовательский интерфейс drupal.

 drush en -y colorbox_inline
drush en -y colorbox_inline

3. Откройте изображение в модальном окне ColorBox, которое находится на странице, используя ссылку.

4. Перейдите, чтобы добавить контент -> Любой тип контента, у которого есть поле body.

Измените форматировщик текста с базового HTML на полный HTML

6. Затем нажмите кнопку сохранения.

Здесь, в приведенном выше примере, атрибут data-colorbox-inline тега привязки также может содержать имя класса вместо идентификатора. Просмотр изображения - это ссылка, по которой открывается уже существующее изображение на странице (измените изменения в соответствии с требованиями вашего проекта). Мы можем использовать этот модуль для рендеринга любого контента - видео, веб-формы и т. Д. Аналогичным образом.

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

Как интегрировать ColorBox с модулем загрузки ColorBox

Модуль ColorBox Load позволяет пользователям загружать контент в ColorBox с помощью Ajax. С помощью этого модуля пользователи могут указать серию путей, которые при визуализации откроют ColorBox с содержимым. Это зависит от модуля NG Lightbox для интерфейса администратора путей. Этот метод можно использовать для визуализации узлов, страниц, веб-форм и многого другого.
Установите модуль загрузки colorbox

 composer require 'drupal/colorbox_load:^1.2'
composer require 'drupal/colorbox_load:^1.2'

Включение модуля с помощью команды drush / Включение вручную через пользовательский интерфейс drupal

 drush en -y colorbox_load
drush en -y colorbox_load

Реализация всплывающего окна входа в систему с использованием модуля ColorBox Load .

1. Настройте модуль загрузки ColorBox, перейдя в раздел « Конфигурация» -> «Ng Lightbox» (в разделе «Медиа»). Мы можем настроить пути, для которых мы хотим предоставить модальное отображение ColorBox, ширину модального окна ColorBox, класс для модального окна и параметры рендеринга. (Выберите желаемый вариант).

2. Теперь мы можем увидеть модальное окно Drupal ColorBox, реализованное для страницы входа, нажав кнопку входа на главной странице.

Как интегрировать ColorBox с представлениями Drupal

Для некоторых веб-сайтов нам может потребоваться функция, которая может отображать модальное окно ColorBox для списка изображений. Это можно сделать с помощью модуля Views.
1. Перейдите в структуру -> просмотры -> добавить представление.
2. Добавьте поле изображения для просмотра и настройте средство форматирования для ColorBox и других параметров соответственно, а затем сохраните представление.

3. Теперь взгляните на только что созданное представление (в моем случае я создал представление как страницу). Вы можете увидеть список изображений, и когда вы нажимаете на одно из них, отдельное изображение отображается во всплывающем окне ColorBox.