page__hero.html

{% 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.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.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.type == 'overlay' %}
  {% capture img_path %}{{ overlay_img_path }}{% endcapture %}
{% elsif page.header.type == 'image' %}
  {% capture img_path %}{{ fixed_img_path }}{% 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{% if page.header.type == 'overlay' %}--overlay{% endif %}"
  style="{% if page.header.type == 'overlay' %}
          {% if page.header.color %}
            background-color: {{ page.header.color | default: 'transparent' }};
          {% endif %}
          {% if page.header.overlay_image %}
            background-image:
            {% if overlay_filter %}
              linear-gradient({{ overlay_filter }},
            {{ overlay_filter }}),{% endif %}
          {% endif %}url('{{ img_path }}');
        {% endif %}"
>
    {% if page.header.type == "overlay" %}
    <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 %}
  {% elsif page.header.type == 'image' %}
    <img src="{{ img_path }}" alt="{{ img_path }}" class="page__hero-image">
  {% endif %}
</div>