Skip to content

Web Gallery Creator Custom HTML templates

HTML templates approach in Gena

When Gena creates html pages for Index or Image it actually uses special html template files. The template file is a normal html file with Custom Gena tags – special reserved strings recognizable by Gena’s syntax analyzer. Gena substitutes custom tags with appropriate strings producing target html file. Suppose Gena creates Image html page for picture “image00.jpg” from html template like this:

<html><body>
<IMG SRC=%genaImageName% WIDTH=%genaImageWidth% HEIGHT=%genaImageHeight% BORDER=0>
</body></html>

%genaImageName%, %genaImageWidth%, %genaImageHeight% – are custom tags. Gena will substitute these tags with the image name (“image00.jpg”) , image width and height and resulting html file will look like this:

<html><body>
<IMG SRC="image00.jpg" WIDTH=800 HEIGHT=600 BORDER=0>
</body></html>

During the gallery creation Gena use three templates:

  • Index template – for all index pages
  • Image template – for all image pages
  • Thumbnail (Item) template – for all thumbnails in all index pages

The Index page contains special tag %genaIndexTable%. Gena will substitute this tag with the entire index table (i.e. all thumbnails). For each individual thumbnail in the table Gena will use Thumbnail template to generate actual html code for each table cell.

See full list of custom tags here.

By default, Gena uses internal templates (you’ll see “DEFAULT” in the Advanced settings/ Template section). You can change any default template to a custom template file (or edit the default file and save it as a custom file).

Template Editor

The Template Editor is just a simple text editor with the “Insert Tag” button to insert Custom Gena Tags into a template file.
You can also “Save” the current template to a file and “Save as” a new file. When you editing the default template, the “Save” button is not available to protect internal template files, but you can save a modified default template to another file and use this new file.

You can use the Template Editor menu to load template files into the editor, reload last opened file and do basic editing (cut/copy/paste/delete).

 

Custom Gena tags

You can find all custom tags in the table below. The first column contains the tag name (without trailing/leading percents); the second column contains a short description of the tag. The third column shows example of what a tag could be expanded to. And last column shows where this particular tag can be used – in Thumbnail template (Item), Index template (Index) or Image Template (Image). Many tags can be used in more than one template file.

Tag Name Description Example Used In
Thumbnail parameters
genaThumbName Thumbnail image file name (normal) t_s.jpg Item, Image
genaThumbPath Relative path to thumbnail (normal) thumbs/t_s.jpg Item,Image
genaThumbName2 Active thumbnail image file name t_s2.jpg Item, Image
genaThumbPath2 Relative path to thumbnail (active) thumbs/t_s2.jpg Item,Image
genaThumbWidth Thumbnail image width 160 Item, Image
genaThumbHeight Thumbnail image height 120 Item, Image
genaThumbSize Thumbnail image file size 3 Item, Image
genaThumbLink Image page file name (or image itself in “LinkToImage” mode) t.htm Item, Image
genaThumbAlt N/A Item, Image
genaTargetFrame Target frame for genaThumbLink TARGET=ImageFrame Item, Image
genaRolloverCode Gena JavaScript code for each thumbnail to enable rollovers. (requires functions from %genaJScode%) <…> Item
 
Image parameters
genaImageWidth Image width 500 Item,Image
genaImageHeight Image height 300 Item,Image
genaImageName Image file name t.jpg Item,Image
genaImagePath Relative path to the image images/t.jpg Item,Image
genaImageDate Modification date of the image file 12/31/2003 Item,Image
genaImageTime Modification time of the image file 23:59 Item,Image
genaImageNameNoExt Image file name without Extension t Item,Image
genaImageAlt N/A Item,Image
genaImageSize Image size in kilobytes 330 Item,Image
genaImagesTotal Total number of images in the gallery 8 Item,Index,Image
genaCurImage Image number in the gallery 3 Item,Image
Index/Image page parameters
genaImageBorderColor Color for Border in image page #336633 Image
genaImageCellWidth Table cell width for image in image page 510 Image
genaImageCellHeight Table cell height for image in image page 310 Image
genaBgColor Background Color in image/index page #CC6633 Index,Image
genaBgImage Background Image in image/index page bg.gif Index,Image
genaTableBgColor Table Background Color in index page #003333 Index
genaIndexTable Table of thumbnails position in index page <Entire table> Index
genaIndexCur Number of current Index page 2 Index
genaIndexTotal Total number of index pages 8 Index
genaJScode JavaScript functions for Rollover thumbnails <…> Index
Texts strings
genaShortCaption Short Caption for image “my image” Item,Image
genaLongCaption Long Caption for image “this is my image..” Item,Image
genaGalleryTitle Gallery Title (from Gallery Window) “my gallery” Item,Index,Image
Text templates (*)
genaTitleText Gallery Title Template * Item,Index,Image
genaImageTitleText Title for Image page * Image
genaImageText Description for image in image page * Image
genaThumbTitle Description for thumbnail in index page * Item
Navigation Links (Buttons or Text)
genaNavFirst Link to first image/index page <a href=1.htm><img src=”first.gif”></a> Index,Image
genaNavLeft Link to previous image/index page <a href=2.htm><img src=”prev.gif”></a> Index,Image
genaNavUp Link to index from image page <a href=index.htm> <img src=”up.gif”></a> Index,Image
genaNavNext Link to next image/index page <a href=4.htm><img src=”next.gif”></a> Index,Image
genaNavLast Link to last image/index page <a href=8.htm><img src=”last.gif”></a> Index,Image
genaNavPlay Play <a href=play.htm><img src=”play.gif”></a> Index,Image
genaNavHome “Home” URL <a href=”http://1.com”> <img src=”home.gif”></a> Index,Image
Sets of navigation links. (**)
genaLeftArrows Set of nav links on the left of the image/index ** Index,Image
genaUpperArrows Set of nav links on the right of the image/index ** Index,Image
genaDownArrows Set of nav linksbelow image/index ** Index,Image
genaRightArrows Set of nav links on top of image/index ** Index,Image
genaAllArrows Set of all enabled navigation links ** Index,Image
Navigation HREFs (raw links)
genaFirstImage first image in the gallery 1.htm Image
genaPrevImage previous image in the gallery 2.htm Image
genaIndexPage index page index.htm Image
genaNextImage next in the gallery 4.htm Image
genaLastImage last image in the gallery 8.htm Image

