You can customize the lines in hero view using the Header element in the presentation map. You can also define the type of thumbnails for child elements using the ItemThumbnails element, or you can choose to have no thumbnails. The image below shows a hero view with 3 lines in the header and child element thumbnails.
How the Sonos app displays hero view
The Lines element in the presentation map determines how the container will display in the parent view (the Editorial View below). The Header element of the presentation map determines how the container will display its metadata in the header of the Hero View.
You can add up to three lines, using tokens or stringId attributes, as described in the Configure lines section in Configure display types. For example, here’s the presentation map from the example above:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<Presentation> <PresentationMap type="DisplayType"> <DisplayType id="PlaylistView"> <DisplayMode>HERO</DisplayMode> <Lines> <Line token="title"/> <Line token="artist"/> <Line token="summary"/> </Lines> <Header> <Line token="title"/> <Line token="artist"/> <Line token="summary"/> </Header> <ItemThumbnails source="albumArtUri"/> </DisplayType> </PresentationMap </Presentation> |
Sonos displays lines in different styles
The Sonos app displays lines in three different styles, lets call them A, B, and C. Style A corresponds to “Header Line 1” or “Title of Playlist A” in the images above, style B corresponds to “Header Line 2” or “Artist of Playlist A”, and style C corresponds to “Header Line 3” or “Summary for Playlist A”.
The lines will appear in the order that you specify in the presentation map. If the view has three lines, the first line will use style A, the second line will use style B, and the third will use style C. Style C is given preference for long content and the Sonos app dynamically truncates styles A and B, first by truncating the text in style B, then in style A. If the view has two lines, it will display the first line using style A and the second line using style C. If the view has one line, it will use style A. You should test your content on the Sonos app for mobile devices to see how it looks.
Default hero view
The default lines for a hero view are title and summary. These are included if you use a HERO display mode and do not specify a header.
Thumbnails
The ItemThumbnails element is the area within each of the child elements, to the left of the metadata strings. This space can include either track numbers, album art, or nothing, set using the following values:
albumArtUri– for album art,trackNumber– for track numbers, which are actually images of numbers,none– for nothing (metadata will be shifted to the left).
You set the ItemThumbnails element on the display mode of the container that they are shown in as they need to be consistent for all items in a given container. However, the metadata lines for items within a container can be different and therefore, can be defined on the display type of the items themselves. For example, if you have a hero view with two playlist children elements, three albums, and a track, the lines that will display will be determined by the display types for the children elements.
Here’s an example using an ItemThumbnails source of albumArtUri:
|
1 2 3 4 5 6 7 8 9 |
<DisplayType id="PlaylistView"> <DisplayMode>HERO</DisplayMode> <ItemThumbnails source="albumArtUri"/> <Lines> <Line token="title"/> <Line token="artist"/> <Line token="summary"/> </Lines> </DisplayType> |
Default thumbnails
The default for ItemThumbnails is none (no album art) if you do not specify an ItemThumbnails element.
Default album view
The default “album” itemType displays albums in a hero view with track numbers and two-lines of text:
|
1 2 3 4 5 |
<Header> <Line token="title"/> <Line token="artist"/> </Header> <ItemThumbnails source="trackNumber"/> |
For all other display modes, ItemThumbnails elements use albumArtUri by default.