kiwi
Using simpl_menu and keeping pages within webtrees’ framwork

As I browse webtrees sites I’m always pleased to find people using the “simpl_menu” module. Its a great way to introduce other pages or software products into your family history site. Examples I’ve seen include blogging software and gallery products like Gallery2.

But, I do think many people are missing a great opportunity to maintain a sense of continuity within their webtrees site. Of course this might be by choice, and that’s fine, but I wonder if sometimes it is because users are not aware they can link to external pages AND keep them within the webtrees menu structure. For a simple example of what I am talking about, go to my Our Families site. Select Other -> My tools. That is a menu created with simpl_menu linking to a basic HTML page saved to the webtrees root directory.

The ‘trick’ to keeping that page within the webtrees structure is in its header:

<?php
define('WT_SCRIPT_NAME', 'simpl_utilities.php');
require './includes/session.php';
require_once WT_ROOT.'library/WT/Controller/Base.php';
global $controller;
$controller=new WT_Controller_Page();
$controller
	->setPageTitle(WT_I18N::translate('Utility tools'))
	->pageHeader();
echo '<h2>', WT_I18N::translate('Utility tools'), '</h2>';
?>

Everything below that is just normal HTML, and (in this case) some javascript. But you can add whatever you want, and of course adjust the text in that snippet to suit your needs.

That works fine for a simple HTML page, but what if you want to embed Gallery2, or a forum like phpBB? The answer to that is to take a leaf out of Joomla’s book, and use what they term a “wrapper”, better known as an iframe. This exists for just such a purpose, to embed an external web page within an existing framework.

There are a some things to consider with this approach though:

  1. If such products require their own login, I recommend disabling it. Manage access via webtrees’ module administration for simpl_menu setting access to members only if you don’t want casual visitors to see the page.
  2. If you want those products to blend seamlessly with your webtrees site you will need to adapt their theme to match your preferred webtrees one. That is generally not hard to do, but can take time to perfect. I also suggest in such cases that you do NOT allow your users to switch between different webtrees themes. Select your default, and fix it at that.
  3. One of the greatest drawbacks with iframes is controlling their dimensions. It’s easy enough with css to ensure the width if the frame fits your site correctly, but the height can be tricky, as the height of the content can vary from page to page. But there are solutions, such as the one described below.

Managing the height of iframes

Typically in products like Joomla the solution is to set a height greater than the maximum you think you will ever need. But that can push your webtrees’ footer so far down an empty page no-one ever sees it! Alternatively, if you set the height too short, you will get an ugly vertical scroll bar, or perhaps even two if your webtrees page needs one of its own!

What is needed is a dynamic height that automatically adjusts as the content of the iframe changes. Fortunately webtrees includes the full jQuery library, making exactly such a solution possible. If you Google the issue your will find a number of solutions. The one I prefer, and have fully tested in webtrees is below here, shown as additional code on the same header described above. This is taken from a solution I am developing to include the great FAQ software phpMyFAQ.

<?php
define('WT_SCRIPT_NAME', 'phpmyfaq.php');
require './includes/session.php';
$controller=new WT_Controller_Page();
$controller
	->setPageTitle(WT_I18N::translate('FAQs'))
	->pageHeader()
	->addInlineJavascript('
		var iFrames = document.getElementsByTagName("iframe");
		function iResize() {
			iFrames[i].style.height = iFrames[i].contentWindow.document.body.offsetHeight + "px";
		}
		jQuery("iframe").load(function() {
			this.style.height = this.contentWindow.document.body.offsetHeight + "px";
		});
	');
?>
<iframe id="myFrame" src="phpmyfaq/index.php" width="98%" scrolling="no" frameborder="0" style="width:100%;"></iframe>