diff options
| -rw-r--r-- | src/data/things.js | 1 | ||||
| -rw-r--r-- | src/data/yaml.js | 1 | ||||
| -rw-r--r-- | src/misc-templates.js | 9 | ||||
| -rw-r--r-- | src/page/album.js | 6 | ||||
| -rw-r--r-- | src/page/track.js | 5 | ||||
| -rw-r--r-- | src/static/site.css | 31 | ||||
| -rw-r--r-- | src/strings-default.json | 3 | ||||
| -rwxr-xr-x | src/upd8.js | 12 | ||||
| -rw-r--r-- | src/util/wiki-data.js | 13 |
9 files changed, 65 insertions, 16 deletions
diff --git a/src/data/things.js b/src/data/things.js index 4cc5d061..b2251430 100644 --- a/src/data/things.js +++ b/src/data/things.js @@ -474,6 +474,7 @@ Album.propertyDescriptors = { update: {validate: isDimensions} }, + hasCoverArt: Thing.common.flag(true), hasTrackArt: Thing.common.flag(true), isMajorRelease: Thing.common.flag(false), isListedOnHomepage: Thing.common.flag(true), diff --git a/src/data/yaml.js b/src/data/yaml.js index fdb7d9c1..2e0e985a 100644 --- a/src/data/yaml.js +++ b/src/data/yaml.js @@ -219,6 +219,7 @@ export const processAlbumDocument = makeProcessDocument(Album, { coverArtDate: 'Cover Art Date', dateAddedToWiki: 'Date Added', + hasCoverArt: 'Has Cover Art', hasTrackArt: 'Has Track Art', isMajorRelease: 'Major Release', isListedOnHomepage: 'Listed on Homepage', diff --git a/src/misc-templates.js b/src/misc-templates.js index 306063b9..995aaa2b 100644 --- a/src/misc-templates.js +++ b/src/misc-templates.js @@ -277,6 +277,7 @@ export function getGridHTML({ entries, srcFn, linkFn, + noSrcTextFn = () => '', altFn = () => '', detailsFn = null, lazy = true @@ -291,7 +292,8 @@ export function getGridHTML({ thumb: 'small', lazy: (typeof lazy === 'number' ? i >= lazy : lazy), square: true, - reveal: getRevealStringFromTags(item.artTags, {strings}) + reveal: getRevealStringFromTags(item.artTags, {strings}), + noSrcText: noSrcTextFn(item) })} <span>${item.name}</span> ${detailsFn && `<span>${detailsFn(item)}</span>`} @@ -307,10 +309,13 @@ export function getAlbumGridHTML({ return getGridHTML({ srcFn: getAlbumCover, linkFn: link.album, - detailsFn: details && (album => strings('misc.albumGridDetails', { + detailsFn: details && (album => strings('misc.albumGrid.details', { tracks: strings.count.tracks(album.tracks.length, {unit: true}), time: strings.count.duration(getTotalDuration(album.tracks)) })), + noSrcTextFn: album => strings('misc.albumGrid.noCoverArt', { + album: album.name + }), ...props }); } diff --git a/src/page/album.js b/src/page/album.js index 70320b21..eac0a9f3 100644 --- a/src/page/album.js +++ b/src/page/album.js @@ -118,6 +118,8 @@ export function write(album, {wikiData}) { strings }); + const cover = getAlbumCover(album); + return { title: strings('albumPage.title', {album: album.name}), stylesheet: getAlbumStylesheet(album), @@ -134,8 +136,8 @@ export function write(album, {wikiData}) { main: { content: fixWS` - ${generateCoverLink({ - src: getAlbumCover(album), + ${cover && generateCoverLink({ + src: cover, alt: strings('misc.alt.albumCover'), tags: album.artTags })} diff --git a/src/page/track.js b/src/page/track.js index 17e75858..960f00ce 100644 --- a/src/page/track.js +++ b/src/page/track.js @@ -138,6 +138,7 @@ export function write(track, {wikiData}) { to }) => { const generateTrackList = bindOpts(unbound_generateTrackList, {getArtistString, link, strings}); + const cover = getTrackCover(track); return { title: strings('trackPage.title', {track: track.name}), @@ -160,8 +161,8 @@ export function write(track, {wikiData}) { main: { content: fixWS` - ${generateCoverLink({ - src: getTrackCover(track), + ${cover && generateCoverLink({ + src: cover, alt: strings('misc.alt.trackCover'), tags: track.artTags })} diff --git a/src/static/site.css b/src/static/site.css index c88343e5..5122f3fa 100644 --- a/src/static/site.css +++ b/src/static/site.css @@ -439,6 +439,26 @@ footer > :last-child { overflow: hidden; width: 100%; height: 100%; + position: relative; +} + +.image-text-area { + position: absolute; + top: 0; + left: 0; + bottom: 0; + right: 0; + display: flex; + align-items: center; + justify-content: center; + text-align: center; + padding: 5px 15px; + background: rgba(0, 0, 0, 0.65); + box-shadow: 0 0 5px rgba(0, 0, 0, 0.5) inset; + line-height: 1.35em; + color: var(--primary-color); + font-style: oblique; + text-shadow: 0 2px 5px rgba(0, 0, 0, 0.75); } img { @@ -520,11 +540,18 @@ h1 { text-decoration: underline; } -.grid-item > span:first-of-type { - margin-top: 0.45em; +.grid-item > span { display: block; } +.grid-item > span:not(:first-child) { + margin-top: 2px; +} + +.grid-item > span:first-of-type { + margin-top: 6px; +} + .grid-item:hover > span:first-of-type { text-decoration: underline; } diff --git a/src/strings-default.json b/src/strings-default.json index 86fb73fc..1fc6d8a4 100644 --- a/src/strings-default.json +++ b/src/strings-default.json @@ -148,7 +148,8 @@ "misc.jumpTo.withLinks": "Jump to: {LINKS}.", "misc.contentWarnings": "cw: {WARNINGS}", "misc.contentWarnings.reveal": "click to show", - "misc.albumGridDetails": "({TRACKS}, {TIME})", + "misc.albumGrid.details": "({TRACKS}, {TIME})", + "misc.albumGrid.noCoverArt": "{ALBUM}", "misc.uiLanguage": "UI Language: {LANGUAGES}", "homepage.title": "{TITLE}", "homepage.news.title": "News", diff --git a/src/upd8.js b/src/upd8.js index 14471186..13cf2e77 100755 --- a/src/upd8.js +++ b/src/upd8.js @@ -606,6 +606,7 @@ function stringifyThings(thingData) { function img({ src, alt, + noSrcText = '', thumb: thumbKey, reveal, id, @@ -620,7 +621,7 @@ function img({ const willLink = typeof link === 'string' || link; const originalSrc = src; - const thumbSrc = thumbKey ? thumb[thumbKey](src) : src; + const thumbSrc = src && (thumbKey ? thumb[thumbKey](src) : src); const imgAttributes = html.attributes({ id: link ? '' : id, @@ -630,10 +631,13 @@ function img({ height }); - const nonlazyHTML = wrap(`<img src="${thumbSrc}" ${imgAttributes}>`); - const lazyHTML = lazy && wrap(`<img class="lazy" data-original="${thumbSrc}" ${imgAttributes}>`, true); + const noSrcHTML = !src && wrap(`<div class="image-text-area">${noSrcText}</div>`); + const nonlazyHTML = src && wrap(`<img src="${thumbSrc}" ${imgAttributes}>`); + const lazyHTML = src && lazy && wrap(`<img class="lazy" data-original="${thumbSrc}" ${imgAttributes}>`, true); - if (lazy) { + if (!src) { + return noSrcHTML; + } else if (lazy) { return fixWS` <noscript>${nonlazyHTML}</noscript> ${lazyHTML} diff --git a/src/util/wiki-data.js b/src/util/wiki-data.js index 545e21e5..c0c6dc3d 100644 --- a/src/util/wiki-data.js +++ b/src/util/wiki-data.js @@ -98,7 +98,12 @@ export function filterAlbumsByCommentary(albums) { } export function getAlbumCover(album, {to}) { - return to('media.albumCover', album.directory, album.coverArtFileExtension); + // Some albums don't have art! This function returns null in that case. + if (album.hasCoverArt) { + return to('media.albumCover', album.directory, album.coverArtFileExtension); + } else { + return null; + } } export function getAlbumListTag(album) { @@ -155,8 +160,10 @@ export function getTotalDuration(tracks) { } export function getTrackCover(track, {to}) { - // Some al8ums don't have any track art at all, and in those, every track - // just inherits the al8um's own cover art. + // Some albums don't have any track art at all, and in those, every track + // just inherits the album's own cover art. Note that since cover art isn't + // guaranteed on albums either, it's possible that this function returns + // null! if (!track.hasCoverArt) { return getAlbumCover(track.album, {to}); } else { |