Content type templates – OpenCities

This is a Developer task

Create or edit a template for a content type

Any future improvements and features released by OpenCities will not apply to your custom templates. You will have to maintain your own templates and move across any new features to your templates manually. At the same time, if any changes to the OpenCities framework break your templates, you will have to debug and fix the issues yourself. OpenCities does not take any responsibility for custom-built templates.

A content type template determines how a page is displayed on your site. Each template belongs to a content type, and you can have any number of templates per content type. It is made up of HTML, static text and field templates. For more information on how content templates are used in OpenCities, please see our overview of the OpenCities framework.

To create or edit your own template for a content type:

Go to More > Site Templates.
Choose your content type.
Click the + (Content Type) Template button to start fresh. You can also click New or Create (Content Type) Template. To edit an existing content type, click on it.
Change the settings of your template. Keep reading for more information about the options in each tab.

If you're stuck, check out our example content type templates.

Overview tab

Template name

A descriptive name for the template. The name should be unique for the content type you’re working on.

Preview image

This can be used to show the content authors how the page will look using this particular template.

Image mapping

Once a preview image is loaded you can use image mapping to map WYSIWYG content to a particular section of the image. This will allow authors to click on the section in the thumbnail to open the related WYSIWYG field and enter content.

<map name="preview">
	<area shape="rect" coords="18,128,156,234" href="area_OC Body Content" alt="Edit Body Content" title="Edit Body Content"/>
</map>

href should be set to “area_[Field name]”

Use group template

There are three group templates available, which give you different layout options. You can choose one of these templates to use for your new template. We recommend you use a template with breadcrumbs for pages that are many levels deep within your site.

OC Full Width with Default Header - This template gives a page a layout that uses the default header, footer, and breadcrumbs. The page content uses the full width of the content area.
OC 2 Column with Default Header - This template gives a page a layout that uses the default header, footer, breadcrumbs and left-hand sub-navigation. The sub-navigation of the page will list the pages in that section of the site.
OC Empty with Default Header - This template gives a page a layout that uses the default header and footer. The content area is empty and does not have breadcrumbs.

File tab

Here you can upload files used in this template. These can be images, Javascript files, or CSS files only used in this template. We recommend that you upload files that are reused in multiple places in the theme instead of a specific template.

Edit tab

Here you can edit your text-based files, such as HTML, JavaScript, and CSS files. A template can use HTML, static text and field templates to render what authors have entered on a page.

You only have to code the template related to the content area of a page. Your header, footer, and side navigation will be determined by the group template you chose for your template in the Overview tab.

Once you’ve chosen a File to edit, you’ll see the following drop-downs. Choosing an option from a dropdown will show the related template element in the code editor, where you can make any changes you want.

Tip: Click on the code editor, then press F11 to change to full-screen mode (press it again to exit full-screen). Press F12 to open the editor settings panel. This helps you to customize the editor to your liking.

Plugins

A list of plugins available within the application.

Content Lists

A list of content lists within the current site.

Forms

A list of forms created within the site.

Seamless Markup

A list of special markups.

Start form - This is used to generate a <form> opening tag. This is already included in your OpenCities templates, so you don’t have to use this markup.
End form - Relates to the above start form tag. This renders the close </form> tag. This is also included in the template by default.
Template path - All files loaded into this template get a special path. If you want this path in your Javascript etc., use this markup.
Page language - Renders the language of the current page.
Exclude device - If you want to exclude a specific section of code from a device, use this markup.
Include device - If you want to include a specific section of code only in a specific device, use this markup.

Template Files

A list of files uploaded to this template.

User Information

A list of markups to render the currently-signed-in user’s information. This is useful for Intranets or other password-protected sites.

Device Variables

A list of device variables available within this site.

Device Profiles

A list of device profiles available within OpenCities. These can be used along with Exclude/Include device markup.

Text Snippets

A list of text snippets.

Field

A list of fields available for the current content type.

Field Parameters

A list of paraments for the selected field. All fields will include a Template property. To include this in the template, choose the field, then choose the template, then click Insert.

There are a few additional parameters for date fields:

Number of entries - Set how many entries to list. This is useful if the date field can have multiple or recurring dates.
sDays - A zero-based relative value. 0 = the date/time the user looks at the site. In a scenario where the author has entered multiple dates, setting this value to 0 means you are including dates in the future only. This can be set to - or + values. Setting it to -1 means show dates from current date/time - 1.
eDays - A zero-based relative value. Very similar to sDays, but works on the end-date entered by the author.
sDate (yyyy-MM-dd) - The same as sDays above, but instead of it being a relative value, the comparison is done using a specific date.
eDate (yyyy-MM-dd) - Same as eDays above, but instead of it being a relative value, the comparison is done using a specific date.
Order - In a scenario where the author enters multiple dates, you can use this parameter to render the list of dates in ascending or descending order.

Pages tab

Here you can search for pages that use this template. You can use it to see if the template is being used before you make significant changes or even delete the template.

Save when you’re done.

Copy templates

If you want to create a variation of an existing template or use a similar template in another content type, you can use the copy template feature. You can copy a template from one of your content types or even copy from an existing OpenCities content type.

Go to More > Site Template and choose an existing content type.
Select the template you want to copy.
At the bottom of the page, choose the content type you want to copy the template to from the drop down. If you want to make a copy within the same content type, choose the current content type.
Press Copy.

Need more help?

Don't forget to check out our example content type templates.