Active Contour

Description

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.