Tutorial/TNG/Templates

From Biographies
Jump to navigation Jump to search

An introduction to Templates

A Template is a style set that controls the look and function of a TNG home page and its associated dynamically generated data pages.  With the release of TNG version 12, there are 18 Templates to choose from.  It is anticipated that more will be developed in the future.

When TNG is set up for the Guild of One-Name Studies' Members' Websites Project, the current default Template is Template 4.  Once a new Admin. logs into the TNG site, a different Template may be chosen.  In addition, a different Template may be chosen at any time in the future.  But the Admin. is cautioned that each Template is different, so choosing a different Template after the current one has been fully set up may cause certain aspects of the current home page to be lost.

To select or change a Template, in the TNG Admin area, navigate to: "Setup >> Configuration >> Template Settings."  At the top of this page, if "Enable Template Selection" is set to "Yes," then any Template may be chosen in the dropdown Template menu selection window just below.

To facilitate Template selection, a comparison chart of significant Template features is provided below.  In addition, the TNG software developer has created an area on his website where the different Templates can be viewed, and logged into, so that a full comparison can be made.  Go to the TNG Demo main page: TNG Demo main page.  Click on either the Public Interface or Administrative Interface links to go to a page where all the different Templates can be viewed in detail.  You can also log into the demonstration templates to see how they operate in either Public or Admin mode.  Should the Template demonstration be in a foreign language, go back to the TNG Demo main page again, click on the "What's New" page image on this page, which takes you to a "What's New" page on "Darrin and Andrea's Lythgoe's Genealogy Pages" TNG site.  Here you can change the language to English, and then return to the TNG Demo main page once again to view the different Templates in English.

Comparison of template features

Some of the feature descriptions, in the first column, are links that can be clicked on to see more information further below.

Templates
Features #1 #2 #3 #4 #5 #6 #7 #8 #9 #10 #11 #12 #13 #14 #15 #16 #17 #18
Common features:
welcome paragraph Checkmark green 24x18.png Checkmark green 24x18.png Checkmark green 24x18.png Checkmark green 24x18.png Checkmark green 24x18.png Checkmark green 24x18.png Checkmark green 24x18.png Checkmark green 24x18.png Checkmark green 24x18.png Checkmark green 24x18.png Checkmark green 24x18.png Checkmark green 24x18.png Checkmark green 24x18.png Checkmark green 24x18.png Checkmark green 24x18.png Checkmark green 24x18.png Checkmark green 24x18.png Checkmark green 24x18.png
main / header title[1] Checkmark green 24x18.png Checkmark green 24x18.png Checkmark green 24x18.png Checkmark green 24x18.png Checkmark green 24x18.png Checkmark green 24x18.png Checkmark green 24x18.png Checkmark green 24x18.png Checkmark green 24x18.png Checkmark green 24x18.png Checkmark green 24x18.png Checkmark green 24x18.png Checkmark green 24x18.png Checkmark green 24x18.png Checkmark green 24x18.png Checkmark green 24x18.png Checkmark green 24x18.png Checkmark green 24x18.png
title as image? Checkmark green 24x18.png Checkmark green 24x18.png Checkmark green 24x18.png Checkmark green 24x18.png Checkmark green 24x18.png
main image Checkmark green 24x18.png Checkmark green 24x18.png Checkmark green 24x18.png Checkmark green 24x18.png Checkmark green 24x18.png Checkmark green 24x18.png Checkmark green 24x18.png Checkmark green 24x18.png Checkmark green 24x18.png Checkmark green 24x18.png Checkmark green 24x18.png Checkmark green 24x18.png Checkmark green 24x18.png Checkmark green 24x18.png Checkmark green 24x18.png Checkmark green 24x18.png Checkmark green 24x18.png Checkmark green 24x18.png
menu tint
bkgnd tint
Menus:
position B B B L T T L T L L B T B B T L B B
pulldown Checkmark green 24x18.png Checkmark green 24x18.png Checkmark green 24x18.png Checkmark green 24x18.png
title Checkmark green 24x18.png
Feature links:
header links (His side / Her side)[2][3] [4] 2 2 4 4 4 4 4 4 4
feature links 4 3 3 10 2 2
- - - - :
search box Checkmark green 24x18.png Checkmark green 24x18.png Checkmark green 24x18.png Checkmark green 24x18.png Checkmark green 24x18.png Checkmark green 24x18.png Checkmark green 24x18.png Checkmark green 24x18.png Checkmark green 24x18.png Checkmark green 24x18.png Checkmark green 24x18.png Checkmark green 24x18.png Checkmark green 24x18.png Checkmark green 24x18.png Checkmark green 24x18.png Checkmark green 24x18.png Checkmark green 24x18.png Checkmark green 24x18.png
language selection Checkmark green 24x18.png Checkmark green 24x18.png Checkmark green 24x18.png Checkmark green 24x18.png Checkmark green 24x18.png Checkmark green 24x18.png Checkmark green 24x18.png Checkmark green 24x18.png Checkmark green 24x18.png Checkmark green 24x18.png Checkmark green 24x18.png Checkmark green 24x18.png Checkmark green 24x18.png Checkmark green 24x18.png Checkmark green 24x18.png Checkmark green 24x18.png Checkmark green 24x18.png Checkmark green 24x18.png
surname top 100 Checkmark green 24x18.png Checkmark green 24x18.png
features
templates 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

