4 files changed, 87 insertions, 18 deletions

diff --git a/src/content/dependencies/generateAlbumBanner.js b/src/content/dependencies/generateAlbumBanner.js
new file mode 100644
index 00000000..155f4974
--- /dev/null
+++ b/src/content/dependencies/generateAlbumBanner.js
@@ -0,0 +1,37 @@
+export default {
+  contentDependencies: ['generatePageBanner'],
+  extraDependencies: ['html', 'language'],
+
+  relations(relation, album) {
+    if (!album.hasBannerArt) {
+      return {};
+    }
+
+    return {
+      banner: relation('generatePageBanner'),
+    };
+  },
+
+  data(album) {
+    if (!album.hasBannerArt) {
+      return {};
+    }
+
+    return {
+      path: ['media.albumBanner', album.directory, album.bannerFileExtension],
+      dimensions: album.bannerDimensions,
+    };
+  },
+
+  generate(data, relations, {html, language}) {
+    if (!relations.banner) {
+      return html.blank();
+    }
+
+    return relations.banner.slots({
+      path: data.path,
+      dimensions: data.dimensions,
+      alt: language.$('misc.alt.albumBanner'),
+    });
+  },
+};
diff --git a/src/content/dependencies/generateAlbumInfoPage.js b/src/content/dependencies/generateAlbumInfoPage.js
index d1be0f3a..a0f14c9a 100644
--- a/src/content/dependencies/generateAlbumInfoPage.js
+++ b/src/content/dependencies/generateAlbumInfoPage.js
@@ -6,6 +6,7 @@ export default {
   contentDependencies: [
     'generateAdditionalFilesShortcut',
     'generateAlbumAdditionalFilesList',
+    'generateAlbumBanner',
     'generateAlbumCoverArtwork',
     'generateAlbumNavAccent',
     'generateAlbumReleaseInfo',
@@ -75,6 +76,11 @@ export default {
         relation('generateAlbumCoverArtwork', album);
     }
 
+    if (album.hasBannerArt) {
+      relations.banner =
+        relation('generateAlbumBanner', album);
+    }
+
     // Section: Release info
 
     relations.releaseInfo =
@@ -157,11 +163,11 @@ export default {
         additionalStyleRules: [relations.albumStyleRules],
 
         cover:
-          (relations.cover
-            ? relations.cover.slots({
-                alt: language.$('misc.alt.albumCover'),
-              })
-            : null),
+          relations.cover
+            ?.slots({
+              alt: language.$('misc.alt.albumCover'),
+            })
+            ?? null,
 
         mainContent: [
           relations.releaseInfo,
@@ -263,6 +269,9 @@ export default {
             ],
           }),
 
+        banner: relations.banner ?? null,
+        bannerPosition: 'top',
+
         ...relations.sidebar,
 
         // socialEmbed: relations.socialEmbed,
@@ -271,17 +280,6 @@ export default {
 };
 
 /*
-  banner: !empty(album.bannerArtistContribs) && {
-    dimensions: album.bannerDimensions,
-    path: [
-      'media.albumBanner',
-      album.directory,
-      album.bannerFileExtension,
-    ],
-    alt: language.$('misc.alt.albumBanner'),
-    position: 'top',
-  },
-
   secondaryNav: generateAlbumSecondaryNav(album, null, {
     getLinkThemeString,
     html,
diff --git a/src/content/dependencies/generatePageBanner.js b/src/content/dependencies/generatePageBanner.js
new file mode 100644
index 00000000..835140a8
--- /dev/null
+++ b/src/content/dependencies/generatePageBanner.js
@@ -0,0 +1,28 @@
+export default {
+  extraDependencies: ['html', 'to'],
+
+  slots: {
+    path: {
+      validate: v => v.validateArrayItems(v.isString),
+    },
+
+    dimensions: {
+      validate: v => v.isDimensions,
+    },
+
+    alt: {
+      type: 'string',
+    },
+  },
+
+  generate(slots, {html, to}) {
+    return (
+      html.tag('div', {id: 'banner'},
+        html.tag('img', {
+          src: to(...slots.path),
+          alt: slots.alt,
+          width: slots.dimensions?.[0] ?? 1100,
+          height: slots.dimensions?.[1] ?? 200,
+        })));
+  },
+};
diff --git a/src/content/dependencies/generatePageLayout.js b/src/content/dependencies/generatePageLayout.js
index 610b4a1f..c9ab83fb 100644
--- a/src/content/dependencies/generatePageLayout.js
+++ b/src/content/dependencies/generatePageLayout.js
@@ -98,6 +98,12 @@ export default {
 
     cover: {type: 'html'},
 
+    banner: {type: 'html'},
+    bannerPosition: {
+      validate: v => v.is('top', 'bottom'),
+      default: 'top',
+    },
+
     socialEmbed: {type: 'html'},
 
     colorStyleRules: {
@@ -413,7 +419,7 @@ export default {
 
     const layoutHTML = [
       navHTML,
-      // banner.position === 'top' && bannerHTML,
+      slots.bannerPosition === 'top' && slots.banner,
       // secondaryNavHTML,
       html.tag('div',
         {
@@ -432,7 +438,7 @@ export default {
           mainHTML,
           sidebarRightHTML,
         ]),
-      // banner.position === 'bottom' && bannerHTML,
+      slots.bannerPosition === 'bottom' && slots.banner,
       footerHTML,
     ].filter(Boolean).join('\n');