steffen/website
1
0
Fork 0
Code Actions Packages Releases Activity

Add header actions array support for multiple call to action links

Browse Source 
```
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
This commit is contained in:
Michael Rose
2018-09-10 11:04:06 -04:00
parent 833ab3933d
commit 68df0b6b63
11 changed files with 282 additions and 234 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
docs/_docs/10-layouts.md
View File

@@ -411,8 +411,9 @@ To overlay text on top of a header image you have a few more options:
| **overlay_filter** | Color/opacity to overlay on top of the header image eg: `0.5` or `rgba(255, 0, 0, 0.5)`. |
| **show_overlay_excerpt** | Display excerpt in the overlay text | true |
| **excerpt** | Auto-generated page excerpt is added to the overlay text or can be overridden. | |
| **cta_label** | Call to action button text label. | `more_label` in UI Text data file |
| **cta_url** | Call to action button URL. | |
| **actions** | Call to action button links (`actions` array: `label` and `url`). More than one button link can be assigned. | |
| **cta_label** | Deprecated, use `actions` instead. Call to action button text label. | `more_label` in UI Text data file |
| **cta_url** | Deprecated, use `actions` instead. Call to action button URL. | |
With this YAML Front Matter:
@@ -421,8 +422,9 @@ excerpt: "This post should display a **header with an overlay image**, if the th
header:
overlay_image: /assets/images/unsplash-image-1.jpg
caption: "Photo credit: [**Unsplash**](https://unsplash.com)"
cta_label: "More Info"
cta_url: "https://unsplash.com"
actions:
- label: "More Info"
url: "https://unsplash.com"
```
You'd get a header image overlaid with text and a call to action button like this:
@@ -449,8 +451,9 @@ 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)"
cta_label: "More Info"
cta_url: "https://unsplash.com"
actions:
- label: "Download"
url: "https://github.com"
```
Or if you want to do more fancy things, go full rgba:
@@ -463,8 +466,23 @@ header:
overlay_image: /assets/images/unsplash-image-1.jpg
overlay_filter: rgba(255, 0, 0, 0.5)
caption: "Photo credit: [**Unsplash**](https://unsplash.com)"
cta_label: "More Info"
cta_url: "https://unsplash.com"
actions:
- label: "Download"
url: "https://github.com"
```
Multiple call to action button links can be assigned like this:
```yaml
excerpt: "This post should display a **header with an overlay image**, if the theme supports it."
header:
overlay_image: /assets/images/unsplash-image-1.jpg
caption: "Photo credit: [**Unsplash**](https://unsplash.com)"
actions:
- label: "Foo Button"
url: "#foo"
- label: "Bar Button"
url: "#bar"
```
### OpenGraph & Twitter Card Images

1
docs/_docs/18-history.md
View File

@@ -12,6 +12,7 @@ toc: true
### Enhancements
- Deprecate `cta_label` and `cta_url` in header overlay in favor of new `actions` array that allows for multiple "call to action" button links. [#1461](https://github.com/mmistakes/minimal-mistakes/issues/1461)
- Add support to [gallery helper](https://mmistakes.github.io/minimal-mistakes/docs/helpers/#gallery) for defining column layout (`half`, `third`, or single `''`). [#1821](https://github.com/mmistakes/minimal-mistakes/issues/1821)
### Bug Fixes