hacks-guide-minimal-mistake.../_includes/page__hero.html
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

67 lines
3.3 KiB
HTML

{% if page.header.image contains "://" %}
{% capture img_path %}{{ page.header.image }}{% endcapture %}
{% else %}
{% capture img_path %}{{ page.header.image | relative_url }}{% endcapture %}
{% endif %}
{% if page.header.cta_url contains "://" %}
{% capture cta_path %}{{ page.header.cta_url }}{% endcapture %}
{% else %}
{% capture cta_path %}{{ page.header.cta_url | relative_url }}{% endcapture %}
{% endif %}
{% if page.header.overlay_image contains "://" %}
{% capture overlay_img_path %}{{ page.header.overlay_image }}{% endcapture %}
{% elsif page.header.overlay_image %}
{% capture overlay_img_path %}{{ page.header.overlay_image | relative_url }}{% endcapture %}
{% endif %}
{% if page.header.overlay_filter contains "rgba" %}
{% capture overlay_filter %}{{ page.header.overlay_filter }}{% endcapture %}
{% elsif page.header.overlay_filter %}
{% capture overlay_filter %}rgba(0, 0, 0, {{ page.header.overlay_filter }}){% endcapture %}
{% endif %}
{% if page.header.image_description %}
{% assign image_description = page.header.image_description %}
{% else %}
{% assign image_description = page.title %}
{% endif %}
{% assign image_description = image_description | markdownify | strip_html | strip_newlines | escape_once %}
<div class="page__hero{% if page.header.overlay_color or page.header.overlay_image %}--overlay{% endif %}"
style="{% if page.header.overlay_color %}background-color: {{ page.header.overlay_color | default: 'transparent' }};{% endif %} {% if overlay_img_path %}background-image: {% if overlay_filter %}linear-gradient({{ overlay_filter }}, {{ overlay_filter }}), {% endif %}url('{{ overlay_img_path }}');{% endif %}"
>
{% if page.header.overlay_color or page.header.overlay_image %}
<div class="wrapper">
<h1 id="page-title" class="page__title" itemprop="headline">
{% if paginator and site.paginate_show_page_num %}
{{ site.title }}{% unless paginator.page == 1 %} {{ site.data.ui-text[site.locale].page | default: "Page" }} {{ paginator.page }}{% endunless %}
{% else %}
{{ page.title | default: site.title | markdownify | remove: "<p>" | remove: "</p>" }}
{% endif %}
</h1>
{% if page.header.show_overlay_excerpt != false and page.excerpt %}
<p class="page__lead">{{ page.excerpt | markdownify | remove: "<p>" | remove: "</p>" }}</p>
{% endif %}
{% if page.read_time %}
<p class="page__meta"><i class="far fa-clock" aria-hidden="true"></i> {% include read-time.html %}</p>
{% endif %}
{% 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">
{% endif %}
{% if page.header.caption %}
<span class="page__hero-caption">{{ page.header.caption | markdownify | remove: "<p>" | remove: "</p>" }}</span>
{% endif %}
</div>