Notes:

  1. Note: some templates have just a "'Main title", others have a "Main title" and "Header subtitle". #4 has only a "Header title" and #8 has both menu title and 3 header titles.
  2. The default link labels are: His Side", "Her Side", "Third Link" and "Fourth Link" You can change the labels and purposes to suit your study. See His side / Her side .
  3. His Side / Her Side - This function is intended to identify and link specific individuals on your home page.  You can leave this area blank on the "Setup >> Configuration >> Template Settings" page in your TNG Admin area if you do not wish to use this function. PLEASE NOTE that in your agreement to join the MWP you have agreed to only to provide information about your ONS on this Guild supported website, and not your ancestors, if different.
  4. MWP Terms and Conditions, item 6, Content and Accessibility of Websites.  "You may only include material that is broadly relevant to the specified one-name study."
    Read more at (log-in required): MWP Content

Template Settings

Select a template

Example of template selection, showing Template #4

Only users with administration role can select or modify a TNG template selection. Log in as admin, then go to Administration >> Setup >> Template Settings. You will then see a page for selection of your preferred template, and a set of selection buttons, checkboxes and text boxes where you can customize the appearance and contents of your homepage.

You can try out as many of the templates as you wish. You can test each template, changing the images, captions and paragraphs, doing a save and seeing the results. Each template is independent from the others, so your editing in one template does not overwrite your changes in any other. Which means you can try out several templates until one stands out from the others.

Once you have a template that works for you, be sure to click on 'Save' at the bottom. Then click on 'Public Home' to review the results.

To select a template, on the Template Settings page, first make sure the first selection, 'Enable Template Selection' is set to Yes.

Select a template from the Template: pull-down list. To make it easier, click on the 'Show Previews' Button. You can then use the horizontal slider to see thumbnail images of all the templates. Clicking on a thumbnail image will also select a template.

When you select a template, the options on that page will change accordingly. If you had edited a template before, your previous edits will then appear.

The default template is #4. The following descriptions are dependent on the selected template. See the Comparison Chart for options by template number. Typically, the higher numbered templates contain more and improved features, as they were included in later releases of TNG.

Welcome paragraph

Templates: all

The default 'Welcome paragraph' text box has some gibberish Latin-like text. This is just a placeholder paragraph, so that you see the appearance on your test homepage, just not the contents you want. Go ahead and overwrite the default text with your welcoming. To delete it, select all the text and hit our 'Delete' button. To select all the text, you can either highlight it by swiping your cursor across all the text, or use the CTRL-A command on your keyboard.

Your welcoming paragraph can be plain text if you wish, or you can use some simple in-line code commands to enhance the appearance. The in-line code commands, more properly called html tags, are instructions to a browser to alter the appearance of text on a browser window. Refer to any html reference website for more instructions and examples, such as: w3schools.

Main and Header title

Template #1 using image for title
Template #1 using text for title

Templates: all

