Header Banner
Show a image or a video on the header.
Show a image or a video on the header.
Become a backer or sponsor to support our work.
| Module | github.com/hbstack/header/modules/banner |
|---|---|
| Repository | ⭐ Please consider giving a star if your like it. |
| Stars |  |
| Version |  |
| Used by |  |
| Requirements |  |
| License |  |
| Usage | See how to use modules. |
| Name | Type | Required | Default | Description |
|---|---|---|---|---|
img | string | Y | - | The image URL, you should at least specify the img or video. |
video | object | Y | - | The video. |
video.src | string | Y | - | The video URL. |
video.poster | string | Y | - | The video poster. |
video.type | string | Y | - | The video media type, i.e. application/x-mpegURL (HLS), application/dash+xml (MPEG DASH). |
alignment | string | - | start | The alignment of content, start, center or end. |
color | string | - | #fff | The content color. |
cols | string | - | 12 lg:8 | How many columns does content take, col-12 col-lg-8 by default. |
title | boolean/string | - | Page title | The banner title, Markdown is supported, hidden when false. |
description | boolean/string | - | Page description | The banner description, supports Markdown syntax, hidden when false. |
Tweak the hb.header.banner site parameters to enable the banner all of the pages.
hugo.toml
1[params]
2 [params.hb]
3 [params.hb.header]
4 [params.hb.header.banner]
5 img = '/images/banner.png'
6 transparentize_navbar_bg = true
hugo.yaml
1params:
2 hb:
3 header:
4 banner:
5 img: /images/banner.png
6 transparentize_navbar_bg: true
hugo.json
1{
2 "params": {
3 "hb": {
4 "header": {
5 "banner": {
6 "img": "/images/banner.png",
7 "transparentize_navbar_bg": true
8 }
9 }
10 }
11 }
12}
Set up the banner for a specified page via setting the header.banner parameters on front matter, it will override the site parameters.
1[header]
2 [header.banner]
3 img = '/images/banner.png'
1header:
2 banner:
3 img: /images/banner.png
1{
2 "header": {
3 "banner": {
4 "img": "/images/banner.png"
5 }
6 }
7}
To disable the global banner via setting the header.banner as false.
1[header]
2 banner = false
1header:
2 banner: false
1{
2 "header": {
3 "banner": false
4 }
5}
To get supported by Video.js, you should specify the video_js parameter, which can be used to play the videos not supported by browser natively, such as the HLS and MPEG-DASH.
1video_js = true
2[header]
3 [header.banner]
4 [header.banner.video]
5 poster = 'https://example.org/video.webp'
6 src = 'https://example.org/video.m3u8'
7 type = 'application/x-mpegURL'
1header:
2 banner:
3 video:
4 poster: https://example.org/video.webp
5 src: https://example.org/video.m3u8
6 type: application/x-mpegURL
7video_js: true
1{
2 "header": {
3 "banner": {
4 "video": {
5 "poster": "https://example.org/video.webp",
6 "src": "https://example.org/video.m3u8",
7 "type": "application/x-mpegURL"
8 }
9 }
10 },
11 "video_js": true
12}
