Quick links
 
 
 

Galerie


Template designer manual

Updated:

April 2, 2004



What is a template?

When you generate a gallery, the design of this gallery can be selected between several models in a pop-up menu.
You can download new templates or create very easily your own models.

How to create my own templates?

The best way is to start from an existing template. Copy the template folder and change its name.

What is the content of a template folder?

In the template folder you will find several files:


 - The template definition for index pages named "index template.html"
 - The template definition for picture pages names "page template.html"

 Don't remove or rename one of these two files, just edit them.

 - Optionally a jpeg file (120x120) named "preview.jpg" which provides a preview of the template
 - Optionally a text file named "readme.txt" which provides the text to be displayed near the preview
 - Optionally a picture file named "thumbback.jpg" which will be used to generate the image frame on index pages.
 - Optionally a picture file named "imageback.jpg" which will be used to generate the image frame on other pages.
 - Optionally a picture file named "thumbfront.pct" which will be applied on the thumbnail as mask with transparency.
 - Optionally a picture file named "imagefront.pct" which will be applied on the image as mask with transparency.
 - Optionally picture files named "indexpreviouspage.gif" and "indexnextpage.gif". These pictures will provide links to other index pages.
 - Optionally a text file named "javascriptpopupwindow.txt", containing JavaScript source code that will replace the default popup window JavaScript that is inserted in the index page when the "popup window" mode is active.
 - Optionaly, the template definition for a horizontal index frame "index template horizontal frame.html"

 When "thumbback.jpg" and "imageback.jpg" or "thumbfront.pct" and "imagefront.pct" are the same, one can be replaced by an alias of the other.

 You can remove or edit these files.

How to edit files?

 To edit these files you can use any HTML page editor and a picture editor.

 For instance you can use the excellent (and free) Mozilla. You will find Mozilla at:
 http://www.mozilla.org/start/

 - Apply Control+click on the file to edit
 - Select "Open with..." Mozilla in the menu

 The document loads.

 In Mozilla apply "File>Edit page" or Command +"E", you will edit the page.

 You can edit the page as you want, inserting texts, links, images, etc.



What is the content of a template HTML file?

First this is HTML code which will be used as it is.
Simply, some tags will be converted while processing the template. These tags always begin and end with the character "$".

In the file  "Index template.html"
$INDEX_TITLE$  will display the title of the gallery you filled in at the top of the dialog box
$INDEX_PAGE_LIST$  will display the number of pages. If there is only one index page, nothing is displayed
$INDEX_IMAGES$  display the icons array
$BORDER$nn$  size of the frame around icons in index pages. Please note the color of the frame will be the color of the link and visited link you defined in the page color properties. By default this value is 0.
$CURRENT_DATE$  the current date
$BACK_IMAGE_MARGIN$left,top,right,bottom$  when a frame image is defined in a template, this allows to define the area that can be used to display the image inside the frame. (See next chapter for more information.)
$FRONT_IMAGE_TRANSPARENCY_WHITE$1$  the color used for transparency in the front image will be white instead of black. (Black is the default value.)
$HOME_LINK$  will be substituted by the link to the home page, as described by the user.
$ENLARGE$  will be substituted by the string "Click on a picture to enlarge it." as defined by the user.
$JAVASCRIPT$  will be substituted by the JavaScript source code needed to handle the page. This tag is obligatory.
In the file "page template.html"
$TITLE$  will display the picture title (in general the file name)
$INDEX_TITLE$  will display the title of the gallery you filled in at the top of the dialog box.
$COMMENT$  will display the comments related to the picture
$DATE$  will display the date the picture was taken
$CURRENT_DATE$  the current date
$EXIF$  will display EXIF data
$IMAGE_PREVIOUS$  will display the icon of the previous page with link (user can click on it to go back)
$IMAGE_NEXT$  will display the icon of the next page with link (user can click on it to go forward)
$NUM_PAGE$  will display the number of the page
$NUMBER_OF_PAGES$  will display the total number of page
$IMAGE_NAME$  will be substituted by the current image file name (without path name)
$PREVIOUS_IMAGE_NAME$  will be substituted by the previous image file name (without path name)
$NEXT_IMAGE_NAME$  will be substituted by the next image file name (without path name)
$PREVIOUS_THUMBNAIL_NAME$  will be substituted by the previous thumbnail file name (without path name)
$NEXT_THUMBNAIL_NAME$  will be substituted by the next thumbnail file name (without path name)
$THUMBNAIL_PATH$  will be substituted by the relative path name to thumbnail files "../thumbnails/", if any.
$IMAGE_PATH$  will be substituted by the relative path name to images files "../images/", if any
$FULL_IMAGE_LINK$  will be substituted by a link to a new window showing the full-size image
$FULL_IMAGE_BUTTON$  will be substituted by a button which will open a new window showing the full-size image.
$BACK_IMAGE_MARGIN$left,top,right,bottom$  when a frame image is defined in a template, this allows to define the area that can be used to display the image inside the frame. (See next chapter for more information.)
$FRONT_IMAGE_TRANSPARENCY_WHITE$1$  the color used for transparency in the front image will be white instead of black. (Black is the default value.)
$SLIDESHOW$  must be present in the <head> </head> part of "page template.html" to make the use of the slideshow option possible
$HOME_LINK$  will be substituted by the link to the home page, as described by the user.

