Export (0) Print
Expand All
3 out of 4 rated this helpful - Rate this topic

Custom HTML galleries

Expression Studio 2.0

The layout and appearance of an HTML gallery is called a theme. Although Expression Media includes several prebuilt themes, you can create custom galleries or modify existing ones so that your gallery themes better match your creativity or media. Creating or modifying theme templates requires that you have a good understanding of HTML. A template is a basic HTML page that contains one or more field phrases, such as (iView:Catalog). Expression Media replaces those phrases with the actual corresponding content or information in your catalog when you export the web page. Theme templates in Microsoft Expression Media are created from standard HTML and you can edit them in any HTML editor, such as Microsoft Expression Web or any other third-party web design tool or text editor.

If you want to use your custom galleries in Expression Media, the templates that make up a theme must contain specific Expression Media HTML tags. These tags are placeholders and are replaced by specific text when the gallery is created. Your custom templates appear in the Theme menu in the HTML Galleries dialog box when you restart Expression Media. An example of an HTML tag specific to Expression Media is (iView:Catalog), which is replaced by the name of the catalog during the export process. This section provides an overview and guidance for creating and modifying themes, templates, and tags.

Cc294947.alert_tip(en-us,Expression.10).gifTip:

A good way to learn to create a template is to make a copy of an existing template, rename it, and modify different fields or the design.

Expression Media uses themes to help organize HTML gallery templates. A theme is stored in a folder that contains index and media HTML templates. If you store both templates in one folder, it is much easier to share a new gallery design with other users. A theme folder also contains an Assets folder for related HTML graphics and an image that is used as a preview of the theme in the HTML export dialog box. The preview is a 200x120 pixel JPEG named About.jpg.

In the Example HTML folder in Documentation is the All Fields theme. Copy this theme to one of the following paths to use it in Expression Media:

  • C:\Documents and Settings\<username>\Application Data\Expression Media 2\Plug-ins\HTML Templates (Windows XP)

  • C:\Users\<username>\AppData\Roaming\Expression Media2\Plug-ins\HTML templates (Windows Vista)

Expression Media uses templates to generate HTML galleries of your catalogs. The Expression Media tags in a template represent the part of the template that Expression Media replaces with your catalog content when it generates the gallery.

Expression Media can generate two types of HTML pages: index and media. The index page lists all of the media in your catalog, or a subset, much like the Thumbnail view. The media page is specific to a single catalog item and typically contains a larger image or information about that catalog item, much like Media view. You can access the media page by clicking a thumbnail image in the index page.

You can create templates for both index and media pages. Expression Media stores both types of templates in the same folder. The name of this folder is the name of the HTML gallery theme that is displayed in the HTML Gallery dialog box.

Tags in Expression Media control a range of features, from media rendering and page structure to navigation and extracting and repurposing metadata information. Most media tags are substituted by a single number or string of text that Expression Media extracts from the catalog data. All you need to do is to position a tag anywhere in an HTML page. It will get substituted with content when the gallery is exported.

For example, in the code snippet later in this topic, note the tag. When Expression Media generates this template, it substitutes that tag with the actual title of the Expression Media catalog file.

Most tags have no placement rules. You can include them anywhere in your HTML page. However, some exceptions exist, as described in the Expression Media tags that should be put inside HTML tags section later in this topic.

Cc294947.alert_note(en-us,Expression.10).gifNote:

For all tags, you must use the syntax and spelling exactly as described in the tag tables in HTML Engine Directive tags.

Two special kinds of tags to note are HTML Engine Directive and Theme Field tags. These tags are called variable tags. They control the size of images on index and media pages and also define which values are displayed in a particular field in a dialog box. For more information about these types of tags, see HTML Engine Directive tags.

As mentioned previously, the best way to learn how to create custom HTML galleries is to copy an existing template and modify it. However, you can use the code samples later in this topic as a guideline for additional experimentation.

To construct an index page, you can use field phrases to mark the start and end of rows and columns that contain thumbnails of your media content. These phrases are (iView:IndexColStart), (iView:IndexColEnd), (iView:IndexRowStart), and (iView:IndexRowEnd).

The following is a simple example using field phrases:

<html>
<head>
<title>(iView:Catalog)</title>
</head>

<!-- iView HTML Engine Directives
iView:InThumbSize 128
iView:InThumbColumns 3
iView:InThumbRows 2
-->

<body>
<p>(iView:Catalog)<br>(iView:Index)</p>
(iView:IndexRowStart)
(iView:IndexColStart) (iView:Preview) (iView:IndexColEnd) <br>
(iView:IndexRowEnd)
</body>
</html>

When used with the defined directives of three columns and two rows, this template might produce the following index page:

<html>
<head>
<title>Favorite Photos</title>
</head>

<!-- iView HTML Engine Directives
iView:InThumbSize 128
iView:InThumbColumns 3
iView:InThumbRows 2
-->

<body>

<p>Favorite Photos<br></p>
<a href="source/image1.htm"><img src="preview/image1.jpg" alt="image1"
width="96" height="128" border="0" /></a>
<a href="source/image2.htm"><img src="preview/image2.jpg" alt="image2"
width="96" height="128" border="0" /></a>
<a href="source/image3.htm"><img src="preview/image3.jpg" alt="image3"
width="96" height="128" border="0" /></a>
<br>
<a href="source/image4.htm"><img src="preview/image4.jpg" alt="image4"
width="128" height="96" border="0" /></a>
<a href="source/image5.htm"><img src="preview/image5.jpg" alt="image5"
width="128" height="96" border="0" /></a>
<a href="source/image6.htm"><img src="preview/image6.jpg" alt="image6"
width="96" height="128" border="0" /></a>
<br>
</body>
</html>

