64 lines
2.9 KiB
HTML
64 lines
2.9 KiB
HTML
{% comment %}
|
|
|
|
Bootstrap Jumbotron, https://getbootstrap.com/docs/5.1/examples/jumbotron/
|
|
This include adds a Jumbotron feature from an objectid.
|
|
|
|
E.G. --> {% include feature/jumbotron.html objectid="demo_001" %}
|
|
|
|
Options:
|
|
- "objectid" = one objectid for a photo object in this collection, a relative path to an image in this project, or a full url to any image. If left blank, by default this the image will be the featured-image set in theme.yml.
|
|
- "position" = set background-position, "center", "top", "bottom"
|
|
- "heading" = major heading to display. By default this will be the site title. Give the value false for no heading.
|
|
- "text" = paragraph text below heading. By default this will be the site tagline. Give the value false for no text.
|
|
- "padding" = additional padding added to the feature to increase size. Give value in em or px, e.g. "5em".
|
|
- "heading_level" = customize the level of the heading if necessary for accessibility, choose "h1", "h2", "h3", etc (optional, default "h2")
|
|
|
|
Note: if using a YouTube item and an error image appears, the video may not have a "maxresdefault" image available. Replace "maxresdefault.jpg" in the code below with "hqdefault.jpg"
|
|
|
|
{%- endcomment -%}
|
|
{% assign jumbo_div_id = "j-" | append: include.objectid | slugify | truncate: 12, "" %}
|
|
{% assign jumboId = include.objectid | default: site.data.featured_item.src %}
|
|
{% if jumboId contains '/' %}
|
|
{% assign jumboSrc = jumboId | relative_url %}
|
|
{% else %}
|
|
{% assign jumboItem = site.data[site.metadata] | where: "objectid", jumboId | first %}
|
|
{% capture jumboSrc %}{{ jumboItem.object_location | default: jumboItem.image_small | relative_url }}{% endcapture %}
|
|
{%- endif -%}
|
|
|
|
<style>
|
|
.jumbotron {
|
|
padding: 4rem 2rem;
|
|
margin-bottom: 2rem;
|
|
background-color: #e9ecef;
|
|
border-radius: 0.3rem;
|
|
}
|
|
#{{ jumbo_div_id }} {
|
|
background-image: url({{ jumboSrc }});
|
|
background-size: cover;
|
|
background-repeat: no-repeat;
|
|
background-position: {{ include.position | default: 'center' }};
|
|
}
|
|
{% if include.padding %}
|
|
.jumbo-title-box {
|
|
padding-top: {{ include.padding }};
|
|
padding-bottom: {{ include.padding }};
|
|
}
|
|
{%- endif -%}
|
|
@media screen and (max-width: 576px) {
|
|
.jumbo-title-box {
|
|
max-height: 500px;
|
|
}
|
|
.jumbo-tagline { font-size:.85em; }
|
|
}
|
|
</style>
|
|
<div class="jumbotron feature px-0 border" id="{{ jumbo_div_id }}">
|
|
<div class="jumbo-title-box">
|
|
{% unless include.heading == false and include.text == false %}
|
|
<div class="p-2 text-center text-white bg-dark bg-opacity-75">
|
|
{% unless include.heading == false %}<{{ include.heading_level | default: 'h2' | strip }} class="display-4">{{ include.heading | default: site.title }}</{{ include.heading_level | default: 'h2' | strip }}>{% endunless %}
|
|
{% unless include.text == false %}<p class="jumbo-tagline">{{ include.text | default: site.tagline }}</p>{% endunless %}
|
|
</div>
|
|
{% endunless %}
|
|
</div>
|
|
</div>
|