===== How to create & edit your own templates ? =====

If the [[tutorial01|first Tutorial]] explains the basics of the template creation, this tutorial is aimed at the file organization when creating and editing your template.

==== File directory for templates ====

The ''json'' files for the templates are all stored in the ''src/js/templates/'' directory. Yours should go there too. Subdirectories are possible.

Just create your own template, for example ''myowntemplate.json''. You can start from scratch ([[tutorial01|follow the tutorial]]), or copy an existing template to serve as a base (a good way to start, in my opinion).

==== Referencing your template ====

A single file in the project references all the templates that are presented by Geckos. It's the file ''src/js/templates/load-templates.js''.

If you're on Windows, after creating the ''json'' file for your template, you can just launch the script ''generate-requirejs-template.vbs''. It will generate the ''load-template.js'' file with all the templates in the directory.

You can also edit the file. It's a simple one : 

<code javascript load-templates.js>
define([
'json!templates/templates01.json',
'json!templates/myowntemplate.json'
],
 function(
tpl1, tpl2)
 { return { load: function() {
var list = [ ];
list.push(tpl1);
list.push(tpl2);
return list;

} }; });

</code>

Editing manually this file is helpful when you want to display / use only a couple of templates. In this example, two templates only are loaded by Geckos.

If you don't reference your template in this file, it won't appear on the UI.

==== Resource Files ====

Many templates use external resource files. You could embed them as [[..:template:dataurl_variables|DataURL]], but external files are easier to maintain and use in development mode.

External files for a template are better all in one place. In the ''src/js/templates'' directory, create a subdirectory named ''mytemplate''. You will put your images and other external files there.

When you references those files in your templates, the starting point is coming from ''src'' directory. It should look like this in the template : 

<code javascript>
"path": "./js/templates/mytemplate/myfile.png"
</code>

Again, look at existing templates to learn a few tips !