One of my favorite features in Expression Media is the Make HTML Gallery option on the Make menu. We ship several gallery templates with the product, one of which might fit nicely into your website. If not, you can always modify a template or even start from scratch if you are HTML savvy (or really brave). Today I'd like to talk a little bit about customizing galleries and how they work under the covers.

By default, the shipped templates live in the C:\Program Files\Microsoft Expression\Media 1.0\en\Plug-ins\HTML Templates folder. If you create user templates, you want to store them in one of the following locations:

Windows XP - C:\Documents and Settings\<username>\application Data\Expression Media\Plug-ins\HTML Templates

Windows Vista - C:\Users\<username>\AppData\Roaming\Expression Media\Plug-ins\HTML Templates

Mac - in one of three folders:

· ~User/Library/Application Support/Expression Media/Plug-ins/HTML Templates

· /Library/Application Support/Expression Media/Plug-ins/HTML Templates

· Network/Library/Application Support/Expression Media/Plug-ins/HTML Templates

Regardless of where they are stored, each gallery is created from a theme. Each theme lives in its own folder, which carries the same name as the theme. Each theme is made up of two template files - index.html and media.html, and assorted support files. Index.html is the template for the thumbnails pages. Media is a template used to create larger views of each image. About.jpg is the preview you see when you go into the gallery interface and pick a theme. The assets folder holds images for navigation and javascript files. The structure of the folder looks like this:

image

The two template files themselves are simply normal HTML files, which can be created in any web development environment, or even a simple text editor like Notepad. In addition to the HTML code, they contain iView tags. When you make a gallery, Expression Media replaces these tags with specific information from your gallery, links to the web pages it creates, etc. For instance:

(iView:Filename) is replaced by the name of the image file name.
(iView:GoIndex) is replaced by a link to the index page of the gallery.
(iView:Catalog) is replaced by the name of your Expression Media file, without the extension.

A full listing of the tags is available in the Expression Media User Guide, available for download at http://www.microsoft.com/downloads/details.aspx?FamilyID=dd27d551-afda-41b2-9332-ce958abe7435&DisplayLang=en.

To start with an existing template, copy the whole folder of the theme closest to the one you want to use, and paste it into the user templates. Rename it to whatever unique name you like, and open the files in your chosen HTML editor. Keep in mind that the hard coded text, colors, etc. can be changed in the design environment, but the iView tags must be added within the HTML code itself.

I found it easier for my website to start with my basic web page colors and design, and simply add in the iView tags where I needed them. To get the right arrangement of tags for the index page I opened existing index.html and copied part of the code into mine. It took some experimentation, but when I was done, I had galleries that exactly matched my website theme.