Folios - Examples

This page contains examples of Folios in a working site, with directory images being captured and cropped from the server's cPanel File Manager. Each folio is contained in its individual folder off the folios folder in the site's TNG root folder. The examples reached by the links are running Folios v2.07 at the time of writing.

Folio of jpg scans

The following image shows the files used to create a simple folio of jpg scans of typewritten pages. This folio "Howard Clare's Notes" may be browsed at The Clist Connections.

In this folio, the jpg images have been automatically named by the scanner which created them, and you will note that the files are conveniently datestamped in the order in which they were scanned. Therefore they did not need renaming. However, if extra pages needed to be added or inserted within the sequence, they could be easily renamed. The filenames themselves are immaterial except they must sort in the desired order.

This folio contains seven pages, and the page numbers displayed in the folio's window title conveniently agree with the page numbers on the typewritten sources. Note that there is no practical limit to the number of pages that can be held in a folio.

The folio's index.php file has been created from init.php distributed with Folios v2.07 with $mediaID edited according to the instructions.

The pdf file was also created by the scanner, but with all pages concatenated into one document. Since it has a pdf suffix, it does not form part of the folio sequence. It is accessed (downloaded) from a link in the folio's cover page, and opens in a new window.

The cover page for this folio is very simple, as shown below. It contains only html code (at the time of writing) and could therefore have been named as 00-cover.html to describe its contents more appropriately. Changing the file suffix would have no impact on folio operation.

<P> <A class=snlink href="20100216172910600.pdf" target=_download>Download PDF (1.4MB)</A></P>
<HR>
<P> This is the cover page. To read Howard's notes, open the pages using 
the buttons above or download the entire folio in one file.</P>
<DIV class=folio>
<p><b>Relevance to this site:</b> Mercy Clare, daughter of Samuel Clare and his wife 
Eliza Osborne married my grandfather Sidney George Clist shortly after he emigrated 
to New Zealand in 1910.</p>
<p>Roger Clist</p>
</DIV>

Folio of html pages

The following image shows the files used to create a more complex folio of html pages created from source documents. Some of the folio pages have links to subpages (having their own images) and the entire file bundle is neatly contained within the folio. This folio "The Rossiter Report (Part 1)" may be browsed at The Clist Connections.

In this folio, the html pages have been individually named with a numeric prefix to ensure that they will be served in the desired order. A cover page starts the sequence. Note that each html page in this ordered set is incomplete in itself (in that it comprises only body text without <head> and <body> tags) being designed to be served by the folio.php script.

You can exercise considerable creativity in your folio cover and individual folio pages. In this example some of the folio pages contain <a href> links to other pages (a) within the folio, (b) within the site but outside the folio, and (c) to pages in external sites. The pages are relatively simple in themselves, but draw upon the site's CSS styles.

Note that in this folio, the folio's index.php file contains a line

$exclude[] = ".php";

as the php files in the folder are subpages of two of the folio's html files (pages 1 and 7), and their own subsidiary files (jpg images) are held in the folio's images folder (for tidiness) along with images belonging to the folio pages. This structure enables the entire folio to be copied/zipped, etc. in one bundle.

Annotating folio pages

If you wish to display a folio of annotated pages, you might like to try creating an ordered set of html pages each containing a table with one row of two columns, one cell to hold the photo and the other to hold the text describing the photo. The photos should be placed in an images folder so that they do not confuse the folio sequence.

An example folio is "Lilian Chappell's memorial photos" on The Clist Connections website. The entire contents of the first folio page are given below.

<table border="0" cellpadding="0" cellspacing="10">
  <tr>
    <td><img src="480wide/IMG_0001.jpg" width="480" height="661" usemap="#Faces"></td>
    <td valign="top"><h3>Lilian and her brother David</h3>
	<p>Both children were born in Blyth, Northumberland, England. David was born 
           in 1916 and Lilian in 1919.</p>
	<p>The Gallon family emigrated to Sydney, Australia in 1929.</p>
    </td>
  </tr>
</table>
<map name="Faces">
<area shape="circle" coords="194,80,57" href="../../getperson.php?personID=I353&tree=clist" 
alt="Lilian Gallon" title="Lilian Gallon">
<area shape="circle" coords="302,204,56" href="../../getperson.php?personID=I547&tree=clist" 
alt="David Gallon" title="David Gallon">
</map>

Being html pages, you can put href links in your code. Note that photos can be associated with image maps linking to records in your TNG database. This lets you establish clickable regions of circles, rectangles or polygons. For instance, in the above example, photo IMG_0001.jpg is linked to image map "Faces" which defines "hot-spot" circles on each subject's head which, when clicked, brings up the approriate person's TNG record.

The image maps in this sample folio have been created using Dreamweaver. Other html editors will likely have similar map creation facilities. Or you can use an online facility such as image-maps.com.

Image manipulation

When you are working with large numbers of scanned images of identical size such as jpg scans of historic papers, it is often helpful to manipulate them (crop, cut, resize, rename, add borders, adjust brightness, contrast, etc.) using FastStone Photo Resizer or IrfanView or similar program with batch mode options.

Disclaimer

The information provided in this page is "all care, but no responsibility" courtesy Roger Clist, who is extremely grateful to Rick Bisbee for developing the Folios facilty.