Responsive Focal Point

Free, or Pro from $3 a month

Lets an editor pick the part of an image that must never be cropped out, and set a different point per breakpoint when one is not enough.

Free version coming to WordPress.org. Pro adds what is listed below, billed once a year at $36 for one site.

Setting the point in the Media Library, with live previews of the crop at five aspect ratios.

Installing Responsive Focal Point, every setting it has, the screens it adds, and its 10 documented actions and filters. The full reference, including the arguments every hook receives, ships inside the plugin on its Documentation screen and in docs/HOOKS.md, so it can never describe a version you are not running.

What you need

  • WordPress 6.4 or newer
  • PHP 8.0 or newer
  • No other plugin, service or account required

Installing it

  1. The free version is in review for the WordPress.org directory. Once listed, open Plugins → Add New, search for Responsive Focal Point, install and activate it.
  2. Open its Status screen from the sidebar. It reports what is running, and it is the first place to look if something later seems not to be.
  3. That is the whole installation. Every setting has a working default, so nothing has to be configured before the plugin does its job.

Adding Pro

  1. Keep the free plugin active. Pro extends it rather than replacing it, and WordPress refuses to activate Pro on its own.
  2. Download the Pro zip from your receipt or your order history, then install it through Plugins → Add New → Upload Plugin.
  3. Paste your licence key on the Licence screen and activate it. Updates then arrive in wp-admin like any other plugin.

Where everything is in wp-admin

  1. The focal point control appears on every image in the Media Library, which is where the work actually happens.
  2. Breakpoints is the list of widths an editor can set a separate point for.
  3. Status reports what is active and shows the template helpers.
  4. Images is the audit: coverage across the library, and what still has nothing set.
  5. Documentation is the full reference, bundled with the plugin.

Settings

Every one of these has a default that works. The defaults below are the ones in the code, not a recommendation.

SettingDefaultWhat it does
breakpointsTablet up to 1024px, Mobile up to 767pxThe widths an editor can set a separate focal point for. Two in the free tier on top of the default, up to 20 in Pro.
use_importantonWhether the generated object-position rules carry !important. Leave it on unless your theme sets object-position itself and you want it to win.
content_imagesonApplies focal points to images inside post content, not only to featured images and template calls.

Actions and filters

Limits, classifications, tracked values and admin screens are all filterable, so extending this plugin does not mean forking it. Names and descriptions below are generated from the source.

ActionWhat it is for
wpfp_loadedFires once every feature has registered its hooks.
wpfp_points_savedFires after an attachment's focal points are stored or cleared.
wpfp_register_featuresFires before any feature registers its hooks.
wpfp_settings_savedFires after the plugin's settings, breakpoints included, are stored.
FilterWhat it is for
wpfp_admin_screensFilters this plugin's admin screens.
wpfp_breakpoint_limitFilters how many custom breakpoints this site may configure.
wpfp_feature_enabledFilters whether a feature is switched on.
wpfp_load_pickerFilters whether the focal point picker loads on this admin screen.
wpfp_migrationsFilters the migration steps.
wpfp_stylesheetFilters the generated focal point stylesheet.

A worked example

// More breakpoints than the free tier allows.
add_filter( 'wpfp_breakpoint_limit', fn( int $limit ): int => 6 );

// Add a selector of your own to the generated stylesheet.
add_filter( 'wpfp_stylesheet', function ( string $css ): string {
	return $css . "n.hero__image img { object-fit: cover; }";
} );

// Do something whenever an editor saves a focal point.
add_action( 'wpfp_points_saved', function ( int $attachment_id, array $points ): void {
	do_action( 'my_cdn_purge', wp_get_attachment_url( $attachment_id ) );
}, 10, 2 );

If something is wrong

Check the Status screen, then the debug panel on the front end: between them they name what was captured, what matched and why. If that does not answer it, write to us and say what you expected instead. There is also the product page if you want to see the screens before installing anything.

The other two plugins

Attribution Tracker

Records where every visitor came from and attaches it to the form they submit, so a lead in your inbox arrives with its campaign on it.

Dynamic Content

Shows a different phone number, WhatsApp number or call to action depending on how the visitor arrived, so you can tell which campaign generated the call.