Skip to content Skip to footer

Managing Resource Tags

This guide explains how to use and manage the tag system for categorizing resources on the ELIXIR Training SPLASH website.

Overview

The tag system allows you to categorize resources with colored badges that appear on resource cards. Tags are centrally managed in _data/resource_tags.yml to ensure consistency across the site.

Tag Categories

Tags are organized into categories defined in _data/tag_categories.yml. Each category has an associated color that applies to all tags within that category. Common categories include:

  • Organization (red) - Resources affiliated with specific organizations
  • Node (gray) - Resources specific to ELIXIR national nodes
  • Lifecycle (green) - Training development phases (Plan, Design, Develop, Deliver, Evaluate)
  • Topic (blue) - Subject areas and themes

To see current tags and categories, refer to:

How to Add Tags to a Resource

In the frontmatter of any resource page (e.g., pages/resources/your-resource.md), add a tags field with an array of tag IDs:

---
id: your-resource
title: Your Resource Name
# ... other fields ...

# OPTIONAL FIELDS
tags: [elixir, plan, design, fair-training]
# ... rest of frontmatter ...
---

Adding New Tags

To add a new tag to the system:

  1. Open _data/resource_tags.yml
  2. Add a new entry following this format:
- id: your-tag-id           # Use kebab-case, no spaces
  label: Display Name       # How it appears on cards
  category: topic           # organization, country, lifecycle, topic, etc.
  description: Tooltip text # Optional: shown on hover

Note: The tag’s color is automatically determined by its category (defined in _data/tag_categories.yml). All tags within the same category share the same color.

Available Bootstrap Colors

Colors are defined at the category level in _data/tag_categories.yml. All tags within a category automatically inherit that category’s color.

Current category color assignments:

  • Organization: danger (red)
  • Node: secondary (gray)
  • Lifecycle: success (green)
  • Topic: info (blue)

Available Bootstrap color options:

  • primary - Aubergine/purple (default theme color)
  • secondary - Gray
  • success - Green
  • danger - Red
  • warning - Orange/Yellow
  • info - Light blue
  • light - Light gray
  • dark - Dark gray/black

Adding a New Category

To create an entirely new category, you only need to update one file:

Add the category to _data/tag_categories.yml

- id: yourcategory          # Use kebab-case, matches the category field in tags
  label: Your Category      # Display name (will be shown in uppercase)
  description: Explanation of what this category represents
  color: primary            # Bootstrap color class - all tags in this category will use this color

That’s it! The category will automatically appear on the resources page in the order defined in tag_categories.yml. No changes needed to resources.md.

Example: Adding a “Format” Category

  1. Add to _data/tag_categories.yml: 
    - id: format
  label: Format
  description: The format or delivery method of the training resource
  color: warning            # Orange/yellow for all Format tags
  2. Add tags with this category in _data/resource_tags.yml: ```yaml
    • id: online label: Online category: format description: Online/virtual training
  • id: in-person label: In-Person category: format description: Face-to-face training ```

The “Format” category will automatically appear in the filter sidebar with an info icon showing the description. Both tags will appear in orange (warning color).

Adding Category Descriptions

Category descriptions appear as tooltips when users hover over the info icon (ℹ️) next to category labels.

To add or update a category description:

  1. Open _data/tag_categories.yml
  2. Add or modify the description field:
- id: organization
  label: Organization
  description: Resources affiliated with specific organizations or collaborative networks

The description should briefly explain what the category represents and help users understand which tags to use for filtering.

Best Practices

  1. Limit tags per resource: Use 3-7 tags for clarity
  2. Use consistent categories: Include at least one organization or lifecycle tag
  3. Category colors: Colors are managed at the category level - choose colors that visually distinguish categories
  4. Descriptive labels: Keep labels short (1-3 words) but clear
  5. Meaningful descriptions: Add helpful tooltip text for less obvious tags

Where Tags Are Used

Resources Page

  • Filter sidebar: All tags appear as clickable filter buttons organized by category
  • Search functionality: Tags are searchable via the search box
  • Tag deselection: Click an active tag again to deselect it and return to “All Resources”
  • Resource cards: Tags displayed on each card (in order defined in resource_tags.yml)

Home Page Carousel

  • Only shows resources tagged with elixir
  • Displays only lifecycle tags on cards (organization, node, and topic tags are hidden)
  • Randomized order on each build

Lifecycle Pages (Plan, Design, Develop, Deliver, Evaluate)

  • Automatically displays resources tagged with the corresponding lifecycle tag
  • Shows full resource cards with logos, titles, and tags

Examples

Example 1: Training Platform

tags: [elixir, catalogue, plan, design]

Example 2: Training Course

tags: [elixir, train-the-trainer, design, deliver, evaluate]

Example 3: Node-Specific Resource

tags: [elixir, ch, develop, elearning]

Display

Tags appear as small colored badges below the resource title on resource cards. They help visitors quickly identify:

  • Which organization provides or endorses the resource
  • Which ELIXIR node(s) support the resource (if applicable)
  • What phase(s) of the training lifecycle it supports
  • What topic or domain it covers

Each tag has a tooltip that appears on hover, providing additional context about its meaning.

Technical Implementation

Reusable Components

_includes/related-resources.html

A reusable Liquid component for displaying filtered resource cards:

{% include related-resources.html tag="plan" %}

This component:

  • Filters resources by the specified tag
  • Displays cards with logos, titles, and tag badges
  • Used on all lifecycle pages (plan.md, design.md, etc.)

Tag Ordering

Tags are displayed in the order they appear in _data/resource_tags.yml, NOT alphabetically. This allows you to control the visual priority of tags by reordering them in the file.

Filtering Behavior

On the resources page:

  • Clicking a tag filter shows only resources with that tag
  • Clicking the same tag again deselects it (returns to “All Resources”)
  • The “All Resources” button always shows all resources
  • Search works in combination with tag filters