> For the complete documentation index, see [llms.txt](https://docs.themeupstudio.com/travio/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.themeupstudio.com/travio/admin-settings/post-hero-layout.md).

# 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.

{% hint style="warning" %}
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.
{% endhint %}

***

### 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

<div data-with-frame="true"><figure><img src="/files/WRuaJ1j78HAFrpNqTMRl" alt=""><figcaption><p>Select site-wide default post layout</p></figcaption></figure></div>

#### 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

<div data-with-frame="true"><figure><img src="/files/s3EKDHPJgDGT5TMRfXsk" alt=""><figcaption><p>Select post layout for individual posts which overrides the default setting</p></figcaption></figure></div>

***

### 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.

<div data-with-frame="true"><figure><img src="/files/TUZlU1tOOcodGyLHLb9b" alt=""><figcaption><p>Split Layout</p></figcaption></figure></div>

#### 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.

<div data-with-frame="true"><figure><img src="/files/Ob2crMwSiT5oA1DMCSEr" alt=""><figcaption><p>Video Layout</p></figcaption></figure></div>

#### 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.

<div data-with-frame="true"><figure><img src="/files/jlOSMw5G1ymURrc4gM05" alt=""><figcaption><p>Scrolling Masonry Mosaic</p></figcaption></figure></div>

#### 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.

<div data-with-frame="true"><figure><img src="/files/58SpeFKynUFin1F9ITUE" alt=""><figcaption><p>Gallery Layout</p></figcaption></figure></div>

#### 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.

<div data-with-frame="true"><figure><img src="/files/HLAME8gPsiNdPksJBYnc" alt=""><figcaption><p>Slider Layout</p></figcaption></figure></div>

#### 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.

<div data-with-frame="true"><figure><img src="/files/kWT48TvUUOCs40hV1hs3" alt=""><figcaption><p>Wide Image Layout</p></figcaption></figure></div>

#### 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.

<div data-with-frame="true"><figure><img src="/files/bA8qWzOzhVCL6ggpJQMz" alt=""><figcaption><p>Background Image Layout</p></figcaption></figure></div>

#### 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:

<table><thead><tr><th width="226.62158203125">Layout</th><th>What you should add</th></tr></thead><tbody><tr><td>Split Layout</td><td>Featured image</td></tr><tr><td>Video</td><td>Valid video/embed and  <code>#video</code> tag</td></tr><tr><td>Scrolling Mosaic</td><td>Multiple post images</td></tr><tr><td>Gallery</td><td>Featured image + image/gallery cards</td></tr><tr><td>Slider</td><td>Featured image + body images</td></tr><tr><td>Wide Image</td><td>Wide featured image</td></tr><tr><td>Background Image</td><td>High-contrast featured image</td></tr></tbody></table>

***

### 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