Code examples for content type templates – OpenCities

This is a Developer task

Show a special message for mobiles and tablets

The following example shows the page title rendered as the H1 with the body content displayed underneath. There is a special note above the body content if the user is accessing the page using a mobile phone or a tablet.

<ItemData DataDefinition="OC Title" Template="OC Page Title" />
<DeviceFilter exclude="Tablet|Mobile">
	<div class="special-note">
		You have accessed this page from a mobile device. Please access via a laptop or a desktop to complete the action.
	</div>
</DeviceFilter>
<ItemData DataDefinition="OC Body Content" Template="default" />

Show different layouts for different devices

This can be achieved using the included grid framework. For more information on the grid framework, please see our overview of the OpenCities framework.

In this example:

The main page content uses ⅔ of the page in desktop, and uses the full width in mobile and tablet sizes.
The date after the title shows only the next date. This is set by using a specific template and setting the number of days to 1 and the sDays to 0.
The date section after the body content displays all dates.
The street address is used twice. The first use shows the address as a link and the 2nd use shows the address as a map.

<div class="grid">
	<div class="col-xs-12 col-m-8">
		<ItemData DataDefinition="OC Title" Template="OC Page Title" />
		<ItemData DataDefinition="OC Composite Date" Template="OC Next Event Date" numEntry="1" SDays="0" />
		<ItemData DataDefinition="OC Page Image" Template="OC Page Image" />
		<ItemData DataDefinition="OC Body Content" Template="default" />
		<div class="clearfix"></div>
		<ItemData DataDefinition="OC Composite Date" Template="OC Event Details When" />
		<ItemData DataDefinition="OC Street Address" Template="OC Full Address with Map Link" />
		<ItemData DataDefinition="OC Street Address" Template="OC Google Map" />
	</div>
	<div class="col-xs-12 col-m-4">
		<!--WebUserControl-->OC CC Public Add To Calendar<!--/WebUserControl-->
		<div class="side-box event-snapshot">
			<h2 class="side-box-title"><oc:Snippet name="Event Snapshot"/></h2>
			<div class="side-box-content">
				<ItemData DataDefinition="OC Cost" Template="OC Sidebox Section" />
				<oc:FieldHasValue fields="OC Contact Name|OC Contact Phone|OC Contact Email|OC Website">
					<div class="side-box-section contact-details">
						<h3 class="side-box-contact"><oc:Snippet name="Contact"/></h3>
						<ItemData DataDefinition="OC Contact Name" Template="OC Contact Details Snapshot" />
						<ItemData DataDefinition="OC Contact Phone" Template="OC Contact Details Snapshot Value" />
						<ItemData DataDefinition="OC Contact Email" Template="OC Contact Details Snapshot" />
						<ItemData DataDefinition="OC Website" Template="OC Contact Details Snapshot" />
					</div>
				</oc:FieldHasValue>
			</div>
		</div>
		<itemdata datadefinition="OC Multiple Content 2" template="OC Side Panel" />
		<ItemData DataDefinition="OC Related Links" Template="OC Related Information with Header" />
	</div>
</div>