DmfImageFocalPoint

DmfImageFocalPoint lets you set one focal point per media image (X/Y in percent), persists it in the database, and automatically applies it in the storefront via object-position CSS. Important image content stays visible across listings, detail pages, and sliders, no matter the crop.

Quick facts

Composer package	dmf/sw6-plugin-image-focal-point
Plugin class	Dmf\ImageFocalPoint\DmfImageFocalPoint
Namespace	Dmf\ImageFocalPoint
Shopware	>= 6.7.0
Storage	DB, linked to media_id, one focal point per image
Repository	dmf / plugin-image-focal-point

Installation

composer require dmf/sw6-plugin-image-focal-point
bin/console plugin:refresh
bin/console plugin:install --activate DmfImageFocalPoint
bin/console cache:clear
bin/console administration:build

Features

• Works only for images (not videos or other media types).
• Exactly one focal point per image, linked to media_id.
• X and Y coordinates in percent (0–100).
• Reset to default any time.
• Values automatically pass into thumbnail.html.twig as inline object-position styles and a CSS class.
• Adds the has-focal-point CSS class when X ≠ 50 or Y ≠ 50 (i.e. anything off-centre).

Configuration

In the admin under Settings → Plugins → Image focal point:

Field	Type	Default	Effect
focalPointCategories	entity-multi-select (media_folder)	–	Pick the media folders that support focal points. Empty = all.
enableFocalPointUI	bool	true	Show the focal-point UI in the media manager. Set false to hide the UI without dropping existing values.

Usage

1. Open the Media Manager in the admin.
2. Select an image.
3. Enter X and Y coordinates (0–100) or set them via the UI.
4. Save.

In the storefront the image then receives (when values differ from defaults):

• inline style="object-position: X% Y%"
• the class has-focal-point

Limitations

Background images not supported

Works only for <img> and object-fit-based cropping, not for CSS background-image.

Parent container side effects

Certain parent container styles (e.g. display: flex with auto-stretch) can neutralise object-position. When in doubt, align the container with object-fit expectations.

Notes

• Default values: X = 50, Y = 50 (centered).
• Reset restores these defaults, has-focal-point is then no longer rendered.
• Values are exposed on MediaEntity, so custom Twig templates can read them directly.