Header Banner

Header Banner

Show a image or a video on the header.

Header Banner

Show a image or a video on the header.

Donate

Become a backer or sponsor to support our work.

Sponsors
Modulegithub.com/hbstack/header/modules/banner
Repository⭐ Please consider giving a star if your like it.
Stars
Version
Used by
Requirements
License
UsageSee how to use modules.

Properties

NameTypeRequiredDefaultDescription
imgstringY-The image URL, you should at least specify the img or video.
videoobjectY-The video.
video.srcstringY-The video URL.
video.posterstringY-The video poster.
video.typestringY-The video media type, i.e. application/x-mpegURL (HLS), application/dash+xml (MPEG DASH).
alignmentstring-startThe alignment of content, start, center or end.
colorstring-#fffThe content color.
colsstring-12 lg:8How many columns does content take, col-12 col-lg-8 by default.
titleboolean/string-Page titleThe banner title, Markdown is supported, hidden when false.
descriptionboolean/string-Page descriptionThe banner description, supports Markdown syntax, hidden when false.

Site Parameters

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}

Page Parameters

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}

Examples

razonyang
Sunday, December 1, 2024 Saturday, August 26, 2023