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
parent 833ab3933d
commit 68df0b6b63
11 changed files with 282 additions and 234 deletions
--- a/docs/_docs/10-layouts.md
+++ b/docs/_docs/10-layouts.md
@@ -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
--- a/docs/_docs/18-history.md
+++ b/docs/_docs/18-history.md
@@ -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
--- a/docs/_pages/home.md
+++ b/docs/_pages/home.md
@@ -4,8 +4,9 @@ permalink: /
 header:
  overlay_color: "#5e616c"
  overlay_image: /assets/images/mm-home-page-feature.jpg
-  cta_label: "<i class='fas fa-download'></i> Install Now"
-  cta_url: "/docs/quick-start-guide/"
+  actions:
+    - label: "<i class='fas fa-download'></i> Install Now"
+      url: "/docs/quick-start-guide/"
  caption:
 excerpt: 'A flexible two-column Jekyll theme. Perfect for personal sites, blogs, and portfolios hosted on GitHub or your own server.<br /> <small><a href="https://github.com/mmistakes/minimal-mistakes/releases/tag/4.12.2">Latest release v4.12.2</a></small><br /><br /> {::nomarkdown}<iframe style="display: inline-block;" src="https://ghbtns.com/github-btn.html?user=mmistakes&repo=minimal-mistakes&type=star&count=true&size=large" frameborder="0" scrolling="0" width="160px" height="30px"></iframe> <iframe style="display: inline-block;" src="https://ghbtns.com/github-btn.html?user=mmistakes&repo=minimal-mistakes&type=fork&count=true&size=large" frameborder="0" scrolling="0" width="158px" height="30px"></iframe>{:/nomarkdown}'
 feature_row:
--- a/docs/_pages/splash-page.md
+++ b/docs/_pages/splash-page.md
@@ -7,8 +7,9 @@ header:
  overlay_color: "#000"
  overlay_filter: "0.5"
  overlay_image: /assets/images/unsplash-image-1.jpg
-  cta_label: "Download"
-  cta_url: "https://github.com/mmistakes/minimal-mistakes/"
+  actions:
+    - label: "Download"
+      url: "https://github.com/mmistakes/minimal-mistakes/"
  caption: "Photo credit: [**Unsplash**](https://unsplash.com)"
 excerpt: "Bacon ipsum dolor sit amet salami ham hock ham, hamburger corned beef short ribs kielbasa biltong t-bone drumstick tri-tip tail sirloin pork chop."
 intro: 
--- a/docs/_posts/2010-08-05-post-header-overlay-image-og-override.md
+++ b/docs/_posts/2010-08-05-post-header-overlay-image-og-override.md
@@ -4,7 +4,9 @@ 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)"
-  cta_url: "https://unsplash.com"
+  actions:
+    - label: "Learn more"
+      url: "https://unsplash.com"
 categories:
  - Layout
  - Uncategorized
@@ -22,5 +24,7 @@ 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)"
-  cta_url: "https://unsplash.com"
+  actions:
+    - label: "Learn more"
+      url: "https://unsplash.com"
 ```
--- a/docs/_posts/2012-03-15-layout-header-overlay-image.md
+++ b/docs/_posts/2012-03-15-layout-header-overlay-image.md
@@ -3,7 +3,9 @@ title: "Layout: Header Image Overlay"
 header:
  overlay_image: /assets/images/unsplash-image-1.jpg
  caption: "Photo credit: [**Unsplash**](https://unsplash.com)"
-  cta_url: "https://unsplash.com"
+  actions:
+    - label: "Learn more"
+      url: "https://unsplash.com"
 categories:
  - Layout
  - Uncategorized
@@ -32,8 +34,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: "More Info"
+      url: "https://unsplash.com"
 ```

 Or if you want to do more fancy things, go full rgba:
@@ -46,6 +49,7 @@ 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: "More Info"
+      url: "https://unsplash.com"
 ```