Showfolio Mod

From TNG_Wiki
Jump to navigation Jump to search
Restricted Downloads of Showfolio Mod are restricted to logged in users. If you do not have a user account on the TNG Wiki use the Request Account link to request a user account Restricted
Caution If you have trouble downloading with Google Chrome browser, try using try right-click and select Open in new Window, then F5, or use another browser Caution

Ambox notice.png This Mod works with all versions of TNGv11 through current versions of TNGv13. Earlier versions require you do some manual configuration of the mod options (see article below.)

Showfolio mod
Summary Integrates with TNG to show folios
Validation n/a
Mod Updated see Revision History
Download link
TNG 12.0
TNG 13.0
TNG 14.0
Download stats view statistics
Author(s) Rick Bisbee
Homepage A Bisbee Family History
Mod Support Support for Showfolio_Mod
Contact Developer As above
Latest Mod
Min TNG V 11.0.3
Max TNG V 14+
Files modified
globallib.php, genlib.php, admin_media.php, customconfig.php
Related Mods


This mod's author has recently begun to use Showfolio to publish some very large books on several live websites. Some of these books have had over 2000 pages, but because of Showfolio's nature, all individual pages download quickly. A side benefit as compared with PDF books is they cannot be downloaded in their entirety. If someone wants to download or screen-shoot 2000 pages a page at a time, we can't really stop them, but this is the next best thing.

With publications that large, the tab map is very handy for synchronizing the tabs with page numbers. Using the "goto" page box lets you navigate the material quickly.

As explained below, inserting a tab map into the folio.php control file provides a concise way to label tabs using individual labels or ranges of page numbers, either plain or prefixed as might be the case with an Index section where each page might start with an "i" (i3, i4, i5, etc.) The map for that would be something like: "Cover, [1-109], Index, i[1-16]".


Mod Tested With TNG Versions
Version v1003-1013 v11 all v12 all v13 all v14.0 PHP 5.6/7.4/8.0 PHP 7.4/8.2

*green: compatible   red: not compatible   white: not tested

This version of Showfolio may work in TNG installations prior to version 12, but mod options may have to be set manually prior to version 10.0.3. Web hosting services are rapidly upgrading their versions of PHP and MySQL, but as long as your TNG website is working, Showfolio should continue to work. If you have a special need to keep Showfolio functional in earlier versions of TNG, please let me know.

See Multisite Testbed for information on how this mod is tested and managed.

What is a Folio?

A folio simulates a multipage document handled as if it were a single TNG media object. Opening a folio displays a cover page (optional) and page navigation links to the rest of the pages (images or html/php), all using your website's TNG styling.

Possible uses for a folio might include Old Books and Manuscripts, Civil War pension files, probate files, land records, diaries, letters, or a collection of personal records pertaining to a single individual or family. Only one folio needs to be linked to an individual or family, rather than creating each page as a TNG document and linking them all separately.

Expanding the Concept


A folio is a method, not a document type. A single folder contains all of its page files (jpg, gif, png, htm, html, and/or php) named so they will alpha-sort in the order you want them displayed. Page files are added or deleted simply by adding or deleting them from the folder. In addition to the page files, each folder contains a folio.php (index.php or init.php in older versions) control file that is registered in TNG as a media file. When requested for viewing, showfolio.php opens it, sets some options specific to that individual folio, then displays the contents of the folder page-by-page.

Note 1: Folio images are displayed in their uploaded sizes/resolutions. For best viewing image widths should not exceed 800-900 pixels. Height can be whatever is needed. Faster load times can be achieved by using 72-100px resolution.

Note 2: Folio icons serve as links back to the main media listing to which the folio belongs. TNG media icons are "dead" -- do nothing. If you want to make the TNG icons behave in the same way, download and install the Media_Icons_Mod.

Custom Titles For Page Tabs (NEW)

Suppose you have a book with numbered pages and you want the Showfolio tabs to match the page numbers. Now you can. Suppose you have pages with Roman numerals? No problem. What if the number of pages is really, really large, maybe in the thousands. No problem.

You can also determine the number of page tabs to show for each folio. If your Folio is just a collection of unconnected documents, you can number them sequentially, starting with a cover page if you choose. Or you can label the tabs individually to describe the underlying page content, for example, "Birth", "Death", etc.

To customize the tabs you must provide a tab map in the folio.php control file containing one entry for each page in the Folio. A tab map gives you a syntax to express a range of sequentially numbered pages, starting at the point where it is found in the map and continuing until reaching the final page in the range, for example, "[14-321]". You won't have to type all the page numbers from 14 to 321 in your tab map.

