A simple HTML gallery #4063

rnkn · 2021-09-17T07:45:36Z

rnkn
Sep 17, 2021

Given I use console music players, for a while I've missed perusing my music collection by artwork. No longer!

This little script sends an HTML gallery to stdout.

#!/bin/sh

cover_width="${COVER_WIDTH:-220}"
album_sort="${ALBUM_SORT:-albumartist+}"
tmpfile=$(mktemp); trap "rm -f $tmpfile" EXIT

beet ls -a "$album_sort" -f '$albumartist|$album|$artpath' |
	while read line; do
		artist=$(echo "$line" | cut -d\| -f1)
		album=$(echo "$line" | cut -d\| -f2)
		artpath=$(echo "$line" | cut -d\| -f3)
		[ -f "$artpath" ] && cat <<EOF
<div class="cover" style="background-image: url(&quot;${artpath#$PWD/}&quot;);">
<div class="details">
	<p>$artist<br/>$album</p>
</div>
</div>
EOF
		>> "$tmpfile"
	done

cat <<EOF
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
	div.cover {
		float: left;
		position: relative;
		width: ${cover_width}px;
		height: ${cover_width}px;
		margin: 5px;
		background-position: center;
		background-size: cover;
	}
	div.details {
		visibility: hidden;
		width: 100%;
		height: 100%;
		background-color: rgba(224,224,224,0.75);
		position: absolute;
	}
	div.cover:hover div.details {
		visibility: visible;
	}
	div.details p {
		font-family: sans-serif;
		text-align: center;
		position: absolute;
		bottom: 0;
		width: 100%;
	}
</style>
</head>
<body>
$(cat "$tmpfile")
</body>
</html>
EOF

rm -f "$tmpfile"

Usage (in library directory):

$ ALBUM_SORT=year- beet_gallery > index.html
$ python -m http.server -d .

matlads · 2021-09-29T15:15:12Z

matlads
Sep 29, 2021

Very Neat. I like it!

I just added two lines, to support utf-8 characters.

<meta charset="utf-8">

1 reply

rnkn Oct 5, 2021
Author

Ah right, setting the browser's default encoding to UTF-8 is something I've done for so long I didn't even consider this!

RollingStar · 2021-10-24T18:21:44Z

RollingStar
Oct 24, 2021
Collaborator

No screenshot?

1 reply

rnkn Oct 25, 2021
Author

It looks like a bunch of album covers.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

A simple HTML gallery #4063

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Replies: 2 comments 2 replies

{{title}}

{{title}}

{{title}}

{{title}}

Select a reply

A simple HTML gallery #4063

rnkn Sep 17, 2021

Replies: 2 comments · 2 replies

matlads Sep 29, 2021

rnkn Oct 5, 2021 Author

RollingStar Oct 24, 2021 Collaborator

rnkn Oct 25, 2021 Author

rnkn
Sep 17, 2021

Replies: 2 comments 2 replies

matlads
Sep 29, 2021

rnkn Oct 5, 2021
Author

RollingStar
Oct 24, 2021
Collaborator

rnkn Oct 25, 2021
Author