How to format HTML listings

When a HTTP client requests a folder URL that it has permission to list and the file-explorer is disabled, CompleteFTP will return a listing in HTML. The format of this listing is controlled by a template that may be modified. The template is defined by a single HTML page containing macros (see the 'Template Format' section below).

The template is modified using an editor that features real-time previews. Clicking on the ellipsis (...) in the Listing template property displays this editor, shown below.

HTML template

The HTML to be used for the folder listing is entered on the left. On the right are shown the rendered HTML, and the generated HTML (i.e. with macros expanded). Macros may be entered manually or inserted by clicking the 'Insert macro' link at the bottom. The 'Reset to default' link may be clicked to set the template back to CompleteFTP's default format.

Template Format

The template is split into three sections: the header, the entry-block and the footer. The header is everything before the %EntryBegin% macro; the entry-block is everything between %EntryBegin% and %EntryEnd%; and the footer is everything after %EntryEnd%. When a folder-listing is rendered the entry-block is repeated once for each entry in the folder. An entry can be a file or a sub-folder.

The table below defines the available macros as well as stating which section each macro may be used in:

MacroSectionDescription
%EntryBegin%Start of entry-blockMarks the start of a block that defines the format of a single entry in the listing - file or folder
%EntryEnd%End of entry-blockMarks the end of a block that defines the format of a single entry in the listing - file or folder
%FileCreated%Entry-blockDate and time at which the file or folder was created
%FileGroup%Entry-blockGroup of the folder or file
%FileLength%Entry-blockLength of the file in bytes, kB, MB or GB
%FileModified%Entry-blockDate and time at which the file or folder was last modified
%FileName%Entry-blockName of the file or folder (not including the path)
%FileOwner%Entry-blockOwner (user) of the folder or file
%FilePath%Entry-blockFull virtual file-system path of file or folder
%FilePermissions%Entry-blockUNIX-like permission string of the file or folder
%FileType%Entry-blockType of the directory-entry - either 'File' or 'Folder' (useful for CSS classes)
%FolderName%Header or footerName of the folder being listed
%FolderPath%Header or footerFull virtual file-system path of the folder being listed
%TimeZoneName%Header or footerName of the current time-zone
%TimeZoneOffset%Header or footerOffset (in hours) of the current time-zone compared to UTC

Formatting:

Formatting instructions may be provided with each macro to refine how it is rendered. These instructions use a syntax similar to the composite formatting syntax defined by Microsoft. The general pattern is:

%macro-name[,alignment][:formatString]%

where macro-name is the name of the macro as shown in the table above or plain text (see below); alignment is an integer defining the preferred width of the field (positive=left-aligned, negative=right-aligned); and formatString provides instructions on how the text is formatted. These instructions depend on whether the field's type is a date or a number.

The functions, Max(m) and Pad(m), may be placed in a format-string. m is the name of an entry-block macro, such as FileName. Max(m) returns the maximum width of the field, m. Pad(m) returns the difference between the maximum and minimum widths of the field, m.

If the text that is not a legal macro-name is provided then that text is rendered literally. If no macro-name is provided then spaces will be inserted according to the alignment format. For example, ,Max(FileName) will insert a number of spaces equal to the longest file-name.

Example:

The following example produces a listing similar to the default listing format of Apache:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN"> <html> <head> <title>Index of %FolderPath%</title> </head> <body> <h1>Index of %FolderPath%</h1> <pre> %Name,-Max(FileName)% Last modified Size Description <a href="..">Parent Directory</a> %EntryBegin%<a href="%FileName%">%FileName%</a>%,Pad(FileName)% %FileModified,-25:yyyy-MM-dd hh:mm%%FileLength,-10% %EntryEnd%</pre> <address>In the %TimeZoneName% Zone (GMT %TimeZoneOffset:+#;-#;0%)</address><FORM METHOD=POST ENCTYPE="multipart/form-data" ACTION="."><INPUT TYPE=FILE NAME="upfile"><INPUT TYPE=SUBMIT VALUE="Upload File"></FORM> </body> </html>

Notes:

  1. Since Name is not a legal macro-name, the text %Name,-Max(FileName)% will render the literal characters "Name" followed by the number of spaces required to yield the same total width as the longest file-name.
  2. %,Pad(FileName)% yields a number of spaces equal to the difference between the longest and shortest file-names.
  3. %FileModified,-25:yyyy-MM-dd hh:mm% renders a file's last-modified date left-aligned in the format "2012-15-11 14:02" and padded with spaces to give a total width of 25 characters.
  4. %TimeZoneOffset:+#;-#;0% yields the timezone offset hours with a plus- or minus-sign in from of it.