Some tags must be in a link, related to a text or a picture.
$IMAGE$  is the current picture. It  will be substituted by the current image file name (including path name). The area is 300x300. Do not change these values, the size will be adjusted by Galerie.
$PREVIOUS$  provides the link to the previous page
$NEXT$  provides the link to the next page
$INDEX$  provides the link to the index page
If you want to add a background picture, a sound, a logo to a template, a style sheet, copy the file into the template folder. All extra files will be automatically copied when the gallery is created. For example, see the template "Aqua".

To enable different CSS styles within  $INDEX_IMAGES$  in the index pages, CLASS attributes are inserted in four tags in the generated table:
<small class="title"> before the picture title
<small class="date"> before the date
<small class="comment"> before the comment
<small class="exif"> before the EXIF data
Tip: When you define a link in a Mozilla document, or copy a link, check it: the link must be relative to the HTML page and not absolute.

How to change symbol “next page” and “previous page” in index pages?

When the index is defined with more than one page, symbols "<<" and ">>" are used to go from one page to another.
You can substitute these symbols by pictures: provide in the template folder the files  "indexpreviouspage.gif" and "indexnextpage.gif"

How to define frame images in templates?

A frame image is a .jpg file. This image is optional. The file name is  "thumbback.jpg"  for the thumbnail frames,  "imageback.jpg"  for the main images.
When a frame image is defined, the  $BORDER$  command in index pages is ignored.
You can define frame images for index pages, for picture pages or for both. The user can disable the use of frames in your template.
As the frame image is resized according to the size of the image to be framed, it is recommended to use a large image (900x600 or 600x600) in order to have sufficient precision.

Please note:
The frame image will be resized to fit the target image dimensions. With some designs, the stretching of the frame image can result in a distorted appearance of the frame. In those cases we recommend to provide a frame image with a 3:2 or 4:3 ratio (900x600 or 800x600 for example). Galerie will rotate this image to switch from landscape orientation to portrait orientation and will thus reduce distortions. (See for example the "Nostalgia" template.)
With other designs a rotation of the frame should be prevented, for instance when rotation causes a shadow to have the wrong direction. In those cases it is better to use a frame image with exactly equal sides (600x600 for example). Galerie will not rotate this image and will thus keep the shadow as intended. (See for example "Aqua frame" template.)
This applies to both 'back' and 'front' frame images. (See below about 'front' images.)

As an example for defining a background frame image, this is the 'back' image for the "Shadow" template:
One can distinguish several areas in this image:
The green line marks the outline of the frame image.
The blue line marks the area within the frame where the picture will be displayed.
L,T,R,B indicate the frame margin sizes. The picture will leave the margins free.
If the user selects a margin size, that margin will be added inside the defined minimal margins, creating a wider frame. As the picture will keep its size, with increasing margins the frame is stretched to accomodate the picture and the total size of picture plus frame will grow.
The default minimal margin values are 0. To define different minimal margins, insert the tag  $BACK_IMAGE_MARGIN$L,T,R,B$  anywhere in the related HTML template file, for exemple:  $BACK_IMAGE_MARGIN$31,30,31,28$

This is what happens when the user increases the margin using the "Shadow" template:
As you can see the size of the picture itself is not affected by increasing the margin size. Wider margins are used to to display more of the frame.

How to define front images in templates?

You can define an image as a mask in front of the picture. This image must be provided in PCT (PICT) format because of the loss of precision with JPEG compression.
The front image is named for index pages  "thumbfront.pct", for other pages  "imagefront.pct".
This image allows transparency effects. The black color (RGB components 0) is considered transparent and will allow the image behind it to be seen.
You can define white to be the transparent color by inserting the command  $FRONT_IMAGE_TRANSPARENCY_WHITE$1$  in the related HTML template file.
See for example, what happens in the  "Floating on white"  template.

Here we have from left to right, the thumbnail image, the  "thumbfront.pct"  image and the result on the web page.
The front image  "thumbfront.pct"  is resized to fit the thumbnail image size. The mask is applied and all black pixels (0,0,0) give view to the thumbnail image pixels behind them. Other pixels are shown as they are in the front image.

This will work if the HTML page background is white. If the page background is black, white (0xFFFF,0xFFFF,0xFFFF) must be defined as the transparent color and the image must be designed accordingly. See for example the template  "Brush on black".

Of course you can use front images with frame images in the same template.

Don't hesitate to contact me if you have questions or want to share one of your templates with other Galerie users: didier@myriad-online.com


Didier Guillion
Ronald P. Regensburg

Home > Resources > Manuals > Galerie, template designer manual


Top of page
Last update:  (c) Myriad 2013