The media page can contain the original cataloged item using (iView:OriginalURL) or a JPEG image converted from a cataloged item using (iView:Media). When you are using (iView:Media), the size of the image generated for the Media page is controlled by the (iView:InMediaWidth) and (iView:InMediaHeight) directives, which must be in the Media template. However, these directives can be in any part of the media page. The following is an example of a directive code:

<!-- iView HTML Engine Directives
iView:InMediaWidth 800
iView:InMediaHeight 600
-->

These directives would proportionally scale the images so that the maximum height of the image is 800 pixels and the maximum width is 600 pixels. Also, any template that has media width and height directives will populate the corresponding fields in the HTML Options dialog box when you select the theme where the directives appear. For example, the preceding directives will populate the following corresponding fields:

Results of directive code

Cc294947.eca02780-170c-4d6f-a03c-e17eb6635f73(en-us,Expression.10).png

You can still change the final size from the previous dialog box without having to go back into the template, but be aware that changing the size might break some aspect of the web page design.

Here is an example of a simple HTML media template:

<html>
<head>
<title>Catalog: (iView:Catalog)</title>
</head>

<!-- iView HTML Engine Directives
iView:InMediaWidth 800
iView:InMediaHeight 600
-->

<body>
<p>Simple Media Template</p>
<p>Image:</p>
<p>(iView:Media)</p>
<p>File Name:</p>
<p>(iView:Filename)</p>
</body>
</html>

The preceding example contains three Expression Media tags: (iView:Catalog), (iView:Media), and (iView:Filename). During export, these three tags get replaced by the catalog name, the media image, and the image file name, respectively.

Cc294947.alert_note(en-us,Expression.10).gifNote:

The media image is a JPEG converted for the HTML gallery and is proportionally scaled to fit the (iView:InMediaWidth) and (iView:InMediaHeight) settings.

Here is another example of a simple media page. The image that is used here will be identical to the original file, with the same format, size, annotations, and ICC profile.

<html>
<head>
<title>Media page using an unconverted catalog image</title>
</head>
<body>
<p><img src="(iView:OriginalURL)" width="(iView:OriginalWidth)"
height="(iView:OriginalHeight)"></p>
</body>
</html>

This section contains examples of all the tags that you can use to create and modify HTML galleries in Expression Media.

You can put most of the tags anywhere in the HTML code, but some special tags must be put inside HTML tags. The first set of the tags that follow consists of these special tags. The subsequent tables describe the remaining tags and indicate, where applicable, if those tags are for media or index pages.

Expression Media tags that should be put inside HTML tags

Cc294947.alert_note(en-us,Expression.10).gifNote:

For the following tags to work, you must put them inside HTML tags.

  • (iView:Running), (iView:Total)   Expression Media replaces these tags with the sequential number of the file being displayed and the total number of items that you exported. For example: Item: (iView:Running) of (iView:Total) generates a display similar to "Item: 5 of 10," where the numbers represent the file that you are viewing and the total number of files available to view.

  • (iView:Date), (iView:Time)   Expression Media replaces these tags with the date and time that the gallery was exported. For example:

    <b>Gallery Created:</b> (iView:Date), (iView:Time)
    
  • (iView:Preview) (index page)   Expression Media replaces these tags with JPEG thumbnails. In an index template, this tag must be put in a table with one row and one column. For example:

    <table border="10"><tr><td><p>(iView:Preview)</p></td></tr></table>
    

    Expression Media expands the table according to the number of rows and columns defined by the Index Table settings in the HTML Export dialog box, or by the number of rows and columns defined by HTML Engine Directives.

  • (iView:Index) (index page)   The number of rows and columns in each index page is defined by the Index Table settings in the HTML Export dialog box. If you have an index table set at 5x4, and your catalog contains 100 images, Expression Media will split your index page into 5 index pages that contain 20 images each. This tag instructs Expression Media to generate a composite display and links to the multiple index pages. For example, one link will read "1-20," the next will read "21-40," and so on. This tag contains a blank value if only one index page is generated. This tag is optional and must be put outside the table that contains (iView:Preview).

  • (iView:Media)   Expression Media replaces this tag with the media as it is displayed in the Media view of your catalog. If you are using the default template, this tag will export the actual media (image), and also any fields you have displayed in Media view. See a media page for an example.

  • (iView:GoNext), (iView:GoPrevious)   Expression Media replaces this tag with the hyperlink of the next media HTML page. You can add this tag as the link inside an <a href> tag. For example:

    <a href="(iView:GoNext)">Next</a>
    
  • (iView:GoIndex)   Expression Media replaces this tag with the hyperlink of the referring index HTML page. You can add this tag as the link inside an <a href> tag. For example:

    <a href="(iView:GoIndex)">Back to Index</a>
    
Did you find this helpful?
(1500 characters remaining)
Thank you for your feedback

Community Additions

ADD
Show:
© 2014 Microsoft. All rights reserved.