Custom Template Syntax
Generally speaking "XML template" in ReaGallery is just HTML with some template variables and the XML compatibility requirement. This section reviews syntax restrictions, available varables and built-in CSS classes.
Syntax basics and restrictions
ReaGallery XML template is a regular HTML document with custom template variables. Each variable looks like this [$variable.name]. When you create and publish your site/gallery, each variable is replaced by some text and/or HTML code. So there is no trace of [$...] syntax in the resulting HTML file.
You cannot use variables as tag names, tag attribute names or tag attribute values. Everywhere else is OK.
HTML code of the template should be XML compatible. Here are the most important rules of this compatibility:
- Each HTML tag must be closed. Normal tags look like this: <tag>...</tag>. If you don't want to include the closing tag, you should write it this way: <tag/>. Most common tags that use this shortened syntax are <br/>, <img ... /> and <hr/>.
- All tag attribute values must be contained within double quotes, like this: <img width="640" height="480" src="image1.jpg"/>.
- If an attribute is not supposed to have a value (according to HTML syntax), it should nevertheless have a value of a single space. The most common case of this is nowrap attribute: <div nowrap=" ">.
Available variables
Most variables have either a two-part name ([$name1.name2]) or a three-part name with 'user' as the first part ([$user.name1.name2]). There is no significant difference between these variables. They are named this way for your convenience: 'user' values are defined by site/gallery properties while non-'user' values are defined by the properties of the template itself (so they don't change as often as 'user' ones do).
"Page-dependent" variables
- These are variables that have a page type (site/gallery/image/slide) in their names. When you use them, replace 'site' with the required page type.
- [$site.title] - a "title" text block, as defined on the "main" property sheet.
- [$site.style] - page's style block, should be included this way <style>[$site.style]</style> within the <head></head> tag of HTML page, unless you use external CSS.
- [$site.table] - page's table block (thumbnails for the site/gallery or single image for photo/slide), must be included no matter what because this is the most significant part of the page.
- [$user.site.name] - element's name (not appliable to 'slide').
- [$user.site.description] - element's description (not appliable to 'slide').
- [$user.site.author] - element's author (not appliable to 'slide').
- [$user.site.number] - element's number, most often used for the 'image' (not appliable to 'slide').
- [$user.site.size] - number of sub-elements within the element: galleries within a site or images within a gallery (not appliable to 'image'/'slide').
Other variables
- These are variables that do not have a page type (site/gallery/image/slide) in their names.
- [$nav.name] - this varable inserts a navigation bar into HTML code; replace 'name' here with the navbar name.
- [$css.link], [$js.link] - a link to external CSS/Javascript file, should be included within the <head></head> tag of HTML page. You don't need to write these variables if you don't use external CSS/Javascript.
- [$user.page.number] - a page number for the multipage site/gallery index.
- [$user.items.from] - a number of the first element of the current page for the multipage site/gallery index.
- [$user.items.to] - a number of the last element of the current page for the multipage site/gallery index.
- [$slide.js.link] - a link to slideshow-enabling external Javascript file. Must be included within the <head></head> tag of XML template for the slideshow page.
- [$cell.img] - special variable used only in table cell sub-templates; see "cell" property sheet.
Built-in CSS classes
If you use external CSS file in your template then you might want to know names of several built-in classes that allow you to redefine the style of standard template elements. Some classes listed below have a page type (site/gallery/image/slide) in their names. When you use them, replace 'site' with the required page type.
- site_table - CSS class for the page's table.
- site_cell - CSS class for the page's table cell.
- site_cell_img - CSS class for the image within the cell (thumbnail/photo).
- nav_main - this is a class for a navigation bar, it defines the style of entire bar. To change the style of individual buttons, change their "CSS class" property in the Menu Editor. Replace 'name' here with the navbar name.
Slideshow code requirements
The XML template for the slideshow page is slightly more complicated than templates for the other three pages types. Slideshow page is based on a Javascript engine. So when you write your own slide page template, you need to meet the following requirements.
First and foremost, include [$slide.js.link] variable within the <head></head> tag of slideshow template. This will create a link to required external Javascipt file.
Slideshow template must contain two special text sections with IDs '__imgName' and '__imgNum'. You can use either div or span tags to create these sections. The text of special sections will be dynamically replaced with the current image name and number respectively.
The slideshow will not work if one (or both) of these section is missing. If you don't want the image name/number to appear then just make the corresponding section invisible using 'display: none' style, like this: <span style="display: none" id="__imgName"></span>. |
