What is an HTML template?

Updated Feb 13, 2014

The ScreenSteps HTML template system provides a way to export content into a variety of custom formats. The primary use for HTML templates is to create HTML content, but templates can be customized to create any type of content that is text-based. For example, you might create a custom template to export to XML, Markdown, MediaWiki or other formats.

What language does an HTML template use?

ScreenSteps uses the PHP engine to process the template files. ScreenSteps converts manuals and articles into PHP objects that can be accessed from within template scripts.

What does an HTML template folder look like?

An HTML template is a folder which contains the necessary template files. A template folder is comprised of the following items:

  1. config.xml: The configuration file provides instructions about how ScreenSteps should prepare your content prior to passing it off to the PHP engine.
  2. ./Content folder: The Content folder contains all of the files necessary to export a template. At a minimum it will contain an article and manual folder. If you have supporting PHP files that are used in your HTML template then you would place them in the Content folder.
  3. ./Content/article folder: The article folder contains all of the files that will be exported when exporting an article.
  4. ./Content/manual folder: The manual folder contains all of the files that will be exported when exporting a manual.
What does an HTML template folder look like?

config.xml

The config.xml file can set any of the following properties:

  • web_safe: true or false.
  • text_format: xhtml or runs. xhtml is appropriate for creating HTML content and you won't need to do anything to the text that ScreenSteps puts into the PHP objects. runs formats text in an array that separates the actual text from the formatting applied to the text. This allows you to more easily massage the text into other formats (e.g. markdown).
  • word_separator: character used to separate words in names.
  • image_names: format used to name images. random or step_title. random can be useful if you need to ensure that you never end up with duplicate image names when importing into a 3rd party system.
  • max_image_dimensions: The maximum image dimensions to use for width and height. Entries are a comma delimited list of integers. You can provide just the width, width and height, or just height. Examples:
    600,
    600,500
    ,500

The default config.xml file contains the following XML:

<?xml version="1.0" encoding="utf-8" ?>
<properties version="1">
	<web_safe>true</web_safe>
	<text_format>xhtml</text_format>
	<word_separator>-</word_separator>
</properties>

Here is an example using image_names and max_image_dimensions.

<?xml version="1.0" encoding="utf-8" ?>
<properties version="1">
	<web_safe>true</web_safe>
	<text_format>runs</text_format>
	<word_separator>-</word_separator>
	<image_names>random</image_names>
	<max_image_dimensions>600,</max_image_dimensions>
</properties>

The article folder

The article folder is where you put all of the files that will be exported when exporting an article. There are two files that are required:

  1. @article: This is the template file that ScreenSteps will process with PHP. The filename must start with @article. The extension you add is up to you.
  2. @images: This is a placeholder file. ScreenSteps will store all article images in the same location as this file.

Any other files and folders in the article folder will be copied into the folder the article is being exported to.

The article folder

The manual folder

The manual is like the article folder but is used when exporting manuals. The files to include in a manual template are as follows:

  1. @tofc: ScreenSteps will process this file with PHP and it will become the table of contents for the exported content.
  2. @article: This is the template file that ScreenSteps will process with PHP for each article in the manual. The filename must start with @article. The extension you add is up to you.
  3. @images: This is a placeholder file. ScreenSteps will store all images in the same location as this file.
  4. @article: This is a placeholder folder and it is optional. If present and it contains the @images file then ScreenSteps will organize all images by article.

Any other files and folders in the manual folder will be copied into the folder the manual is being exported to.

The manual folder

4 Comments

Andy Duckworth

How does one get access to the folders mentioned in this article?

Trevor DeVore

@Andy - There are some sample templates available for download at the end of this manual. They have the folder structure described in this article. Look at the "Sample templates for download" article.

The next article in this manual shows how to install a template that you create.

Andy Duckworth

Once we edit one of the sample templates will all the assets get loaded to the Screensteps Live server? Or do we need to copy this folder structure on to every machine that will have the client installed?

Trevor DeVore

@Andy - HTML templates reside on your individual computers. You need to copy the folder structure to every machine that needs to export the HTML.

Depending on your needs it may make more sense to create something that access our API and generates the content you need. If you email support@screensteps.com and tell us what you are trying to do we can help you come up with a solution.

Add your comment

E-Mail me when someone replies to this comment
Previous Article How can I log a user into ScreenSteps using PHP and ScreenSteps Remote Authentication?
Next Article Installing a custom HTML template

Still Need Help?

Contact Us