Active Contour

Active Contour lets you define interactive contour areas on media images. Each polygonal area can be associated with a title & URL, making it easy to build rich visual navigation, diagrams, and interactive image content.

Features

-

Edit contours directly in the Media Library

• Add, move, and delete points visually

• Scaled preview with zoom and background options

-

Define attributes per area

• Each area can include title, href, and custom data

• Stored as JSON in image meta field

-

Import contours from external tools

• Paste a JSON object describing one or multiple contours

• Compatible with AI-generated data or exported data from vector tools

• Preview and refine the result before saving

-

Gutenberg Block Support

• Insert an image with interactive contours using the included block (Active Contour)

• Live preview of the selected image and contour state

-

Shortcode Support

• Use [active_contour id="123" cid="1,2"] to embed images with specific contours

• Works anywhere shortcodes are supported (pages, posts, widgets)

Use cases

• Interactive maps and diagrams

• Infographics with tooltips or links

• Product showcases with click/tap areas

• Educational or documentation content

Keyboard Shortcuts

While editing points in the contour editor, you can use the following keyboard shortcuts for greater control:

• Delete — Removes the currently selected point from the contour.

-

• or Numpad + — Converts the selected segment into a curved arc (or increases arc intensity).

-

• or Numpad – — Decreases arc curvature or switches arc back to straight line.

• Shift (hold) — Activates zoom mode. While holding Shift, a magnifier lens appears under the cursor to help you place points more precisely.

Other behaviors:

• Click on canvas — Adds a new point in the closest location or selects an existing one if clicked near.

• Click and drag a point — Moves the selected point with the mouse.