Create hero views

You can customize the lines in hero view from the Browse Options page in the Integration Submission Form. You can also define the type of thumbnails for child elements using the Image Replacement Rules - Browse section, or you can choose to have no thumbnails.

The image below shows a hero view with a header title and subtitle, along with child element title and subtitles.

How the Sonos app displays hero view

The Item fields on the Browse Options page determines how the container will display in the parent view. The Type field determines how the container will display its metadata in the header of the Hero View.

You can add up to three lines of text using the Title, Subtitle, and Summary fields for either the header or item positions.

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 Text Title" or "Item Text Title" on the Browse Option page, style B corresponds to "Header Text Subtitle" or "Item Text Subtitle", and style C corresponds to "Header Text Summary" or "Item Text Summary".

The lines will appear in the style according to the field they are entered in. You should test your content on the Sonos app for mobile devices to see how it looks.

Item Adornment

The Item Adornment field controls the area within each of the child elements, to the left of the text. The adornment can be ordinal (track numbers), image (album art), or none.

You set the item adornment 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 text 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.

Default item adornment

If you do not specify an item adornment, it will default to "None."