Eine konsistente UX macht die Auswahl von Elementen intuitiver

Verbesserungen des Element Browsers und des Link Pickers in TYPO3 v11

Benni Mack

In dieser Serie haben wir bereits über die Verbesserungen des Seitenbaums in TYPO3 v11 berichtet, und zwar in dem Beitrag Skalieren und Ausblenden des Seitenbaums in TYPO3.

Es gibt eine Funktion, die einen eigenen Platz in unserer Liste der neuen Funktionen in TYPO3 v11 verdient, und das ist die Seitenbaum-Funktionalität innerhalb des Element-Browsers und des Link-Pickers.

Was ist der Element Browser?

Mit dem Element Browser können Sie eine oder mehrere Dateien oder Datensätze auswählen, die auf einer Seite eingebettet werden sollen. Da TYPO3 Millionen von Datensätzen verarbeiten kann, werden diese auf Seiten gruppiert - der Seitenbaum ist also der natürliche Filter der ersten Ebene.

Der Link Picker wird verwendet, um auf eine Seite, ein Asset, eine E-Mail oder eine externe URL zu verlinken. In der Regel wird die Linkauswahl innerhalb eines Inhaltstyps verwendet, wenn Sie einen Textausschnitt oder ein Bild verlinken, um auf eine Seite, eine Datei oder eine externe URL zu verweisen.

TYPO3 v11 Element Browser
TYPO3 v11 Element Browser

Beide Funktionen öffnen ein modales Fenster mit dem Seitenbaum (oder Ordnerbaum) auf der linken Seite. Die Verbesserungen des Seitenbaums, die in früheren Versionen von TYPO3 vorgenommen wurden, erstreckten sich nicht auf diese Darstellung des Baums. Als Redakteur, der mit vielen Inhalten oder vielen Seiten oder Ordnern arbeitet, war es klar, dass auch diese Komponenten aktualisiert werden mussten.

Alles Neue…

Mit TYPO3 v11 können Sie bei jedem Baum (auch im Link Picker und Element Browser) sicher sein, dass alle Funktionen, die Sie kennen und lieben gelernt haben, unterstützt werden:

  • SVG-basiertes Icon-Rendering - bedeutet, dass das Rendering innerhalb des Browsers superschnell ist
  • Tastatur Navigation
  • Skalierbare Navigationsbereiche - die auch komplett eingeklappt werden können
  • Dynamisches Laden von Unterseiten im Baum
  • Gespeicherter Zustand - der geöffnete/geschlossene Zustand von Teilen des Seitenbaums wird für den Hauptseitenbaum und den geöffneten Baum gemeinsam genutzt
  • Filtern und Suchen
  • Anzeige der Seiten-ID oder des Navigationstitels auf einer Seite
TYPO3 v11 Link Browser mit Tastatur Navigation
TYPO3 v11 Link Browser mit Tastatur Navigation

... und die Kirsche auf dem Sahnehäubchen!

TYPO3 v11 Seitenbaum im Record Selector - Anker
TYPO3 v11 Seitenbaum im Record Selector - Anker

Bonus! Es gibt zwei neue Funktionen, die im Hauptseitenbaum nicht verfügbar sind.

Der Link Picker verwendet jetzt ein "Anker"-Symbol, um direkt auf einen Ordner oder eine Datei zu verlinken. So können Sie jetzt mit dem Mauszeiger über eine Seite fahren und das Symbol im Baum auswählen, um einen Link zu einer Seite zu erstellen, oder auf den Seitentitel klicken, um einen direkten Link zu einem Inhaltselement zu erstellen.

Wenn Sie im Element-Browser eine Seite auswählen und das modale Feld neu geladen wird, bleibt der Seitenrahmen jetzt erhalten und nur der Inhaltsrahmen wird neu geladen. Dies ist eine Zeitersparnis für TYPO3-Installationen mit einer großen Baumstruktur. Die allgemeinen Leistungsverbesserungen in TYPO3 v11 bedeuten, dass die verfügbaren Elemente einer Seite im Element-Browser sofort angezeigt werden!

TYPO3 v11 Seitenbaum im Record Selector - Anker
TYPO3 v11 Seitenbaum im Record Selector - Anker

Überzeugen Sie sich selbst

Testen Sie den Link Picker und den Element Browser live im TYPO3 Demo Projekt unter demo.typo3.org.

Möchten Sie die neue Funktion ausprobieren?

Wenn Sie von diesen Verbesserungen genauso begeistert sind wie wir, nehmen Sie Kontakt mit uns auf und wir helfen Ihnen beim Update auf TYPO3 v11.

Let’s Connect