Author Topic: How to Display a Custom Image for the "No Album Art" field  (Read 1739 times)

sveakul

  • Editor
  • Hero Member
  • *
  • Posts: 1428
This short tutorial is based on the valuable info given by both "hiccup" and "psychoadept" in response to my original post in the "Questions" forum.

Sometimes you're not ready to select album art for an audio file, or don't feel the need to apply a separate image for every radio station in your radio playlist, yet would rather see something other than a dour "No Album Art" message in the art window.

This can be accomplished via a skin modification, and can be done by inserting a new <element id> in either the skin's xml file, or, if an xmlc skin, creating a separate xml file with the new element in the same directory as the xmlc file that references the xmlc as its root.

The new tag, <element id="NoArtwork">, contains the Base64 text representation for the image you want to use.  First you need to convert the image to a Base64 character string.  This can be done easily with a number of tools, the one I use being the freeware "Base64encoder", available at:

https://sourceforge.net/projects/base64encoder/

You can also use a free web-based converter here, but read the FAQ first:

https://www.base64-image.de/

The image you use will NOT be resized according to its aspect ratio once it is displayed in the "No Album Art" window, it is just enlarged/reduced to fill the window dimensions, which are "square", that is, the same width and height.  So for best results, BEFORE you encode the image, pick one that you have already edited to display properly as a same width/height image.  I use 700 X 700 for my source, which gives a nice quality image in either the "Now Playing" or "Track Information" window in my display.

EXAMPLE A:

For MB skins that themselves are xml files, or whose xml file references a root xmlc (examples of the latter being most of the "Dark-Fine Tuned" series), add the new element containing the Base64 image encode to the xml as follows:

<element id="NoArtwork">
(then copy the Base64 string here, no parens)
</element>

NOTE:  Before copying the string, delete the header created by the encoder that looks like "data:image/jpeg;base64," so that the string starts with the next "/".  I found that leaving it on makes the display fail.

EXAMPLE B:

For MB skins that are xmlc files, you need to create a new, separate xml file in the same folder as the xmlc that references the xmlc as its root, with contents like this:

<?xml version="1.0" encoding="utf-8"?>
<root dependsOn="MusicBee3.xmlc">
 <element id="NoArtwork">
(then copy the BAse64 string here, no parens)
 </element>
</root>

Be sure the root name matches the name of the xmlc file;  the new xml you can name anything.  Remember to delete the first part of the Base64 "header" as described in the NOTE in Example A.

If the modified skin was already an xml file (Example A), it will appear as before in the MB skin menu.  If the skin is an xmlc and you had to add the new xml (Example B), it will appear in the menu under its own name next to the xmlc's name;  select the xml's name to use the skin with modified display.

The skin will now display your custom image for cases of "No Album Art".

Note (8/27/2018):  You can also do the Base64 encoding with a built-in Windows command by following the example here: https://getmusicbee.com/forum/index.php?topic=26318.0
Last Edit: August 28, 2018, 02:49:36 AM by sveakul

psychoadept

  • Global Moderator
  • Hero Member
  • *****
  • Posts: 10137
Nice write up, thanks!
MusicBee Wiki
Use & improve MusicBee's documentation!

Latest beta patch (3.4)
(Unzip and overwrite existing program files)