Choosing a template for live tiles in Internet Explorer 11
Use templates to define how live tiles look on the Windows 8.1 Start screen.
What's a live tiles template?
Templates are available for medium, wide, and large tiles (150x150, 310x150, and 310x310), and define how text and images are displayed live tiles. Internet Explorer 11 supports the same Windows template catalog as Windows Store apps. Live tiles have been available for Windows Store apps since Windows 8, but are now available for websites displayed in Windows 8.1 IE11 pages.
For Windows 8.1, the template names changed slightly. When using templates for both IE11 and Windows Store apps you'll want to use the newer names that are listed in the Tile Template Catalog. The newer names all have the dimensions of the tile in their title. For example, TileSquare150x150Text02 is newer than TileSquareText02.
Declaring a template
Templates are declared in an tile schema XML file and can contain up to three tile sizes. Here's an example of a live tile using simple text square template:
<tile>
<visual lang="en-US" version="2">
<binding template="TileSquare150x150Text02"
<text id="1">Text Field 1 (larger text)</text>
<text id="2">Text Field 2</text>
</binding>
</visual>
</tile>
Each tile size you want to support on the Start screen needs a binding element that includes the template, text, and images as child elements. For more info, see the binding element reference content. The text element can be one or more strings of text. The text element requires an id attribute for each unique line of text, and optionally can include a lang attribute. For more info, see the text element reference content
This example shows how to add an image:
<tile>
<visual lang="en-US" version="2">
<binding template="TileWide310x150ImageAndText01"
<image id="1" src="images/image1.png" alt="alt text"/>
<text id="1">Text Field 1</text>
</binding>
</visual>
</tile>
This example provides an image, alt text, and a single text string. The image element requires an id and a src attribute. Optionally you can add alt text for users of assistive technologies. For more info, see the image reference content.
The TileWide310x150ImageAndText01 template provides a wide image at the top of the tile, with a string of regular text that can be wrapped over two lines. When you choose an image for a tile, it must be under 200kb in file size and less than or equal to 1024x1024 pixels. For more info about choosing an image size, see Tile and toast image sizes.
Some templates offer more than one line of text. This example shows a template that uses five lines of text:
<tile>
<visual lang="en-US" version="2">
<binding template="TileWide310x150Text05"
<text id="1">Text Field 1</text>
<text id="2">Text Field 2</text>
<text id="3">Text Field 3</text>
<text id="4">Text Field 4</text>
<text id="5">Text Field 5</text>
</binding>
</visual>
</tile>
About Template formats
There are two families of templates: square and wide. Square templates come in medium and large sizes. The small size tile doesn't display notifications, so it doesn't have any templates. Wide tiles are rectangular and a combination of medium in height and large in width. Each template can display text, or images and text.
Most of the image/text templates put the text part on the same tile as the image. However, templates with Peek in the title alternately switch between image and text on the tile.
This table describes a few of the many templates you can use to create live tiles. For more templates, see the Tile Template Catalog.
| Windows 8.1 template | Description |
|---|---|
| TileSquare150x150Text02 | Use for shorter titles and a small description. |
| TileSquare150x150Text04 | Use for long titles. |
| TileSquare150x150PeekImageAndText02 | Switches between an image and text on the tile. Use for short titles and a small description. |
| TileSquare150x150PeekImageAndText04 | Switches between an image and text on the tile. Use for long titles and an image. |
| TileWide310x150Text03 | One string of large text wrapped over a maximum of three lines. Use for medium length titles. |
| TileWide310x150Text04 | Regular sized text wrapped over a maximum of five lines. Use for long titles. |
| TileWide310x150Text09 | Contains a single line of large title text and a wrapped string of regular text. Use for short titles and some description. |
| TileWide310x150ImageAndText01 | Contains an image and small wrapped text. Use for big images and medium titles. |
| TileWide310x150SmallImageAndText01 | Contains a small image on the left, and large text wrapped for a maximum of three lines. Use for a small image and medium titles or descriptions. |
| TileWide310x150PeekImageAndText01 | Switches between a large image and a string of regular text wrapped over a maximum of five lines on the tile. Use for a large image and long titles or descriptions. |
| TileWide310x150PeekImage01 | Switches between a large image, and a large title and a string of regular text wrapped over a maximum of four lines on the tile. Use for an image with a short title and some description. |
When choosing a template in the tile catalog for IE11, use only version 2 template names, and you don't need the fallback info.