Ancestor Tree Manager - Manual - Reporting

Ancestor
Tree
Manager

Templates

Templates are used for generating the reports. A standard set of templates is supplied with the program, which can be found in the folder:

C:\Program Files\AncestorTreeManager\templates (on Windows)
/usr/local/AncestorTreeManager/templates (on Linux/Mac)

The following templates are available:

Person.html	person page
Chart.html	ancestor overview
Report.html	reports (ancestor tree, descendant tree, genealogy)
Index.html	index page
Pictures.html	overview of persons with a portrait
Slideshow.html	slideshow of the portraits
Stories.html	overview of persons with a story
Content.html	table of contents of the nested menu items (to supplement the small screen navigation)
Home.html	home page
User.html	user-specific page
Viewer.html	scan page

If desired, a template can be adapted to your taste. You could for example include Google Analytics or add an introduction text to the picture overview page.

Copy the template to: [family tree folder]/Templates, see Folders and files.

Adjust the copied template with a Text Editor and store the file in UTF-8.

Below an example of the Pictures.html template in which 2 pieces of code are added, marked with 'START USER CODE' and 'END USER CODE'.

<!DOCTYPE html>

<html lang={LANGUAGE}> 
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0">
   <title></title>

   <link rel="icon" type="image/x-icon" href="../Style/WebsiteIcon.ico">
   <link rel="stylesheet" href="../Style/Atm.css">
   
<!---------- START USER CODE ---------->
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=XX-1234567"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'XX-1234567');
</script>
<!---------- END USER CODE ---------->
   
</head>

<body>
   <div class="atm-container">

   <!---------- Small screen ---------->
   <div class="small-screen">
{HEADER_SMALL_SCREEN}
   </div>

   <!---------- Large screen ---------->
   <div class="large-screen">
{HEADER_LARGE_SCREEN}
   </div>

   <!---------- Content ---------->
   <div class="atm-content">

   <h2>{TITLE}</h2>

<!---------- START USER CODE ---------->
<p>
Introductory text, for example a word of thanks to the people/institutions who supplied images.
</p>
<!---------- END USER CODE ---------->

{CONTENT}
   </div>

   <!--------- Footer ---------->
   <footer>{FOOTER}</footer>

   </div>
</body>
</html>