Export
The export facility of ClipCollect produces linked HTML files from a directory of your choice. This means that a hierarchical navigation structure will get derived from the subdirectory structure of the chosen directory. The outcome is a complete website, which you can view locally in your browser or which you can upload to a web host.
The first dialog box
- In the first dialog box you specify the pathname of the directory to be transformed, the Source Directory. This doesn't necessarily need to be your Data directory or one of its subdirectories, it can be any directory.
- It is possible but not necessary to change the directory to which the HTML files are written - the Target directory. But be careful, during an export ClipCollect will remove everything including all subdirectories in the Target directory!
- With an entry for the icon directory you can override the default icons that get used for the navigation bar. Examples for alternative icon sets are in the subdirectory "Icons". For creating your own set add a folder, copy your combination of icons into it or create your own icons using the same icon names. If an icon is not found in the directory you specified, the default icon will get used, so your set does not have to be complete.
- You have to enter the name for the start file also. The default "index" will be the right choice for an upload.
- The second dialog box asks you for special options. You can skip it completely. Click "OK" and the generator will start.
At Visoracle Download is an example of what you can create with ClipCollect.
How to control the contents
- There are two kinds of pages:
- A directory page will show all contents of a directory. Below the hierarchical navigation path is a list of links to its direct subdirectory pages and below that comes a list of links to all its content pages.
- A content page shows simply the contents of a file which can be plain text, HTML, an image or flash. Its navigation bar shows links to its directory and parent directory pages, a previous/next navigator and the file's name.
- Creating a website is simply done by changing the structure of directories and files. Think of a useful hierarchical structure, make directories accordingly with appropriate names and move your files into them. Then run ClipCollect export and voila - ready!
Special operations
- To exclude a specific file of your source, prefix the file name with a "-". Every file, which name starts with the minus sign, will be skipped. This means it will vanish from the file list of a directory page and is not accessible anymore.
- Every file which name that starts with the plus sign, will also be skipped and furthermore treated specially (see below).
Several images on a single page
- If a file name starts with "++" or "+" the file will be removed also from the file list, and instead it will get inserted directly in the directory page.
- "++" files are inserted at the top of a directory page and "+" files are placed at the bottom. With these top and bottom files, you can for instance describe or illustrate the contents of the directory.
- Or you can produce a page with multiple inline objects, e.g. you can place more than one images on a page. The inserted files are ordered alphabetically. To control their sequence they can be named like "+{01}xxxx" "+{02}xxxx".
- There is a special way to attach text to an inline object like images (jpg jpeg gif png bmp) or Flash (swf). Just create a text file named like the image file in the same directory. For example a "+image.gif" would need one of:
- "+image.txt" or
- "+image.html" or
- "+image.htm"
- This text will float around the image at the right. Note that txt-files will be wrapped. So don't be astonished that a txt-file paired with an image looks different compared to its standalone version.
Examples
Let's have a look at an example and assume you chose to export the contents of "Chosen Directory". Here is a sample HTML page resembling a directory 3 levels below "Chosen Directory".
Example Page for a directory.
There is another kind of page which mirrors the content of files. The page corresponding to "File a" looks like this:
Example Page for a file.
And here you will find an example for a complete site generated by ClipCollect, another one demonstrating images surrounded by text and a converted textual database. The two latter examples were produced without coding a single HTML line.
Very special operations
- For defining the sequence of files, prefix their names with a counter like "{01}" which will get excluded from visible names. Example:
- {01}ThisWillBecomeThePageHeader.txt
- To override the automatic naming of output files, the desired name can be added within square brackets in the source file name. This output file name can include a relative path (e.g. forcedSubdirectory#forcedFileName) in order to put files in different folders in the target structure. Slashes have to be replaced by # in this relative path. A local file name with html for the navigation structure may follow after a first comma and/or a navigation title after another comma. Example with all 3 optional parameters:
- pageHeader[forcedFileName,-insertionFileName.html,forcedNavigationTitle].txt
- The inserted file -insertionFileName.html
- Allows more control over list elements on a directory page. It is a html file that will be inserted instead of the default title or forcedNavigationTitle to describe a list item (file or subdirectory of the directory).
- It has to be in the same directory as the file or directory the list item points to
- Its name needs a leading "-" and the extension and must not include a comma.
- This html file will be included 'as is' into the directory page as a replacement for the link that points to the list item. Thus it has to include this link. Because the actual name of the output file is unknown beforehand a placeholder ##URL## is used.
One-line example that produces a link similar to the default item:
- <a href="##URL##">item description</a>
- There are two special file names: "-meta-description.txt" and "-meta-keywords.txt". The contents of a file named like these will be put in its corresponding directory page in the header section within meta tags.
The second dialog box
- Select which file types shall be processed. Choices are text, HTML, images and Flash. Note, that embedded objects in HTML files will get relinked. There are two typical scenarios for HTML files:
You want to save a complete page loaded with a browser from the internet to your source directory so that it can be exported later with all images. Navigate in the browser's save dialog to the target directory, choose "save complete" and enter a name for the file starting with a "-". The browser will then produce a directory and a file in the target directory. Now remove the "-" from the file name with a file manager, but leave it for the directory.
While exporting ClipCollect will process the HTML file and copy all embedded objects from the directory, just as expected. The directory and its contents will be skipped for the normal processing of files, because its name starts with a "-". If you had entered a name without the "-" all images would get copied twice and would get their own wrapping HTML page additionally.
To code a HTML page with embedded objects manually, it is best to create a directory with a name like "-objects" or "-images" directly below the source directory which you want to export. Again the "-" assures that normal processing skips the directory. You can link to this directory using a relative URL like "-objects/image.jpg".
This works regardless of the position of the HTML file in the source structure! It can reside in the source directory or one, two or more directories below it. The advantage is that you can later move the HTML file around in the source structure without having to change internal links or move images. To enable your browser to find these images for inspection of your page during development, place a meta tag line in its header section like: <base href="file://C:/x/y/z/SourceDir/">
That will force the browser to the right starting point. On export the complete header will be left out, so this is only for your convenience while developing the HTML page. ClipCollect will find embedded object files the normal way too, resolving either a relative URL or an absolute local address (full Windows pathname). If it can't find a corresponding file, it will leave the URL unchanged.
- To refine the design you can specify a css file. Each single page will refer to this file. Take care about the correct relative pathname. If you plan to upload this autogenerated site to the root directory of your web server and you add a directory "css" with the css file in it, the pathname must be "css/mycssfile.css".
There are some stylesheet classes which you can refer to specifically:
- for directory pages:
dirbody - everything within the body tags
dirtop - everything below the header and above the navigation table
dirtable - everything within the table tags of the navigation table
dirpath - the top cell of the navigation table with the directory path
dirdirectories - the middle cell of the navigation table
dirfiles - the bottom cell of the navigation table
dfex - all file or directory links by an inserted external html file
df0 - all file or directory links with even sequential numbers in this cell
df1 - all file or directory links with odd sequential numbers in this cell
dirbottom - everything above the footer and below the navigation table
dirtxt - text from txt-files
dirtxtright - text from txt-files floating around images
dirhtml - text from html-files
dirhtmlright - text from html-files floating around images
dirdownload - download links
- for file pages:
filebody - everything within the body tags
filetable - everything within the table tags of the navigation table
filepath - the navigation bar with the directory path and the file title
filebottom - everything above the footer and below the navigation table
filetxt - text from txt-files
filehtml - text from html-files
filedownload - download links
- for the abc list:
abcpath - the single cell of the navigation table
abcbottom - everything above the footer and below the navigation table
- for all pages:
header - the contents of the header file
footer - the contents of the footer file
- Example: To color the right cell with the file name on each file page and the right cell with the file list on each directory page yellow, add this to your css file: ".filename, .dirfiles { background-color:yellow }".
- Here is the source code of a css file similar to the one of this help manual.
- In order to make your pages more dynamic you can refer to an external Javascript file by specifying its relative pathname which will get inserted into the header of every output file.
- With the header and footer file selection, you can activate an insertion of text at the very top or bottom of each page. These files should contain HTML code. They are useful e.g. for placing an additional navigation structure on each page, when you plan to link this as a subsite into your website.
- The Random Jump Button allows the surfer to jump to a new page by random. You have the choice to include file and/or directory pages in this jump pool. If you for instance want to exclude directory pages because the real content is in the file pages, just disable the directory checkbox. In case none of both is selected, the Random Jump Button will not show up at all. The browser's settings must enable Javascript, otherwise the jump will not work.
Configuration, command line, batch processing and logging
- All these settings will get saved automatically when the generator starts its work, so that you can easily tweak the configuration or just repeat the same generation after changes in your source directory took place. With the Menu of the [Visit the Visoracle] button you can save and load a complete configuration including the export settings under a specific name. This way you can e.g. maintain different websites.
- ClipCollect can be started with command line parameters. There are two options:
- clipcollect configFilePathName
- clipcollect configFilePathName /e
The former loads on start a configuration file which must be specified with a full path name. The latter silently starts an export with the parameters given in the config file and shuts ClipCollect down after finishing. This one is for batch processing. Note that a path name which contains a space must be surrounded with "" like this:
- clipcollect "c:\programs\clipcollect\config\example export.ini" /e
If there is an /e parameter it must always follow the path name separated by a space.
- Each export operation of ClipCollect will get logged in a file named export.log in ClipCollect's home directory.
- If the configuration file contains a line like:
- "export root=http://www.visoracle.com/clipcollect", some URLs in the navigation structure get "HTML-encrypted".
- "export filelistmode=ol" or "export filelistmode=ul", the file list in directory pages are written as a HTML list.