Experiences Page

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

This guide explains how the Experiences page works, what data it uses, and how to customize it.

Route and Template

• URL: /experiences/

• Route source: routes.yaml

• Template file: experiences.hbs

• Page data source: data: page.experiences

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

Experiences page content source

---

What the Experiences Page Does

The Experiences page is a curated taxonomy directory based on your custom experience slug list.

It includes:

1. Page header (from page.experiences)

2. Grid/list of experience cards

3. Tag image or initials fallback

4. Post count per experience

5. Pagination / Load More behavior

6. Bottom CTA section

---

Core Setting That Powers This Page

@custom.experiences (Theme → Site Wide)

This setting controls which tags are treated as experiences.

• Type: comma-separated tag slugs

• Example: hiking,street-food,wellness,culture

Only tags listed here are used as experience taxonomy for this page and related UI.

If this setting is empty or invalid, the experiences listing will be incomplete or empty.

Experience tag slugs in settings

---

Data Source and Card Content

Experience cards are built from Ghost tags matching @custom.experiences.

Each card typically includes:

• Tag name

• Tag feature image (if available)

• Fallback initials if image missing

• Post count badge

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

---

Template and Card Structure

• Main template: experiences.hbs

• Card partial: partials/cards/card-experience.hbs

To customize visual style (round image treatment, count badge position, typography), edit card-experience.hbs.

---

Pagination / Load More

Experiences page supports progressive loading.

Behavior:

• Initial batch of experience tags is rendered server-side

• Load More fetches additional tags

• End state uses localized “No more experiences” messaging

---

Relationship with Other Pages

@custom.experiences affects multiple sections across Travio:

• Homepage experiences section

• Hero floating badges (homepage)

• Header experience dropdown

• Filter options in archive/articles/videos/author pages

• Tag archive variant behavior (tagExperience context)

So this taxonomy list should be curated carefully.

---

Best Practices for Experience Setup

1. Keep experience tags thematic/activity-based (not geographic)

2. Add feature images for better cards and badges

3. Use consistent naming and slug conventions

4. Remove stale slugs from setting to avoid weak/empty listing

5. Assign experience tags to enough posts for useful counts

---

Common Issues

• No experience cards shown: @custom.experiences empty or slug mismatch.

• Cards show initials only: feature images missing on experience tags.

• Counts too low: experiences not assigned consistently to posts.

• Page header missing: experiences slug page not created.

• Load more ends fast: limited number of experience tags available.

---

Quick Setup Checklist

1. Create page slug experiences

2. Populate @custom.experiences with valid tag slugs

3. Add feature images to experience tags

4. Tag posts consistently with experience tags

5. Test /experiences/, load more, and links to /tag/{slug}/