bw_focuspoint_images - Extension für responsive Imagemaps mit TYPO3
Imagemaps sind eine Technik, um Teile eines Bildes klickbar zu machen. Das kann sinnvoll sein, um beispielsweise ergänzende Informationen als Text zu hinterlegen oder den Bereich zu verlinken.
Das grundlegende Prinzip ist alt und existiert schon viele Jahre. Allerdings funktionieren die klassischen Ansätze nicht mehr, wenn es um responsive Bilder geht. Doch genau das ist der aktuelle Stand der Technik. Responsive Bilder sind nötig, damit sich die Bilder in ihrer Größe an die Möglichkeiten des jeweiligen Endgerätes anpassen können.
Die Herausforderung dabei ist, dass sich die klickbaren Bereiche auch entsprechend anpassen müssen. Das läßt sich noch gut realisieren aber was ist, wenn diese Imagemaps durch einen Redakteur im TYPO3 gepflegt werden sollen?
TYPO3-Extension für responsive Imagemaps
Aus den konkreten Anforderungen eines Kunden heraus entwickelten wir eine TYPO3-Extension, die genau diese Anforderungen abbildet. Der Redakteur kann im TYPO3-Backend ein Bild hochladen und dann im Content-Element als Basis für seine Imagemap verwenden. Hier kann er dann mehrere aktive Flächen anlegen und mit einem Namen und einer Beschreibung versehen. Auch eine Verlinkung ist möglich.
Weitere Einstellungen sind durch den Redakteur nicht notwendig.
Auch SVG-Animationen möglich
Mit der TYPO3-Extension bw_focuspoint_images sind auch Animationen per SVG möglich. Die Fokus-Bereiche werden dann über eine SVG-Animation bewegt. Die zusätzlichen Informationen sind dann in der Nähe des Bildes angezeigt. Das erfolgt mit einer gewissen Verzögerung, damit die Änderungen besser erkennbar sind.
Hinweise für TYPO3-Administratoren
Installation der TYPO3-Extension
Die Installation der Extension erfolgt in mehreren Schritten:
Installation über composer
composer require blueways/bw-focuspoint-images- Einbindung des TypoScripts
Aktivieren Sie die Extension im TYPO3-Extensionmanager und binden Sie das statische TypoScript ein. Alternativ binden Sie Setup und Konstanten manuell ein.
- Definieren Sie Ihre eigenen Wizard-Felder
Es gibt keine voreingestellten Felder! Ein Beispielsetup finden Sie weiter unten.
Benutzung der Extension
Fügen Sie das Content-Element auf einer beliebigen Seite ein. Danach können Sie das zu nutzende Bild einbinden und Ihre Fokusbereiche definieren.
Konfiguration
Setup
Um die Felder im Wizard zu definieren, können Sie die folgenden TypoScript-Einstellungen als Vorlage verwenden. Sie können bei den Inputs zwischen text, textarea und select wählen.
Das hier verwendete Setup ist auch die Basis für die oben gezeigte Darstellung aus dem TYPO3-Backend.
plugin.tx_bwfocuspointimages.settings.fields { name { title = LLL:EXT:bw_focuspoint_images/Resources/Private/Language/locallang_db.xlf:wizard.fields.name type = text } description { title = LLL:EXT:bw_focuspoint_images/Resources/Private/Language/locallang_db.xlf:wizard.fields.description type = textarea } color { title = LLL:EXT:bw_focuspoint_images/Resources/Private/Language/locallang_db.xlf:wizard.fields.color type = select options { red = LLL:EXT:bw_focuspoint_images/Resources/Private/Language/locallang_db.xlf:wizard.fields.color.red green = LLL:EXT:bw_focuspoint_images/Resources/Private/Language/locallang_db.xlf:wizard.fields.color.green blue = LLL:EXT:bw_focuspoint_images/Resources/Private/Language/locallang_db.xlf:wizard.fields.color.blue } } link { title = LLL:EXT:bw_focuspoint_images/Resources/Private/Language/locallang_db.xlf:wizard.fields.link type = link } }
Konstanten
Um die Templates zu überschreiben können Sie folgende Einstellungen nutzen:
plugin.tx_bwfocuspointimages { view { templateRootPath = partialRootPath = layoutRootPath = } }
Tipp: Um das Standard-Rendering von fluid_styled_content zu nutzen, setzen Sie den Layout- und Partial-Pfad auf Ihe syles.content Einstellungen. Nutzen Sie dann das Default-Layout in ihrem FocuspointImage Template-File
Für TYPO3-Entwickler
Die TYPO3-Tabelle “sys_file_references” wird um die Spalte “focus_points” erweiters. Dieses Feld wird genutzt, um die Einstellungen aus dem Backend zu speichern. Die Speicherung erfolgt im JSON-Format.
Um den Editor auch in anderen Inhaltselementen mit FAL-Images zu verwenden, können Sie das folgende TCA verwenden:
$GLOBALS['TCA']['tt_content']['types']['your_list_type']['columnsOverrides'] = [ 'assets' => [ 'config' => [ 'foreign_types' => [ \TYPO3\CMS\Core\Resource\File::FILETYPE_IMAGE => [ 'showitem' => 'focus_points' ] ] ] ] ];
Für die Dekodierung und leichtere Benutzung der Punkte innerhalb der Fluid-Templates empfiehlt sich der “FocuspointProcessor”:
tt_content.your_custom_element { dataProcessing { 10 = Blueways\BwFocuspointImages\DataProcessing\FocuspointProcessor 10 { references.fieldName = assets as = image } } }
Achtung: Bei diesen Codeschnipseln wird davon ausgegangen, dass Referenzen über die “assets”-Spalte abgebildet werden. Das können Sie ggf. an Ihre konkreten Anforderungen anpassen.
Wie geht es weiter?
Mögliche Erweiterungen und Verbesserungen sind:
- weitere Frontend-Beispiele (z.B. SVG Animationen, Nutzung von Canvas-Elementen,...)
- erweiterte Konfiguration des LinkBrowsers
- DataProcessor, um Daten in den Wizzard einzufügen
- Bessere Konfigurationsmöglichkeiten für eigenen tt_content-Elemente (z.B. Templateauswahl, weitere Display-Konfigurationen)
- etc...
Mithilfe bei der Extensionentwicklung
Sie sind herzlich eingeladen, an der Weiterentwicklung teilzunehmen. Das git-Repo befindet sich hier: https://bitbucket.org/blueways/bw_focuspoint_images/
Der TER-Link https://extensions.typo3.org/extension/bw_focuspoint_images/
TYPO3-Extensionentwicklung bei der blueways
Bei der blueways verfügen wir über viele Jahre Erfahrung in der Entwicklung von TYPO3-Extensions. In zahlreichen Kundenprojekten sind viele individuelle Lösungen entstanden. Einen Teil davon möchten wir der Community zur Verfügung stellen. Wir sind davon überzeugt, dass OpenSource nur durch Geben und Nehmen funktioniert und nachdem wir viel genommen haben, können wir nun auch etwas zurückgeben.
Wenn Sie Fragen zur TYPO3-Extensionentwicklung haben oder eine spezielle TYPO3-Extension benötigen, dann nehmen Sie einfach Kontakt mit uns auf.