(*) Text templates are “Second level tags”, i.e. they can contain another tags and they are parsed in two steps. Text templates are specified in Advanced Options and they can include “Text Strings”, other Tags, font size/color, etc.
Let’s suppose the user typed in the Gallery Title “My vacation” (i.e. Text String tag %genaGalleryTitle% will expand into “My vacation”). The user also specified the following in the “Advanced Options”/”Text settings for “Title”:
– “<H2>%genaGalleryTitle% . %genaImagesTotal% images.<H2>”
– Font size:2
– Color: Black.
In that case %genaTitleText% will expand into “<font color=#000000 size=2><H2>My vacation. 3 images.</H2></font>”.
By default, Index/Image titles (%genaTitleText%, %genaImageTitleText%) contain %genaGalleryTitle%, Image description template %genaImageText% contains %genaLongCaption% , thumbnail description template %genaThumbTitle% contains %genaShortCaption%.

(**) Actual set of navigation links depends on the NavigationType for the image/index page.
E.g. if the navigation type is “Top”, genaLeftArrows, genaRightArrows, genaDownArrows are all empty strings and genaUpperArrows contains all enabled navigation links.

 

EXIF tags

Gena also supports a group of tags to display an information from EXIF image data. You can use these tags in the Item/Image templates to display desired EXIF information.

exifCameraMake Camera Make
exifCameraModel Camera Model
exifDateTime Date and Time
exifWidth Image width
exifHeight Image height
exifOrientation Orientation
exifFlashUsed “Flash”/”No Flash”
exifFocalLength Focal Length
exifExposureTime Exposure Time
exifApertureFNumber Aperture F Number
exifDistance Distance
exifCcdWidth CCD width
exifExposureBias Exposure Bias
exifMeteringMode Metering Mode
exifExposureProgram Exposure Program
exifIsoEquivalent ISO equivalent

IPTC tags

Gena also supports a group of tags to display an IPTC data from the image. You can use these tags in the Item/Image templates to display desired IPTC information.

iptcByline Byline
iptcBylineTitle Byline Title
iptcCredits Credits
iptcSource Source
iptcCaptionWriter Caption Writer
iptcCaption Caption
iptcHeadline Headline
iptcSpecialInstructions Special Instructions
iptcObjectName Object Name
iptcDateCreated Date Created
iptcCity City
iptcState State
iptcCountry Country
iptcOriginalTransmissionReference Original Transmission Reference
iptcCategory Category
iptcCopyrightNotice Copyright Notice

 

Custom Text Tags

Gena provides two predefined tags for image descriptions – short caption and long caption. By default this tags are used for thumbnail and image captions respectively. But sometimes two textual strings for each image are not enough and gallery design demands more information about each image. One example is a gallery with a shopping cart, which requires several attributes for each product (image) – short description for catalog with thumbnails, long description for product page, item price and ID for shopping cart engine, etc. In that case you can create a template for your gallery using multiple custom texts, adding new tag for each attribute of the image.

Custom tags are created in the picture bar (at the bottom of the main window) when you choose “Add New Custom Text” in the text type selector. Custom tags syntax is %genaCustom 1%, “%genaCustom 2%, etc. up to total number of custom tags created in the workspace. (Gena supports up to 32 custom tags).