collection-banner.html

{% if page.layout == "home-infographic" and site.data.theme.featured-image %}
<style>
#home-banner {
    {% if site.data.theme.featured-image contains '/' %}
    background-image: url('{{ site.data.theme.featured-image | relative_url }}');{% endif %}
    background-size: cover;
    background-repeat: no-repeat;
    background-position: {{ site.data.theme.home-banner-image-position | default: 'center' }};
}
#home-title-box {
    padding-top: {{ site.data.theme.home-title-y-padding | default: '5em' }};
    padding-bottom: {{ site.data.theme.home-title-y-padding | default: '5em' }};
}
@media screen and (max-width: 576px) {
    #home-title-box {
        max-height: 500px;
    }
}
</style>
<div id="home-banner" class="container-fluid mb-0 p-0">
    <div id="home-title-box" class="position-relative" >
        <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 }}" target="_blank" rel="noopener">
                <img id="home-banner-logo" src="{{ site.organization-logo-nav | relative_url }}" alt="{{ site.organization-name }} home" >
            </a>{% endif %}
            <h1 class="display-4">{{ site.title }}</h1>
            {% if site.tagline %}<p class="mb-0">{{ site.tagline }}</p>{% endif %}
        </div>
        {% unless site.data.theme.featured-image contains '/' %}
        <div id="featured-image-link" class="position-absolute bottom-0 end-0 px-2 bg-dark bg-opacity-75">
        </div>{% endunless %}
    </div>
</div>
{% unless site.data.theme.featured-image contains '/' %}
<script> 
// set up featured image
var featuredImageInt = function (cb_items) {
    // find item by objectid 
    var featuredItem = cb_items.find(item => item.objectid == "{{ site.data.theme.featured-image }}");
    if (featuredItem) {
        if (featuredItem.youtubeid) {
            var bgUrl = "url('https://img.youtube.com/vi/" + featuredItem.youtubeid + "/maxresdefault.jpg')";
        } else if (featuredItem.filename.includes("/")) {
            var bgUrl = "url('" + featuredItem.filename + "')";
        } else {
            var bgUrl = "url('{{ '/objects/' | relative_url }}" + featuredItem.filename + "')";
        }
        var featuredUrl = featuredItem.parentid ?  "{{ '/item.html' | relative_url | append: '?id=' }}" + featuredItem.parentid + "#" + featuredItem.objectid : "{{ '/item.html' | relative_url | append: '?id=' }}" + featuredItem.objectid;
        document.getElementById("home-banner").style.backgroundImage = bgUrl;
        document.getElementById("featured-image-link").innerHTML = `<a class="text-white fs-6" href="${featuredUrl}">Featured Image</a>`;
    }
}
// add feature function to includeFunctions array
includeFunctions.push(featuredImageInt);
</script>
{% endunless %}
{%- 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><a class="text-dark font-weight-normal" href="{{ site.baseurl }}/" >{{ 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 }}" target="_blank" rel="noopener">
                <img class="img-fluid" src="{{ site.organization-logo-banner | relative_url }}" title="{{ site.organization-name }}" alt="{{ site.organization-name }} home" >
            </a>
        </div>
        {% endif %}
    </div>
</div>
{%- endif -%}