CSS-sized crops and focal points

WP SmartCrop crops images to fit dimensions set by your CSS. When a layout constrains an image’s width and height, it crops the image instead of stretching or squashing its proportions. The selected focal point stays in view and is positioned as close as possible to a rule-of-thirds composition.

The product material presents automatic focal-point selection as the Pro addition. The add-on documentation describes that option as in development, so its current availability is unclear. In the documented process, you choose an image’s focal point in the Media Library.

Choose images and set their display dimensions

After activating the plugin, upload an image to the Media Library and select it. Enable Smart Cropping, choose Edit Focal Point, click the area to keep in view, then apply the change. You can select a new focal point later or disable smart cropping for an individual image.

Insert the image into a page or post, then use the img.wpsmartcrop-image selector in your CSS to target it. Set display dimensions, including a height, so the crop can fit the layout. This can help when the same image appears in responsive cards, featured images, post content, or galleries with various aspect ratios.

Responsive image behavior

The plugin documentation describes support for WordPress responsive srcset functions, an automatic image preloader intended to prevent users from seeing partially loaded images, and lightweight processing for images in post content. It also describes legacy support for existing cropped thumbnail sizes, which can apply focal-point improvements without changes to existing CSS.

For modern browsers, the documented presentation uses semantic HTML5 and CSS3, with fallback to HTML4 and CSS2 for older browsers.

Installation and compatibility

Install from the WordPress dashboard by opening Plugins, choosing Add New, searching for WP SmartCrop, and activating it. Alternatively, download and upload the plugin directory to /wp-content/extensions/, then activate it from the Plugins page. Once active, follow the Media Library steps above, insert the image, and style it with the smart-cropping selector.

The documentation names W3 Total Cache, Wordfence, WPEngine’s EverCache, Better WordPress Minify, and Google’s PageSpeed Module among the caching and optimization utilities it describes as compatible. Its primary browser testing list includes Safari, Chrome, Firefox, and Microsoft Edge; the list is not exhaustive. The directory listing warns that the plugin has not been tested with the latest three major WordPress releases and may have compatibility issues on newer versions.

Theme developers should contact Bytes.co before integrating the plugin. The documentation describes a separate paid branch for theme developers, with integration changes and compatibility considerations.