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

sveakul

  • Hero Member
  • *****
  • Posts: 3285
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 "No Album Art" 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: March 13, 2025, 09:31:45 AM by sveakul

psychoadept

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

Latest patches
(Unzip and overwrite existing program files)

klh

  • Jr. Member
  • **
  • Posts: 24
Example B is still working in 2023.

If you're lazy and just looking for a decent image, here is a good one to use, 700x700 pixels:




a2a

  • Jr. Member
  • **
  • Posts: 116
Apologies for the resurrection.

This works successfully for playlist and library explorer, but not for "now playing": is there a way to accomplish the same outcome for "now playing" view without artwork?

Thank you  8)

sveakul

  • Hero Member
  • *****
  • Posts: 3285
Apologies for the resurrection.

This works successfully for playlist and library explorer, but not for "now playing": is there a way to accomplish the same outcome for "now playing" view without artwork?

Thank you  8)
Works just fine in the "Now Playing" panel--and in the "Track Information" one as well.  See the snips below from mine.  Have you added any plugin, etc. that might modify the skin and its panels?





sveakul

  • Hero Member
  • *****
  • Posts: 3285
<element id="NoArtwork">
base64 here
 </element>



You must have changed something else in the xml for the panels.

a2a

  • Jr. Member
  • **
  • Posts: 116
You must've been correct - I went back over and re-did the code changes, saved and applied: bingo!

It's looking great now. Thank you for your help with this  8)