collection-banner.html

{% comment %}

    Default Collection Banner include. 
    This feature adds a traditional collection banner to the top of the page (generally above a navbar). There is two built in banner types:

    Title + Tagline:
    The default banner features the title and tagline set in "_config.yml". If an organization is configured (name, link, logo), it will appear on the right side of the banner.

    Featured Image Banner: 
    A decorative banner featuring a large background image stretched across the full screen with the title + tagline overlaid on top. This feature can be used on any page by adding "banner-featured-image" to the page front matter. 
    By default, this feature is added to the "home-infographic" layout automatically, with the default options configured in "theme.yml" Home Page section. It can be turned off on "home-infographic" by adding "banner-featured-image: false" to the page stub front matter.
    Adding "banner-featured-image: true" to any page front matter will add the same default feature as configured in "theme.yml". 
    However, the feature can be fully customized on any page by using the front matter options: 
        - banner-featured-image: an objectid, relative path to image in this project, or full url to any image.
        - banner-image-position: set background-position for featured image, "center", "top", "bottom"
        - banner-padding: additional padding added to the feature to increase size. Give value in em or px, e.g. "5em"
        - banner-heading: major heading/title to display over the featured image, by default this is the site title.
        - banner-sub-heading: smaller text below the heading, by default this is the site tagline.

{%- endcomment -%}
{% if page.banner-featured-image != false and page.banner-featured-image or page.layout == "home-infographic" %}
    {% if page.banner-featured-image contains '/' %}
        {% assign jumboSrc = page.banner-featured-image | relative_url %}
        {% capture jumboLink %}{% endcapture %}
    {% elsif page.banner-featured-image and page.banner-featured-image != true %}
        {% assign jumboItem = site.data[site.metadata] | where: "objectid", page.banner-featured-image | first %}
        {% capture jumboSrc %}{% if jumboItem.display_template == 'image' %}{{ jumboItem.object_location | default: jumboItem.image_small | relative_url }}{% else %}{{ jumboItem.image_small | relative_url }}{% endif %}{% endcapture %}
        {% capture jumboLink %}{{ '/items/' | relative_url }}{% if jumboItem.parentid %}{{ jumboItem.parentid }}.html#{{ jumboItem.objectid }}{% else %}{{ jumboItem.objectid }}.html{% endif %}{% endcapture %}
    {% else %}
        {% capture jumboSrc %}{{ site.data.featured_item.src | relative_url }}{% endcapture %}
        {% capture jumboLink %}{{ site.data.featured_item.link | relative_url }}{% endcapture %}
    {%- endif -%}

<style>
#home-banner {
    padding: 4rem 0;
    background-image: url({{ jumboSrc }});
    background-size: cover;
    background-repeat: no-repeat;
    background-position: {{ page.banner-image-position | default: site.data.theme.home-banner-image-position | default: 'center' }};
}
{% if page.banner-padding or site.data.theme.home-title-y-padding %}
#home-title-box {
    padding-top: {{ page.banner-padding | default: site.data.theme.home-title-y-padding | default: '8em' }};
    padding-bottom: 1em;
}
{%- endif -%}
@media screen and (max-width: 576px) {
    #home-title-box {
        padding-top: min({{ page.banner-padding | default: site.data.theme.home-title-y-padding | default: '8em' }}, 45vh);
    }
}
</style>
<div id="home-banner" class="mb-0 position-relative">
    <div id="home-title-box">
        <div class="p-2 text-center text-white bg-dark bg-opacity-75">
            {% if site.organization-logo-nav %}
            <a class="d-none d-md-block" href="{{ site.organization-link }}">
                <img id="home-banner-logo" src="{{ site.organization-logo-nav | relative_url }}" alt="{{ site.organization-name | escape }} home" >
            </a>{% endif %}
            <h1 class="display-2">{{ page.banner-heading | default: site.title }}</h1>
            {% if page.banner-sub-heading != false and page.banner-sub-heading or site.tagline %}<p class="mb-0">{{ page.banner-sub-heading | default: site.tagline }}</p>{% endif %}
        </div>
    </div>
    {% if jumboLink != '' %}
    <a class="text-white fs-6 position-absolute bottom-0 end-0 px-2 bg-dark bg-opacity-75" href="{{ jumboLink }}" title="Visit background image record">Featured Image</a>{% endif %}
</div>
{%- else -%}
<div class="container">
    <div class="row align-items-center">
        <div id="title" class="{% if site.organization-logo-banner %}col-md-9{% else %}col-12{% endif %}">
            <h1 class="mt-2"><a class="text-dark" href="{{ '/' | relative_url }}" >{{ site.title }}</a></h1>	 
            {% if site.tagline %}<p>{{ site.tagline }}</p>{% endif %}
        </div>
        {% if site.organization-logo-banner %}
        <div class="col-md-3 d-none d-lg-block text-end">
            <a class="btn btn-outline-light" href="{{ site.organization-link }}">
                <img class="img-fluid" src="{{ site.organization-logo-banner | relative_url }}" title="{{ site.organization-name }}" alt="{{ site.organization-name | escape }} home" >
            </a>
        </div>
        {% endif %}
    </div>
</div>
{%- endif -%}