BizDesign ImageFolio
Home | User's Home | Report A Bug | List Your Site | Download Area | Documentation | Message Board
Home
 
Miscellaneous
 
Reference
Installation
Upgrading
Templates
Content
Categories
 


ImageFolio Pro Edition 3.0 User's Guide
Using ImageFolio's HTML Templates


This document covers the customization and modification of BizDesign ImageFolio Pro Edition 3.0's HTML Templates.

Overview
ImageFolio displays dynamic CGI generated Web pages, as opposed to static HTML pages. In ImageFolio, dynamic is synonymous with real-time. When you update your gallery by adding new content, or creating new categories, ImageFolio is immediately updated as well. Instead of having you modify the HTML code within the Perl script, we have moved all of the HTML specific code out of the program, and into several readily modifiable HTML Templates.

How ImageFolio Deals with Templates
ImageFolio's templates are standard HTML documents with unique tags, such as %%%VARIABLE_NAME%%% wherein VARIABLE_NAME is the variable which defines that tag. These tags are replaced by the content ImageFolio generates and should not be modified. You can, however, move them around, or strip them out completely.

You may edit the templates using any text or HTML (WYSIWYG) editor. Just be sure that the editor you are using does not change the %%% tags contained in the templates.
Note to Front Page Users...
Microsoft Front Page is one HTML editor that is known to change code. If you use Front Page to edit ImageFolio's templates, you may experience problems. Here is how to identify and fix those problems.
  1. After saving a template in Front Page, open the template in a text editor (Not in Front Page).
  2. Look to see if any % signs have been changed by Front Page to %25
  3. If % signs have been changed, do a global search and replace, and replace %25 with %.
  4. ...repeat these steps for each template you modify
Standard Templates
The following HTML templates are included with ImageFolio Pro Edition 3.0. They are located in the ImageFolio3_files/skins/*your_choice*/templates directory:
home.html
used for displaying a list of all top-level categories and descriptions (if applicable)

thumbnails.html
used for displaying a tabled thumbnail listing of all media types defined in config.pl

image.html
used for displaying an embedded media file (such as a movie, large picture, or sound clip), as resulting from a linked thumbnail image

rating.html
used for displaying a visitor file ratings box, as resulting from a click on a thumbnail image or link to rate a file

rated.html
used for displaying the results from the submission of a visitor's file rating

admin_popup.html
used for displaying the admin popup when you use the "Front End Admin" area

login.html
used for displaying the login screen when you have set "$allow_free_access = 0;" in your config.pl
Media Templates
Media templates are snippets of code that are used to display media on a per-type basis. They are NOT full HTML pages and therefor should only be edited using a text editor. These snippets are used in conjunction with the template image.html. The following templates are included with ImageFolio Pro Edition 3.0. They are located in the ImageFolio3_files/skins/*your_choice*/templates/media directory:
aif.html
used for displaying embedded AIFF sound files

au.html
used for displaying embedded AU sound files

avi.html
used for displaying embedded AVI videos

mid.html
used for displaying embedded MIDI sound files

mov.html
used for displaying embedded Apple Quicktime videos

mp3.html
used for displaying embedded MP3 sound files

mpg.html
used for displaying embedded MPEG videos

swf.html
used for displaying embedded Shockwave Flash media

wav.html
used for displaying embedded WAV sound files

Modifying Media Templates
The W3C (World Wide Web Consortium) is constantly changing the standard on how browsers embed media. To keep up with these changes, you may need, or desire, to modify a media template from time to time. Modifying a media template is quite easy. Here is how to do it:

  1. Using an FTP utility, log in to your server and navigate to your ImageFolio3_files/skins/*your_choice*/templates/media directory and download the HTML file used for embedding the media type.
  2. Using a text or HTML editor, open the template. Modify the code. Save and close.
  3. Using an FTP utility, log in to your server and navigate to your ImageFolio3_files/skins/*your_choice*/templates/media directory and upload the new template, overwriting the existing file.
  4. To test: using a Web browser, type in the URL to imageFolio.cgi and verify that the new templates are working.
