WP Plugin Active Contour для WordPress — визуальное редактирование контуров на изображениях

Идея сделать этот плагин возникла у меня уже давно, но как это часто бывает, не хватало времени «сесть и реализовать». Но не давно, я остался без контракта, и у меня появилось время на собственные проекты. Одновременно хотелось попробовать давно интересовавшую меня тему — создание собственных 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-блок. Пример:

ПараметрОписание
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 плагина).

Написать комментарий

Мало букафф? Читайте есчо !

Удалить название типа публикации из адреса кастомного типа публикации

Ноябрь 18, 2017 г.

При создании собственного типа публикации в Wordpress, вы получите ЧПУ, содержащий в самом начале название этого типа материала. Можно ли избавиться от этого? К примеру, вы зарегистрировали тип публикации portfolio: [crayon-686d3515c0b1a359998517/] ...

Читать

Footer wordpress

Октябрь 9, 2015 г.

Что такое footer wordpress и как его отредактировать. Шаблон страницы в wordpress собирается, как правило, из нескольких файлов-шаблонов. Хотя это и не обязательно. Сначала wordpress определяет файл основного шаблона, который выбирается в соответствии ...

Читать

 

Комментарии к «WP Plugin Active Contour для WordPress — визуальное редактирование контуров на изображениях»

Понравилась статья? Есть вопросы? - пишите в комментариях.



Комментарий: