folderHorizon asset development


Theme


If you are familiar with the CSS language it is quite easy to modify the graphic design.
The build/asset-default/theme/css directory contains the files to style the HTML pages:

* Make a copy of the asset-default directory and name it my-asset (eg).
* Modify the archive.json file: "AssetDirectory": "my-asset".
* And always backup your asset folder!

The asset-default directory also contains:

CKEditor up one directory is used only for editing HTML/Text during the archive development.
It is not included in the final releases because are not editable.

Templates


The directory asset-default/templates/ contains the *.tpl files used to build the HTML the index.html pages. folderHorizon reads the template files replacing three types of patterns:

1. {@_TPL_* Nested templates
2. [@_*     Data contained in archive.json configuration file
3. (@_*     Archive content and HTML required data


1. Nested templates scheme


global_header.tpl =>
{@_TPL_TOPNAV_ITEMS_@} loads array:
	global_nav_item.tpl +
	global_nav_items_extra.tpl [1] +
	global_nav_search.tpl

	page home.tpl =>
	{@_TPL_HOME_FILE_@} loads homepage figure file:
		home_file_image.tpl or
		home_file_video.tpl or
		home_file_audio.tpl
	{@_TPL_TEXT_@} [2] loads HTML/Text and wraps the editor:
		global_text.tpl =>
		{@_TPL_TEXTEDITOR_@} loads:
			global_texteditor.tpl

	page search.tpl [4]

	page section.tpl =>
	{@_TPL_SIDENAV_@} loads wrapper:
		sidenav_common.tpl =>
		{@_TPL_SIDENAV_ITEMS_@} loads array:
			global_nav_item.tpl
	{@_TPL_SECTION_ITEMS_@} loads array:
		section_item.tpl
	{@_TPL_TEXT_@} same as above...

	page project.tpl =>
	{@_TPL_SIDENAV_@} same as above...

	{@_TPL_GALLERY_WRAPPER_@} loads wrapper:
		project_gallery_wrapper.tpl =>
		{@_TPL_GALLERY_ITEMS_@} loads array:
			project_gallery_item.tpl
		{@_TPL_TEXT_@} [3] optionally same as above...

	{@_TPL_VIDEO_WRAPPER_@} loads wrapper:
		project_video_wrapper.tpl =>
		{@_TPL_VIDEO_ITEMS_@} loads array:
			project_video_item.tpl
		{@_TPL_TEXT_@} [3] optionally same as above...

	{@_TPL_AUDIO_WRAPPER_@} loads wrapper:
		project_audio_wrapper.tpl =>
		{@_TPL_AUDIO_ITEMS_@} loads array:
			project_audio_item.tpl
		{@_TPL_TEXT_@} [3] optionally same as above...

	{@_TPL_TEXT_@} [3] optionally same as above...

	{@_TPL_DOCUMENT_WRAPPER_@} loads wrapper:
		project_document_wrapper.tpl =>
		{@_TPL_DOCUMENT_ITEMS_@} loads array:
			project_document_item.tpl

	global_service.tpl [5]

global_footer.tpl


Notes

[1] The template 'global_nav_items_extra.tpl' (empty by default) allows to append
    items/links to the main topbar menu. See 'global_nav_items_extra.readme.txt' file.
[2] The template 'global_texteditor.tpl' (HTML/Text editor) is not loaded in release.
[3] The HTML/Text in project pages is placed after the first available media item.
    When page has no media, the text is directly placed in page from 'project.tpl'.
    See 'project.readme.txt' file.
[4] The 'search' page does not load 'global_service.tpl'.
[5] The template 'global_service.tpl' (editor & status service) is not loaded in release.


2. Data contained in 'archive.json' configuration file

[@_ARCHIVE_NAME_@]        "ArchiveName" value (the archive name as title)
[@_ARCHIVE_DESCRIPTION_@] "ArchiveDescription" value
[@_ARCHIVE_KEYWORDS_@]    "ArchiveKeywords" value
[@_ARCHIVE_AUTHOR_@]      "ArchiveAuthor" value


3. Archive content and HTML required data


Content

(@_PAGE_TITLE_@) The title of page
(@_PAGE_TEXT_@) The [text].html files content

(@_FILE_TITLE_@) and (@_FILE_DESCRIPTION_@) File title and description from *.txt caption files
	(@_FILE_CAPTION_@) The sum of the two above

(@_FILE_GALLERY_REF_@) Full size image source file reference
	(@_FILE_GALLERY_WIDTH_@) and (@_FILE_GALLERY_HEIGHT_@) Full size image required size
(@_FILE_THUMBNAIL_REF_@) Thumbnail image source file reference
(@_FILE_REF_@) Video, audio and document source file reference
(@_FILE_POSTER_REF_@) Video 'poster/preview' image source file reference (generated or custom)
(@_FILE_WAVEFORM_REF_@) Audio waveform image source file reference (generated)
(@_FILE_NAME_@) Document file name
(@_FILE_TARGET_@) Document download or new tab for .pdf files

(@_PROJECT_REF_@) Link to project in 'sections' pages
	(@_PROJECT_NAME_@) Text of link
	(@_PROJECT_IMAGE_REF_@) Image source file reference of project


Navigators

(@_NAV_REF_@) Link to relative index.html page
	(@_NAV_NAME_@) Page name
	(@_NAV_SELECTION_@) Current/selected page (css)

Paths

(@_HOME_REF_@) Homepage link/reference
(@_BACK_REF_@) Parent references: ../../ etc.
(@_ASSET_DIR_@) The 'asset' directory name

Var

(@_WRAPPER_CONTEXT_CLASS_@) Adds the page context css class (.home .archive) in global_header.tpl

(@_PAGE_TEXT_FILE_@) JS editor. The path to [text].html file in source archive
(@_PAGE_INDEX_FILE_@) JS status. The path to index.html file in build directory
(@_SERVICE_PORT_@) JS editor and status. The local service port



License


The folderHorizon asset theme and templates directories are public domain (PD)

Generally, the software is provided "as is", without warranty of any kind, express or implied, including but not limited to the warranties of merchantability, fitness for a particular purpose and noninfringement. in no event shall the authors or copyright holders be liable for any claim, damages or other liability, whether in an action of contract, tort or otherwise, arising from, out of or in connection with the software or the use or other dealings in the software.