Sample Heritage Image Record Template
From TechWiki
Here is a sample Smarty record template page in PHP for presenting 'heritage building' image records for a given area. NOTE: Renderings for this code are presented at the bottom of this document. The nominal source file is now_heritagebuildingimage.tpl:
<!-- $Id$ -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
{*
// Tells the templating engine to check for linksTo relationships.
setting->LinksTo=false
// Tells the templating engine NOT to include labels for object resources
setting->setAttributeIgnoreResourceLabel=false
*}
{* Attributes assignation: assignation of pre-defined variables *}
{attribute->getInstanceRecordType assign='InstanceRecordType'}
{attribute->getInstanceRecordDescription assign='InstanceRecordDescription'}
{attribute->getInstanceRecordLabel assign='InstanceRecordLabel'}
{attribute->getInstanceRecordDataset assign='InstanceRecordDataset'}
{attribute->getValues attribute='http://www.geonames.org/ontology#locatedIn' assign='locatedIn'}
{attribute->getValues attribute='http://www.w3.org/2003/01/geo/wgs84_pos#lat' assign='lat'}
{attribute->getValues attribute='http://www.w3.org/2003/01/geo/wgs84_pos#long' assign='long'}
{attribute->getValues attribute='http://purl.org/ontology/now#imageUrl' assign='imageUrl'} {* URL *}
{attribute->getValues attribute='http://purl.org/ontology/now#thumbnailUrl' assign='thumbnailUrl'} {* URL *}
{attribute->getValues attribute='http://purl.org/ontology/now#relatesTo' assign='relatesTo'} {* URI *}
{attribute->getValues attribute='http://xmlns.com/foaf/0.1/topic' assign='topics'} {* URI *}
{attribute->getValues attribute='http://purl.org/ontology/now#convervationShortReport' assign='convervationShortRepot'} {* URL *}
{attribute->getValues attribute='http://purl.org/ontology/now#conservationLongReport' assign='conservationLongReport'} {* URL *}
{attribute->getValues attribute='http://purl.org/ontology/now#nationalHistoricSite' assign='nationalHistoricSite'} {* URL *}
{attribute->getValues attribute='http://purl.org/ontology/now#link' assign='link'} {* URL *}
{attribute->getValues attribute='http://purl.org/ontology/wsf#crudAction' assign='crudAction'} {* --- to ignore *}
{attribute->getValues attribute='http://purl.org/ontology/sco#namedEntity' assign='isNamedEntity'} {* --- to ignore *}
{* ----------------------------------------- *}
{attribute->getUnasigned assign='unasignedAttributes'}
{php}
// Set the template folder URL into a smarty variable
$this->assign('templateLocationUrl', $this->templateLocationUrl);
{/php}
<title>{if $InstanceRecordLabel != ''}{$InstanceRecordLabel} heritage image{else}heritage image{/if}</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
{*
Used to specify the CSS file related to this template. Put only the name of the file here. The name will be resolved by
the node in the folder "*/templates/css/file_name.css".
*}
<link type="text/css" rel="stylesheet" media="all" href="{$templateLocationUrl}css/now_heritagebuildingimage.css" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html {ldelim} height: 100% {rdelim}
body {ldelim} height: 100%; margin: 0; padding: 0 {rdelim}
#map_canvas {ldelim} height: 100% {rdelim}
</style>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
</head>
{*
IMPORTANT NOTE:
Only what is within the body of this XHTML template will be used to skin the data type
*}
<body>
<script type="text/javascript">
$(document).ready(function()
{ldelim}
var latlng = new google.maps.LatLng({$lat[0].value}, {$long[0].value});
var myOptions = {ldelim}
zoom: 15,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
{rdelim};
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var marker = new google.maps.Marker({ldelim}
position: latlng,
map: map,
icon: "http://npidev.structureddynamics.com/sites/all/modules/conStruct/templates/imgs/house_brown.png",
title: "{$InstanceRecordLabel} heritage image"
{rdelim});
panorama = map.getStreetView();
panorama.setPosition(latlng);
panorama.setVisible(true);
{rdelim});
</script>
<div id="tBody">
<table id="tMainCharacteristicsTable">
<tbody>
<tr>
<td id="tLeftInformationColumn" valign="top">
<a href="{$imageUrl[0].value}">
<img src="{$imageUrl[0].value}" style="height: 300px" title="{$InstanceRecordLabel}" border="0" />
</a>
<h2>General Information</h2>
<ul>
<li>
<img src="{$templateLocationUrl}imgs/house.png" style="padding-left: 3px; padding-right: 5px;" />The heritage image <code>{$InstanceRecordLabel}</code> is located in the <a href="{$locatedIn[0].value}">{$locatedIn[0].valueLiteral}</a> neighbourhood.
</li>
{if $convervationShortRepot[0].value != ""}
<li><img src="{$templateLocationUrl}imgs/report_link.png" /> <a href="{$convervationShortRepot[0].value}" title="document">Short conservation report</a></li>
{/if}
{if $conservationLongReport[0].value != ""}
<li><img src="{$templateLocationUrl}imgs/report_link.png" /> <a href="{$conservationLongReport[0].value}" title="document">Long conservation report</a></li>
{/if}
{if $nationalHistoricSite[0].value != ""}
<li><img src="{$templateLocationUrl}imgs/world_link.png" /> <a href="{$nationalHistoricSite[0].value}" title="document">National History Site webpage</a></li>
{/if}
{if $link[0].value != ""}
<li><img src="{$templateLocationUrl}imgs/world_link.png" /> <a href="{$link[0].value}" title="document">Webpage</a></li>
{/if}
</ul>
</td>
<td id="tMapColumn" valign="top">
{if $lat != "" && $long != ""}
<div id="map_canvas" style="width:400px; height:300px;"></div>
{/if}
</td>
</tr>
</tbody>
</table>
{* If there are attributes/values that haven't been assigned to any template variable, then we simply
list them into an "Other Information" tw-column table *}
{if count($unasignedAttributes) > 0}
<h3 id="tOtherInformationTitle">Other Information</h3>
<table id="tAttributesValuesTable">
<tbody>
{foreach from=$unasignedAttributes item=value}
{if $value.valueType == "resource"}
<tr>
<td class="tAttributeColumn" valign="top">
<span>
{$value.attributeLabel}:
</span>
</td>
<td class="tValueColumn" valign="top">
<a href="?uri={$value.value}&dataset={$InstanceRecordDataset}">{$value.valueLiteral}</a>
</td>
</tr>
{else}
<tr>
<td class="tAttributeColumn" valign="top">
<span>
{$value.attributeLabel}:
</span>
</td>
<td class="tValueColumn" valign="top">
{$value.valueLiteral}
</td>
</tr>
{/if}
{/foreach}
</tbody>
</table>
{/if}
</div>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
{*
// Tells the templating engine to check for linksTo relationships.
setting->LinksTo=false
// Tells the templating engine NOT to include labels for object resources
setting->setAttributeIgnoreResourceLabel=false
*}
{* Attributes assignation: assignation of pre-defined variables *}
{attribute->getInstanceRecordType assign='InstanceRecordType'}
{attribute->getInstanceRecordDescription assign='InstanceRecordDescription'}
{attribute->getInstanceRecordLabel assign='InstanceRecordLabel'}
{attribute->getInstanceRecordDataset assign='InstanceRecordDataset'}
{attribute->getValues attribute='http://www.geonames.org/ontology#locatedIn' assign='locatedIn'}
{attribute->getValues attribute='http://www.w3.org/2003/01/geo/wgs84_pos#lat' assign='lat'}
{attribute->getValues attribute='http://www.w3.org/2003/01/geo/wgs84_pos#long' assign='long'}
{attribute->getValues attribute='http://purl.org/ontology/now#imageUrl' assign='imageUrl'} {* URL *}
{attribute->getValues attribute='http://purl.org/ontology/now#thumbnailUrl' assign='thumbnailUrl'} {* URL *}
{attribute->getValues attribute='http://purl.org/ontology/now#relatesTo' assign='relatesTo'} {* URI *}
{attribute->getValues attribute='http://xmlns.com/foaf/0.1/topic' assign='topics'} {* URI *}
{attribute->getValues attribute='http://purl.org/ontology/now#convervationShortReport' assign='convervationShortRepot'} {* URL *}
{attribute->getValues attribute='http://purl.org/ontology/now#conservationLongReport' assign='conservationLongReport'} {* URL *}
{attribute->getValues attribute='http://purl.org/ontology/now#nationalHistoricSite' assign='nationalHistoricSite'} {* URL *}
{attribute->getValues attribute='http://purl.org/ontology/now#link' assign='link'} {* URL *}
{attribute->getValues attribute='http://purl.org/ontology/wsf#crudAction' assign='crudAction'} {* --- to ignore *}
{attribute->getValues attribute='http://purl.org/ontology/sco#namedEntity' assign='isNamedEntity'} {* --- to ignore *}
{* ----------------------------------------- *}
{attribute->getUnasigned assign='unasignedAttributes'}
{php}
// Set the template folder URL into a smarty variable
$this->assign('templateLocationUrl', $this->templateLocationUrl);
{/php}
<title>{if $InstanceRecordLabel != ''}{$InstanceRecordLabel} heritage image{else}heritage image{/if}</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
{*
Used to specify the CSS file related to this template. Put only the name of the file here. The name will be resolved by
the node in the folder "*/templates/css/file_name.css".
*}
<link type="text/css" rel="stylesheet" media="all" href="{$templateLocationUrl}css/now_heritagebuildingimage.css" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html {ldelim} height: 100% {rdelim}
body {ldelim} height: 100%; margin: 0; padding: 0 {rdelim}
#map_canvas {ldelim} height: 100% {rdelim}
</style>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
</head>
{*
IMPORTANT NOTE:
Only what is within the body of this XHTML template will be used to skin the data type
*}
<body>
<script type="text/javascript">
$(document).ready(function()
{ldelim}
var latlng = new google.maps.LatLng({$lat[0].value}, {$long[0].value});
var myOptions = {ldelim}
zoom: 15,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
{rdelim};
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var marker = new google.maps.Marker({ldelim}
position: latlng,
map: map,
icon: "http://npidev.structureddynamics.com/sites/all/modules/conStruct/templates/imgs/house_brown.png",
title: "{$InstanceRecordLabel} heritage image"
{rdelim});
panorama = map.getStreetView();
panorama.setPosition(latlng);
panorama.setVisible(true);
{rdelim});
</script>
<div id="tBody">
<table id="tMainCharacteristicsTable">
<tbody>
<tr>
<td id="tLeftInformationColumn" valign="top">
<a href="{$imageUrl[0].value}">
<img src="{$imageUrl[0].value}" style="height: 300px" title="{$InstanceRecordLabel}" border="0" />
</a>
<h2>General Information</h2>
<ul>
<li>
<img src="{$templateLocationUrl}imgs/house.png" style="padding-left: 3px; padding-right: 5px;" />The heritage image <code>{$InstanceRecordLabel}</code> is located in the <a href="{$locatedIn[0].value}">{$locatedIn[0].valueLiteral}</a> neighbourhood.
</li>
{if $convervationShortRepot[0].value != ""}
<li><img src="{$templateLocationUrl}imgs/report_link.png" /> <a href="{$convervationShortRepot[0].value}" title="document">Short conservation report</a></li>
{/if}
{if $conservationLongReport[0].value != ""}
<li><img src="{$templateLocationUrl}imgs/report_link.png" /> <a href="{$conservationLongReport[0].value}" title="document">Long conservation report</a></li>
{/if}
{if $nationalHistoricSite[0].value != ""}
<li><img src="{$templateLocationUrl}imgs/world_link.png" /> <a href="{$nationalHistoricSite[0].value}" title="document">National History Site webpage</a></li>
{/if}
{if $link[0].value != ""}
<li><img src="{$templateLocationUrl}imgs/world_link.png" /> <a href="{$link[0].value}" title="document">Webpage</a></li>
{/if}
</ul>
</td>
<td id="tMapColumn" valign="top">
{if $lat != "" && $long != ""}
<div id="map_canvas" style="width:400px; height:300px;"></div>
{/if}
</td>
</tr>
</tbody>
</table>
{* If there are attributes/values that haven't been assigned to any template variable, then we simply
list them into an "Other Information" tw-column table *}
{if count($unasignedAttributes) > 0}
<h3 id="tOtherInformationTitle">Other Information</h3>
<table id="tAttributesValuesTable">
<tbody>
{foreach from=$unasignedAttributes item=value}
{if $value.valueType == "resource"}
<tr>
<td class="tAttributeColumn" valign="top">
<span>
{$value.attributeLabel}:
</span>
</td>
<td class="tValueColumn" valign="top">
<a href="?uri={$value.value}&dataset={$InstanceRecordDataset}">{$value.valueLiteral}</a>
</td>
</tr>
{else}
<tr>
<td class="tAttributeColumn" valign="top">
<span>
{$value.attributeLabel}:
</span>
</td>
<td class="tValueColumn" valign="top">
{$value.valueLiteral}
</td>
</tr>
{/if}
{/foreach}
</tbody>
</table>
{/if}
</div>
</body>
</html>
Record View
Here is a rendering of this record template while in individual record 'View' mode:
Browse Record
Here is a rendering of a recordset record template for this same record. This record view has been generated by the structBrowse conStruct tool, and is used the resultset records templates.