Text or image titles:
Some templates (see Note 1 in the comparison chart) will allow you to use an image for your main title or header title. If you do, please optimize the size of your image for the task. Or, you can select text. In that case, TNG will look after the text font style and size for you. See the next section Main image for suggestions on editing and uploading images.

Use the Title Option radio buttons to select either "image" or "text".

Main image

Templates: all

The main image is the dominant feature on your homepage and should be chosen for attractiveness, for relevance to your study and for content. This is up to you: it could be your earliest ancestor in a photo or sketch, the homeland town or city, could be a farmhouse, a family activity, a family heirloom or a document. You call it.

Once you decide on a suitable image, there may be some required adjustments before uploading to your homepage. Does it need cropping, do you need it oriented as landscape or portrait, are the dimensions, in pixels suitable, does the file need to be reduced in size?

If you are comfortable with any photo imaging software, then the above questions are familiar to you. If not, check out the tutorial at: Photo resizing. This tutorial uses Paint, a tool that comes with Microsoft Windows. If you are not using Windows, your computer should come with a similar image editing application. For the Mac computer, you can use Tools, in the Preview menu bar, which can do cropping and resizing.

  • Cropping: The homepage image is the first thing visitors will see. Do you need to crop out extraneous items from the photo? Paint includes a cropping feature.
  • Orientation: Check the default main image on the template. Is it oriented horizontally or vertically? You may want to follow suit. That should be a guide for you.
  • Dimensions: Website images are measured in pixels wide by pixels high. The proportion of horizontal to vertical pixels is also called the "aspect ratio" of your image. Select an image, or crop it, to have the same orientation and similar aspect ratio as the default image. If you choose otherwise, you may need to experiment with it, to see if this bumps into other items on the homepage. Paint includes a resizing feature.
  • File size: Getting the image file size right can be one of the more vexing tasks for images, whether for the homepage or elsewhere in your TNG site. Basically, if your image file is large, say 1 megabyte or larger, it can be slow to render on a screen if your visitor has a slow internet connect speed. So, as a courtesy, best to put your image on a diet. But, you say, that is modifying an original (digital) document. Yes, but this is only for display purposes on the homepage, not for document preservation. That can be done inside your TNG site.

Uploading an image:

Tutorial template 4 upload image.JPG

Where main and title images can be uploaded, you will see a text box, a Preview button, a Change button and the default pixel dimensions. See the example, right:

All template images are stored in a sub-folder called: "img/". Don't change that, or you will not be able to find your image. Each template has its own /img subfolder, so if you change to another template but want to use the same homepage image, you need to upload it to that template also.

There can be several other members who decide to use the same template as you have. And so their images will be found in the same /img subfolder. So that your image does not get lost and as a courtesy to others, please, please include your surname as a prefix to the image file name. For example, if your surname of study is "Bumstead", then your homepage image might be titled, "bumstead_main_image.jpg". This is only needed for template images; not for media in your TNG study.

The example shows a file ending in ".gif". That is a type of image file. More likely, you will be using JPG, TIFF or PNG files. Don't worry about it; this is handled when you upload the file.

Note the default image dimensions: "395 x 159 px". The dimensions are first, for the width, and then for the height, and "px" = pixels. This is your guide for sizing of your image. Different templates will have different image dimensions, so make a note of the one you want to replace. Once your image is uploaded, the pixel dimensions, displayed here, will be updated for your image.

You can click on Preview to see a pop-up of what is there now, for TNG.

But, you want your own image. Once you have cleaned up your image on your home computer and are ready to upload, click on the Change button. You now see two more buttons displayed: Choose File button and a Select button. The first button is used to upload an image from your home computer. The Select button is used if you did an image upload previously to TNG and want to reuse it.

His Side / Her Side (header links)

Your template may have four, two or no link labels at the top of the homepage. See the Comparison Table and Note #2 for some details.

If you have two link labels, as in template #9, then you will see the default description of "His Side" and "Her Side" at the top. If you have a template with four link labels, then #3 and #4 have default descriptions of "

Template #6 and #8 do not have header links. However, they do have "His Side / Her Side" links in the body. For #6, you can use to link to a pair of individuals in each side. For #8, you can link to one individual on each side.

Feature links