Post Hero Layout

Travio gives you multiple hero layout options for blog posts. This guide explains:

• how Travio chooses a hero layout

• how to change it

• what content each layout uses

• how to get the best result for each layout

What is a Post Hero Layout?

A post hero layout is the large section shown at the top of a blog post.

Depending on the layout, it can show:

• a featured image

• a video

• a gallery

• a slider

• a scrolling image mosaic

• a background image

• or just text

---

How Travio Chooses the Hero Layout

Travio decides the hero layout in this order:

1. #video tag on the default post template

If your post uses the normal default post template and has the internal tag #video, Travio will automatically use the Video hero layout.

2. Theme setting

If the post does not have the #video tag, Travio uses the layout selected in the theme setting:

Default post hero layout

3. Custom post template

If you manually choose a custom post template for the post, that template will force a specific hero layout. This means the custom template will override the normal default layout logic.

The automatic #video behavior only works on the default post template.

If you choose a custom post template manually, that template will be used even if the post has the #video tag.

---

How to Apply a Hero Layout

Option 1: Set a Site-Wide Default Layout

Use this option if you want all normal posts to use the same hero layout by default.

Steps

1. Open Ghost Admin

2. Go to Settings → Design → Customize

3. Open the Post section

4. Find Default post hero layout

5. Choose one of the following:

   • Default

   • Video

   • Scrolling Mosaic

   • Gallery

   • Slider

   • Wide Image

   • Background Image

6. Save your changes

Select site-wide default post layout

Option 2: Choose a Layout for One Specific Post

Use this option if you want a single post to use a different hero layout.

Steps

1. Open the post in Ghost Admin

2. Open the right sidebar

3. Find the Template option

4. Select one of these templates:

   • custom-post-hero-default.hbs

   • custom-post-hero-video.hbs

   • custom-post-hero-scrolling-mosaic.hbs

   • custom-post-hero-gallery.hbs

   • custom-post-hero-slider.hbs

   • custom-post-hero-wide-image.hbs

   • custom-post-hero-background-image.hbs

5. Update or publish the post

Select post layout for individual posts which overrides the default setting

---

Content Used in All Hero Layouts

No matter which hero layout you choose, Travio will still use the current post information such as:

• Post title

• Author

• Publish date

• Reading time

• Destination chips (when post tags match your configured destination tags)

Excerpt Behavior

Most hero layouts show the custom excerpt if you have added one.

Special cases

For these layouts, Travio will use the normal excerpt if the custom excerpt is empty:

• Gallery

• Scrolling Mosaic

---

Hero Layouts Explained

1. Split Layout

Live preview: https://travio.themeupstudio.com/articles/prague-after-dark-nightlife-road-trip-and-the-best-neighborhoods/

The Split Layout layout is the standard post hero.

Split Layout

What it uses

• Featured image only

What happens if no featured image is added

• The hero becomes text-only

Best practice

Use:

• a strong post title

• a custom excerpt

• a featured image

---

2. Video

Live preview: https://travio.themeupstudio.com/articles/istanbul-for-autumn-yoga-retreat-mistake-proof-tips/

The Video layout shows a video in the hero area.

Video Layout

Supported video sources

Travio can detect:

• HTML video blocks

• video files added with <video>

• nested <source src>

• supported embeds are:

  • YouTube

  • Vimeo

How it works

Travio scans the post content, finds a valid video, and moves one video into the hero section.

If multiple videos exist

Travio shows the last video as the post card loop video. Second to last video (can be Ghost Video Card, YouTube embed, or Vimeo embed) will be shown in the post hero.

If only single video (Ghost Video Card) is present - that is used as both post card loop video and hero video. YouTube/Vimeo videos are not used as post card loop video.

What happens after moving the video

The selected video is removed from the main post content so it does not appear twice.

Fallback behavior

If no valid video is found:

• the featured image will be shown if available

• if there is no featured image, the hero becomes text-only

Best practice

For the best result:

• add the internal tag #video

• place one Ghost video block or embed near the end of the post. Ensure this video is small in size for better performance.

