WP Manifestindependent plugin directory
manifest / media / image-focus-points

Image Focus Points

WordPress plugin: interactive image hotspots with an admin editor and a server-rendered Gutenberg block

by Alex Mochulskyi · github.com/alexskybrain/image-focus-points

★ 0stars

Install

Download source zip No release zip yet

This is the repository archive. It installs, but the folder name will carry the branch suffix and updates will not flow.

Install straight from GitHub with WP-CLI:

wp plugin install https://github.com/alexskybrain/image-focus-points/archive/refs/heads/main.zip
No built-in updater. New versions won't appear under Dashboard → Updates. Install new releases yourself, or let Git Updater track the repository.
Readme github.com/alexskybrain/image-focus-points ↗

A WordPress plugin that puts interactive hotspots on an image. An editor marks points directly on the picture in the admin, gives each point a text and an optional link, and the front end shows them as markers that open the content on click.

What it does

  • Registers a focus_point custom post type; the featured image is the picture the points belong to.
  • Provides a meta box where points are placed by clicking on the image itself, with coordinates stored as post meta.
  • Ships a Gutenberg block, image-focus-points/focus-points, that renders a selected focus-point post anywhere on the site.
  • Loads the content of an individual point over AJAX, so a page with many hotspots does not ship all of their markup up front.

Requirements

  • WordPress 6.0+
  • PHP 7.4+

Installation

  1. Copy the plugin folder into wp-content/plugins/ and activate it.
  2. Create a Focus Point entry, set its featured image, and add points on the image.
  3. Insert the Image with Focus Points block on a page and pick the entry.

Notes on implementation

  • The AJAX endpoint is protected with a nonce and verified through check_ajax_referer(); the nonce reaches the script through wp_localize_script().
  • Point input is cast with intval(), and everything printed back is escaped with esc_url() and esc_html().
  • Assets are versioned with filemtime(), so a deploy busts the browser cache without a manual version bump.
  • The block is server-rendered through a render_callback, which keeps the saved markup out of post content and lets the output change with the plugin.

License

MIT — see LICENSE.