Gena Web Gallery Creator user interface contains three main windows: Gallery window - organize pictures…
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).