Перейти к основному содержанию

Drupal 9 — открываем картинки статьи в Colorbox

Drupal 9

Иногда требуется разрешить просмотр картинок в статье в модальном окне на полный экран. На помощь приходит Colorbox.

Colorbox — это легковесный кастомизируемый плагин для фреймворка jQuery, позволяющий открывать картинки и контент в модальном окне. Использование полной ширины экрана позволяет увеличить просматриваемое изображение. Плагин также позволяет делать галереи и слайдшоу.

drupal

Работаем в Drupal 9. Сегодня будем внедрять Colorbox для просмотра картинок статьи. Статью редактируем с помощью CKEditor 4. CKEditor и jQuery встроены в Drupal 9, так что пол дела сделано.

Для задуманного нам потребуется установить три расширения:

Устанавливаем и активируем.

drupal

Colorbox — модуль добавляет сам плагин Colorbox в нашу CMS. Возможности:

  • Работает как форматер в сущностях и представлениях
  • Интегрируется с полем изображений, стилями изображений и модулем вставки
  • Поддерживает несколько стилей
  • Можно сделать собственный стиль
  • Можно использовать для установки команду Drush, drush colorbox-plugin, для загрузки и установки плагина Colorbox в sites/all/libraries

Настроим: Конфигурация → Мультимедиа → Настройки Colorbox. Можно покопаться в настройках, нам подсказывают какие библиотеки и модули могут потребоваться для дополнительного функционала, но пока он нам не нужен. Сохраняем конфигурацию.

drupal

Colorbox Inline — модуль позволяет открывать выбранный контент на  странице в модельном окне. Настроек не требует. После активации модуля уже можно вручную настраивать Colorbox для контента. К примеру, добавляем атрибут data-colorbox-inline к элементу и указываем что открывать (при клике откроется элемент с классом user-login.):

<a data-colorbox-inline=".user-login">User Login</a>

Вручную писать код HTML не будем, автоматизируем процесс модулем CKEditor ColorBox Inline.

CKEditor ColorBox Inline — модуль добавляет текстовый фильтр, который можно включить в нужном текстовом формате. После активации идём в Конфигурация → Работа с содержимым → Текстовые форматы и редакторы.

drupal

Выбираем текстовый формат, который используем в статье. Можно создать новый формат, в котором будет работать Colorbox. Я выбираю Полный HTML → Настроить.

drupal

Включаем фильтр CKEditor Colorbox Inline, настраиваем порядок фильтров. В параметрах фильтр дописывает к элементу класс colorbox, не меняю. Сохранить конфигурацию.

Осталось проверить, открываю статью с картинками, кликаю... Работает.

drupal

Теги

Онлайн-курс по устройству компьютерных сетей

На углубленном курсе "Архитектура современных компьютерных сетей" вы с нуля научитесь работать с Wireshark и «под микроскопом» изучите работу сетевых протоколов. На протяжении курса надо будет выполнить более пятидесяти лабораторных работ в Wireshark.

Реклама ИП «Скоромнов Дмитрий Анатольевич» ИНН 331403723315

 

Похожие материалы

Drupal 8 — удаление фотографий с помощью Fancy File Delete

В восьмом друпале работу с файлами наконец-то встроили в ядро. Однако, не все функции работы с файлами доступны по умолчанию. Вы можете загрузить файл, посмотреть, узнать в скольких местах используется один и тот же файл. Однако, функционала удаления файла нет. Вероятно, подразумевается, что файлы должны автоматически удаляться. Частично это работает, файлы со статусом "временный" автоматически удаляются кроном через 6 часов.

Теги