List Item As Badges
Tags serve as powerful organizational tool that help users quickly identify related content across your website. By displaying these taxonomy terms as visual badges beneath news articles, events, or other content types, you give visitors instant context about the content's themes.
When implementing tags in Terminalfour, you can enhance their utility by styling them as distinctive badges or pills that stand out visually from the main content. If you’re using the Events or Newsroom Modules you can even make these badges clickable links that lead to filtered views of all content sharing that tag. Doing so can enable your end-users to discover related items that share the same classifications.
This approach not only improves content discoverability but also helps users build mental models of how your site's content is organized, leading to more efficient and satisfying browsing experiences. Whether a visitor wants to find all events in a particular category or explore news articles on a specific topic, well-implemented tags provide an intuitive pathway for content exploration.
Badges without links
Let’s start by outputting our tags as badges without links. This can be done regardless of whether you’re using the Newsroom or Calendar Modules in Terminalfour.
The exact markup of badges can vary depending on your design system or component library in use on your site. In this guide, we’ll be using the markup for Bootstrap badges which is a commonly used framework.
The markup of our badge looks like this:
<span class="badge badge-primary">Badge Example</span>We’ll be working with a very simple event Content Type with the following elements:
| Name | Type | Size | Required |
|---|---|---|---|
| Event Title | Plain Text | 150 | Yes |
| Event Date | Date | 80 | Yes |
| Event Description | HTML | 10000 | Yes |
| Event Tags | Multi-Select [Event Category] |
80 | No |
Our goal is to output the items selected in the “Event Tags” element as badges in Handlebars.
Note: The ~ character is used here to avoid excess whitespace from being published.
How this works
The Handlebars code will use the each Helper with the selected Helper to loop over each of the selected “Event Tags” and then output the selected “Names” from the list entries each into their own badge.
Badges with links
Next we’ll extend the above code to output links to our even calendar filtered to just show events with that tag.
We’ll assume you’re using a default implementation of the Events Calendar module for this example. A link to the events calendar filtered by a category called “Test” would have the following URL pattern:
https://example.com/events-calendar/?categories[]=Category>Test
As part of your Events calendar installation you’ll have have a Section Details Navigation Object that returns the Path to the events calendar. Find or create this Navigation asset and note down its ID.
Our Handlebars code can now be updated to:
Note: Be careful to replace the id in the nav with the correct one from your implementation.
How this works
Like the previous example, this Handlebars code will use the each Helper with the selected Helper to loop over each of the selected “Event Tags” and then output the selected “Names” from the list entries each into their own badge.
This time though, we’re outputting them as links. And the href attribute includes a Navigation Object to point to the Events Calendar page of our site. We’re then appending that URL with a query parameter to filter the calendar by Category. The {{value}} variables is returning the Value of the selected list item.