.custom-banner {
position: relative;
width: 100%;
height: 300px;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
background-color: #000;
color: white;
text-align: center;
}
.custom-banner-background {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-size: cover;
background-position: center;
filter: blur(10px);
z-index: 1;
opacity: 0.5;
}
.content {
position: relative;
z-index: 2;
}
#post-title {
font-size: 2em;
margin: 0;
color: white;
text-shadow: 2px 2px 5px black;
}
#post-excerpt {
font-size: 1em;
margin: 10px 0;
text-shadow: 2px 2px 5px black;
opacity: 0;
max-height: 0;
overflow: hidden;
transition: opacity 0.5s ease, max-height 0.5s ease;
}
.custom-banner:hover #post-excerpt {
opacity: 1;
max-height: 120px;
/* Adjust as needed */
}
.skeleton-bg {
background-color: #ddd;
background: linear-gradient(90deg, #ddd 25%, #e1e1e1 50%, #ddd 75%);
background-size: 200% 100%;
animation: loading 1.5s infinite;
}
@keyframes loading {
0% {
background-position: 200% 0;
}
100% {
background-position: -200% 0;
}
}
document.addEventListener("DOMContentLoaded", () => {
const banner = document.querySelector("#latest-post-banner");
const titleElement = document.querySelector("#post-title");
const excerptElement = document.querySelector("#post-excerpt");
const linkElement = document.querySelector("#post-link");
const backgroundElement = document.querySelector(".custom-banner-background");
fetch(`${window.location.origin}/wp-json/wp/v2/posts?per_page=1&_embed`)
.then(response => response.json())
.then(posts => {
if (posts.length > 0) {
const post = posts[0];
const title = post.title.rendered;
const excerpt = post.excerpt.rendered;
const link = post.link;
const image = post._embedded['wp:featuredmedia']?.[0]?.source_url || '';
titleElement.textContent = title;
excerptElement.innerHTML = excerpt;
linkElement.href = link;
if (image) {
backgroundElement.style.backgroundImage = `url(${image})`;
}
// Remove skeleton classes
backgroundElement.classList.remove("skeleton-bg");
}
})
.catch(err => {
console.error("Error fetching posts:", err);
titleElement.textContent = "Konnte neusten Beitrag nicht laden";
titleElement.style.color = "red";
});
});
