N-archive/hacks-guide-minimal-mistakes-theme
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity
hacks-guide-minimal-mistake.../docs/_posts/2012-03-15-layout-header-overlay-image.md
Michael Rose 68df0b6b63 Add header actions array support for multiple call to action links 
```
header:
  overlay_image: /assets/images/unsplash-image-1.jpg
  og_image: /assets/images/page-header-og-image.png
  caption: "Photo credit: [**Unsplash**](https://unsplash.com)"
  actions:
    - label: "Learn More"
      url: "https://unsplash.com"
```

Fixes #1461
2018-09-10 11:04:06 -04:00

1.5 KiB
Raw Blame History

title header categories tags last_modified_at
Layout: Header Image Overlay
overlay_image caption actions
/assets/images/unsplash-image-1.jpg Photo credit: [**Unsplash**](https://unsplash.com)
label url
Learn more https://unsplash.com
Layout
Uncategorized
edge case
image
layout
2018-03-20T16:00:52-04:00

This post should display a header with an overlay image, if the theme supports it.

Non-square images can provide some unique styling issues.

This post tests overlay header images.

Overlay filter

You can use it by specifying the opacity (between 0 and 1) of a black overlay like so:

![transparent black overlay]({{ "/assets/images/mm-header-overlay-black-filter.jpg" | relative_url }})

excerpt: "This post should [...]"
header:
  overlay_image: /assets/images/unsplash-image-1.jpg
  overlay_filter: 0.5 # same as adding an opacity of 0.5 to a black background
  caption: "Photo credit: [**Unsplash**](https://unsplash.com)"
  actions:
    - label: "More Info"
      url: "https://unsplash.com"

Or if you want to do more fancy things, go full rgba:

![transparent red overlay]({{ "/assets/images/mm-header-overlay-red-filter.jpg" | relative_url }})

excerpt: "This post should [...]"
header:
  overlay_image: /assets/images/unsplash-image-1.jpg
  overlay_filter: rgba(255, 0, 0, 0.5)
  caption: "Photo credit: [**Unsplash**](https://unsplash.com)"
  actions:
    - label: "More Info"
      url: "https://unsplash.com"