Template Editor

The Professional version of ReaGallery includes the template editor feature. It can be accessed using the "Edit template" button in the Site/Gallery properties dialog.

The template editor consists of several property sheets. Each sheet allows you to customize some aspects of the template and/or edit corresponding HTML layout.

For each templated there are four 'page types': site, gallery, photo and slide. Property sheets for each page type are very similar. For each page type there are "main" sheet, "table" sheet and "cell" sheet. There are also a special "effects" sheet for the slide show page and two general sheets: "template" and "images".

Page "main"

We will review this property sheet for the 'site' page type. Everything discussed below is appliable to other pages types unless otherwise stated.

Site "Title" is a mini-template: you can input template variables here as well as regular variables and HTML tags. For the list of available template variables refer to Custom template syntax. Usage of site "title" is optional. If you choose to use it, you can insert it into the XML template as a [$site.title] variable.

You can customize the style of the entire site page by altering its font, link colors, background color and/or background picture. Make sure you include <style>[$site.style]</style> in the header of your XML template if you use this customization.

Here you can also change the HTML page naming mini-template and disable the entire page in this template. Normally you don't disable pages often but this option can be useful sometimes. For example, it is recommended to disable the slideshow page if you plan to use ReaGallery Image Protection because the slideshow is a Javascript-heavy page.

The main button of all property sheet is "Modify XML template: Edit". Here you can edit page's XML template itself. Generally speaking "XML template" here is just HTML with some template variables and the XML compatibility requirement. For the further reference see Custom template syntax.

Page "table"

We will review this property sheet for the 'site' page type. Everything discussed below is appliable to other pages types unless otherwise stated.

The page's "table" ([$site.table] variable in XML template) is thumbnails table for the site/gallery page types and a single image for photo/slide page types. For the thumbnails table you can set up the number of columns and rows. If you want to create a single long column, make the number of rows a zero. And vice versa: zero columns for a single long row. If you define both columns and rows number then you will create multiple pages of this type. For example, let's suppose you make a gallery thumbnails table with 4 columns and 3 rows. Then, if you gallery has 114 images you will have 10 gallery pages: 9 pages with 4*3=12 thumbnails each and the last page with 114-9*12=6 remaining thumbnails.

You can also set table style here: border width, border color, background color and/or background picture.

Page "cell"

We will review this property sheet for the 'site' page type. Everything discussed below is appliable to other pages types unless otherwise stated.

This property sheet allows you to customize the contents and appearance of each cell within the page's table ([$site.table], see above). "Element title" and "element description" are mini-templates, very similar to "page title" on the "main" sheet.

Element image is a thumbnail for the site/gallery page types and the photo image itself for photo/slide page types. Clearly you won't disabling it for photo/slide pages often but sometimes it can be useful to disable thumbnail on the site page, for example. You can setup the element image hyperlink, "alt" ("hint") text and image border.

You can also set cell style here: background color and/or background picture.

The "Modify XML cell template: Edit" option is rarely used. Here you can customize the cell contents even further. The XML template itself is similar to the page template discussed above. If you choose to use this customization then don't forget to place [$cell.img] variable somewhere within the cell template - this will add the element image (thumb/photo) completely with the title, descrption and hyperlink.

"template"

Here you can manage this template's navigation bars. Navigation bar is a grouped set of buttons and/or text links, like "previous page", "next page", "start slideshow", etc. You can insert a navbar into the XML template as a [$nav.navbarname] variable.

You can also add custom resource files here. Usually these are miscellaneous decorative elements of the page. You do not need to list navbar buttons or background images here - they are added automatically as you define them in the way described above.

You can define folder structure for your template. You can place thumbnails, images and/or resource files into separate folders. By default they all will be put into site/gallery main folder - unless you decide otherwise.

External CSS and Javascript files allow you to customize your template even more. For the list of built-in javascript classes refer to Custom template syntax.

"images"

This sheet allows you to define several properties for the thumbnail and photo files. These properties include output graphical format (JPEG/GIF/PNG), file naming mini-template and thumbnails output dimensions. Note that photo files output dimensions are not defined here. Photo files dimensions are set in the site/gallery properties dialog, as described here.

Slideshow "settings"

This sheet allows you to customize the slideshow page. You can set the slide change timeout, add slide transition effect and set up some background music for your slideshow.