Destinations Page

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

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

Route and Template

• URL: /destinations/

• Route source: routes.yaml

• Template file: destinations.hbs

• Page data source: data: page.destinations

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

Destinations page content source

---

What the Destinations Page Does

The Destinations page is a curated taxonomy directory based on your custom destination slug list.

It includes:

1. Page header (from page.destinations)

2. Grid/list of destination cards

3. Tag image or initials fallback

4. Post count per destination

5. Pagination / Load More behavior

6. Bottom CTA section

---

Core Setting That Powers This Page

@custom.destinations (Theme → Site Wide)

This is the primary controller for /destinations/.

• Type: comma-separated tag slugs

• Example: paris,tokyo,bali,rome

Only tags listed here are treated as destination taxonomy for this page and related destination UI across the theme.

If this setting is empty or slugs are invalid, destination cards may not render as expected.

Destination tag slugs in settings

---

Data Source and Card Content

Destination cards are built from Ghost tags matching @custom.destinations.

Each card typically uses:

• Tag name

• Tag feature image (if available)

• Fallback initials if image is missing

• Tag post count

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

---

Template and Card Structure

• Main template: destinations.hbs

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

If you want to customize visual style (overlay, image ratio, count placement, typography), edit card-destination.hbs.

---

Pagination / Load More

Destinations page supports progressive loading.

Behavior:

• Initial set is rendered from server response

• Load More fetches and appends additional destination cards

• End state shows localized “No more destinations” text

---

Relationship with Other Pages

The destination taxonomy list affects multiple areas, not only /destinations/:

• Homepage destination section

• Header destination dropdown

• Archive/article/author/videos filter options

• Tag archive variant logic (tagDestination context)

So keep this list clean and intentional.

---

Best Practices for Destination Setup

1. Use stable, readable slugs (new-york, south-korea, etc.)

2. Add feature images for all destination tags

3. Keep destination tags purely geographic (avoid mixing experiences/general tags)

4. Remove deprecated destination slugs from custom setting to avoid empty cards

5. Ensure destination tags are actually assigned to posts

---

Common Issues

• No destination cards: @custom.destinations is empty or slugs don’t match real tags.

• Cards show initials only: destination tags are missing feature images.

• Counts look too low: destination tags are not widely assigned to posts.

• Header text missing: destinations page slug not created.

• Pagination stops quickly: total matching destination tags is small.

---

Quick Setup Checklist

1. Create page slug destinations

2. Populate @custom.destinations with valid tag slugs

3. Add feature images to destination tags

4. Tag relevant posts properly

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