HTML Engine Directive tags

Microsoft Expression Media classifies Engine Directive and Theme Field tags as variable tags. HTML Engine Directives control the size of images on index and media pages and also define what values are displayed in a particular field in a dialog box. Theme fields are a variation on HTML Engine Directives. These template instructions create user-defined fields for text that can be typed by the gallery creator before export.

There are two steps in using the variable tag. In the first step, you declare the variable name and default value of the variable. Expression Media uses these in the HTML Engine Directives section of either the index or media page. In code, the standard tag reads:

(iView:Variable name = "My Variable Name"  default = "Default value of Variable")

The values of this variable appear in the Theme Fields section of the HTML Gallery dialog box when you select the theme that contains this variable. In this dialog box, the user can select the variable and modify the value by using the Change section at the bottom of the dialog box.

Once you have declared the variable, you can use it as a standard iView HTML tag, as in the following code.

(iView:My Variable Name)

Expression Media replaces My Variable Name with either the default value of the variable or the value that the user enters in the HTML Theme Fields dialog box.

The following table lists the recognized Engine Directive tags.

HTML Engine Directive	Restriction	Description
(iView:InThumbSize)	Index only	Defines the size of thumbnail images on Index pages.
(iView:InThumbColumns)	Index only	Defines the number of columns in a thumbnail table.
(iView:InThumbRows)	Index only	Defines the number of rows in a thumbnail table.
(iView:InMediaWidth)	Media only	Defines the width of media images on Media pages.
(iView:InMediaHeight)	Media only	Defines the height of media images on Media pages.
(iView:InMediaScalingMode)	Media only	Defines the scaling method for images on Media pages.
(iView:InThumbScalingMode)	Media only	Defines the scaling method for thumbnail images on Media pages.
(iView:Variable)		See Custom HTML galleries for instructions about how to use this tag.

Expression Media tags by category

The following tables include all the remaining tags that you can use when modifying or creating themes. The tags are organized by the particular element of the theme that they can create or modify.

HTML Engine Directive	Restriction	Description
Catalog
(iView:Catalog)		Title of the Expression Media catalog file.
(iView:CatalogComment)		Comment for the active catalog.
Navigation
(iView:GoIndex)	Media only	Hyperlink to the referring Index page.
(iView:GoPrevious)		Link to the previous Media/Index page.
(iView:GoNext)		Link to the next Media/Index page.
(iView:SourceURL)		URL to the HTML Media page.
(iView:PreviewURL)		URL to the thumbnail preview image.
(iView:MediaURL)		URL to the media image.
(iView:OriginalURL)		URL to an exported copy of the original image.
(iView:Index)		Composite display and linking to multiple Index pages (that is, 1-10 \| 11-20 \| 21-30). This tag contains a blank value if you generate only one index page.
File names
(iView:PreviewFile)		File name of the image (Thumbnail) exported to the Preview folder.
(iView:SourceFile)		File name of the HTML Media page.
(iView:OriginalFile)		File name of the original file exported from the catalog.
(iView:MediaFile)		File name of the converted large JPEG media image.
Counters
(iView:Running)		Current Index or Media page number.
(iView:Total)		Total number of Index or Media pages.
Media rendering
(iView:Media)	Media only	Replaces tag with rendering of media image.
(iView:PreloadNext)	Media only	1x1 pixel rendering of the next media item (Images only, appropriate for preloading).
(iView:PreloadPrevious)	Media only	1x1 pixel rendering of the previous media item (Images only, appropriate for preloading).
Index page
(iView:IndexStart)	Index only	Defines the start of a main index repeat loop. Can be used to populate JavaScript arrays.
(iView:IndexEnd)	Index only	Defines the end of a main index repeat loop. Can be used to populate JavaScript arrays.
(iView:IndexColStart)	Index only	Defines the beginning of a column when you are using a CSS for a thumbnail index.
(iView:IndexColEnd)	Index only	Defines the end of a column when you are using a CSS for a thumbnail index.
(iView:IndexRowStart)	Index only	Defines the beginning of a row when you are using a CSS for a thumbnail index.
(iView:IndexRowEnd)	Index only	Defines the end of a row when you are using a CSS for a thumbnail index.
Preview (Thumbnail) rendering
(iView:PreviewSize)		JPEG thumbnail file size in bytes.
(iView:PreviewWidth)		JPEG thumbnail width in pixels.
(iView:PreviewHeight)		JPEG thumbnail height in pixels.
(iView:PreviewScale)		JPEG thumbnail scaling compared to the original image.
(iView:Preview)		Thumbnail rendering and link to the Media page.
(iView:PreviewNext)	Media only	Thumbnail rendering and link to the next Media page.
(iView:PreviewPrevious)		Thumbnail rendering and link to the previous Media page.
Originals
(iView:OriginalURL)		Creates a URL to a copy of the original image.
(iView:OriginalSize)		Displays file size of the original image.
(iView:OriginalWidth)		Displays width in pixels of the original image.
(iView:OriginalHeight)		Displays height in pixels of the original image.
Grouped Fields
(iView:Fields) (iView:EXIFFields) (iView:IPTCFields)		Supported set of fields from the set defined in the List, Thumbnail, or Media view of the catalog. Note that only a subset of Expression Media fields are exportable as HTML. This is because most media is converted for upload (for example, TIFF images are converted to JPEG). Therefore, some of the characteristics of the original media become irrelevant after the conversion.
Media information
(iView:Filename)		Displays the file name of the original media file.
(iView:FileSize)		Displays the file size of the exported/converted media file in bytes.

Tip:
To reduce the loading time of your Index pages, include fewer than 25 images on a single index page. You might also try a small size thumbnail (96 pixels), with low .jpg compression.

Tip:
To reduce the load time of your Media pages, try a smaller size media export (such as 480x320 pixels), or increase the amount of .jpg compression in the Settings panel.

Tip:
To use a Cascading Style Sheet (CSS) with a theme, use embedded style sheets. This works fine with Expression Media themes. To use a linked style sheet, put the CSS file in your theme's Assets folder. That way, the style sheet will be exported as a related asset of your gallery. By using the HTML Engine Directives for index table rows and columns, you can use CSS and XHTML to control the positioning of tables. If your site already has a style sheet that you want to use, make sure that you write a complete URL to the existing CSS in your theme.

Cc294819.alert_tip(en-us,Expression.10).gif

Tip:

To use a Cascading Style Sheet (CSS) with a theme, use embedded style sheets. This works fine with Expression Media themes. To use a linked style sheet, put the CSS file in your theme's Assets folder. That way, the style sheet will be exported as a related asset of your gallery. By using the HTML Engine Directives for index table rows and columns, you can use CSS and XHTML to control the positioning of tables. If your site already has a style sheet that you want to use, make sure that you write a complete URL to the existing CSS in your theme.