Custom Category Templates
With ImageFolio, each category can have it's own distinct look and feel. This is called Custom Category Templates. To enable Custom Category Templates, do the following:
  1. Choose a category for which you wish to use custom templates
  2. Make a copy of your image.html and thumbnails.html templates, from the ImageFolio3_files/skins/*your_choice*/templates directory.
  3. Using a text or HTML editor, open the new image.html and thumbnails.html templates.
  4. Modify the templates to get your desired look and feel for that category. Save and close.
  5. Using an FTP utility, log in to your server and navigate to your ImageFolio3_files/gallery/DIRECTORY directory, wherein DIRECTORY is the name of the category for which you would like to have custom templates.
  6. Upload or move, the new image.html and thumbnails.html templates into ImageFolio3_files/gallery/DIRECTORY
  7. To test: using a Web browser, type in the URL to imageFolio.cgi and verify that the new templates are working.
Tag Descriptions
The chart below is a reference for ImageFolio parsed HTML template tags "%%%."

TagReplaced With...
%%%CAPTION%%%the image description
%%%CATEGORIES%%%a two columned table list of category links
%%%CATEGORY%%%the title of the current category
%%%FILE%%%the URL to an embedded file or the filename
%%%FILEDATE%%%the last modification date of a file
%%%FILENAME%%%the filename of a file
%%%FILESIZE%%%the filesize of a file
%%%HITS%%%the number of hits that a file has received
%%%IFIMAGES%%%the URL to your if_images directory
%%%IMAGE_NAME%%%the filename, minus the extension
%%%IMAGE%%%the HTML code used to display or embed a file
%%%NAME%%%an ALT name for an embedded file
%%%NAV%%%the previous, home, next, & slideshow buttons
%%%NEXT_CATEGORY%%%a text link to the next category
%%%NEXT_PAGE%%%an arrow text link to the next page
%%%PAGELINKS%%%the current path linked (Top > Category)
%%%PAGES_LINKED%%%individual page spanning links
%%%PREVIOUS_CATEGORY%%%a text link to the previous category
%%%PREVIOUS_PAGE%%%an arrow text link to the previous page
%%%RATING%%%the average rating that a file has received
%%%RATELINK%%%a link to rate the current image
%%%PULLDOWN_MENU%%%a pull-down menu of top-level categories
%%%SCRIPT_URL%%%the URL to the script being called
%%%SEARCH_INFO%%%the number of files found & displayed
%%%SITE_TITLE%%%the title of your site
%%%SUBCATEGORIES%%%text links to a category's subcategories
%%%THUMB_LINK%%%a text link to "Return to Thumbnail View"
%%%THUMBNAILS%%%thumbnail images
%%%VOTES%%%the number of votes that a file has received
SSI Support
ImageFolio supports two types of SSI statements, exec cgi and include file. You can add these tags to any standard template, and ImageFolio will produce proper output.

Exec Statements
Exec statements are used to execute the code from an outside Perl script and include the script's output on a page generated by ImageFolio. This is useful, for instance, when using counter or banner ad rotation scripts. To use an exec cgi statement on your template pages, you must reference the script being called with an absolute (full) path, instead of the conventional relative path. Your statement should look like this:
<!--#exec cgi="/absolute/path/to/yourscript.cgi"-->
Include Statements
Include statements are used to pull in the contents of an outside file and display it, without modification, on the page being viewed. This is useful, for instance, if you want to save update and revision headaches by putting your site's navigational elements in one file, and have every page of ImageFolio pull in the HTML code from that file. To use an include file or include virtual statement on your template pages, you must reference the file being called with an absolute (full) path, instead of the conventional relative path. Your statement should look like this:
<!--#include file="/absolute/path/to/yourfile.txt"-->

or,

<!--#include virtual="/absolute/path/to/yourfile.txt"-->

Note...
Both statements above will produce the same result.


[ Top ]

© Copyright 1999-2002 BizDesign, Inc. All rights reserved.
BizDesign® is a registered trademark of BizDesign, Inc.
Permission to distribute, in any form, whole or part, is forbidden.

Home | User's Home | Report A Bug | List Your Site | Download Area | Documentation | Message Board
Powered by ImageFolio