Consistent UX makes selecting items more intuitive
Improvements to the Element Browser and Link Picker in TYPO3 v11
Previously in this series, we covered the improvements TYPO3 v11 brought to the Page Tree in the post, Resizable Navigation Area in TYPO3.
There is one feature in particular that deserves its own shiny spot in our list of new features in TYPO3 v11, and that is the tree functionality within the Element Browser and the Link Picker.
This post is part of our TYPO3 Version 11 Series. We’re shining a spotlight on some of the really useful features in version 11 and why you should upgrade.
- Link Sharing in TYPO3 v11
- Direct Downloads of Assets and Media
- New CLI commands and better automation for Continuous Integration
- Resizable Navigation Area in TYPO3
- Multi-factor authentication
- Search & Filter for Folders and Assets
- Limit allowed attempts for logins in TYPO3 v11
- Show Columns Selector in List View and File List View
- Multi Record Selection
- Keyboard Navigation for Module Menu & Context Menu
- Workspaces Improvements
- Consistent UX makes selecting items more intuitive
- New TCA types in TYPO3 version 11
What is the Element Browser?
The Element Browser lets you choose one or more files or records to embed on a page. Since TYPO3 can handle millions of records, they are grouped on pages - thus, the page tree is the natural first-level filter.
The Link Picker is used to link to a page, an asset, an email, or an external URL. Typically, the Link Picker is used within a Content Type when you link a text snippet or an image to point to a page, file or external URL.
Both features open a modal window with the page tree (or folder tree) on the left hand side. Page tree improvements made in previous versions of TYPO3 did not extend to this representation of the tree. As an editor working with lots of content, or many pages or folders, it was clear that these components also needed to be updated.
Everything new…
With TYPO3 v11, whenever you encounter a tree (including in the Link Picker and Element Browser), you can be confident that all the features you have come to know and love are supported:
- SVG-based icon rendering - means rendering within the browser is super-fast
- Keyboard navigation
- Resizable navigation areas - which can also be collapsed completely
- Dynamic loading of tree subpages
- Stored state - the open/closed state of parts of the pagetree are shared across the main page tree and the opened tree
- Filtering and searching
- Display of the Page ID or the navigation title on a page
… and the cherry on top!
Bonus! There are two new features that aren't available in the main page tree.
The Link Picker now uses an "anchor" icon to link to a folder or file directly. Thus, you can now hover over a page when linking on a page, and select the icon within the tree to link to a page, or click on the page title to link to a content element directly.
In the Element Browser, when you select a page and the modal box reloads, the page frame is now kept and only the content frame is reloaded. This is a time-saver for TYPO3 installations with a large tree structure. The overall performance improvements in TYPO3 v11 mean that the available items of a page within the Element Browser are shown instantly!
See for yourself
Try out the Link Picker and Element Browser live in the TYPO3 Demo project at demo.typo3.org.
Want to try out the new feature?
If you’re as excited about these improvements as we are, get in touch and we’ll help you update to TYPO3 v11.