367 lines
9.4 KiB
HTML
367 lines
9.4 KiB
HTML
{% if page.layout == "home-infographic" %}
|
|
|
|
{%- comment -%}
|
|
Carousel Banner: rotates through random collection items
|
|
{%- endcomment -%}
|
|
|
|
{%- assign carousel_items = "" | split: "" -%}
|
|
|
|
{%- comment -%} Get specific items in order {%- endcomment -%}
|
|
{%- assign wanted_ids = "starlacoll033,garycoll009,garycoll005,starlacoll019,starlacoll008,tishacoll028" | split: "," -%}
|
|
|
|
{%- for wanted_id in wanted_ids -%}
|
|
{%- for item in site.data[site.metadata] -%}
|
|
{%- if item.objectid == wanted_id -%}
|
|
{%- assign carousel_items = carousel_items | push: item -%}
|
|
{%- break -%}
|
|
{%- endif -%}
|
|
{%- endfor -%}
|
|
{%- endfor -%}
|
|
|
|
<style>
|
|
#home-banner-carousel {
|
|
position: relative;
|
|
min-height: 380px;
|
|
max-height: 580px;
|
|
background-color: #000;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.carousel-slide {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
opacity: 0;
|
|
transition: opacity 800ms ease-in-out;
|
|
background-size: cover;
|
|
background-position: center;
|
|
background-repeat: no-repeat;
|
|
}
|
|
|
|
.carousel-slide.active {
|
|
opacity: 1;
|
|
z-index: 1;
|
|
}
|
|
|
|
#home-title-box {
|
|
position: relative;
|
|
z-index: 2;
|
|
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 {
|
|
padding-top: min({{ site.data.theme.home-title-y-padding | default: '5em' }}, 32vh);
|
|
padding-bottom: min({{ site.data.theme.home-title-y-padding | default: '5em' }}, 32vh);
|
|
}
|
|
}
|
|
|
|
.carousel-controls {
|
|
position: absolute;
|
|
top: 1rem;
|
|
left: 1.25rem;
|
|
z-index: 10;
|
|
display: flex;
|
|
gap: 0.5rem;
|
|
align-items: center;
|
|
}
|
|
|
|
.carousel-btn {
|
|
background: rgba(0, 0, 0, 0.45);
|
|
border: 1px solid rgba(255, 255, 255, 0.35);
|
|
color: rgba(255, 255, 255, 0.85);
|
|
width: 32px;
|
|
height: 32px;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
transition: all 200ms ease;
|
|
font-size: 0.7rem;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.carousel-btn:hover {
|
|
color: #ffffff;
|
|
border-color: rgba(255, 255, 255, 0.75);
|
|
}
|
|
|
|
.carousel-btn svg {
|
|
width: 14px;
|
|
height: 14px;
|
|
}
|
|
|
|
.carousel-dots {
|
|
display: flex;
|
|
gap: 0.35rem;
|
|
padding: 0.35rem 0.6rem;
|
|
background: rgba(0, 0, 0, 0.45);
|
|
border: 1px solid rgba(255, 255, 255, 0.35);
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.carousel-dot {
|
|
width: 6px;
|
|
height: 6px;
|
|
border-radius: 50%;
|
|
background: rgba(255, 255, 255, 0.4);
|
|
cursor: pointer;
|
|
transition: all 200ms ease;
|
|
}
|
|
|
|
.carousel-dot:hover {
|
|
background: rgba(255, 255, 255, 0.65);
|
|
}
|
|
|
|
.carousel-dot.active {
|
|
background: #ffffff;
|
|
width: 18px;
|
|
border-radius: 3px;
|
|
}
|
|
|
|
@media (max-width: 575px) {
|
|
.carousel-controls {
|
|
top: 0.75rem;
|
|
left: 0.75rem;
|
|
gap: 0.4rem;
|
|
}
|
|
|
|
.carousel-btn {
|
|
width: 28px;
|
|
height: 28px;
|
|
}
|
|
|
|
.carousel-btn svg {
|
|
width: 12px;
|
|
height: 12px;
|
|
}
|
|
|
|
.carousel-dots {
|
|
padding: 0.3rem 0.5rem;
|
|
}
|
|
}
|
|
|
|
.featured-image-label {
|
|
position: absolute;
|
|
bottom: 1rem;
|
|
right: 1.25rem;
|
|
z-index: 10;
|
|
padding: 0.35rem 0.6rem;
|
|
background: rgba(0, 0, 0, 0.45);
|
|
border: 1px solid rgba(255, 255, 255, 0.35);
|
|
border-radius: 4px;
|
|
transition: all 200ms ease;
|
|
}
|
|
|
|
.featured-image-label:hover {
|
|
border-color: rgba(255, 255, 255, 0.75);
|
|
}
|
|
|
|
.featured-image-label a {
|
|
font-size: 0.7rem;
|
|
letter-spacing: 0.14em;
|
|
text-transform: uppercase;
|
|
font-weight: 600;
|
|
color: rgba(255, 255, 255, 0.85) !important;
|
|
text-decoration: none;
|
|
display: block;
|
|
}
|
|
|
|
.featured-image-label:hover a {
|
|
color: #ffffff !important;
|
|
}
|
|
|
|
@media (max-width: 575px) {
|
|
.featured-image-label {
|
|
bottom: 0.75rem;
|
|
right: 0.75rem;
|
|
padding: 0.3rem 0.5rem;
|
|
}
|
|
|
|
.featured-image-label a {
|
|
font-size: 0.65rem;
|
|
}
|
|
}
|
|
</style>
|
|
|
|
<div id="home-banner-carousel" class="container-fluid mb-0 p-0">
|
|
<a class="portfolio-site-link"
|
|
href="https://1800nasi.net/category/bqkc/"
|
|
title="Main domain to view exhibitions, programs and media features of {B/qKC}">
|
|
VIEW THE ARCHIVE IN PRACTICE →
|
|
</a>
|
|
|
|
{%- comment -%} Carousel slides {%- endcomment -%}
|
|
{%- for item in carousel_items -%}
|
|
<div class="carousel-slide{% if forloop.first %} active{% endif %}"
|
|
data-slide="{{ forloop.index0 }}"
|
|
style="background-image: url('{{ item.object_location | relative_url }}');">
|
|
</div>
|
|
{%- endfor -%}
|
|
|
|
<div id="home-title-box" class="position-relative">
|
|
<div class="p-2 text-white bg-dark bg-opacity-75 d-inline-block">
|
|
{% 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-4 m-0">{{ site.title }}</h1>
|
|
{% if site.tagline %}<p class="mb-0">{{ site.tagline }}</p>{% endif %}
|
|
</div>
|
|
</div>
|
|
|
|
{%- comment -%} Carousel controls {%- endcomment -%}
|
|
<div class="carousel-controls">
|
|
<button class="carousel-btn" id="carousel-prev" aria-label="Previous slide">
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
|
|
</svg>
|
|
</button>
|
|
|
|
<div class="carousel-dots">
|
|
{%- for item in carousel_items -%}
|
|
<div class="carousel-dot{% if forloop.first %} active{% endif %}" data-slide="{{ forloop.index0 }}"></div>
|
|
{%- endfor -%}
|
|
</div>
|
|
|
|
<button class="carousel-btn" id="carousel-next" aria-label="Next slide">
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
|
|
{%- comment -%} Featured image label (for current slide) {%- endcomment -%}
|
|
<div class="featured-image-label">
|
|
<a href="#" id="carousel-item-link" title="">Featured Image</a>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
(function() {
|
|
const slides = document.querySelectorAll('.carousel-slide');
|
|
const dots = document.querySelectorAll('.carousel-dot');
|
|
const prevBtn = document.getElementById('carousel-prev');
|
|
const nextBtn = document.getElementById('carousel-next');
|
|
const itemLink = document.getElementById('carousel-item-link');
|
|
|
|
let currentSlide = 0;
|
|
let autoplayInterval;
|
|
|
|
let itemData = [
|
|
{%- for item in carousel_items -%}
|
|
{
|
|
objectid: "{{ item.objectid }}",
|
|
title: "{{ item.title | escape }}",
|
|
image: "{{ item.object_location | relative_url }}"
|
|
}{% unless forloop.last %},{% endunless %}
|
|
{%- endfor -%}
|
|
];
|
|
|
|
// Shuffle function
|
|
function shuffle(array) {
|
|
for (let i = array.length - 1; i > 0; i--) {
|
|
const j = Math.floor(Math.random() * (i + 1));
|
|
[array[i], array[j]] = [array[j], array[i]];
|
|
}
|
|
return array;
|
|
}
|
|
|
|
// Shuffle the data on load
|
|
itemData = shuffle(itemData);
|
|
|
|
// Apply shuffled images to slides
|
|
slides.forEach((slide, index) => {
|
|
if (itemData[index]) {
|
|
slide.style.backgroundImage = `url('${itemData[index].image}')`;
|
|
}
|
|
});
|
|
|
|
function showSlide(index) {
|
|
slides.forEach(s => s.classList.remove('active'));
|
|
dots.forEach(d => d.classList.remove('active'));
|
|
|
|
currentSlide = (index + slides.length) % slides.length;
|
|
|
|
slides[currentSlide].classList.add('active');
|
|
dots[currentSlide].classList.add('active');
|
|
|
|
// Update featured image link
|
|
const baseUrl = '{{ "/" | relative_url }}';
|
|
itemLink.href = baseUrl + 'items/' + itemData[currentSlide].objectid + '.html';
|
|
itemLink.title = itemData[currentSlide].title;
|
|
}
|
|
|
|
function nextSlide() {
|
|
showSlide(currentSlide + 1);
|
|
}
|
|
|
|
function prevSlide() {
|
|
showSlide(currentSlide - 1);
|
|
}
|
|
|
|
function startAutoplay() {
|
|
autoplayInterval = setInterval(nextSlide, 5000); // 5 seconds
|
|
}
|
|
|
|
function stopAutoplay() {
|
|
clearInterval(autoplayInterval);
|
|
}
|
|
|
|
// Event listeners
|
|
prevBtn.addEventListener('click', () => {
|
|
stopAutoplay();
|
|
prevSlide();
|
|
startAutoplay();
|
|
});
|
|
|
|
nextBtn.addEventListener('click', () => {
|
|
stopAutoplay();
|
|
nextSlide();
|
|
startAutoplay();
|
|
});
|
|
|
|
dots.forEach((dot, index) => {
|
|
dot.addEventListener('click', () => {
|
|
stopAutoplay();
|
|
showSlide(index);
|
|
startAutoplay();
|
|
});
|
|
});
|
|
|
|
// Initialize
|
|
showSlide(0);
|
|
startAutoplay();
|
|
})();
|
|
</script>
|
|
|
|
{%- else -%}
|
|
{%- comment -%} Non-carousel version for other pages {%- endcomment -%}
|
|
<div class="container">
|
|
<div class="container position-relative">
|
|
<a class="portfolio-site-link"
|
|
href="https://1800nasi.net/category/bqkc/"
|
|
title="Main domain to view exhibitions, programs and media features of {B/qKC}">
|
|
ARCHIVE IN PRACTICE →
|
|
</a>
|
|
<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>
|
|
</div>
|
|
{%- endif -%} |