Thomas

<p>Easily create <em>Image Hotspots</em> (tooltips with WooCommerce or custom product info) with the Image Hotspot Block, all directly from within your post, page or site editor!</p>
<p><em>This plugin has just been released so please let me know if you have any feature requests or suggestion!</em></p>
<h3>Key features</h3>
<ul>
<li><strong>Easy to use :</strong> Simply add the block to your page, add your image and products and you are good to go!</li>
<li><strong>Easy to customize :</strong> From the color of the dot, to the tooltip content and layout, we try to give you as much control as possible to let you create the perfect style for you.</li>
<li><strong>Performance :</strong> We only load our script and style when the page is actually using our block.</li>
</ul>
<h3>How to use</h3>
<ul>
<li>Open a page or blog post using the block editor ( Gutenberg editor ).</li>
<li>Add the “Image Hotspot” block.</li>
<li>Choose an image.</li>
<li>With the block selected, in the right sidebar ( block options ), click on “Add product”.</li>
<li>From there, either add a WooCommerce product to autofill product info, or create a custom product.</li>
<li>You can move the hotspot by holding ctrl or command key and draging the hotspot.</li>
<li>You can then customize the tooltip layout, content etc..</li>
</ul>


Image Hotspot Block


Using this plugin, I can make my products stand out in a really fun way. I added a photo of my cat wearing my handmade bracelet and reading my book! The tooltips grab my visitors' attention, making them excited to learn more about my products. Congrats to Thomas, well done!


Purrfect for Showcasing Your Products!

Create dynamic images with clickable hotspots to showcase products. Optimized for WooCommerce.

shra

<p><strong>Active Contour</strong> 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.</p>
<h3>Features</h3>
<ul>
<li>
<p><strong>Edit contours directly in the Media Library</strong></p>
<ul>
<li>Add, move, and delete points visually</li>
<li>Scaled preview with zoom and background options</li>
</ul>
</li>
<li>
<p><strong>Define attributes per area</strong></p>
<ul>
<li>Each area can include <code>title</code>, <code>href</code>, and custom data</li>
<li>Stored as JSON in image meta field</li>
</ul>
</li>
<li>
<p><strong>Import contours from external tools</strong></p>
<ul>
<li>Paste a JSON object describing one or multiple contours</li>
<li>Compatible with AI-generated data or exported data from vector tools</li>
<li>Preview and refine the result before saving</li>
</ul>
</li>
<li>
<p><strong>Gutenberg Block Support</strong></p>
<ul>
<li>Insert an image with interactive contours using the included block (Active Contour)</li>
<li>Live preview of the selected image and contour state</li>
</ul>
</li>
<li>
<p><strong>Shortcode Support</strong></p>
<ul>
<li>Use <code>[active_contour id="123" cid="1,2"]</code> to embed images with specific contours</li>
<li>Works anywhere shortcodes are supported (pages, posts, widgets)</li>
</ul>
</li>
</ul>
<h3>Use cases</h3>
<ul>
<li>Interactive maps and diagrams</li>
<li>Infographics with tooltips or links</li>
<li>Product showcases with click/tap areas</li>
<li>Educational or documentation content</li>
</ul>
<h3>Keyboard Shortcuts</h3>
<p>While editing points in the contour editor, you can use the following keyboard shortcuts for greater control:</p>
<ul>
<li>Delete — Removes the currently selected point from the contour.</li>
<li>
<ul>
<li>or Numpad + — Converts the selected segment into a curved arc (or increases arc intensity).</li>
</ul>
</li>
<li>
<ul>
<li>or Numpad – — Decreases arc curvature or switches arc back to straight line.</li>
</ul>
</li>
<li>Shift (hold) — Activates zoom mode. While holding Shift, a magnifier lens appears under the cursor to help you place points more precisely.</li>
</ul>
<p>Other behaviors:</p>
<ul>
<li>Click on canvas — Adds a new point in the closest location or selects an existing one if clicked near.</li>
<li>Click and drag a point — Moves the selected point with the mouse.</li>
</ul>


Active Contour

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

Image Hotspot Block vs Active Contour