focuspoint dla TYPO3: Inteligentne przycinanie obrazów

focuspoint zapobiega temu, aby obrazy przy responsywnym przycinaniu traciły ważne obszary motywu, rozszerzenie ustawia punkt fokusu, na którym crop pozostaje wyśrodkowany przy każdych proporcjach

Kto używa obrazów na responsywnej stronie, zna problem: portret pionowy, wyświetlany w teaserze tylko 200 pikseli wysokości, nagle pokazuje tylko szyję lub czoło. Zdjęcie krajobrazu, które pojawia się w obszarze hero jako wąski pasek, pokazuje niebo zamiast gór. Samo wyśrodkowywanie prowadzi do tego, że główne motywy są obcinane, bo matematyczne centrum rzadko pokrywa się z rzeczywistym centrum motywu. focuspoint rozwiązuje to, pozwalając redaktorom w backendzie ustawić punkt na obrazie, który musi pozostać widoczny przy każdym cropie. Wyjście dostosowuje się do wszystkich proporcji, bez konieczności tworzenia własnego wariantu obrazu dla każdego formatu.

Różnica w stosunku do klasycznego pipeline’u przetwarzania obrazów ze stałymi cropami jest duża. Zamiast dla desktop, tabletu i mobile pielęgnować osobno przyciętą wersję, istnieje jeden obraz oryginalny z jednym punktem fokusu i dowolną liczbę formatów wyjściowych, które system automatycznie oblicza. Dla redakcji z wieloma obrazami to dramatycznie redukuje czas pielęgnacji, a dla marketingu otwiera możliwość wprowadzania nowych proporcji obrazów bez dodatkowej pracy.

Typowe scenariusze zastosowania

Pierwszym klasycznym przypadkiem są strony osób i zespołów. Strona firmowa pokazuje portrety pracowników w różnych layoutach, jako okrągły avatar w nagłówku, jako kwadratową kafelkę na liście zespołu, jako szeroki format na stronie detalu. Bez punktu fokusu fotograf musi robić zdjęcia dokładnie wyśrodkowane lub redakcja zakłada dla każdego layoutu własny wariant. Z focuspoint redakcja ustawia raz punkt na twarzy i obraz działa we wszystkich kontekstach.

Drugim przypadkiem są zdjęcia produktów i pomieszczeń. Pośrednicy nieruchomości, hotelarze i handlowcy mebli pracują ze zdjęciami, w których właściwy motyw (sofa, widok z pokoju, detal produktu) nie leży w centrum obrazu. focuspoint pozwala wybrać dokładnie ten motyw i dba o to, żeby również na urządzeniach mobilnych nie został utracony.

Trzecie zastosowanie: teasery magazynowe i artykułowe. Redakcyjne obrazy artykułów mają często wyraźny punkt zainteresowania, na przykład prelegenta na scenie lub produkt w scenie. Przy listach teaserowych z miniaturami pionowymi ten punkt bez fokusu często byłby poza kadrem.

Architektura techniczna

focuspoint uzupełnia system TYPO3-FAL o dwa dodatkowe pola metadanych: focus_point_x i focus_point_y. Oba są pielęgnowane w backendzie przez element formularza, który pokazuje oryginalny obraz jako obszar wyboru. Redaktor klika na istotny punkt, a względna pozycja jest zapisywana. Technicznie to dwie wartości zmiennoprzecinkowe między zero a jeden, które opisują udział szerokości lub wysokości obrazu.

Przy renderowaniu we frontendzie punkt fokusu jest wartościowany przez ViewHelper Fluid. Zamiast zwykłego “f:image” ViewHelpera rozszerzenie używa własnego ViewHelpera, który wykonuje obliczanie cropu z uwzględnieniem punktu fokusu i tworzy obraz przez pipeline TYPO3-GIFBUILDER w żądanym rozmiarze docelowym. Wynik jest cache’owany i ponownie tworzony tylko przy zmianach.

Rozszerzenie współpracuje ze wszystkimi popularnymi formatami obrazów (JPEG, PNG, WebP, AVIF) i używa do właściwego przetwarzania obrazów ImageMagick lub GraphicsMagick, czyli tego samego stosu, na którym i tak buduje TYPO3. Dla Lazy Loading i integracji srcset nie ma konfliktów: ViewHelper może być zagnieżdżony w elementach picture z wieloma sources i dostarcza dla każdego breakpointu pasujący kadr.

Częste problemy i rozwiązania

Pierwszym problemem jest kolejność ViewHelperów. Kto wbudowuje focuspoint w istniejące szablony, które już pracują z “f:image” i ręcznymi argumentami cropu, musi umieścić ViewHelper focuspoint w miejscu standardu, a nie wokół niego. Inaczej obie logiki będą działać przeciwko sobie, a wynik zignoruje punkt fokusu. Rozwiązaniem jest porządna migracja wszystkich odniesień do obrazów w sitepackage na nowy ViewHelper.

Drugi problem: unieważnianie cache. Gdy redaktorzy zmieniają punkt fokusu, cache obrazów musi być unieważniony, inaczej nadal widzą stary kadr. TYPO3 normalnie czyści cache obrazów przy zmianach oryginalnego obrazu, a nie przy zmianach metadanych. Rozwiązaniem jest EventListener, który przy zmianach pól punktu fokusu celowo kasuje dotknięte Processed-Files.

Trzeci problem: niespójne wyniki między podglądem backendowym a frontendem. Podgląd w backendzie używa innej ścieżki renderowania niż frontend, co może prowadzić do małych odchyleń. Pragmatyczne rozwiązanie: w backendzie pokazywać tylko przybliżony podgląd i odsyłać redaktorów do frontendu jako referencji wiążącej.

Migracja i kompatybilność wersji

TYPO3 od wersji 9 przynosi natywny edytor przycinania w backendzie, który pozwala na pojedyncze warianty per obraz. Dla prostych przypadków to wystarcza. focuspoint różni się tym, że punkt fokusu jest ustawiany raz i automatycznie przepływa do wszystkich wariantów cropu, zamiast edytować każdy wariant pojedynczo. Kto ma wiele obrazów i mało czasu redakcyjnego, długoterminowo wychodzi lepiej z focuspoint.

Rozszerzenie jest kompatybilne z TYPO3 v11, v12 i v13. Przy upgrade ze starszych wersji struktura metadanych FAL i używane ViewHelpery powinny być doprowadzone do aktualnej składni.

Nową klasą alternatyw są wspierane przez AI rozpoznawania saliency, które automatycznie wyprowadzają punkt fokusu z treści obrazu. Te podejścia dodatkowo redukują pracę redakcyjną, bo redaktorzy nie muszą już sami ustawiać punktu, lecz tylko w wyjątkowych przypadkach korygować. Dla TYPO3 istnieją pierwsze integracje tej techniki, ale nie są jeszcze standardem i powinny być oceniane w zależności od projektu.

Gosign konfiguruje focuspoint i integruje go w architektury szablonów Fluid. Wspierana przez AI analiza layoutów designu proponuje optymalne presety cropu dla wszystkich breakpointów, dzięki czemu redaktorzy przy pielęgnacji obrazów nie muszą każdego formatu pojedynczo przetestowywać.