imagemap dla TYPO3

imagemap czyni obrazy klikalnymi bez konieczności dotykania przez redaktorów HTML, właściwy wybór dla planów budynków, organigramów i grafik produktowych z wieloma hotspotami

Niektórych treści nie da się tak efektywnie wyjaśnić słowami jak obrazem, na którym różne obszary można kliknąć. Plan budynku, na którym każdy dział prowadzi do odpowiedniej strony zespołu. Organigram z linkami do poszczególnych profili osób. Zdjęcie produktu, w którym kliknięcie na koło, silnik lub kokpit pokazuje szczegóły techniczne. HTML od lat dziewięćdziesiątych przynosi do tego funkcjonalność Image-Map, ale żaden redaktor nie chce ręcznie wpisywać koordynat do pola tekstowego. imagemap dorabia tę funkcję w TYPO3 z wizualnym edytorem: redaktorzy klikają w backendzie na obraz, zaznaczają obszar i linkują go do strony docelowej.

Właściwą obietnicą rozszerzenia jest to, że orientacja przestrzenna i nawigacja są łączone. Zamiast kazać odwiedzającym skakać między widokiem graficznym a oddzielną listą linków, sama grafika staje się elementem nawigacyjnym. Dla contentu, który jest strukturalizowany geograficznie, hierarchicznie lub technicznie, oferuje to zdecydowanie bardziej intuicyjny dostęp.

Typowe scenariusze zastosowania

Pierwszym przypadkiem są plany sytuacyjne i przeglądy kampusu. Kliniki, uczelnie, tereny targowe i parki przemysłowe pracują z mapami przeglądowymi, na których poszczególne budynki lub obszary bezpośrednio linkują do stron informacyjnych. Klasyczną alternatywą byłaby lista z linkami, ale ta traci odniesienie przestrzenne. imagemap łączy orientację graficzną ze strukturą linków.

Drugim zastosowaniem są organigramy i hierarchie. Firma pokazuje strukturę swoich działów jako grafikę, każdy węzeł prowadzi do profilu danej kadry kierowniczej lub do strony działu. Dla redakcji to prostsze do pielęgnowania niż złożony layout tabelaryczny z linkowanymi komórkami.

Trzeci przypadek: grafiki produktowe z hotspotami funkcji. Produkty techniczne (maszyny, pojazdy, urządzenia) są pokazywane na rysunku rozstrzałowym lub przekroju, na którym najważniejsze komponenty są wyjaśniane przez kliknięcie. To zastępuje długą listę tekstu i prowadzi odwiedzających dokładnie tam, gdzie leży ich zainteresowanie.

Architektura techniczna

Klasyczne rozszerzenie imagemap dla TYPO3 pielęgnuje koordynaty jako strukturalne rekordy w bazie danych i renderuje we frontendzie element HTML-Map z pasującymi tagami area. W backendzie dostępny jest wizualny edytor, który pokazuje oryginalny obraz jako obszar wyboru i pozwala redaktorom rysować na nim prostokąty, okręgi lub wielokąty. Każdy obszar otrzymuje URL docelowy, tekst alternatywny i opcjonalnie tooltip.

Wyzwaniem technicznym jest responsywność. Klasyczna HTML-Map pracuje z absolutnymi koordynatami pikselowymi, które przy skalowanych obrazach już nie pasują. Rozszerzenia imagemap rozwiązują to przez JavaScript, który przy resize względnie przelicza koordynaty, lub używając SVG jako formatu wyjściowego. SVG jest przy tym czystym rozwiązaniem: koordynaty wektorowe skalują się naturalnie, obsługa zdarzeń i stylizacja przez CSS działają natywnie, a screen-readery mogą odczytywać elementy strukturalne.

Integracja odbywa się przez element treści w module strony. Redaktorzy wybierają obraz źródłowy z FAL, definiują hotspoty i opcjonalnie konfigurują globalne ustawienia jak standardowy kolor obszarów, efekty hover i zachowanie tooltipów. Wyjście można dostosować przez szablon Fluid w sitepackage, aby zapewnić zgodność z CI.

Częste problemy i rozwiązania

Pierwszym problemem jest dostępność. HTML-Image-Maps są dla screen-readerów sensownie czytelne tylko wtedy, gdy każdy tag area ma znaczący tekst alternatywny, a sama mapa jest rozpoznawana jako nawigacja strukturalna. Wielu redaktorów wypełnia alt-text bezmyślnie lub pusto, co czyni mapę bezużyteczną dla niewidomych użytkowników. Rozwiązaniem jest obowiązek redakcyjny opatrywania każdego hotspotu opisowym alt-textem i techniczna kontrola w sitepackage, która blokuje zapisywanie pustych tekstów.

Drugi problem: obsługiwalność na urządzeniach mobilnych. Hotspot, który w rozmiarze desktopowym mierzy 30 na 30 pikseli, jest na smartfonie malutki. Pragmatycznym rozwiązaniem jest alternatywa mobilna, która poniżej określonego breakpointu zastępuje obraz listą z tymi samymi celami. To wymaga logiki Fluid, która dostarcza dwie prezentacje i przełącza je przez CSS.

Trzeci problem: nakład pielęgnacji przy zmianach obrazu. Gdy obraz podstawowy (na przykład plan sytuacyjny lub zdjęcie produktu) zostaje wymieniony, wszystkie koordynaty muszą być ustawione na nowo, bo motywy się przesunęły. Pragmatyczne rozwiązanie: redaktorzy pracują ze stałym, wersjonowanym formatem obrazu i dokumentują siatkę koordynat, dzięki czemu przy aktualizacjach potrzebne są tylko minimalne korekty. Alternatywnie rozwiązanie oparte na SVG może od początku pracować względnie.

Migracja i kompatybilność wersji

Dla TYPO3 v11, v12 i v13 istnieje kilka rozszerzeń imagemap, które są aktywnie utrzymywane, często pod nieco innymi nazwami. Przy upgrade opłaca się spojrzeć, czy pierwotnie użyte rozszerzenie jest jeszcze rozwijane, czy sensowniejsza jest zmiana na bardziej nowoczesną alternatywę. Podejścia oparte na SVG średnioterminowo wyprą klasyczne HTML-Maps, bo działają lepiej zarówno responsywnie, jak i dostępnościowo.

Praktyczna wskazówka dla migracji: jeśli projekt istniejący zawiera dziesiątki imagemaps, opłaca się skrypt, który odczytuje istniejące rekordy koordynat i konwertuje je na ścieżki SVG. Przestawienie może wtedy nastąpić w jednym deploymencie, a rozszerzenie można wyłączyć. To redukuje dług techniczny i czyni grafiki przyszłościowymi.

Kto zaczyna dziś od zera, powinien preferować podejście SVG, albo przez rozszerzenie z wyjściem SVG, albo przez własny wzorzec sitepackage, który oferuje redaktorom wizualny edytor i wyświetla SVG we frontendzie. Gosign wdraża oba sposoby i doradza przy wyborze odpowiedniej architektury dla danego projektu.