Как реализовать нестандартный roadmap?

Question

[Kirill-Titov]

Добрый день!
Дизайнер нарисовал roadmap с целью последующей интеграции в тему wordpress.

Каждый пункт roadmapa должен будет редактироваться из админки.
Подскажите, пожалуйста, каким образом можно реализовать такую задачу?
Пробовал размечать области на картинке, но не могу к размеченным координатам привязать div с описанием пункта

Comments

[eyeless_watcher]

Напрашивается что-то вроде SVG. Оно должно строиться скриптом на клиенте или один раз сгенериться на бэке и только показываться? Какая-то клиентская динамика (ховеры, например) подразумевается?

[Kirill-Titov]

Должно строиться скриптом на клиенте, основная проблема при реализации - как привязать каждый пункт к конкретным координатам так, чтобы при масштабировании картинки каждый пункт оставался на своем месте. Самое простое и кривое решение это привязать каждый пункт через абсолютное позиционирование, но хотелось бы найти более "красивое" решение

Answer 1

[Анатолий Куликов]

Могу предложить следующий вариант - сделайте пользовательский непубличный тип записи, который будет отвечать за написание / редактирование / добавление пунктов roadmap. Редактирование из админки готово.

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

С помощью псевдоэлементов :ntd можно сделать так, что блоки через одного будут отображатся с одной, или с другой стороны. А если там сложное позиционирование, то просто добавьте id записи к id блока и с помощью стилей выравнивайте так, как нужно.

И всё получится.

Comments

[Kirill-Titov]

спасибо, но основная проблема в размещении пунктов roadmap на картинке, которая будет масштабироваться