Contents

showcaseTemplate

Displays images the user can navigate between.

Overview

Use the showcaseTemplate element 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. The following figure shows the basic layout for a showcaseTemplate page. The default theme for a showcase template is dark.

[Image]

Main Elements

The following listing shows the main elements of the showcaseTemplate element in TVML format.

<showcaseTemplate>
    <background>…</background>
    <banner>
        <title>…</title>
        <row>
            <button>…</button>
        </row>
    </banner>
    <carousel>
        <section>
            <lockup>…</lockup>
        </section>
    </carousel>
</showcaseTemplate>

Element Descriptions

background

Background visual and audio.

banner

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

button

A button providing user options.

carousel

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

lockup

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

row

A group of elements displayed in a horizontal row.

section

A group of lockup elements.

title

Text that describes its containing element.

Example

The following listing shows the TVML for a showcaseTemplate example.

<document>
    <showcaseTemplate mode="showcase">
        <background>
            <img src="path to images on your server/Car_Movie_1920x1080.png" />
        </background>
        <banner>
            <title>Scenes</title>
            <row>
                <button>
                    <text>Slideshow</text>
                </button>
                <button>
                    <text>Screensaver</text>
                </button>
            </row>
        </banner>
        <carousel>
            <section>
                <lockup>
                    <img src="path to images on your server/Car_Movie_453x255_C.png" width="453" height="255" />
                    <title>Scene 1</title>
                </lockup>
                <lockup>
                    <img src="path to images on your server/Car_Movie_500x600.png" width="500" height="600" />
                    <title>Scene 2</title>
                </lockup>
                <lockup>
                    <img src="path to images on your server/Car_Movie_308x308_B.png" width="308" height="308" />
                    <title>Scene 3</title>
                </lockup>
                <lockup>
                    <img src="path to images on your server/Car_Movie_800x600.png" width="800" height="600" />
                    <title>Scene 4</title>
                </lockup>
            </section>
        </carousel>
    </showcaseTemplate>
</document>

The following figure shows the output for the above example:

[Image]

Topics

Valid TVML Attributes

See Also

Full-Page Templates