This section will explain each template tag and what it does. Open the default.html template file for examples. |
<emAlbumSS>: Used for the slideshow feature.
It is replaced with a meta tag that enables the timed slideshow to work and needs to be placed immediately after the <head> in your HTML.
<emAlbumTitle>: Displays the $title value from emAlbum.cgi.
It is replaced with the $title value and can be placed anywhere; in your <title> HTML tag, as a header, etc.
<emAlbumImageURL>: Used for the URL of template images.
It is replaced with the URL to your template images and can be used anyplace where you need a link to your template images; usually in your CSS or in a <img> HTML tag.
<emAlbumNavigation>: Displays a linear folder navigation to allow users to easily move through your images.
It is replaced with navigation hyperlinks and can be placed inside HTML tags such as: <td>, <p>, etc.
<emAlbumHeader>: Displays image and page navigations, image and page counts, and slideshow controls.
It is replaced with the header information, including: image and page navigations, image and page counts, and slideshow controls. It needs to be placed in a table, inside the <tr> HTML tags.
<emAlbumMain>: Displays the images, thumbnails, and captions. It is the core of emAlbum.
It is replaced with all of the code needed to display your images, thumbnails, and captions. It needs to be placed in a table, inside the <table> HTML tags.
<emAlbumFooter>: Not currently used for any emAlbum pupose.
Although emAlbum does not need this tag to function, you can use it to add information to the footer. It needs to be placed in a table, inside the <tr> HTML tags.
<emAlbumCP>: Displays the emAlbum copyright information.
It is replaced with the emAlbum copyright information and needs to be placed in a table, inside the <table> HTML tags. You will get an error if the <emAlbumCP> tag is not in your template or if you have removed reference to emAlbum in the language file.
|
|
|
This section will explain the Cascading Style Sheet (CSS) tags that are used internally in emAlbum.cgi. CSS is used so that you have complete control over the look and feel of emAlbum. For more information on CSS and how to use it, visit this tutorial. |
album: Properties for the album/cateogory/folder text cell.
Located in a <td> HTML tag, it is used for the style of the album/category/folder links. Common uses: text color, size, font, and position.
caption: Properties for the image caption cell.
Located in a <td> HTML tag, it is used for the style of the image captions, if used. Common uses: text color, size, font, and position.
cp: Properties for the copyright cells.
Located in a <td> HTML tag, it is used for the style of the emAlbum copyright text. Common uses: text color, size, font, and position.
displayimage: Properties for the image display table.
Located in a <table> HTML tag, it is used for the style of the image table. Common uses: background color and border size and color.
footer: Properties for the footer cell.
Located in a <td> HTML tag, it is used for the style of the footer cell. Common uses: background color and text color, size, font, and position.
icon: Properties for the album/cateogory/folder icon cell.
Located in a <td> HTML tag, it is used for the style of the album/category/folder icon. Common uses: image position.
image: Properties for the thumbnail image cell.
Located in a <td> HTML tag, it is used for the style of the thumbnail cell. Common uses: image position.
imgborder: Properties for the image borders.
Located in a <img> HTML tag, it is used for the style of the image borders cell. Common uses: border style, size and color.
info: Properties for the album/cateogory/folder details cell.
Located in a <td> HTML tag, it is used for the style of the album/cateogory/folder details cell - the Total Images and Total Albums text. Common uses: text color, size, font, and position.
menucenter: Properties for the center header cell.
Located in a <td> HTML tag, it is used for the style of the center header cell, which displays the image and page navigations and slideshow controls. Common uses: text color, size, font, and position.
menuleft: Properties for the left header cell.
Located in a <td> HTML tag, it is used for the style of the left header cell, which displays the image and page counts. Common uses: text color, size, font, and position.
menuright: Properties for the right header cell.
Located in a <td> HTML tag, it is used for the style of the right header cell, which displays the image and page information and slideshow details. Common uses: text color, size, font, and position.
|
|
|
This section will explain how to create your own emAlbum template. If you create a new template, make sure to change the value of $template in settings.cfg to the new name, $template = "mysite"; in this example. |
- Open
default.html and save it with a new name, mysite.html for example.
You could just edit your default.html template but it is recommended that you create a new file to work with.
- Create a new folder in
images and name it whatever you called the .html file above, mysite for example.
The name of the folder in your images directory needs to be the same as the name of the template file, without the .html extension.
- Copy the images in the
default folder into the new mysite folder.
You should copy all of the default images into the new folder. Now you can modify the images for your template in the mysite folder.
- Open
mysite.html and format the HTML to your needs.
Remember to follow the emAlbum tag specifications from above. Other than making sure you place the emAlbum tags in the correct HTML tags, you have complete freedom with your template.
- Edit the images in your
mysite folder.
This is completely optional, but you can change the folder icon, slideshow controls, etc., to match the design of your site.
- Share your creation with us.
If you are creating a template for just your site, let us see your work in our Showcase. If you are creating a template that other could use, zip up the new files and send them to us and we will post them on our site.
|
|
|
