Идея сделать этот плагин возникла у меня уже давно, но как это часто бывает, не хватало времени «сесть и реализовать». Но не давно, я остался без контракта, и у меня появилось время на собственные проекты. Одновременно хотелось попробовать давно интересовавшую меня тему — создание собственных Gutenberg-блоков для редактора WordPress. Так родился Active Contour — плагин, позволяющий создавать и редактировать контуры поверх изображений прямо в интерфейсе WordPress.
GitHub репозиторий:
https://github.com/sshra/active-contour
Страница на wordpress.org
https://wordpress.org/plugins/active-contour/
Зачем это может понадобиться?
Плагин может быть полезен в самых разных задачах:
- для разметки изображений (например, объектов на фото);
- в учебных или интерактивных материалах;
- в дизайне, инфографике, интерактивных галереях.
Основной функционал
Active Contour позволяет:
- Привязывать один или несколько контуров к каждому изображению из медиабиблиотеки.
- Добавлять контуры вручную с помощью точек и дуг.
- Использовать Gutenberg-блок для вставки изображения с наложенными активными контурами в пост или страницу.
- Так как Gutenberg-блок по сути создаёт настройки для shortcode, то можно вставлять контуры с помощью шорткодов вида везде, где это поддерживается:
-- айди не верен --— гдеid— ID изображения, аcid— список номеров контуров (более подробнее дальше в статье). - Рендерить превью прямо в редакторе блоков.
- Экспортировать данные в виде JSON-объектов (предполагается, что пользователь использует какой то ИИ для генерации точек контура, потому в админке есть пример промпта с описанием нужного формата для экспорта).
Немного о реализации
Плагин использует:
- JavaScript и jQuery для канвас-редактора;
register_block_typeиregisterBlockTypeдля регистрации собственного блока в Gutenberg;- элементы ReactJS для настройки блока в редакторе;
- REST API WordPress для генерации HTML-превью прямо в редакторе;
- Метаполя для хранения контуров (в формате JSON) на уровне вложения (
attachment).
Также реализована возможность экспорта данных — плагин генерирует подсказку, которую можно скопировать в GPT (или другой AI), чтобы автоматически получать JSON с описанием объектов на изображении и точками контура.
Параметры шорткода -- айди не верен --
Плагин использует шорткод для вставки изображения с активными контурами в любую часть записи, страницы или произвольного блока. Шорткод можно вставить вручную или через собственный Gutenberg-блок. Пример:
|
1 |
[active_contour id="123" cid="1,2" group="faces" tags="npc,hero" size="medium" align="center"] |
| Параметр | Описание |
|---|---|
| id | (обязательный) ID изображения из медиабиблиотеки WordPress. Вы можете найти его в URL при редактировании вложения. |
| cid | Список ID контуров, которые должны быть показаны. Можно указать несколько через запятую (например, 1,2,3). Если не указано — по умолчанию ничего не отображается. |
| group | Название группы, к которой относятся выбранные контуры. Если указана, плагин может использовать это значение для фильтрации или группировки контуров. |
| tags | Теги, связанные с контурами. Можно указать несколько через запятую. Используются для фильтрации (например, по типу объектов: npc, weapon, zone и т.п.). |
| size | Размер изображения. Поддерживаются thumbnail, medium, large, full и любые зарегистрированные размеры в теме. Пример: medium. Я исключаю из набора размеры, которые могут обрезать картинку. Вычисляются такие «кандидаты на выбывание» по aspectRatio. |
| align | Выравнивание блока с изображением. Поддерживаются значения left, right, center, none. Работает аналогично атрибуту align у стандартного изображения. |
Управление в редакторе
Контуры редактируются прямо поверх картинки через знакомом интерфейсе WP для media вложений — можно щёлкать мышью по изображению, добавлять и удалять точки, формировать дуги, использовать «лупу» с увеличением (горячие клавиши описаны в readme.txt плагина).