Histories - Creating

From TNG_Wiki
Jump to navigation Jump to search

There are multiple ways to create Histories using the TNG Histories Media Collection:

  • As Body Text in the Histories media collection
  • As a file using the historytemplate.php
  • As a link to an external web site
  • As a Folio


As Body Text

You can use the Body Text in TNG Media record to create a Histories page.


TNG version: ≤ 9.2.2

In TNG V9 and before, the Body Text area is only available in the Histories media collection or any user media collection that behaves like histories


TNG version: ≥ 10.0

In TNG V10 and after, the Body Text is available in any media collection

You simply enter your text in the Body Text input area.

Using the NicEditor you can also add HTML tags to format the content.


Histories as body text.png

HTML or Word Content

If you have HTML files, you could copy the contents between the <body> and </body> statement in your HTML file and paste it in the Body Text area of the Media record.

Likewise you can paste the contents of a Word document as illustrated by Bryan Larson. You can:

  • Add your text or HTML to Body Text
  • Simply paste your text within the Body Text area or you can select Font Format and any other toolbar button to format your text
  • You can also click the HTML icon to directly edit the HTML code for the page
 Richtext history editing screenshot annotated.png

Here again, you would need to provide your own thumbnail or use the TNG default.


Some examples are

  • The page generated from the rich text format entered above provided by Bryan Larson
Richtext history screenshot.png

Adding Images to Body Text

For pictures, a little HTML is required. I still think it is easiest for a novice to do the formatting in a Rich Text editor such as Word. A placeholder is set for images, but the images do not transfer over. What needs to be done at this point is to upload a copy of any images embedded within a Word document to the server, then point the html to that file on the server. So, by clicking on the HTML box, all of the HTML will be available to view - and there will be a lot of it. To fix the broken images, look for something that looks a bit like this: 


<img src="file:///C:\Users\NAME\AppData\Local\Temp\msohtmlclip1\01\clip_image002.gif" height="309" width="544">

Please note that this is only an example and yours will look a little different. The key thing to look for is the part that starts with <img src="


If I upload the image to a directory I call "historyimages", I will change the above line to this: 

<img src="http://www.MYSITE.com/historyimages/clip_image002.gif" height="300" width="450">

...where "MYSITE.com" is changed to your own site URL and the image name matches your own image name.

Note that the image URL can also be specified as a link that is relative to your site TNG folder as shown below. 


<img src="historyimages/clip_image002.gif" height="300" width="450">


Histories image relative path link.png

Histories image aligned right.png

One way to handle this if there are many images is to copy all of the HTML into a text editor, then do a quick search/replace of the image path (all but the filename), then paste the new HTML back into the HTML box in the NicEditor.

Using Images with Body Text

TNG version: ≥ 10.0

Starting with TNG V10, you can use both an image and Body Text with any media collection.

Histories image with body text.png

As a File

TNG provides a historytemplate.php that can be used to create other php files that will format the same way your selected TNG template does. See User Pages - Getting Started for additional information on using the historytemplate.php.


You could then add your php file to TNG using the Admin >> Media - Add New

This is an example of how to use the TNG >> Media >> Add New >> Histories as a file

as shown in Antoine Roy on my web site.

Histories as file.png
Note that if you have HTML files that you want to display on your site, you can
  • enter the HTML file name instead of the php file name as shown above, as long as you understand that HTML files will not be formatted with the look and feel of your TNG template
  • copy the HTML code between the <body> and </body> statements in your HTML file and paste it in the historytemplate.php

Note also that when using TNG Media records to point to a file, you need to supply your own thumbnail, or you can use the default thumbnail provided by TNG.

Histories as file thumbnail.png


As External Web Link

You can also use a TNG Media collection to link to an external web site.

When creating a Histories as an External Web Link, you need to

  • check the box for This media comes from an external source
  • provide your own thumbnail
  • check the box to Open in new window

Histories as external link.png

The example of an externally linked histories Francoise Langlois (1599-1629)

See TNG image map to an external web page

As a Folio

See the Folios article on how it provides a method for displaying and navigating multiple page files as a single document

Related Links

User Pages - Getting Started

User Pages - Multi-Language

TNG image map to an external web page

Media Overview
Setup - Media

Using Collections

Adding Media

Body Text

Thumbnails

Image Maps

TNG version: ≤ 12.3.0
TNG version: ≥ 7.0

Information on Image Maps apply to TNG versions prior to TNG 13

Image Tags

TNG version: ≥ 13.0.0

Information on Image Tags apply to TNG v13 and later

Other Useful Articles

Some TNG Media Mods

Retrieved from "https://tng.lythgoes.net/wiki/index.php?title=Histories_-_Creating&oldid=86761"