HTML galleries

  • Article

The HTML Gallery export feature outputs an Microsoft Expression Media catalog as an HTML-formatted web gallery. An HTML gallery can look very much like a catalog displayed in Expression Media. The gallery can contain an index of thumbnail images which, when you click it in a browser, will take you to a large view of the image or a playback of your movie or audio file. You can use this option to create a portfolio website of your work.

Expression Media also includes Silverlight templates that enable you to quickly build dynamic web galleries that showcase your images in creative, dynamic layouts that take advantage of the cross-platform, rich-media Silverlight experience. You can either use the templates as they are or customize them.

When you have created the gallery, you can use your own FTP software to upload the files, or Expression Media can upload your exported web galleries.

Cc507665.alert_caution(en-us,Expression.10).gifImportant Note:

Expression Media does not encrypt your FTP logon information; therefore, it doesn't provide a secure method for logging on. To make sure that you are performing a secure upload, you should upload your files using a third-party FTP program that is compatible with secure upload technologies such as SFTP (Secure FTP). If you are not sure which secure technology to use, ask your FTP site provider which ones they support.

An HTML gallery

Cc507665.c2c794d6-6939-4eba-a572-4f954c527eb7(en-us,Expression.10).png

Expression Media creates all the files necessary for a web photo gallery. An HTML index page contains thumbnail images. Clicking an image opens it at full size, with the metadata displayed.

Expression Media offers two options for creating HTML galleries:

  • You can use a default theme to create a website based on the View Options of the Thumbnail and Media views in your catalog. Alternatively, you can use any of the visual themes provided with the program.

  • You can create your own themes. Expression Media uses a different template for the index and media views of your gallery, and offers a rich vocabulary that can be used to extract catalog information (for example, fields and thumbnails), and also high-level tags for navigation, date, time, and so on. Creating themes requires HTML editing skills. To learn more about how to create themes and templates, see Custom HTML galleries.

  1. Open an Expression Media catalog of photos, illustrations, movies, or any media file that can be distributed on the web.

    Expression Media exports only the visible items in the catalog. Make sure that the items that you want to export are displayed in the catalog before you create the gallery. Then, on the Make menu, click HTML Gallery.

  2. On the Theme menu, choose a theme type.

  3. Click the Theme tab and set these options:

    • Site Title   Set the text that appears at the top of the index page in your gallery. If you do not want to include a title, leave this field blank. Some themes do not require a site title.

    • **Theme   **Choose from a selection of preset themes, or use Default to create your website by using the View Options you set for the Thumbnail and Media views in your catalog. If you select Default, make sure to choose the desired index table, thumbnail, and media size options. All other themes have pre-defined tables and media sizes that are designed for optimal output. You can change the options; however, some themes are written to work with specific defaults and changing those could produce strange results. If a produced HTML gallery looks incorrect, try remaking it with the default settings.

    • **Index Table   **Customize how many thumbnails, across and down, appear on the Index page in your gallery.

    • **Thumbnails   **Set options for size and position of thumbnails in your gallery.

    • **Media   **Set options for size and position of media in your gallery.

  4. Click the Settings tab, and then set the options according to the following descriptions:

    • **HTML Extension   **Define the file name extension of the HTML file names. Options include .htm, .html, .shtml, .asp, .php, and .xml.

    • **Output   **Select the Use numbers for HTML file names setting to use a numeric increment (for example, 1, 2, 3) for the media file name.

      Select the Treat captions as raw HTML setting to use HTML code, such as <b></b>, in the Description annotation field.

    • **JPEG Quality   **Select the level of compression applied to thumbnails and media images.

    • **Watermark   **Export images with a visual watermark, which is a secondary image that is overlaid on the primary image.

      Select the Frame images setting to put a 1-pixel black border around each exported thumbnail and media image.

      Select the Embed annotations setting to embed all IPTC/XMP Core annotations into each exported image.

      Select the Preserve color profiles setting to embed the ICC color profiles into each exported thumbnail and media image.

      Select the Preserve EXIF/GPS metadata setting to embed the EXIF and GPS digital camera metadata into all exported media images.

    • **Movies   **Adjust the properties of QuickTime movies on Media pages:

      Auto Play automatically plays a movie as soon as it has been loaded in a browser.

      Continuous makes the movie play in a loop.

      DisplayQuickTimeController toggles on and off the standard playback controls for a movie.

      Kiosk mode hides the options to save movies and change QuickTime settings from within a browser window.

  5. Click the Server tab and set your FTP options:

    • Server   Type the FTP address for your server (for example, ftp.ourmedia.org). Expression Media stores each server that you define in a menu for quicker access in the future.

    • User name   Type your user name for your FTP server.

    • **Password   **Type your password for your FTP server.

    • Remote Directory   Type the path of the web root folder of your account on the server. If a folder for your gallery does not already exist, make sure that you define the new folder in this path.

    • Skip existing image files   Select this box if you have already uploaded your gallery images and are just uploading the HTML again.

    • Preview Settings   Type the complete URL for the exported gallery. Make sure that you have typed the same upload folder name that you designated in the Folder field.

  6. Click the Theme Fields tab. Some themes have variables that you can type in this panel. For example, you might have a generic theme for your professional assignments. This theme might have special theme fields for you to type the client's name, job number, and assignment details. This information will then appear on the exported web pages.

  7. When you have completed creating a gallery, there are two final options to review. For Expression Media to upload an exported gallery, you must select the Upload to server box. Select the option Launch browser when done to have Expression Media open the exported web gallery in the system's default web browser.

  8. After defining your settings, click Create. The time that it takes for Expression Media to create a gallery can vary depending on the number of images, their original size, and the export size. The gallery will open in your web browser after export, if that option is selected.

  9. Optional. Once Expression Media has exported your gallery, you will see a dialog box that says "Gallery build is completed. Do you wish to upload (X) files to the server?" where X is the number of files in your gallery. If you click OK, the progress bar panel will display the progress of each file as it is being uploaded to your server.

Watermark HTML images

Expression Media exports HTML images with a visual watermark (a secondary image that is overlaid on the primary image and provides a means of identifying the origin of the image and protecting its copyright).

Note

Visual watermarks are not the same as digital watermarks, which are implemented algorithmically and are designed to be invisible.

To watermark an image

  1. Launch Adobe Photoshop, or an alternate program that can create a .tif file with a transparent background. Expression Media accepts the .tif, .psd, .jpg, .pict, .png, .bmp, and .gif formats.

    Note

    The .jpg format does not support transparency. We recommend using .tif for optimal results.

  2. Create a new file.

    For this example, it is 200 pixels wide and 50 pixels high. Make it RGB with Background Contents set to Transparent.

  3. Click the Type tool, and then type something with the color set to Black.

  4. Click Save. Select .tif as the format. You do not have to save alpha channel or layer information.

  5. In the next dialog box, select the compression you want, and then select SaveTransparency.

  6. Return to the HTML Settings panel of Expression Media, and in the Set Watermark dialog box, select the .tif file by clicking the New Image button.

Watermark options

The previous instructions will create an overlay where the watermark's color is opaque (such as 100 percent black or white).

You can change the color opacity of the watermark and give it a transparent quality, by adjusting the layers somewhere between 50 and 90 percent. To add a drop shadow and make the watermark a little more interesting, add the following steps after step 3:

  1. Add a Drop Shadow filter.

  2. Set the filter color to white or black, or whichever color you want to use.

  3. To give the watermark transparency, adjust the opacity in the filter dialog box to 75 percent.

Using a drop shadow makes sure that the watermark is readable, even if it falls in dark or light parts of an image.

See also

Concepts

Expression Media Reader