Documentation Archive


Apple TV Markup Language Reference

On This Page


Use the showcase template (showcaseTemplate) to display a row of images with descriptions associated with each image; for example, displaying a set of screenshots to promote a movie. Users can scroll between images. When an image comes into focus, the size of the image is increased to be slightly larger than the other images. Figure 18-1 shows the basic layout for a showcaseTemplate page. The default theme for a showcase template is dark.

Figure 18-1Showcase template image: ../Art/ATV_temps_showcase_2x.png

Main Elements of the Showcase Template

Listing 18-1 shows the main elements in TVML format, and Table 18-1 describes the main elements.

Listing 18-1showcaseTemplate TVML format
  1. <showcaseTemplate>
  2. <background>…</background>
  3. <banner>
  4. <title>…</title>
  5. <row>
  6. <button>…</button>
  7. </row>
  8. </banner>
  9. <carousel>
  10. <section>
  11. <lockup>…</lockup>
  12. </section>
  13. </carousel>
  14. </showcaseTemplate>

Table 18-1showcaseTemplate element descriptions

Element name



Background visual and audio.


Elements that describe what the page shows and provides buttons for user options.


A button providing user options.


Element containing images and text displayed in a row that the user navigates by swiping left or right on the remote.


An element containing several elements, such as an image and a title, so that it can be treated as a single element.


A group of elements displayed in a horizontal row.


A group of lockup elements.


Text that describes its containing element.

Showcase Template Example

Listing 18-2 shows the TVML for a showcaseTemplate example. Figure 18-2 shows the output for the example.

Listing 18-2showcaseTemplate example TVML
  1. <document>
  2. <showcaseTemplate mode="showcase">
  3. <background>
  4. <img src="path to images on your server/Car_Movie_1920x1080.png" />
  5. </background>
  6. <banner>
  7. <title>Scenes</title>
  8. <row>
  9. <button>
  10. <text>Slideshow</text>
  11. </button>
  12. <button>
  13. <text>Screensaver</text>
  14. </button>
  15. </row>
  16. </banner>
  17. <carousel>
  18. <section>
  19. <lockup>
  20. <img src="path to images on your server/Car_Movie_453x255_C.png" width="453" height="255" />
  21. <title>Scene 1</title>
  22. </lockup>
  23. <lockup>
  24. <img src="path to images on your server/Car_Movie_500x600.png" width="500" height="600" />
  25. <title>Scene 2</title>
  26. </lockup>
  27. <lockup>
  28. <img src="path to images on your server/Car_Movie_308x308_B.png" width="308" height="308" />
  29. <title>Scene 3</title>
  30. </lockup>
  31. <lockup>
  32. <img src="path to images on your server/Car_Movie_800x600.png" width="800" height="600" />
  33. <title>Scene 4</title>
  34. </lockup>
  35. </section>
  36. </carousel>
  37. </showcaseTemplate>
  38. </document>
Figure 18-2showcaseTemplate example output image: ../Art/showcaseTemplateSS_2x.png