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 mmistakes#1461
kkunapuli · Sep 10, 2018 · dd0865b · dd0865b
1 parent 19fecf4
commit dd0865b
Show file tree

Hide file tree

Showing 11 changed files with 282 additions and 234 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
diff --git a/_includes/page__hero.html b/_includes/page__hero.html
@@ -51,6 +51,12 @@ <h1 id="page-title" class="page__title" itemprop="headline">
       {% if page.header.cta_url %}
         <p><a href="{{ cta_path }}" class="btn btn--light-outline btn--large">{{ page.header.cta_label | default: site.data.ui-text[site.locale].more_label | default: "Learn More" }}</a></p>
       {% endif %}
+      {% if page.header.actions %}
+        <p>
+        {% for action in page.header.actions %}
+          <a href="{{ action.url }}" class="btn btn--light-outline btn--large">{{ action.label | default: site.data.ui-text[site.locale].more_label | default: "Learn More" }}</a>
+        {% endfor %}
+      {% endif %}
     </div>
   {% else %}
     <img src="{{ img_path }}" alt="{{ image_description }}" class="page__hero-image">

diff --git 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

diff --git 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

diff --git 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:

diff --git 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: 

diff --git 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"
 ```
diff --git 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"
 ```
diff --git a/test/_pages/splash-page.md b/test/_pages/splash-page.md
@@ -8,7 +8,9 @@ header:
   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: "Learn More"
+      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: 

diff --git a/test/_posts/2010-08-05-post-header-overlay-image-og-override.md b/test/_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"
 ```
diff --git a/test/_posts/2012-03-15-layout-header-overlay-image.md b/test/_posts/2012-03-15-layout-header-overlay-image.md
@@ -3,7 +3,11 @@ 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: "Call to action 1"
+      url: "https://github.com"
+    - label: "Call to action 2"
+      url: "https://mademistakes.com"
 categories:
   - Layout
   - Uncategorized
@@ -34,8 +38,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:
@@ -48,6 +53,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"
 ```