Render game artworks in site header

Switch banner/artwork rendering to reuse the existing page header instead of dedicated banner elements. Renamed/repurposed the hidden container from #game-big-imgs to #header-big-imgs, removed the standalone #game-banner-header markup, and injects .img-desc into header.header-section .intro-header as needed. Updated initGameBanner to target the intro-header.big-img, prepend transition nodes there, and guard against missing elements. Also removed an inline max-width on the cover image and cleaned up related markup so the banner integrates with the site's header layout.

Author: ReenigneArcher

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

@@ -7,25 +7,43 @@
 function renderGame(data) {
     // Title
     document.title = (data.name || "Game") + " – GameDB";
-    document.getElementById("game-name").textContent = data.name || "Unknown Game";
 
-    // Banner/Artworks (beautiful-jekyll-next style)
+    // Set game name in both the page header and the content section
+    const gameName = data.name || "Unknown Game";
+    document.getElementById("game-name").textContent = gameName;
+
+    // Also set in page header if it exists
+    const pageHeaderH1 = document.querySelector("header.header-section .page-heading h1");
+    if (pageHeaderH1) {
+        pageHeaderH1.textContent = gameName;
+    }
+
+    // Banner/Artworks (inject into existing page header)
     if (data.artworks && data.artworks.length > 0) {
-        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 imgNum = index + 1;
-            bigImgsEl.setAttribute(`data-img-src-${imgNum}`, igdbImageUrl(artwork.url, "t_screenshot_huge"));
-        });
+        const bigImgsEl = document.getElementById("header-big-imgs");
+        const pageHeader = document.querySelector("header.header-section .intro-header");
+
+        if (pageHeader) {
+            // Set data attributes for each artwork
+            bigImgsEl.setAttribute("data-num-img", data.artworks.length);
+            data.artworks.forEach((artwork, index) => {
+                const imgNum = index + 1;
+                bigImgsEl.setAttribute(`data-img-src-${imgNum}`, igdbImageUrl(artwork.url, "t_screenshot_huge"));
+            });
+
+            // Add big-img class and img-desc span to existing header
+            pageHeader.classList.add("big-img");
 
-        // Show the banner
-        bannerHeader.classList.remove("d-none");
+            // Add img-desc span if it doesn't exist
+            if (!pageHeader.querySelector(".img-desc")) {
+                const imgDesc = document.createElement("span");
+                imgDesc.className = "img-desc";
+                pageHeader.appendChild(imgDesc);
+            }
 
-        // Initialize the image display (mimics beautifuljekyll.js behavior)
-        initGameBanner();
+            // Initialize the image display
+            initGameBanner();
+        }
     }
 
     // Cover
@@ -364,11 +382,15 @@ function getRegionFlag(regionName) {
  * Initialize game banner with cycling images (mimics beautiful-jekyll-next behavior)
  */
 function initGameBanner() {
-    const bigImgsEl = document.getElementById("game-big-imgs");
+    const bigImgsEl = document.getElementById("header-big-imgs");
     const numImgs = parseInt(bigImgsEl.getAttribute("data-num-img"));
 
     if (!numImgs || numImgs === 0) return;
 
+    // Target the existing page header
+    const introHeader = document.querySelector("header.header-section .intro-header.big-img");
+    if (!introHeader) return;
+
     // Set initial image
     const getImgInfo = function(imgNum) {
         const src = bigImgsEl.getAttribute(`data-img-src-${imgNum}`);
@@ -377,15 +399,16 @@ function initGameBanner() {
     };
 
     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";
+        introHeader.style.backgroundImage = `url(${src})`;
+
+        const imgDesc = introHeader.querySelector(".img-desc");
+        if (imgDesc) {
+            if (desc && desc !== "null") {
+                imgDesc.textContent = desc;
+                imgDesc.style.display = "block";
+            } else {
+                imgDesc.style.display = "none";
+            }
         }
     };
 
@@ -411,7 +434,7 @@ function initGameBanner() {
                 const img = document.createElement("div");
                 img.className = "big-img-transition";
                 img.style.backgroundImage = `url(${src})`;
-                document.getElementById("game-banner-header").prepend(img);
+                introHeader.prepend(img);
 
                 setTimeout(function() {
                     img.style.opacity = "1";

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

@@ -9,7 +9,6 @@ let base_url = window.location.origin + base_path;
 // get platforms container
 let platforms_container = document.getElementById("platforms-container")
 
-
 $(document).ready(function(){
     // Set cache = false for all jquery ajax requests.
     $.ajaxSetup({
@@ -141,7 +140,6 @@ $(document).ready(function(){
                 let sorted = platforms.sort(window.rankingSorter("name", "id")).reverse()
 
                 for(let item in sorted) {
-
                     let column = document.createElement("div")
                     column.className = "col-lg-4 mb-5"
                     platforms_container.appendChild(column)

gh-pages-template/browse/games.html

@@ -1,16 +1,20 @@
 ---
-title: Game
 layout: page
 full-width: false
-css:
-  - /assets/css/hide-heading.css
+cover-img: "https://via.placeholder.com/1920x400/333/333"
 js:
   - /GameDB/assets/js/item_detail.js
   - /GameDB/assets/js/game_detail.js
 ext-css:
   - href: https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200
 ---
 
+<style>
+.page-heading h1 {
+  display: none;
+}
+</style>
+
 <script>
 window.GAMEDB_CONFIG = {
   base_path: "{{ site.baseurl }}"
@@ -29,17 +33,12 @@
 <div id="item-content" class="d-none">
 
   <!-- 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 id="header-big-imgs" style="display:none;"></div>
 
   <div class="row gx-4 gy-4 mb-4">
     <!-- Cover image -->
     <div class="col-12 col-lg-3 col-md-4 text-center">
-      <img id="game-cover" src="" alt="" class="img-fluid rounded shadow w-100" style="max-width:300px; display:none;">
+      <img id="game-cover" src="" alt="" class="img-fluid rounded shadow w-100" style="display:none;">
       <div id="game-cover-placeholder" class="bg-secondary d-flex align-items-center justify-content-center rounded"
            style="min-height:300px; display:none !important;">
         <span class="material-symbols-outlined text-white" style="font-size:5rem;">sports_esports</span>