Maintaining Banner Consistency In A Portal
<h3 class="heading-h6"><a name="THLToolboxhomegtDevelopersZonegtWebDevelopmentgtMaintainingBannerConsistencyinaPortal" class="anchorpoint"></a><a href="/tools/wiki/home.html">THL Toolbox</a> > <a href="/tools/wiki/Developers%27%20Zone.html">Developers' Zone</a> > <a href="/tools/wiki/Web%20Development.html">Web Development</a> > Maintaining Banner Consistency in a Portal</h3><p class="paragraph">
</p><h3 class="heading-h1"><a name="MaintainingBannerConsistencyinaPortal" class="anchorpoint"></a>Maintaining Banner Consistency in a Portal</h3><p class="paragraph"><strong class="bold">Contributor(s)</strong>: Than Grove</p><p class="paragraph">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 <a href="/tools/wiki/Creating%20A%20New%20Portal%20Or%20Project.html">Creating A New Portal Or Project</a> page.</p><p class="paragraph">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=/<em class="italic">the url of the resource</em>/” 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.</p><p class="paragraph">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.</p><p class="paragraph"><strong class="bold">Note</strong>: 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.</p><p class="paragraph">For example, the url to retain the banner when linking to say the interactive map from the cultural geography maps portal is:</p><p class="paragraph"><img src="/" alt="external link: " title="external link"/><span class="nobr"><a href="http://www.thlib.org/places/maps/#iframe=/places/maps/interactive/fullscreen.php" target="rwikiexternal">http://www.thlib.org/places/maps/#iframe=/places/maps/interactive/fullscreen.php</a></span></p><p class="paragraph">To link to tile 1 of Xizang from the same page, the url is:</p><p class="paragraph"><img src="/" alt="external link: " title="external link"/><span class="nobr"><a href="http://www.thlib.org/places/maps/#iframe=/places/maps/collections/show.php?id=193" target="rwikiexternal">http://www.thlib.org/places/maps/#iframe=/places/maps/collections/show.php?id=193</a></span></p><p class="paragraph">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:</p><div class="code"><pre><a href=<span class="java-quote">"/places/maps/#iframe=/places/maps/interactive/fullscreen.php"</span>>Interactive Map</a></pre></div><p class="paragraph">However, if the external THL resource has its own domain, such as the Media Management System at “mms.thlib.org”, then the full <em class="italic">production</em> version of the URL is used after the “#iframe=”. So one gets something like:</p><div class="code"><pre><a href=<span class="java-quote">"/places/maps/#iframe=http://mms.thlib.org/topics/3852"</span>>Images of Katok</a></pre></div><p class="paragraph">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.</p><p class="paragraph">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:</p><div class="code"><pre>{block:resource-link}
<img src="/" alt="external link: " title="external link"/><span class="nobr"><a href="http://DOMAIN/places/maps/#iframe=/places/maps/interactive/fullscreen.php
{block}" target="rwikiexternal">http://DOMAIN/places/maps/#iframe=/places/maps/interactive/fullscreen.php
{block}</a></span></pre></div><p class="paragraph">
</p><h3 class="heading-h2"><a name="NavbarLinksandSubPortalPages" class="anchorpoint"></a>Navbar Links and Sub Portal Pages</h3><p class="paragraph">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 <span class="nobr"><img src="/" alt="external link: " title="external link"/><a href="http://www.thlib.org/places/culturalgeography/" target="rwikiexternal">Cultural Geography</a></span> site:</p><div class="code"><pre><li class=<span class="java-quote">"timeline"</span>><a href=<span class="java-quote">"/places/timeline/#iframe=http://tmb.thlib.org/categories/304/children/2805"</span>><em><b>Timeline</b></em></a></li></pre></div><p class="paragraph">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:</p><div class="code"><pre>…
<body class=<span class="java-quote">"timeline"</span>>
…</pre></div><p class="paragraph">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:</p><div class="code"><pre>$add_header = '<link rel=<span class="java-quote">"stylesheet"</span> type=<span class="java-quote">"text/css"</span> href=<span class="java-quote">"/places/culturalgeography/css/culturalgeography.css"</span> media=<span class="java-quote">"all"</span> />
<script type=<span class="java-quote">"text/javascript"</span>>
<span class="java-keyword">var</span> myhash = window.location.hash;
<span class="java-keyword">if</span> (typeof(myhash) != <span class="java-quote">"string"</span> || myhash.indexOf(<span class="java-quote">"iframe="</span>) == -1) {
window.location.hash = <span class="java-quote">"#iframe=http://tmb.thlib.org/categories/304/children/28"</span>;
}
</script>';</pre></div><p class="paragraph">In this case the CSS stylesheet link was already part of the page and the script element was added.</p><p class="paragraph">To reinstitute the /places/timeline/index.php page as the content page of the site <em class="italic">without</em> loading the Knowledge Map over top of it, one would have to take out this javascript code, as well as adjust the navbar link.
</p><h3 class="heading-h2"><a name="URLswithaHashEgInteractiveMapLinks" class="anchorpoint"></a>URLs with a Hash (E.g. Interactive Map Links)</h3><p class="paragraph">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:</p><p class="paragraph"><img src="/" alt="external link: " title="external link"/><span class="nobr"><a href="http://dev.thlib.org/places/culturalgeography/#iframe=/places/maps/interactive/fullscreen.php" target="rwikiexternal">http://dev.thlib.org/places/culturalgeography/#iframe=/places/maps/interactive/fullscreen.php</a></span>|hash|type:105;bounds:10332206,3601280,12797759,4946572;language:roman.popular</p><p class="paragraph">and in a link this would look like:</p><div class="code"><pre><a href=<span class="java-quote">"/places/culturalgeography/#iframe=/places/maps/interactive/fullscreen.php|hash|type:105;bounds:10332206,3601280,12797759,4946572;language:roman.popular"</span>>Map Showing Hermitages of This Region</a></pre></div><p class="paragraph">
</p><h3 class="heading-h6"><a name="ProvidedforunrestrictedusebythespanclassnobrimgsrcsakairwikitoolimagesicklearrowgifaltexternallinktitleexternallinkahrefhttpwwwthliborgtargetrwikiexternalTibetanandHimalayanLibraryaspan" class="anchorpoint"></a><em class="italic">Provided for unrestricted use by the <span class="nobr"><img src="/" alt="external link: " title="external link"/><a href="http://www.thlib.org" target="rwikiexternal">Tibetan and Himalayan Library</a></span></em></h3>