Add artist, album to item entry template in the web plugin (#5753)

snejus · web-flow · commit 5beb3d1c8153 · 2025-08-02T22:44:47.000+01:00
Add the artist and album information to the item template in the web
plugin.

When searching for an item, Instead of 

`` Doo Woop (That Thing)``

the interface now shows

``Lauryn Hill - The Miseducation of Lauryn Hill - Doo Wop (That Thing)``

which is arguably clearer, and matches the default output of `beet ls`
in the cli.
diff --git a/beetsplug/web/templates/index.html b/beetsplug/web/templates/index.html
@@ -1,14 +1,17 @@
 <!DOCTYPE html>
-<html>
+<html lang="en">
     <head>
+        <meta charset="utf-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1">
+        <meta name="description" content="the music geek’s media organizer">
+        <meta name="keywords"
+              content="beets, media, music, library, metadata, player, tagger, grep, transcoder, organizer">
         <title>beets</title>
-
         <link rel="stylesheet"
-        href="{{ url_for('static', filename='beets.css') }}" type="text/css">
-
+              href="{{ url_for('static', filename='beets.css') }}"
+              type="text/css">
         <script src="{{ url_for('static', filename='jquery.js') }}"></script>
-        <script src="{{ url_for('static', filename='underscore.js') }}">
-        </script>
+        <script src="{{ url_for('static', filename='underscore.js') }}"></script>
         <script src="{{ url_for('static', filename='backbone.js') }}"></script>
         <script src="{{ url_for('static', filename='beets.js') }}"></script>
     </head>
@@ -17,34 +20,29 @@
             <h1>beets</h1>
             <div id="player">
                 <audio></audio>
-
                 <button class="disabled">&#9654;</button>
                 <button class="play">&#9654;</button>
                 <button class="pause" style="letter-spacing: 1px;">&#10073;&#10073;</button>
-
                 <span class="times">
-                    <span class="currentTime">
-                    </span>
+                    <span class="currentTime"></span>
                 </span>
             </div>
         </div>
-
         <div id="entities">
             <form id="queryForm">
                 <input type="search" id="query" placeholder="Query">
             </form>
             <ul id="results">
             </ul>
         </div>
-
-        <div id="main-detail">
-        </div>
-
-        <div id="extra-detail">
-        </div>
-
+        <div id="main-detail"></div>
+        <div id="extra-detail"></div>
         <!-- Templates. -->
         <script type="text/template" id="item-entry-template">
+            <% if (artist) { %><%= artist %><% } %>
+            <% if (artist && album) { %> &ndash; <% } %>
+            <% if (album) { %><%= album %><% } %>
+            <% if ((artist || album) && title) { %> &ndash; <% } %>
             <%= title %>
             <span class="playing">&#9654;</span>
         </script>
diff --git a/docs/changelog.rst b/docs/changelog.rst
@@ -33,6 +33,7 @@ New features:
 * :doc:`plugins/mpdstats`: Add new configuration option,
   ``played_ratio_threshold``, to allow configuring the percentage the song must
   be played for it to be counted as played instead of skipped.
+* :doc:`plugins/web`: Display artist and album as part of the search results.
 
 Bug fixes:
 