You are not required to use a tab map. If none is found, the Showfolio defaults will be used.

In the tab map string you can label each page individually using a number or text, you can use a range of numbers inside square brackets -- [4-56], or you can use a prefixed page number range -- x[1-12], where each page number will be prefixed by the single letter.

Here is an example of a tab map for a book which contains a title page, front matter (Roman numerals), several hundred numbered pages (ranges) and images. The map is an array defined in standard PHP syntax.

// Map labels for this Folio tabs
$tabmap = array(
'iii','iv','v','vi','img 1',
'img 2','[13-422]', 'i[1-23], 'Back'

// Number of inner tabs to show on either side of a selected tab (default=2)
$sidetabs = 5;

For those unfamiliar with PHP arrays, a simpler alternative mapping allows you to use a plain string. As you can see in the example below, you may split the string over several lines for readability, but it must be enclosed in double quotes ("") and terminated with a semicolon (;) after the final quote.

$tabmap = "
iii, iv, v, vi, img 1,
img 2, [13-422], i[1-23], Back";

Please Note: If you add or remove a page from the folio, you must adjust the tab map accordingly or tab labels will become unsynchronized. Also Note: You must enter the tab map with a code editor. The next version of the administrative mod for Showfolio will assist you in entering a map if you choose to use one.

To repeat, it is not necessary to use a tab map if you only need the default tabs numbered according to the order of pages shown.

Number of Tabs Displayed

The folio.php control file can set the number of tabs to display on each side of the current page tab. The default is 2, but to expand the number of visible tabs you can set $sidetabs, for example: $sidetabs = 4. That places the preceding four page tabs before the current tab, and the following four tabs after the current tab. The tab line will also include the previous and next buttons plus the anchor tabs (first and last page) which are fixed. Your choice will depend on the size of the tab labels chosen for a particular Folio.

Turning PDF Into a Folio Book

1. Download and use a utility to break up a PDF file into JPG page images. There is a built-in utility in Windows 10, but I recommend IceCream PDF because it handles any number of PDF pages, you can control the quality of the output JPG files, and the files tend to be smaller to speed up display time.

2. Name the JPG page files to alpha sort correctly -- for example, page0001.jpg, page0002.jpg, etc. Note that to alpha sort, the numbers must be padded to a fixed length.

3. Add a $tabmap array to folio.php and optionally add a $sidetabs setting (see above).


Compatibility with Existing Folios

If you are already invested in folios, we recommend you first install and run this on a test site. You should be able to run your existing folios as they are, with no changes to them. If you wish, you can convert your existing folios to the Showfolio Mod standard (see #Converting Folios to Showfolio). The mod developer has been running the showfolio mod on his production site (now TNGv13.0.3) and on several test sites going back to TNGv9.1.0 with no particular problems.

Disclaimer: As a practical matter Showfolio Mod has not been run on every single version of TNG since TNGv9.0. We analyzed those we were not able to test directly and find no reason to believe Showfolio Mod is not %100 compatible with all of them. If you experience any problems in this regard, please let us know.

Protecting PDF Files

We provide a PDF fetch capability to grab and download PDF files stored in a private area of your website located above the public_html. This prevents URL downloading of files restricted to members only. It is triggered from the control file with a new parameter: $pdffetch = "filename.pdf"; You must place the server path to your private pdf folder in your customconfig.php file to use it. For example: $pdfpath = "/home/smythe/pdf/"; where the information in quotes is your actual server path.


Version Date Released Showfolio — What's New
28 Feb 2023
  • Bug fix - Error when displaying folio linked with family.
23 Feb 2023
  • Removes mysqli.php database interface and now uses the TNG tngconnect interface.
  • Only accesses the database on first call; thereafter retrieves values from memory.
10 Jan 2023
  • Fixed bug that caused MM "not unique" errors.
28 Mar 2021
  • Combined mod v12 and v13 -- v13 now works with both versions of TNG, and the one that will be maintained going forward. It probably works with TNG versions earlier than 12, buy I have not tested it.
  • Tab search is now case-insensitive. Both index and Index will find the index page if a tab map is provided in the folio.php control file.
21 Mar 2021
  • Updated Tab Map to use the format i[23-64] which results in tabs numbered i23, i24, i25, etc. where "i" can be any letter. Useful for numbering index pages and such.
16 Oct 2020
  • Updated to allow using either a PHP array or a string as a tab map for those unfamiliar with array syntax.
  • These changes will not affect current Folios which use the default tab numbering.
15 Oct 2020
  • Add capability to set labels for page tabs to match actual page numbers in large Books and other publications.
21 Sep 2020
  • Upgraded to work with TNGv13
9 Apr 2019
  • Fixed bug where page file extension in upper case was not recognized.
  • Added Dutch-UTF8 language support courtesy of Daniel Aelbrecht
20 Mar 2019
  • Changed file path in folio page info from absolute to tng root relative.
18 Dec 2018
  • Cleaned up file size and image dimension display for Wordpress
17 Dec 2018
  • Updated to work with TNG/Wordpress sites (thanks to Roger Moffat)
8 Jun 2018
  • Added option to center documents on page (looks very good.) Compatible with all functioning TNG versions back to v10.0.3. TNG versions prior to that may work, but the mod options must be edited manually in showfolio.php.
20 Mar 2018
  • Revised to work with TNGv12. Startup mechanism should be more adaptable to future updates.
14 Jun 2017
  • Fixed to correctly handle media folders when they are not in the TNG root. For example, a site has a folder named 'exhibits' inside of which are all of the media folders. The site can then set up an ftp account with access limited to 'exhibits' to give an editor access to all media files, but not to TNG scripts and other site-critical files and folders (mods).
30 Mar 2016
  • fixes conflict that prevented raising bookmark window.
  • improved bookmark text
15 Aug 2015
  • some external links look like folio control files -- they are now ignored
  • TNG recognition of folio control files has been made more robust
14 Aug 2015
  • adds new option for strict folio. If set only folio.php is recognized as a control file
  • now ignores media files with command line parameter strings like index.php?title=History_of_Me
12 Aug 2015
  • excluded file types not working -- fixed
12 Aug 2015
  • fixes bug in cfg file that may have prevented init.php files being recognized
4 Aug 2015
  • Resolves image paths in html, php or in mixed html-php page files
  • handles errors with missing or bad query string
  • fixes bug that caused cover page labels to be lower cased
29 Ju1 2015
  • Compatible with all versions of TNG from 8.1.2 to present
1 Ju1 2015
  • adds German language support
  • standardizes versioning
version 9-
1 Ju1 2015
  • Fixes missing PDF link if folio only consists of one page
version 9-
30 Jun 2015
  • Initial release for TNGv9 and TNGv10

Installing Showfolio

If you are using an earlier version of the Folios add-on, go to its setup page and uninstall it. Then go to the TNG root folder and remove pdffetch.php if it exists.

If you have been using the previous Folio Mod, go to Mod Manager in the TNG Admin area and uninstall it.

Showfolio is a TNG Mod Manager mod. Download the correct version from this page according to the version of TNG you are using. Unzip the package and place the file and folder in your TNG 'mods directory, then use Mod Manager to install it. Set your preferences with the mod editor as shown in the following graphic.


Finally, add the private pdf server path to your customconfig.php, for example:


Your folios should continue to display as before. If not, contact the mod developer for help.

Uninstalling Showfolio Mod

You can completely uninstall the mod from your Mod Manager. Removing the mod does not change database records for any folios you have created, and the material in the folio folders will not be accessible as media via TNG.

Uninstalling Showfolio Mod in earlier versions of TNG (v9) may show a missing file error, even though the mod has been completely uninstalled. The error is caused by a defect in earlier versions of Mod Manager and is no cause for concern.

Converting Folios to Showfolio

While Showfolio will continue to work with the old Folio control files, you are encouraged to modify them to the new standard.

A utility to assist you in upgrading your control files is provided and can be found in the TNG root after the mod is installed. You can access it using your TNG domain's url as follows: 
(replace '''' with your own)


The Showfolio upgrade utility searches your database for a list of folio control files and displays them one at a time as above. The upper window displays the contents of the current control file. The second window recommends the new content. It is editable and you may modify and save it as as you choose. Normally it can be saved without further editing. After Updating or Skipping the current folio, the next one on the list is displayed until they've all been viewed/converted.

In the example above, the border specs are the same as the global defaults (unless you've changed them with the mod editor) and can be deleted. The $mediaID is from an older version of folios and is completely unnecessary. In short, this control file can be empty, or just contain comments.

If you click the Upgrade button, the control file will be converted and the next control file will be displayed for edit. When the file is converted a backup is created in case you want to revert back to the old setup using showfolio_restore.php.

If you click on the Skip button, the control file will be skipped and not shown again during the current session. This might be handy if a file is wrongly thought to be a control file.

Quit exits the upgrade utility.

Create a New Folio

Page Files

A folio consists of one or more page files. Page files can be of the following types: .jpg, .gif, .png, .htm, .html, or .php.

Page files can be individual images or formatted content that may contain images. There is a restriction on web content files -- they must not contain header, header content or body tags. This is because the folio "wrapper" provides all that; otherwise an error will be generated.

All page files are contained within a single folder that also contains a control file named folio.php, the content of which is explained below. For now, just understand that folio.php will be registered in TNG as a media file.

Add Control File

With Showfolio, the only purpose of a control file -- named folio.php in the folios -- is to provide options that are unique to this folio. If there are no unique options for this folio, if you don't need to override any global options, the control file can be empty, or it can contain comments (each line preceded with a double slash)) for your own information.

Following is an example control file and a list of local options/overrides you might want to consider for a given folio:

# Cheney B. Bisbee Civil War Pension File

// ignore any files in the folder with extensions .html or .htm
$exclude[] = ".htm";
$exclude[] = ".html";

// consider the first file in the folder a coversheet

// add link to download pdf from the site's private area
$pdffetch ="cbisibee.pdf";

// do not show the magnifier on image pages of this folio


Set Local Options

Options in the control file only pertain to the current folio. No options are required -- they will all default to the global values set with mod manager or the setup page for the add-on version. A control file must be present, but it can be empty if no customizations are required.

Here are some options you can (but don't have to) use in the control file to customize the current folio:

User Options Explanation
$exclude[] = ".jpg";

$exclude[] = ".png";
$exclude[] = ".gif";
$exclude[] = ".htm";
$exclude[] = ".html";
$exclude[] = ".php";

Exclude certain file types from being included as a document page in this folio. The control file is excluded automatically. No allowed files (except the control file) are excluded by default.


Treat the first page as a cover page for the folio and provide a button label for it. You might want a cover page, for example, if you want to summarize the contents of the folio.

If $buttonLabel can be found in the cust_text.php file in your chosen language as an index into the $text array (for example, $text['cover']="Contents"), the value provided there ("Contents") will be used. If not, the label itself will be used ("cover). This allows you to "internationalize" it in as many languages as you support.

$pdflink = "filename.pdf"; Places PDF download links at top and bottom of folio pages and downloads the file from the folio folder.
$pdffetch = "filename.pdf"; Adds PDF download links to top and bottom of folio pages. Fetches PDF files from a private area of the website so they cannot be downloaded using a browser url. Server path to files must be defined in customconfig.php. For example, $pdfpath="/home6/subserv2/pdf/";
$sidetabs = 2; Sets the number of page tabs that will appear on either side of the currently selected page. The longer your tab labels the fewer you will want showing at the top of you page.
Global Overrides
$restrict=true; Restrict folio access to registered users -- redirect the rest to TNG login page.


Select a border for image pages in this folio.
$showMagnifier=1; If you've turned off the magnifier globally with the mod preference editor, you can turn it on here, but just for this folio.

Note that all value statements in folio.php must end with a semicolon (;). String values must be enclosed in quotes.

Registering a Folio As TNG Media

After creating a folio (folder) inside any media collection (folder) such as Documents or Histories, go to your TNG Admin >> Media page, select the collection, find the folder and then select its folio.php as the media file. Fill out the rest of the required Media information fields and link it to a person or family. After saving it to the database, it will list with whatever collection it belongs to, and will display as a multi-page folio.

Chances are good you will want to create your own media collections at some point, for example, military, newsletters, obituaries, or clippings and base them either on TNG Documents or Histories to better manage your different types of folios.

Following is a diagrammatic example of how you might organize a collection of folders.


Please consult your TNG documentation for instructions on creating a TNG media collection.

Folio Screenshot

Example of a working folio.


Note that this particular folio has a Cover plus seven pages and a PDF download button. In admin mode (shown) there is a link (icon) to edit the media in TNG. The cover page is simple html that includes an inserted graphic, but can be a more elaborate PHP script or an image.

Obligatory Disclaimer

There is no warranty. Use the mod at your own risk. It has been tested in all the TNG template styles without any particular problems.

Sites Using

The following sites have installed Showfolio Mod and contain folios which are viewable without login.

The following private sites have installed Showfolio Mod and contain folios which are only viewable with a login.