• place a video embed (Youtube/Vimeo) anywhere before the last Ghost video card.

---

3. Scrolling Mosaic

Live preview: https://travio.themeupstudio.com/articles/8-ways-to-do-oslo-like-a-local-caving-art-and-zero-stress/

The Scrolling Mosaic layout creates a moving column-based image collage.

Scrolling Masonry Mosaic

What it uses

• Featured image

• Images from the post content

How it works

Travio:

1. starts with the featured image if available

2. collects images from the post content

3. removes duplicates

4. arranges them into scrolling columns

What happens if there are no images

If there is no featured image and no body images, the mosaic area will show no media.

Best practice

Use:

• a featured image

• multiple images inside the post

• gallery cards or image cards for a richer result

---

4. Gallery

Live preview: https://travio.themeupstudio.com/articles/stockholm-on-a-budget-skiing-views-worth-the-climb-and-smart-stays/

The Gallery layout creates a gallery-style hero using your post images.

Gallery Layout

What it uses

• Featured image

• Image cards from the post content

• Gallery card images from the post content

Image limit

Travio can add up to 8 unique content images.

What happens if there are no images

If no images are found, the gallery section is hidden.

Best practice

Use:

• one featured image

• several image cards or gallery cards inside the post content

---

5. Slider

Live preview: https://travio.themeupstudio.com/articles/mumbai-for-foodie-photography-easy-day-trips/

The Slider layout creates a slideshow hero.

Slider Layout

What it uses

• Featured image as the first slide

• Additional images from the post content

Image limit

Travio can add up to 4 unique body images.

If there is no featured image

Travio starts with a placeholder slide.

If real images are found later

The placeholder is removed once actual images are added.

Slider behavior

Autoplay and looping only work when there is more than one slide.

What happens if no images are available

If there is no featured image and no body image, the placeholder remains as the only slide.

Best practice

Use:

• one featured image

• at least 2 to 3 images inside the post content

---

6. Wide Image

Live preview: https://travio.themeupstudio.com/articles/the-calm-side-of-prague-hiking-ideas-for-off-the-beaten-path-road-trip/

The Wide Image layout displays the featured image in a wide section below the post title and meta information.

Wide Image Layout

What it uses

• Featured image only

What happens if no featured image is added

• The hero becomes text-only

Best practice

Use a high-quality wide or panoramic featured image.

---

7. Background Image

Live preview: https://travio.themeupstudio.com/articles/madrid-in-a-long-weekend-a-guide-for-local-life-travelers/

The Background Image layout uses the featured image as the full hero background.

Background Image Layout

What it uses

• Featured image only

Extra styling

Travio adds a gradient overlay to help text stay readable.

What happens if no featured image is added

Travio shows a branded placeholder block instead.

Best practice

Use a high-contrast featured image so the title and meta details remain easy to read.

---

Quick Setup Guide by Layout

Split Layout

Recommended content:

• Featured image

• Custom excerpt

Video

Recommended content:

• At least one valid video or supported embed

• Internal tag #video for posts using the default template

Scrolling Mosaic

Recommended content:

• Multiple images inside the post

• Optional featured image

Gallery

Recommended content:

• Featured image

• Image cards or gallery cards in the post

Slider

Recommended content:

• Featured image

• Several body images

Wide Image

Recommended content:

• High-resolution wide featured image

Background Image

Recommended content:

• Strong featured image with good contrast

---

Quick Checklist

Before publishing, use this checklist:

Layout	What you should add
Split Layout	Featured image
Video	Valid video/embed and #video tag
Scrolling Mosaic	Multiple post images
Gallery	Featured image + image/gallery cards
Slider	Featured image + body images
Wide Image	Wide featured image
Background Image	High-contrast featured image

---

Tips for Best Results

• Add a custom excerpt for cleaner hero text

• Always use a good featured image unless the layout is mainly video-based

• For image-heavy layouts, add enough images inside the post body

• For video posts, keep the main video clear and easy for Travio to detect

• Use custom templates when you want full control over a specific post