Videos Page

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

This guide explains how the Videos page works, what drives its content, and how to customize it.

Route and Template

• URL: /videos/

• Route source: routes.yaml

• Template file: videos.hbs

• Controller: channel

• Built-in route filter: tag:hash-video

• Page data source: data: page.videos

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

Videos page content source

---

How Videos Are Selected

Travio videos page is powered by Ghost’s internal tag filter:

• Route filter is tag:hash-video

• In Ghost Admin, this means post must be tagged with internal tag #video

If a post is not tagged #video, it will not appear in /videos/.

---

What the Videos Page Includes

• Page header (from page.videos)

• Filter panel

  • Destination filter

  • Experience filter

• Video card grid (wide card layout)

• Empty-state message when no cards match selected filters

• Pagination / Load More behavior

• Bottom CTA section

---

Settings That Control Videos Page

Theme Custom Settings (Customize → Theme → Site Wide)

destinations:

• Comma-separated destination tag slugs

• Controls destination filter options shown on videos page

experiences:

• Comma-separated experience tag slugs

• Controls experience filter options shown on videos page

Code Injection: filter visibility

Use window.TRAVIO_CONFIG.filters.visibility.videos to control which filter groups appear.

Example:

window.TRAVIO_CONFIG = {
  filters: {
    visibility: {
      videos: {
        destination: true,
        experiences: true
      }
    }
  }
};

If both are disabled, the filter panel is hidden on videos page.

Videos page filter controls

---

Video Card Behavior

Videos page uses wide post cards (card-post-wide) with video-aware behavior.

For posts tagged #video:

• Theme tries to load preview media via Ghost Content API.

• If preview media is available, video preview can replace/fallback from static image.

• If API/media fetch fails, card falls back to feature image or placeholder.

---

API Requirements for Best Video UX

For advanced video preview/filter behavior, set a valid Content API key:

window.TRAVIO_CONFIG = {
  contentApiKey: "YOUR_CONTENT_API_KEY"
};

Without valid API config:

• Core videos listing still works (route-level #video filter)

• Some enhanced dynamic behaviors may degrade gracefully and use fallback images

---

Filtering Logic on Videos Page

• Category filters use tags from your destination/experience custom setting lists.

• Users can select multiple filters.

• Filter panel visibility follows filters.visibility.videos.

• Clear filter button resets active selections.

• Summary text updates (showing visible/total).

---

Pagination and “Load More”

Videos page supports load-more behavior with videos-specific text:

• Active button end-state text is customized to “No more videos”

• Filtering integrates with paginated content loading logic

• Empty-state message appears when no videos match selected filters

---

Related Post-Level Behavior

For single post pages (post.hbs):

• Any post tagged #video automatically uses Video Hero layout.

• This is independent of default post hero setting.

So #video controls both:

• Inclusion in /videos/

• Hero style on single post pages

---

Content Publishing Best Practices for Videos

For each video post:

• Add internal tag #video

• Add destination/experience public tags if you want it filterable on videos page

• Add a strong feature image as fallback thumbnail

• Ensure embedded/self-hosted video content is valid and accessible

This gives best results in both listing and single-post contexts.

---

Common Issues

• Post not showing on /videos/: missing #video internal tag.

• Filters empty: destinations / experiences setting slugs don’t match real tags.

• Video previews not appearing: missing/invalid Content API key or unavailable media.

• Header data missing: videos page slug not created.

• No results too often: filters are too restrictive for current video library.