DmfImageFocalPoint

DmfImageFocalPoint lässt dich pro Medien-Bild einen Fokuspunkt definieren (X/Y in Prozent), persistiert ihn in der Datenbank und wendet ihn in der Storefront automatisch via object-position-CSS an. Damit bleiben wichtige Bildinhalte auch beim Cropping in Listings, Detailseiten und Sliders sichtbar.

Schnellinfo

Composer-Paket	dmf/sw6-plugin-image-focal-point
Plugin-Klasse	Dmf\ImageFocalPoint\DmfImageFocalPoint
Namespace	Dmf\ImageFocalPoint
Shopware	>= 6.7.0
Speicherung	DB-gekoppelt an media_id, ein Fokuspunkt pro Bild

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

• Funktioniert ausschließlich für Bilder (nicht für Videos oder andere Medientypen).
• Genau ein Fokuspunkt pro Bild, gekoppelt an media_id.
• X- und Y-Koordinaten in Prozent (0–100).
• Reset auf Default jederzeit möglich.
• Werte landen automatisch in thumbnail.html.twig als Inline-object-position-Style und als CSS-Klasse.
• CSS-Klasse has-focal-point wird gesetzt, sobald X ≠ 50 oder Y ≠ 50 (also abweichend vom Default-Mittelpunkt).

Konfiguration

Im Admin unter Einstellungen → Plugins → Fokuspunkt für Bilder:

Feld	Typ	Default	Wirkung
focalPointCategories	entity-multi-select (media_folder)	–	Wählt die Bildkategorien (Medienordner), in denen Fokuspunkte unterstützt werden sollen. Leer = alle.
enableFocalPointUI	bool	true	Zeigt die Fokuspunkt-UI im Mediamanager an. Auf false deaktiviert die UI, ohne bestehende Werte zu verlieren.

Verwendung

1. Im Admin den Mediamanager öffnen.
2. Bild auswählen.
3. X- und Y-Koordinaten (0–100) eintragen oder per UI setzen.
4. Speichern.

In der Storefront erhält das Bild dann (falls Werte vom Default abweichen):

• ein Inline-style="object-position: X% Y%"
• die Klasse has-focal-point

Einschränkungen

Background-Images nicht unterstützt

Funktioniert ausschließlich mit <img> und object-fit-basiertem Cropping, nicht mit CSS background-image.

Parent-Container-Effekte

Bestimmte CSS-Eigenschaften an Eltern-Containern (z. B. display: flex mit Auto-Strecken) können object-position neutralisieren. Im Zweifel den Container an den object-fit-Erwartungen ausrichten.

Hinweise

• Default-Werte: X = 50, Y = 50 (zentriert).
• Reset stellt diese Defaults wieder her, has-focal-point wird dann nicht mehr ausgeliefert.
• Werte werden auf der MediaEntity exponiert, sodass eigene Twig-Templates direkt darauf zugreifen können.