Active Contour

Create interactive areas on images using custom contours. Fully integrated with the media library and Gutenberg.

Author:shra (profile at wordpress.org)
WordPress version required:6.0
WordPress version tested:6.8.1
Plugin version:1.0
Added to WordPress repository:24-06-2025
Last updated:24-06-2025
Rating, %:0
Rated by:0
Plugin URI:
Total downloads:310
plugin download
Click to start download

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.
Screenshots
FAQ
ChangeLog