Top
/* =====================================================
INTERSECT — REUSABLE TEMPLATE ONE
===================================================== */
const TEMPLATE_ENABLED = true;
function applyIntersectTemplate() {
if (!TEMPLATE_ENABLED) {
return;
}
/*
* Find the actual blog article.
*/
const article =
document.querySelector(
".blog-item-wrapper"
);
if (!article) {
return;
}
/*
* Prefer the actual content area so footer,
* author and pagination images are ignored.
*/
const content =
article.querySelector(
".blog-item-content"
) || article;
/*
* Get the article image blocks in DOM order.
*/
const images =
Array.from(
content.querySelectorAll(
".sqs-block-image"
)
).filter(function (block) {
return block.querySelector("img");
});
/*
* Remove old template classes first.
*/
images.forEach(function (block) {
block.classList.remove(
"intersect-template-lead",
"intersect-template-feature",
"intersect-template-pair-left",
"intersect-template-pair-right"
);
});
/*
* IMAGE 1
* Normal lead / cover image.
*/
if (images[0]) {
images[0].classList.add(
"intersect-template-lead"
);
}
/*
* IMAGE 2
* Full-width feature image.
*/
if (images[1]) {
images[1].classList.add(
"intersect-template-feature"
);
}
/*
* IMAGE 3
* Left side-by-side image.
*/
if (images[2]) {
images[2].classList.add(
"intersect-template-pair-left"
);
}
/*
* IMAGE 4
* Right side-by-side image.
*/
if (images[3]) {
images[3].classList.add(
"intersect-template-pair-right"
);
}
}
function initialiseIntersectTemplate() {
applyIntersectTemplate();
setTimeout(
applyIntersectTemplate,
250
);
setTimeout(
applyIntersectTemplate,
700
);
setTimeout(
applyIntersectTemplate,
1500
);
}
if (
document.readyState === "loading"
) {
document.addEventListener(
"DOMContentLoaded",
initialiseIntersectTemplate
);
} else {
initialiseIntersectTemplate();
}
document.addEventListener(
"pageChange",
function () {
setTimeout(
initialiseIntersectTemplate,
250
);
}
);
})();
