Maintaining Banner Consistency In A Portal

THL Toolbox > Developers' Zone > Web Development > Maintaining Banner Consistency in a Portal

Maintaining Banner Consistency in a Portal

Contributor(s): Than Grove

When a portal or project is hosted by THL but is it's own entity, it will have a unique banner, navigation bar, and side-column. To do this it will have its own versions of the masthead.php, masthead-navbar.php, and side-column.php. These files create the unique look-and-feel for the portal, and are explicitly called from the index.php main page for the portal and any subpages within the portal. To understand how those files are used to create the portal’s distinct look-and-feel, see the Creating A New Portal Or Project page.

However, situations will occur where one wants to refer to a resource elsewhere in THL but have it display within the portal’s look-and-feel (banner, navbar, and side column). To effect this, one uses a special hash url to load the resource in an Iframe within the present page. The base URL is the page where you want the resource to show, the present portal page or some child of it, and to this one appends “#iframe=/the url of the resource/” If the resource is a THL PHP page, then the URL to it should begin with a slash and be relative to the root level of the site.

For a regular THL page, JS has been added to hide the footer inside an IFrame and turn off the translation tool button. So these automatically should not show within an IFrame as they are part of the framing page.

Note: For some sites it is better to use a specific version of the home page made explicitly for being included in the IFrame. Thus for the interactive map, the fullscreen.php is a better page to call for the IFrame than the regular index page.

For example, the url to retain the banner when linking to say the interactive map from the cultural geography maps portal is:

external link: http://www.thlib.org/places/maps/#iframe=/places/maps/interactive/fullscreen.php

To link to tile 1 of Xizang from the same page, the url is:

external link: http://www.thlib.org/places/maps/#iframe=/places/maps/collections/show.php?id=193

Of course, when used in THL page, the url used in the link tag would be relative and not absolute so that the markup might look like:

<a href="/places/maps/#iframe=/places/maps/interactive/fullscreen.php">Interactive Map</a>

However, if the external THL resource has its own domain, such as the Media Management System at “mms.thlib.org”, then the full production version of the URL is used after the “#iframe=”. So one gets something like:

<a href="/places/maps/#iframe=http://mms.thlib.org/topics/3852">Images of Katok</a>

The Javascript code used to interpret the #iframe hash will display the development, staging, or production versions of MMS relative to the location of the originating page.

When the link is part of a wiki teaser box, the link would be formed as for wiki teaser boxes but with the #iframe hash, as it:

{block:resource-link}
http://DOMAIN/places/maps/#iframe=/places/maps/interactive/fullscreen.php
{block}

Navbar Links and Sub Portal Pages

When the link to incorporate a ROR app in a site-consistent way is a sub-portal page that appears as a navbar button, the same link URL format can be used, except that one has to change this in the masthead-navbar.php file. An example is the Timeline Navbar button for the external link: Cultural Geography site:

<li class="timeline"><a href="/places/timeline/#iframe=http://tmb.thlib.org/categories/304/children/2805"><em><b>Timeline</b></em></a></li>

This goes to the existing timeline page, /places/timeline/index.php, which is only a shell, but contains the appropriate body class to highlight the correct navbar button:

…
     <body class="timeline">
…

To prevent people from manual cutting off the hash and going to the incomplete /places/timeline/index.php page. You can adjust the add_header variable on that page with the following javascript code:

$add_header = '<link rel="stylesheet" type="text/css" href="/places/culturalgeography/css/culturalgeography.css" media="all" />
		<script type="text/javascript">
			var myhash = window.location.hash;
			if (typeof(myhash) != "string" || myhash.indexOf("iframe=") == -1) {
				window.location.hash = "#iframe=http://tmb.thlib.org/categories/304/children/28";
			}
		</script>';

In this case the CSS stylesheet link was already part of the page and the script element was added.

To reinstitute the /places/timeline/index.php page as the content page of the site without loading the Knowledge Map over top of it, one would have to take out this javascript code, as well as adjust the navbar link.

URLs with a Hash (E.g. Interactive Map Links)

If you want a custom Interactive Map to load THL IFrame page, you will need to modify the URL, because these URLs contain a hash (#) already. Since the call "#iframe=" also uses the hash, there is a conflict. To avoid this, change the hash in the interactive map url to "|hash|". Thus, one gets urls such as:

external link: http://dev.thlib.org/places/culturalgeography/#iframe=/places/maps/interactive/fullscreen.php|hash|type:105;bounds:10332206,3601280,12797759,4946572;language:roman.popular

and in a link this would look like:

<a href="/places/culturalgeography/#iframe=/places/maps/interactive/fullscreen.php|hash|type:105;bounds:10332206,3601280,12797759,4946572;language:roman.popular">Map Showing Hermitages of This Region</a>

THL Toolbox > Developers' Zone > Web Development > Maintaining Banner Consistency in a Portal