Tags Page

Live preview: https://travio.themeupstudio.com/tags/

This guide explains how the Tags page works, what data drives it, and how to customize it.

Route and Template

• URL: /tags/

• Route source: routes.yaml

• Template file: tags.hbs

• Page data source: data: page.tags

Create a Ghost page with slug tags so page header/title content can render correctly.

Tags page content source

---

What the Tags Page Does

The Tags page is a directory/listing page for site tags. It includes:

1. Page header (from page.tags)

2. Tag cards/grid

3. Tag image or initials fallback

4. Post count per tag

5. Pagination / Load More behavior

6. Bottom CTA section

---

Content Source

Tags listing is populated from Ghost tags, not manually built content blocks.

Each tag card usually includes:

• Tag name

• Tag feature image (if available)

• Fallback initials if no image

• Associated post count

• Link to the tag archive (/tag/{slug}/)

---

Template and Card Structure

• Main listing template: tags.hbs

• Tag card partial: partials/cards/card-tag.hbs

Customize card appearance/metadata in the card partial.

---

Pagination / Load More

Tags page supports load-more style pagination.

Behavior includes:

• Additional tag cards fetched progressively

• Button state updates at end of list

• Localized end-state label (for example “No more tags”)

---

Relationship with Tag Archive Pages (/tag/{slug}/)

The /tags/ page is only a directory. Clicking a tag opens detailed tag archive pages rendered by tag.hbs.

Travio applies two tag archive variants based on your custom settings:

• Destination-style tag layout (if slug is in @custom.destinations)

• Experience-style tag layout (if slug is in @custom.experiences)

• Default tag layout for all other tags

---

Settings That Influence Tag Experience

Theme settings (Site Wide)

destinations :

• Comma-separated destination tag slugs.

• Used to classify tag archive behavior/layout and filters.

experiences :

• Comma-separated experience tag slugs.

• Used to classify tag archive behavior/layout and filters.

These settings do not remove tags from /tags/ directory; they affect how individual tag archive pages behave.

---

Code Injection

TRAVIO_CONFIG.filters.visibility can control filter sections for:

• tag

• tagDestination

• tagExperience

Example:

window.TRAVIO_CONFIG = {
  filters: {
    visibility: {
      tag: { destination: true, experiences: true },
      tagDestination: { destination: false, experiences: true },
      tagExperience: { destination: true, experiences: false }
    }
  }
};

---

Best Practices for Tag Quality

For better Tags page and tag archive UX:

1. Upload feature images for important tags

2. Keep tag naming clean and consistent

3. Avoid duplicate/near-duplicate taxonomy terms

4. Use destination/experience lists only for true taxonomy tags

5. Keep non-taxonomy editorial tags separate

---

Common Issues

• Header content missing: tags slug page not created.

• Tags look empty/plain: many tags have no feature images (fallback initials will show).

• Unexpected tag archive layout: tag slug is incorrectly included/excluded in destinations or experiences.

---

Quick Setup Checklist

1. Create page slug tags

2. Ensure tags exist and are actively used

3. Add feature images to key tags

4. Configure destinations and experiences lists correctly

5. Test /tags/ and click through to /tag/{slug}/ pages