|
|
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
|
|
|
