|
|
|
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.
- After saving a template in Front Page, open the template in a text editor (Not in Front Page).
- Look to see if any
% signs have been changed by Front Page to %25
- If
% signs have been changed, do a global search and replace, and replace %25 with %.
- ...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:
- 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.
- Using a text or HTML editor, open the template. Modify the code. Save and
close.
- 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.
- 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:
- Choose a category for which you wish to use custom templates
- Make a copy of your
image.html and thumbnails.html
templates, from the ImageFolio3_files/skins/*your_choice*/templates
directory.
- Using a text or HTML editor, open the new
image.html and thumbnails.html
templates.
- Modify the templates to get your desired look and feel for that category.
Save and close.
- 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.
- Upload or move, the new
image.html and thumbnails.html
templates into ImageFolio3_files/gallery/DIRECTORY
- 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 "%%%."
| Tag | Replaced 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.
|
|