{tags}
Tags are the most common way of creating navigation to your courses and classes.
You might organise your courses into subject categories, e.g.:
- Arts
- Leisure
- Cooking
- Crafts
- Business
- Languages
- Sports
Using onCourse’s powerful tagging system, you might also organise your courses according to skill level:
- Beginners
- Intermediate
- Advanced
- Masterclass
Or, perhaps by target audience:
- Kids
- 1 - 4 years old
- 5 - 8 years old
- 9 - 12 years old
- Teens
- Adults
You may then want to display that tag structure on your website to allow users to navigation through it.
Clicking on any tag will take the user to a URL like /courses/leisure/crafts and all the relevant courses will be displayed on that page.
To place a tree of tag options on a page, simply use the rich text "{tags}".
Further options allow you to customise the output.
Usage
{tags name:"/Subjects/Leisure/Craft" maxLevels:"3" showDetail:"true" hideTopLevel:"false" template:"TagItem.tml"}
[name]
Optional. Defines the path to a tag. The full path to the tag must be specified. e.g. "/Subjects/Leisure/Craft" and will display all child tags including the specified tag. If no name is provided then it will default to "/Subjects".
[maxLevels]
Optional. Defining this option will limit how many levels of the tag tree will be displayed. For example, "1" will only show the top level tag and nothing else. If nothing is provided here then all levels of the tag tree are shown.
[showDetail]
[true, false] Optional. If true, a tag’s description (as defined in the onCourse client) will also be displayed. The default option is false.
[hideTopLevel]
[true, false] Optional. If true, the top level tag is not displayed. The default option is false.
[template]
Optional. The name of the template to use for rendering each item in the tag list. Defaults to TagItem.tml. If you set this to something else, make sure you create the appropriate file in your website resources.
Sample HTML output
<div class="taggroup-2405">
<ul>
<li class="hasChildren childSelected">
<a href="/courses">Personal Development</a>
<ul>
<li><a href="/courses/personal+development/work">Work</a></li>
<li class="selected"><a href="/courses/personal+development/life">Life</a></li>
<li><a href="/courses/personal+development/love">Love</a></li>
</ul>
</li>
</ul>
</div>
The output of {tags} with a little css styling applied.
Updated 5 months ago