{"id":238991,"date":"2025-06-24T13:42:20","date_gmt":"2025-06-24T13:42:20","guid":{"rendered":"https:\/\/wordpress.org\/plugins\/active-contour\/"},"modified":"2025-06-24T19:29:26","modified_gmt":"2025-06-24T19:29:26","slug":"active-contour","status":"publish","type":"plugin","link":"https:\/\/gl.wordpress.org\/plugins\/active-contour\/","author":5717790,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_crdt_document":"","version":"1.0","stable_tag":"trunk","tested":"6.8.5","requires":"6.0","requires_php":"7.4","requires_plugins":null,"header_name":"Active Contour","header_author":"Korol Yuriy aka Shra","header_description":"Create interactive areas on images using custom contours. Fully integrated with the media library and Gutenberg.","assets_banners_color":"","last_updated":"2025-06-24 19:29:26","external_support_url":"","external_repository_url":"","donate_link":"https:\/\/pay.cryptocloud.plus\/pos\/Oc9ieI6Eb5HWPptn","header_plugin_uri":"","header_author_uri":"https:\/\/shra.ru","rating":0,"author_block_rating":0,"active_installs":0,"downloads":310,"num_ratings":0,"support_threads":0,"support_threads_resolved":0,"author_block_count":0,"sections":["description","installation","faq","changelog"],"tags":[],"upgrade_notice":[],"ratings":[],"assets_icons":[],"assets_banners":[],"assets_blueprints":{},"all_blocks":{"activecontour\/block":{"apiVersion":2,"name":"activecontour\/block","title":"Active Contour","category":"media","icon":"format-image","description":"Insert Image with active contours.","supports":{"className":true,"align":["left","right","center","full"]},"attributes":{"id":{"type":"number","default":0},"cid":{"type":"string","default":""},"group":{"type":"string","default":""},"tags":{"type":"string","default":""},"size":{"type":"string","default":""},"align":{"type":"string","default":""}},"editorScript":"file:.\/index.js","editorStyle":["file:.\/..\/assets\/front.css"]}},"tagged_versions":[],"block_files":[],"assets_screenshots":{"screenshot-1.jpg":{"filename":"screenshot-1.jpg","revision":3317030,"resolution":"1","location":"assets","locale":""},"screenshot-2.jpg":{"filename":"screenshot-2.jpg","revision":3317031,"resolution":"2","location":"assets","locale":""},"screenshot-3.jpg":{"filename":"screenshot-3.jpg","revision":3317032,"resolution":"3","location":"assets","locale":""},"screenshot-4.jpg":{"filename":"screenshot-4.jpg","revision":3317033,"resolution":"4","location":"assets","locale":""},"screenshot-5.jpg":{"filename":"screenshot-5.jpg","revision":3317034,"resolution":"5","location":"assets","locale":""},"screenshot-6.jpg":{"filename":"screenshot-6.jpg","revision":3317035,"resolution":"6","location":"assets","locale":""}},"screenshots":{"1":"Contour editor inside Media Library","2":"Contour settings and preview in the Gutenberg block","3":"Export tool","4":"Creating contour...","5":"Using arc interpolation tool","6":"Filtering by tags..."},"jetpack_post_was_ever_published":false},"plugin_section":[],"plugin_tags":[244021,146663,3538,127148,244020],"plugin_category":[],"plugin_contributors":[84257],"plugin_business_model":[],"class_list":["post-238991","plugin","type-plugin","status-publish","hentry","plugin_tags-custom-image-areas","plugin_tags-image-hotspot","plugin_tags-image-map","plugin_tags-interactive-image","plugin_tags-media-attachment","plugin_contributors-shra","plugin_committers-shra"],"banners":[],"icons":{"svg":false,"icon":"https:\/\/s.w.org\/plugins\/geopattern-icon\/active-contour.svg","icon_2x":false,"generated":true},"screenshots":[{"src":"https:\/\/ps.w.org\/active-contour\/assets\/screenshot-1.jpg?rev=3317030","caption":"Contour editor inside Media Library"},{"src":"https:\/\/ps.w.org\/active-contour\/assets\/screenshot-2.jpg?rev=3317031","caption":"Contour settings and preview in the Gutenberg block"},{"src":"https:\/\/ps.w.org\/active-contour\/assets\/screenshot-3.jpg?rev=3317032","caption":"Export tool"},{"src":"https:\/\/ps.w.org\/active-contour\/assets\/screenshot-4.jpg?rev=3317033","caption":"Creating contour..."},{"src":"https:\/\/ps.w.org\/active-contour\/assets\/screenshot-5.jpg?rev=3317034","caption":"Using arc interpolation tool"},{"src":"https:\/\/ps.w.org\/active-contour\/assets\/screenshot-6.jpg?rev=3317035","caption":"Filtering by tags..."}],"raw_content":"<!--section=description-->\n<p><strong>Active Contour<\/strong> lets you define interactive contour areas on media images. Each polygonal area can be associated with a title &amp; URL, making it easy to build rich visual navigation, diagrams, and interactive image content.<\/p>\n\n<h3>Features<\/h3>\n\n<ul>\n<li><p><strong>Edit contours directly in the Media Library<\/strong><\/p>\n\n<ul>\n<li>Add, move, and delete points visually<\/li>\n<li>Scaled preview with zoom and background options<\/li>\n<\/ul><\/li>\n<li><p><strong>Define attributes per area<\/strong><\/p>\n\n<ul>\n<li>Each area can include <code>title<\/code>, <code>href<\/code>, and custom data<\/li>\n<li>Stored as JSON in image meta field<\/li>\n<\/ul><\/li>\n<li><p><strong>Import contours from external tools<\/strong><\/p>\n\n<ul>\n<li>Paste a JSON object describing one or multiple contours<\/li>\n<li>Compatible with AI-generated data or exported data from vector tools<\/li>\n<li>Preview and refine the result before saving<\/li>\n<\/ul><\/li>\n<li><p><strong>Gutenberg Block Support<\/strong><\/p>\n\n<ul>\n<li>Insert an image with interactive contours using the included block (Active Contour)<\/li>\n<li>Live preview of the selected image and contour state<\/li>\n<\/ul><\/li>\n<li><p><strong>Shortcode Support<\/strong><\/p>\n\n<ul>\n<li>Use <code>[active_contour id=\"123\" cid=\"1,2\"]<\/code> to embed images with specific contours<\/li>\n<li>Works anywhere shortcodes are supported (pages, posts, widgets)<\/li>\n<\/ul><\/li>\n<\/ul>\n\n<h3>Use cases<\/h3>\n\n<ul>\n<li>Interactive maps and diagrams<\/li>\n<li>Infographics with tooltips or links<\/li>\n<li>Product showcases with click\/tap areas<\/li>\n<li>Educational or documentation content<\/li>\n<\/ul>\n\n<h3>Keyboard Shortcuts<\/h3>\n\n<p>While editing points in the contour editor, you can use the following keyboard shortcuts for greater control:<\/p>\n\n<ul>\n<li>Delete \u2014 Removes the currently selected point from the contour.<\/li>\n<li>\n<ul>\n<li>or Numpad + \u2014 Converts the selected segment into a curved arc (or increases arc intensity).<\/li>\n<\/ul><\/li>\n<li>\n<ul>\n<li>or Numpad - \u2014 Decreases arc curvature or switches arc back to straight line.<\/li>\n<\/ul><\/li>\n<li>Shift (hold) \u2014 Activates zoom mode. While holding Shift, a magnifier lens appears under the cursor to help you place points more precisely.<\/li>\n<\/ul>\n\n<p>Other behaviors:<\/p>\n\n<ul>\n<li>Click on canvas \u2014 Adds a new point in the closest location or selects an existing one if clicked near.<\/li>\n<li>Click and drag a point \u2014 Moves the selected point with the mouse.<\/li>\n<\/ul>\n\n<!--section=installation-->\n<ol>\n<li>Upload the plugin to the <code>\/wp-content\/plugins\/<\/code> directory or install via the Plugin Installer.<\/li>\n<li>Activate the plugin.<\/li>\n<li>Open any image in the Media Library and go to the <strong>Contours<\/strong> tab.<\/li>\n<li>Add contour points and set properties.<\/li>\n<li>Use the provided block (Active Contour) or shortcode to insert the image.<\/li>\n<\/ol>\n\n<!--section=faq-->\n<dl>\n<dt id='where%20is%20contour%20data%20stored%3F'><h3>Where is contour data stored?<\/h3><\/dt>\n<dd><p>As a JSON structure in the attachment meta under <code>_active_contours<\/code>.<\/p><\/dd>\n<dt id='can%20i%20style%20or%20extend%20how%20contours%20are%20rendered%3F'><h3>Can I style or extend how contours are rendered?<\/h3><\/dt>\n<dd><p>Yes. You can use custom styles via CSS. Block is rendered inside div.active-contour-container element.<\/p><\/dd>\n\n<\/dl>\n\n<!--section=changelog-->\n<h4>1.0.0<\/h4>\n\n<ul>\n<li>Initial release.<\/li>\n<\/ul>","raw_excerpt":"Create interactive areas on images using custom contours. Fully integrated with the media library and Gutenberg.","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/gl.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin\/238991","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/gl.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin"}],"about":[{"href":"https:\/\/gl.wordpress.org\/plugins\/wp-json\/wp\/v2\/types\/plugin"}],"replies":[{"embeddable":true,"href":"https:\/\/gl.wordpress.org\/plugins\/wp-json\/wp\/v2\/comments?post=238991"}],"author":[{"embeddable":true,"href":"https:\/\/gl.wordpress.org\/plugins\/wp-json\/wporg\/v1\/users\/shra"}],"wp:attachment":[{"href":"https:\/\/gl.wordpress.org\/plugins\/wp-json\/wp\/v2\/media?parent=238991"}],"wp:term":[{"taxonomy":"plugin_section","embeddable":true,"href":"https:\/\/gl.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_section?post=238991"},{"taxonomy":"plugin_tags","embeddable":true,"href":"https:\/\/gl.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_tags?post=238991"},{"taxonomy":"plugin_category","embeddable":true,"href":"https:\/\/gl.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_category?post=238991"},{"taxonomy":"plugin_contributors","embeddable":true,"href":"https:\/\/gl.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_contributors?post=238991"},{"taxonomy":"plugin_business_model","embeddable":true,"href":"https:\/\/gl.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_business_model?post=238991"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}