---
title: oneupTemplate
framework: tvml
role: collectionGroup
path: tvml/oneuptemplate
---

# oneupTemplate

Creates a page that allows users to navigate between full-screen images.

## Overview

Overview Use the oneupTemplate element to display a single, full-screen image. Users can navigate left or right on the remote to select another image. Activating an up action on the remote will shrink the image and allow a description to be displayed. The following figure shows the basic layout for a oneupTemplate page. The default theme for a oneup template is dark.

Main Elements The following listing shows the main elements of the oneupTemplate element in TVML format. <oneupTemplate>     <section>         <lockup>             <img />             <title>…</title>             <row>                 …             </row>         </lockup>         <lockup>             …         </lockup>     </section> </oneupTemplate> Element Descriptions Example The following listing shows the TVML for a oneupTemplate example. The example shows a full screen image, with information about the image displayed along the bottom of the screen when the user zooms into the image. <document>     <oneupTemplate mode="oneup caption" handlesOverflow="true">         <section>             <lockup>                 <img src="path to images on your server/Car_Movie_1920x1080.png" />                 <title>WWDC Roadtrip</title>                 <row>                     <subtitle>San Francisco</subtitle>                     <subtitle>June 8, 2015</subtitle>                 </row>             </lockup>             <lockup>                 <img src="path to images on your server/Beach_Movie_1920x1080.png" />                 <title>Beach time</title>                 <row>                     <subtitle>Santa Cruz</subtitle>                     <subtitle>May 1, 2015</subtitle>                 </row>             </lockup>             <lockup>                 <img src="path to images on your server/Space_Movie_1920x1080.png" />                 <title>Spaced out</title>                 <row>                     <subtitle>Space station</subtitle>                     <subtitle>July 15, 2015</subtitle>                 </row>             </lockup>         </section>     </oneupTemplate> </document> The following figure shows the output for the above example:

## Topics

### Valid TVML Styles

- [tv-transition](tvml/tv-transition.md)

### Valid TVML Attributes

- [binding](tvml/binding.md)
- [layoutDirection](tvml/layoutdirection.md)
- [mode](tvml/mode.md)
- [prototype](tvml/prototype.md)
- [theme](tvml/theme.md)

## See Also

### Full-Page Templates

- [alertTemplate](tvml/alerttemplate.md)
- [catalogTemplate](tvml/catalogtemplate.md)
- [compilationTemplate](tvml/compilationtemplate.md)
- [descriptiveAlertTemplate](tvml/descriptivealerttemplate.md)
- [divTemplate](tvml/divtemplate.md)
- [formTemplate](tvml/formtemplate.md)
- [listTemplate](tvml/listtemplate.md)
- [loadingTemplate](tvml/loadingtemplate.md)
- [mainTemplate](tvml/maintemplate.md)
- [menuBarTemplate](tvml/menubartemplate.md)
- [paradeTemplate](tvml/paradetemplate.md)
- [productBundleTemplate](tvml/productbundletemplate.md)
- [productTemplate](tvml/producttemplate.md)
- [ratingTemplate](tvml/ratingtemplate.md)
- [searchTemplate](tvml/searchtemplate.md)