page__hero.html

{% if page.header.fixed_image contains "://" %}
  {% capture fixed_img_path %}{{ page.header.fixed_image}}{% endcapture %}
{% else %}
  {% capture fixed_img_path %}{{ page.header.fixed_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.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.type == 'fixed_image' %}
  {% capture img_path %}{{ page.header.fixed_image }}{% endcapture %}
{% elsif page.header.type == 'overlay_image' %}
  {% capture img_path %}{{ page.header.overlay_image }}{% endcapture %}
{% endif %}

{% if page.header.show_text == 'description' %}
  {% capture overlay_text %}{{ page.description }}{% endcapture %}
{% elsif page.header.show_text == 'custom' %}
  {% capture overlay_text %}{{ page.header.custom_text }}{% 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{% unless page.header.header_type == 'image-fixed' %}--overlay{% endunless %}"
  style="{% if page.header.overlay_color %}background-color: {{ page.header.overlay_color | default: 'transparent' }};{% endif %} {% if page.header.type contains 'image' %}background-image: {% if overlay_filter %}linear-gradient({{ overlay_filter }}, {{ overlay_filter }}), {% endif %}url('{{ img_path }}');{% endif %}"
>
  <div class="wrapper">
  {% if page.header.overlay_title %}
    <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>
  {% endif %}
  {% if overlay_text %}
    <p class="page__lead">{{ overlay_text | 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 %}
      {% if action.url contains "://" %}
        {% assign url = action.url %}
      {% else %}
        {% assign url = action.url | relative_url %}
      {% endif %}
      <a href="{{ 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>
  {% if page.header.caption %}
    <span class="page__hero-caption">{{ page.header.caption | markdownify | remove: "<p>" | remove: "</p>" }}</span>
  {% endif %}
</div>