Alexander Neumann WordPress Plugins

← All 13 Plugins

Kentro

Image Focal Points

Κέντρον (Kéntron) — Center, focal point, pivot. In classical geometry, Kéntron is the sharp point of the compass, the exact center and pivot around which everything turns.

Category: Media & Design Version: 1.2.1 Requirements: PHP 7.4+ · WP 6.0+ Runtime: Sub-pixel accuracy · 0 bytes extra disk

Overview

Kentro (Greek for center or focus) is a highly performant, zero-bloat WordPress plugin designed to give you precise control over how images are cropped and resized on the frontend. When themes use CSS object-fit: cover, they default to 50% 50% center cropping. Kentro allows you to set visual focal points that keep key subjects visible across all viewports.

Architectural Rationale: Modern responsive web designs rely heavily on CSS object-fit: cover, which defaults to centering images at 50% 50%. Important subjects (faces, products, hero landmarks) get awkwardly cut off on mobile screens. Destructive thumbnail cropping plugins generate dozens of redundant image files, bloating server storage. Kentro calculates sub-pixel percentages non-destructively, injecting dynamic CSS variables with zero disk bloat.

Key Features

  • Visual Target Selector

    Set focal points by clicking on the image preview within the native media library details window.

  • Aspect Ratio Simulator

    Instantly preview how the image crops across 16:9, 4:3, 1:1, and 9:16 aspect ratios with dark cinema bars.

  • Dual Desktop & Mobile Framing

    Set independent focal points for desktop vs vertical mobile screens.

  • Pixel-Perfect Precision

    Uses a custom ResizeObserver to track preview scaling down to the sub-pixel coordinate.

  • Non-Destructive Architecture

    Original images and generated thumbnail sizes remain 100% untouched on disk.

  • Gutenberg & Theme Ready

    Automatically injects dynamic style="object-position: X% Y%" into WordPress image functions.

  • Bidirectional REST API

    Query and update focal points programmatically via the kentro_focal_points endpoint.

  • Multilingual Compatibility

    Works seamlessly with Glossa, WPML, and Polylang.

Technical Specifications

Output Inline CSS object-position: X% Y%; object-fit: cover;
Meta Keys _kentro_focal_point, _kentro_focal_point_mobile
REST API /wp-json/wp/v2/media/<id>?_fields=kentro_focal_points
Observer Native JavaScript ResizeObserver with debounce
Disk Footprint 0 bytes extra disk space generated
Frontend Overhead 0 runtime JS libraries loaded on public pages

Developer Integration

// Retrieve image focal point in custom theme templates
$focal = Kentro\get_focal_point($attachment_id);
echo '<img src="' . esc_url($url) . '" style="object-position: ' . esc_attr($focal['css']) . ';">';

// Enable independent mobile focal points via filter
add_filter('kentro_enable_mobile_focal_point', '__return_true');
WP-CLI: $ wp kentro set-point <attachment_id> --x=45 --y=20

Deployment Notes

Works out-of-the-box with Advanced Custom Fields (ACF) image return arrays and native Gutenberg core Image blocks.

← View all 13 plugins in the suite