Code Injection Variables
Use this in Ghost Admin → Settings → Code Injection → Site Header.
Refer the code injection snippet provided in Code Injection.
Header Logo Height
Variable: --travio-logo-nav-height
What it controls: Header logo height in the top navigation.
Where it applies: Nav logo in the header.
Effect of changing it: Larger/smaller brand mark in header across all pages.
How to use: Set a CSS length value (px, rem, etc).
Example: --travio-logo-nav-height: 22px;
CTA Logo Height
Variable: --travio-logo-cta-height
What it controls: Logo height in CTA-style logo placements used by the theme.
Where it applies: CTA/logo blocks that use the CTA logo variable.
Effect of changing it: Keeps CTA logo scale consistent with your brand system.
How to use: Same as above; set a CSS length value.
Example: --travio-logo-cta-height: 22px;
Content API Key
Variable: window.TRAVIO_CONFIG.contentApiKey
What it controls: Ghost Content API access used by Travio’s dynamic features.
Where it is used in code: Advanced archive/article/video filtering + pagination via API. Footer tabbed post feeds (for example latest/featured/tag tabs). Some video/media preview fetching paths.
Effect of changing it: If valid key is present, filtering/footer API features work fully and efficiently. If missing/invalid, theme falls back where possible and may show diagnostic messages for advanced features.
How to use correctly: Use the Ghost Content API Key (public key), not Admin API key. Keep quotes around it as a string.
Open External Links in New Tab
Variable: window.TRAVIO_CONFIG.openLinksInNewTab
What it controls: External-link behavior site-wide.
Where it is used in code: handleExternalLinksInNewTab() scans all links and updates only external http/https links.
Effect of true: External links open in new tab (target="_blank"). Security rel values are enforced (noopener noreferrer).
Effect of false: Theme does not auto-modify external links.
How to use: true for publication-style UX (keep readers on site). false if you want normal same-tab behavior.
Footer Social Media Icons
Variable: window.TRAVIO_CONFIG.footer.socialIcons
What it controls: Custom SVG icons used for footer social links.
Where it is used in code: Footer builder resolves icon by social slug; your SVG overrides built-ins when key matches.
Important setup requirement (this is critical): Icons are rendered only for social items found in Secondary Navigation. In Secondary Navigation, label must start with * followed by slug.
Use labels like: *google, *behance, *dribbble and set each item URL to your profile link. If you only define social icons in code injection but do not add matching *slug links in Secondary Navigation, nothing will display.
How slug matching works: Your object key is the slug (google, behance, dribbble). Footer social nav item label (without *) must match that slug. If slug has no built-in icon and no custom SVG override, icon is not rendered.
Adding missing icons: If icons for a social media is missing, you can copy the SVG from Tabler Icons for that brand and add in code injection. Ensure that the key matches the label in secondary navigation, as shown in below image.
Filters
Variable: window.TRAVIO_CONFIG.filters.visibility
What it controls: Which filter groups are shown on each listing template.
Where it is used in code: Filter visibility normalization + page-specific mapping. The config currently does this:
Filters on Articles page
Variable: filters.visibility.articles
destination: true, experiences: true
Effect: Articles page shows both destination and experience filters.
Filters on Videos page
Variable: filters.visibility.videos
destination: true, experiences: true
Effect: Videos page shows both destination and experience filters.
Filters on Archive page
Variable: filters.visibility.archive
destination: true, experiences: true, date: true
Effect: Archive page shows destination, experience, and date filters.
Filters on Author page
Variable: filters.visibility.author
destination: true, experiences: true
Effect: Author page shows both filter groups.
Filters on Tag Page
Variable: filters.visibility.tag
destination: true, experiences: true
Effect: Standard tag page shows both filter groups.
Filters on Destination tags
Variable: filters.visibility.tagDestination
destination: false, experiences: true
Effect: Destination-style tag layout hides destination filter (to avoid redundancy) and keeps experience filter.
Filters on Experience tags
Variable: filters.visibility.tagExperience
destination: true, experiences: false
Effect: Experience-style tag layout hides experience filter and keeps destination filter.
How to use these safely:
Use
true/falsebooleans for each filter group.Supported keys include
destination/destinations,experience/experiences, anddate.If all groups are disabled for a page, the filter panel is hidden on that page.
Secondary Navigation Example for Your Social Icons
In Ghost Admin → Navigation → Secondary Navigation, add entries like:
Label:
*google→ URL:https://...Label:
*behance→ URL:https://...Label:
*dribbble→ URL:https://...
That is what makes your injected SVGs actually appear in the footer.
Last updated