Basics
You can set the banner per page or site-wide. This page has a custom banner (see, it’s upside-down).
First it checks a pages yaml frontmatter for the header image, if none is found then it checks for a site-wide default in your config.yml, if none is found then no banner image is displayed.
srcset
The banner uses the srcset tag to set different sized images for different screens, so we’ll need 4 sizes of our banner image:
- small
- medium
- large
- extra-large
Sizes
Since we’re using Zurb’s grid, we’re going to use their breakpoints to determine sizes. The demo site is using the following widths:
- small: 640px
- medium: 1024px
- large: 1440px
- extra-large: 1920px
Fallback
We also use img src with the extra-large sized image for browsers that don’t support srcset.
Site-Wide Banner
You can set a site-wide default banner image by adding the following to your _config.yml:
header: yes
header_sm: path/to/banner-sm.jpg
header_med: path/to/banner-med.jpg
header_large: path/to/banner-large.jpg
header_xl: path/to/banner-xl.jpg
Per Page Banner
You can also override it per page by adding the same code to the yaml front matter of any page.