Replace carousel with beautiful-jekyll-next banner

Replace the Bootstrap carousel-based banner with a beautiful-jekyll-next style banner implementation. HTML: remove the carousel markup and add a hidden #game-big-imgs element to store artwork data attributes and a visible #game-banner-header with an .img-desc for captions. JS: stop building carousel items; instead set data-img-src-X and data-num-img on #game-big-imgs and introduce initGameBanner() which initializes the header background, prefetches images, and cycles them with a fade transition (timing/prefetch logic included). Keeps existing content rendering and preserves fallback when no artworks are present.

Author: ReenigneArcher

gh-pages-template/assets/js/game_detail.js

@@ -9,24 +9,23 @@ function renderGame(data) {
     document.title = (data.name || "Game") + " – GameDB";
     document.getElementById("game-name").textContent = data.name || "Unknown Game";
 
-    // Banner/Artworks carousel
+    // Banner/Artworks (beautiful-jekyll-next style)
     if (data.artworks && data.artworks.length > 0) {
-        const bannerSection = document.getElementById("game-banner-section");
-        const bannerInner = document.getElementById("game-banner-inner");
-        bannerSection.classList.remove("d-none");
+        const bigImgsEl = document.getElementById("game-big-imgs");
+        const bannerHeader = document.getElementById("game-banner-header");
 
+        // Set data attributes for each artwork
+        bigImgsEl.setAttribute("data-num-img", data.artworks.length);
         data.artworks.forEach((artwork, index) => {
-            const item = document.createElement("div");
-            item.className = `carousel-item${index === 0 ? " active" : ""}`;
-            const img = document.createElement("img");
-            img.src = igdbImageUrl(artwork.url, "t_screenshot_huge");
-            img.className = "d-block w-100";
-            img.alt = `${data.name} artwork ${index + 1}`;
-            img.style.maxHeight = "400px";
-            img.style.objectFit = "cover";
-            item.appendChild(img);
-            bannerInner.appendChild(item);
+            const imgNum = index + 1;
+            bigImgsEl.setAttribute(`data-img-src-${imgNum}`, igdbImageUrl(artwork.url, "t_screenshot_huge"));
         });
+
+        // Show the banner
+        bannerHeader.classList.remove("d-none");
+
+        // Initialize the image display (mimics beautifuljekyll.js behavior)
+        initGameBanner();
     }
 
     // Cover
@@ -361,6 +360,76 @@ function getRegionFlag(regionName) {
     return map[regionName] || "🌐";
 }
 
+/**
+ * Initialize game banner with cycling images (mimics beautiful-jekyll-next behavior)
+ */
+function initGameBanner() {
+    const bigImgsEl = document.getElementById("game-big-imgs");
+    const numImgs = parseInt(bigImgsEl.getAttribute("data-num-img"));
+
+    if (!numImgs || numImgs === 0) return;
+
+    // Set initial image
+    const getImgInfo = function(imgNum) {
+        const src = bigImgsEl.getAttribute(`data-img-src-${imgNum}`);
+        const desc = bigImgsEl.getAttribute(`data-img-desc-${imgNum}`);
+        return { src, desc };
+    };
+
+    const setImg = function(src, desc) {
+        const bannerHeader = document.getElementById("game-banner-header");
+        bannerHeader.style.backgroundImage = `url(${src})`;
+
+        const imgDesc = bannerHeader.querySelector(".img-desc");
+        if (desc && desc !== "null") {
+            imgDesc.textContent = desc;
+            imgDesc.style.display = "block";
+        } else {
+            imgDesc.style.display = "none";
+        }
+    };
+
+    // Set first image
+    const firstImg = getImgInfo(1);
+    setImg(firstImg.src, firstImg.desc);
+
+    // Cycle through images if multiple
+    if (numImgs > 1) {
+        let currentImgNum = 1;
+
+        const getNextImg = function() {
+            currentImgNum = (currentImgNum % numImgs) + 1;
+            const imgInfo = getImgInfo(currentImgNum);
+            const src = imgInfo.src;
+            const desc = imgInfo.desc;
+
+            // Prefetch next image
+            const prefetchImg = new Image();
+            prefetchImg.src = src;
+
+            setTimeout(function() {
+                const img = document.createElement("div");
+                img.className = "big-img-transition";
+                img.style.backgroundImage = `url(${src})`;
+                document.getElementById("game-banner-header").prepend(img);
+
+                setTimeout(function() {
+                    img.style.opacity = "1";
+                }, 50);
+
+                // After fade-in completes, update main image and remove transition element
+                setTimeout(function() {
+                    setImg(src, desc);
+                    img.remove();
+                    getNextImg();
+                }, 1000);
+            }, 6000);
+        };
+
+        getNextImg();
+    }
+}
+
 document.addEventListener("DOMContentLoaded", () => {
     loadItemDetail("games", renderGame);
 });

gh-pages-template/browse/games.html

@@ -28,19 +28,12 @@
 
 <div id="item-content" class="d-none">
 
-  <!-- Banner Carousel -->
-  <div id="game-banner-section" class="d-none mb-4">
-    <div id="gameBannerCarousel" class="carousel slide" data-bs-ride="carousel">
-      <div class="carousel-inner rounded" id="game-banner-inner"></div>
-      <button class="carousel-control-prev" type="button" data-bs-target="#gameBannerCarousel" data-bs-slide="prev">
-        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
-        <span class="visually-hidden">Previous</span>
-      </button>
-      <button class="carousel-control-next" type="button" data-bs-target="#gameBannerCarousel" data-bs-slide="next">
-        <span class="carousel-control-next-icon" aria-hidden="true"></span>
-        <span class="visually-hidden">Next</span>
-      </button>
-    </div>
+  <!-- Banner Images (hidden, holds data attributes) -->
+  <div id="game-big-imgs" style="display:none;"></div>
+
+  <!-- Banner Header (styled like beautiful-jekyll-next cover-img) -->
+  <div id="game-banner-header" class="intro-header big-img d-none" style="margin-top: -70px; margin-bottom: 30px;">
+    <span class='img-desc'></span>
   </div>
 
   <div class="row gx-4 gy-4 mb-4">