Picture Perfect Expression Media Image Gallery

I used Expression Design to layout and create the elements for my wedding homepage and then used Expression Web to position them on the page. After that I used Expression Web to give the page image swapping behaviors when the user moved the mouse over the titles of the page. In this final blog I will describe how I modified an existing HTML gallery in Expression Media to make up the remaining pages of the website.

I mentioned the HTML gallery in one of my first blog posts; they’re really easy to produce and there are several built in templates you can use. Once Expression Media is installed, the HTML gallery can be accesses under the Make menu, HTML Gallery … When selected, Expression Media will display a dialog of options.

And there are so many options! So many, in fact, that the good people at Expression Media added the ability to save a set of options to disk.

However, if the existing templates and all of the options provided still do not exactly produce what is desired, one can create custom HTML gallery templates, and Expression Web is a great tool to use.

The standard templates are located in the Expression Media install directory under the “\en\Plug-ins\HTML Templates” directory. Each of these template directories corresponds to one of the selections in the theme dropdown list in the HTML Options dialog.

There are three files and one directory found in each template. The index.html file describes what the page that hosts the thumbnail images looks like, media.html defines the page used for the full sized images and the about.jpg image is used to give the user a basic impression of what the gallery will look like. The about.jpg image is displayed to the user in the HTML Options dialog when the associated template is selected. Finally, the assets directory contains all the images and additional files referenced in the other two .html pages.

I started the creation of my custom template by copying an existing template directory and renaming it to “Wedding.” The new template is immediately available as a new theme in the HTML Options dialog and you can create galleries with it to test your changes as you go.

Using Expression Web to open the template directory as a website and examining the index.html page reveals the pattern Expression Media uses to insert data into the HTML pages, “(iView:*).” Whenever Expression Media encounters this pattern in the HTML pages in your template it will replace the pattern with the corresponding information about your gallery. For example, it will replace “(iView:Catalog)” with the Site Title in the HTML Options dialog and “(iView:Capation)” with the caption of the image in the media.html file.

Defining the meanings of all of these “iView” values is beyond the scope of this article, but by examining the existing templates and the HTML that is generated from them, their meanings can be discovered.

The index.html and media.html pages may be modified in Expression Web and any resources those pages require (images or CSS files for example) can be saved to the assets directory and referenced with a relative URL. Once you are happy with the changes you have made, save the files from Expression Web, generate the HTML gallery and publish it. One nice finishing touch would be to create an image to represent the new gallery theme and save it as about.jpg with a resolution of 200 x 120 pixels.

In the final version of my website, I actually created four different galleries, one for each category of images. I am still getting images from friends and family who were at the wedding and by creating these custom galleries I can add those new images very easily.

Lastly, I have made a more generic version of the wedding gallery available for download, feel free to use it and modify it as you see fit.