album banner images

3 files changed, 64 insertions, 6 deletions

diff --git a/static/site.css b/static/site.css
index 3f66c9ea..59c9f624 100644
--- a/static/site.css
+++ b/static/site.css
@@ -34,11 +34,26 @@ body::before {
 
     max-width: 1100px;
     margin: 10px auto 50px;
-    padding: 15px;
+    padding: 15px 0;
 
     box-shadow: 0 0 40px rgba(0, 0, 0, 0.5);
 }
 
+#page-container > * {
+    margin-left: 15px;
+    margin-right: 15px;
+}
+
+#banner {
+    margin: 10px 0;
+    width: 100%;
+    display: block;
+}
+
+#banner.dim {
+    filter: brightness(0.8);
+}
+
 a {
     color: var(--primary-color);
     text-decoration: none;
diff --git a/strings-default.json b/strings-default.json
index 9df60538..e9dbf293 100644
--- a/strings-default.json
+++ b/strings-default.json
@@ -73,6 +73,7 @@
     "releaseInfo.by": "By {ARTISTS}.",
     "releaseInfo.coverArtBy": "Cover art by {ARTISTS}.",
     "releaseInfo.wallpaperArtBy": "Wallpaper art by {ARTISTS}.",
+    "releaseInfo.bannerArtBy": "Banner art by {ARTISTS}.",
     "releaseInfo.released": "Released {DATE}.",
     "releaseInfo.artReleased": "Art released {DATE}.",
     "releaseInfo.duration": "Duration: {DURATION}.",
@@ -102,6 +103,7 @@
     "trackList.item.withArtists.by": "by {ARTISTS}",
     "trackList.item.rerelease": "{TRACK} (re-release)",
     "misc.alt.albumCover": "album cover",
+    "misc.alt.albumBanner": "album banner",
     "misc.alt.trackCover": "track cover",
     "misc.alt.artistAvatar": "artist avatar",
     "misc.alt.flashArt": "flash art",
@@ -170,6 +172,7 @@
     "artistPage.creditList.entry.track.withDuration": "({DURATION}) {TRACK}",
     "artistPage.creditList.entry.album.coverArt": "(cover art)",
     "artistPage.creditList.entry.album.wallpaperArt": "(wallpaper art)",
+    "artistPage.creditList.entry.album.bannerArt": "(banner art)",
     "artistPage.creditList.entry.album.commentary": "(album commentary)",
     "artistPage.creditList.entry.flash": "{FLASH}",
     "artistPage.creditList.entry.rerelease": "{ENTRY} (re-release)",
diff --git a/upd8.js b/upd8.js
index cb0271a1..8b0c6ecc 100755
--- a/upd8.js
+++ b/upd8.js
@@ -131,7 +131,7 @@ const genThumbs = require('./gen-thumbs');
 
 const C = require('./common/common');
 
-const CACHEBUST = 4;
+const CACHEBUST = 5;
 
 const WIKI_INFO_FILE = 'wiki-info.txt';
 const HOMEPAGE_INFO_FILE = 'homepage.txt';
@@ -221,6 +221,7 @@ const urlSpec = {
         media: 'media/<>',
         albumCover: 'media/album-art/<>/cover.jpg',
         albumWallpaper: 'media/album-art/<>/bg.jpg',
+        albumBanner: 'media/album-art/<>/banner.jpg',
         trackCover: 'media/album-art/<>/<>.jpg',
         artistAvatar: 'media/artist-avatar/<>.jpg',
         flashArt: 'media/flash-art/<>.jpg'
@@ -1167,6 +1168,7 @@ async function processAlbumDataFile(file) {
     album.name = getBasicField(albumSection, 'Album');
     album.artists = getContributionField(albumSection, 'Artists') || getContributionField(albumSection, 'Artist');
     album.wallpaperArtists = getContributionField(albumSection, 'Wallpaper Art');
+    album.bannerArtists = getContributionField(albumSection, 'Banner Art');
     album.wallpaperStyle = getMultilineField(albumSection, 'Wallpaper Style');
     album.date = getBasicField(albumSection, 'Date');
     album.trackArtDate = getBasicField(albumSection, 'Track Art Date') || album.date;
@@ -2012,6 +2014,7 @@ writePage.html = (pageFn, {paths, strings, to}) => {
 
         // missing properties are auto-filled, see below!
         body = {},
+        banner = {},
         main = {},
         sidebarLeft = {},
         sidebarRight = {},
@@ -2023,6 +2026,10 @@ writePage.html = (pageFn, {paths, strings, to}) => {
 
     theme = theme || getThemeString(wikiInfo);
 
+    banner.classes ??= [];
+    banner.src ??= '';
+    banner.position ??= '';
+
     main.classes ??= [];
     main.content ??= '';
 
@@ -2142,8 +2149,17 @@ writePage.html = (pageFn, {paths, strings, to}) => {
         </nav>
     `;
 
+    const bannerHTML = banner.position && banner.src && fixWS`
+        <img ${attributes({
+            id: 'banner',
+            src: banner.src,
+            alt: banner.alt
+        })} ${classes(...banner.classes || [])}>
+    `;
+
     const layoutHTML = [
         navHTML,
+        banner.position === 'top' && bannerHTML,
         (sidebarLeftHTML || sidebarRightHTML) ? fixWS`
             <div ${classes('layout-columns', !collapseSidebars && 'vertical-when-thin')}>
                 ${sidebarLeftHTML}
@@ -2151,6 +2167,7 @@ writePage.html = (pageFn, {paths, strings, to}) => {
                 ${sidebarRightHTML}
             </div>
         ` : mainHTML,
+        banner.position === 'bottom' && bannerHTML,
         footerHTML
     ].filter(Boolean).join('\n');
 
@@ -2634,6 +2651,12 @@ function writeAlbumPage(album) {
             `--album-directory: ${album.directory}`
         ]),
 
+        banner: {
+            src: to.albumBanner(album.directory),
+            alt: strings('misc.alt.albumBanner'),
+            position: 'top'
+        },
+
         main: {
             content: fixWS`
                 ${generateCoverLink({
@@ -2666,6 +2689,13 @@ function writeAlbumPage(album) {
                                 showIcons: true
                             })
                         }),
+                        album.bannerArtists && strings('releaseInfo.bannerArtBy', {
+                            artists: getArtistString(album.bannerArtists, {
+                                strings, to,
+                                showContrib: true,
+                                showIcons: true
+                            })
+                        }),
                         strings('releaseInfo.released', {
                             date: strings.count.date(album.date)
                         }),
@@ -2827,6 +2857,13 @@ function writeTrackPage(track) {
             `--track-directory: ${track.directory}`
         ]),
 
+        banner: {
+            classes: ['dim'],
+            src: to.albumBanner(track.album.directory),
+            alt: strings('misc.alt.albumBanner'),
+            position: 'bottom'
+        },
+
         main: {
             content: fixWS`
                 ${generateCoverLink({
@@ -3003,7 +3040,7 @@ function writeArtistPage(artist) {
         note = ''
     } = artist;
 
-    const artThingsAll = C.sortByDate(unique([...artist.albums.asCoverArtist, ...artist.albums.asWallpaperArtist, ...artist.tracks.asCoverArtist]));
+    const artThingsAll = C.sortByDate(unique([...artist.albums.asCoverArtist, ...artist.albums.asWallpaperArtist, ...artist.albums.asBannerArtist, ...artist.tracks.asCoverArtist]));
     const artThingsGallery = C.sortByDate([...artist.albums.asCoverArtist, ...artist.tracks.asCoverArtist]);
     const commentaryThings = C.sortByDate([...artist.albums.asCommentator, ...artist.tracks.asCommentator]);
 
@@ -3016,7 +3053,7 @@ function writeArtistPage(artist) {
     });
 
     const artListChunks = chunkByProperties(artThingsAll.flatMap(thing =>
-        (['coverArtists', 'wallpaperArtists']
+        (['coverArtists', 'wallpaperArtists', 'bannerArtists']
             .map(key => getArtistsAndContrib(thing, key))
             .filter(({ contrib }) => contrib)
             .map(props => ({
@@ -3245,6 +3282,7 @@ function writeArtistPage(artist) {
                                                 })
                                                 : `<i>${strings('artistPage.creditList.entry.album.' + {
                                                     wallpaperArtists: 'wallpaperArt',
+                                                    bannerArtists: 'bannerArt',
                                                     coverArtists: 'coverArt'
                                                 }[key])}</i>`),
                                             ...props
@@ -3712,6 +3750,7 @@ const listingSpec = [
                             artist.tracks.asCoverArtist.length +
                             artist.albums.asCoverArtist.length +
                             artist.albums.asWallpaperArtist.length +
+                            artist.albums.asBannerArtist.length +
                             (wikiInfo.features.flashesAndGames
                                 ? artist.flashes.asContributor.length
                                 : 0)
@@ -5639,7 +5678,7 @@ async function main() {
 
     contributionData = Array.from(new Set([
         ...trackData.flatMap(track => [...track.artists || [], ...track.contributors || [], ...track.coverArtists || []]),
-        ...albumData.flatMap(album => [...album.artists || [], ...album.coverArtists || [], ...album.wallpaperArtists || []]),
+        ...albumData.flatMap(album => [...album.artists || [], ...album.coverArtists || [], ...album.wallpaperArtists || [], ...album.bannerArtists || []]),
         ...(flashData?.flatMap(flash => [...flash.contributors || []]) || [])
     ]));
 
@@ -5724,7 +5763,8 @@ async function main() {
             asArtist: filterProp(albumData, 'artists'),
             asCommentator: filterCommentary(albumData),
             asCoverArtist: filterProp(albumData, 'coverArtists'),
-            asWallpaperArtist: filterProp(albumData, 'wallpaperArtists')
+            asWallpaperArtist: filterProp(albumData, 'wallpaperArtists'),
+            asBannerArtist: filterProp(albumData, 'bannerArtists')
         };
         if (wikiInfo.features.flashesAndGames) {
             artist.flashes = {