|
How to create custom template
Photo Gallery installation
contains html directory with
templates you can use to create photo album. Just create
subdirectory with the certain files to create you own
template. Photo Gallery program takes template files and
create HTML-pages using them. It change some tags of the
template with the necessary data.
Album consists of three levels. First
level contains small images (thumbnails), second -
middle
size images, and third - full size images. The third level
can be omitted. Thumbnail images are arranged in the table.
Program builds the first level using page.html,
row.html, col.html.
Thumbnail is inserted into the
col.html
template. Several col.html are inserted
into the row.html.
-Several
row.html
are inserted into the page.html template.
-Midle size images are inserted into the webimg.html
template.
-Full size images are inserted into the
fullimg.html
template.
Subdirectory a can contain any files. You can use
this files to insert custom content (for example graphics,
style-sheets) into your template. The directory a
could be empty.
Template files should be in Unicode (UTF-16) encoding.
This is the structure of template files:
.
./Photo
Gallety/+-- photogal.exe
|
.......
|
+---html/ --+-- blue center/ --- ...
+-- .........../ --- ...
+-- orange left/ ---+-- page.html
level 1
+-- row.html
level 1
+-- col.html
level 1
+-- webimg.html
level 2
+-- fullimg.html
level 3
+-- a/ --- *.*
custom files
+-- preview.jpg
previev of the template
The structure of the result album is:
../GAL*/---+-- index.html
+-- page1.html
+-- page2.html
+-- ....
|
+-- p/ --- *.jpg
|
+-- w/ ---+-- *.html
| +--
*.jpg
|
+-- f/ ---+-- *.html
| +--
*.jpg
|
+-- a/ --- *.*
Directory p contains thumbnails, directory w contains midle-size images, directory f contains full-size images. Templates contain
tags, which will be substitute with the Photo Gallery program. The tags are:
- {HtmlName} - name of the HTML-file, which
placed into w or f
directory;
- {ImageName} - name of the JPG-file;
- {ImageDescription} - description of the
image;
- {AlbumName} - name of the album;
- {TableContent} - content of the thumbnail
images table;
- {RowContent} - contents of the thumbnail
images table row.
- {PageNum} - number of the current page;
- {TotalPages} - quantity of the pages in
album;
- {TotalImages} - quantity of the images in
album;
- {PrevFile} - name of the previous HTML-file
in a gallery;
- {NextFile} - name of the next HTML-file in
a gallery;
- {PreviewWidth} - width of the preview
image;
- {PreviewHeight} - heigth of the preview
image;
You can use:
{TableContent}, {AlbumName}, {PageNum}, {TotalPages}
in
page.html;
{RowContent} in row.html;
{ImageName}, {HtmlName}, {ImageDescription}, {PreviewWidth},
{PreviewHeight}, {AlbumName}, {PageNum}, {TotalPages}
in col.html.;
{AlbumName}, {ImageName}, {ImageDescription}, {HtmlName},
{TotalImages}, {ImageNum}, {PageNum}, {PrevFile}, {NextFile},
{PageNum}, {TotalPages} in webimg.html,
fulimg.html.
You should use Java scripting to create navigation elements of the
album. The sample of style-sheets and java-scripting you can
find in the templates supplied with the Photo Gallery
program. |
