Html Export Configuration design by Sasori

Development Export
1

Hello!

Thank you Mr. Florian Heidenreich, for replying to my email.
As I said, I created a html export configuration based on the standard one to better suit my needs.
I have many albums with multiple artists in them (compilations) and so I needed something else, a bit different , and in portuguese naturally. (I have made an english version too.)
Because maybe someone else also needs something like this I decided to post it in the Mp3tag forum.

Instructions:

1 - After you create the html, you can move it anywhere in your computer and it will always work (providing you do not move the mp3 files location of course).

2 - For the templates with album covers to work, all you need to do is to put an image file called "cover.jpg" in the same folder where the album mp3 files are. The image size will be adjusted to the html. The templates with cover images are only going to work if you have different album files in different folders.

3 - Regarding the templates with Play Music button, when you click the button that song will play in your default mp3 media player.

I hope you like it.
Please feel free to post here and ask for any alterations you might need or you think are necessary.

Best regards,
Sasori

(P.S.: Do not click on the preview Play Music buttons. The mp3 files are not on-line. You will get an error message.)

Without Covers And Without Play Music Button
Preview

Without Covers And With Play Music Button
Preview

With Covers And Without Play Music Button
Preview

With Covers And With Play Music Button
Preview

Download Links:

English Version
Download

Portuguese Version
Download

2

It looks better if you:

Replace: &nbsp
with:  

3

Very nice and work! Congrats!! :slight_smile:

4

2 questions:

  1. No image shows in the script. My image is stored in the tag. shows in Mag Editor, but not in the Html.

The size is 1280 x 800, not sure if that has anything to do with it.

  1. My Credit fill does not populate... just shows with blank info.

any solutions.

I notice most, IDv2 info doesn't show in the tags... is it something I'm not adding...

5

Hello. Sorry for the delay in the reply, I have been away for a while.

Regarding your question 1, for the script to work you must follow topic 2 from my set of instructions:

(2 - For the templates with album covers to work, all you need to do is to put an image file called "cover.jpg" in the same folder where the album mp3 files are. The image size will be adjusted to the html. The templates with cover images are only going to work if you have different album files in different folders.)

This implies you must have an image called cover.jpg in every album folder. And by every album folder I mean every folder where the same album mp3 files are.

The best way to make the script work perfectly is to have your library organized like this:

C:...\Music

         \Album1
                \cover.jpg
                \song1.mp3
                \song2.mp3
                …
         \Album2
                \cover.jpg
                \song1.mp3
                \song2.mp3
                …
         \Album3
                \cover.jpg
                \song1.mp3
                \song2.mp3
                …

Regarding your question 2, you will need to be more specific. To be quite honest, I did not understand what you asked me… Sorry!

6

Hi, congratulations on your string. If I may suggest a few modifications, here are a few things I think would make the html cleaner (I'm using the Without Covers And Without Play Music Button one):

  • You set the body background to #fff in the CSS and then to ##df7000 in the body tag. You could just set it to the right color in the CSS in the first place I think.

  • is deprecated in xhtml, so since your page is declared as xhtml you should'nt use it. Besides, it's much simpler to just use CSS : just change the color of h2 and li to white in the CSS and you don't need the element anymore. Besides, since it only appears once in the CSS instead of once for each album it will make the page smaller.

-The part where you use and unordered list with only one

  • and then use
    to put each piece of information on a new line makes no sense to me... Why not just use the unordered list as it's meant to ?

    • Why use

      ? the tag is already supposed to be used as a title, and since you don't use anywhere else, it's much simpler to just use it without a class, and just specify its style in the CSS. And get rid of the bgcolor attribute while you're at it :wink:

    • You use $if($odd(%_counter%), class="odd",) 6 times in order to set the class of each

      . It would be shorter and faster to use it only once on the to affect the whole line.

    • The noshade attribute of the

      element is deprecated too. And once again I think it's just more simple to set the style of your
      once and for all in the CSS. hr {height:2px; border-width:0; color:gray; background-color: #000} should look about the same as what you're using.

      • So here's the file with those modifications :

      $filename(html, utf-8)<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<title>My Music Library</title>
	<style type="text/css"><!--
  	body {font-family: Arial, Tahoma, Verdana, sans-serif; font-size: 12pt; background-color: #DF7000}
    h2 {color: #fff}
		h1 {font-family: Verdana, Tahoma, Arial, sans-serif; font-size: 14pt; color: #000}
    hr {height:2px; border-width:0; color:gray; background-color: #000}
    th {font-weight: bold; padding: 7px; margin: 0px; color: #000;}
    ul {color : #fff; font-weight: bold; font-size: 9.5pt; list-style: none}
		table, tr, td {font-family: Arial, Tahoma, Verdana, sans-serif; font-size: 9pt; color: #000;}
		a:link, a:visited, a:active {text-decoration: none; color: #03f;}
		a:hover {text-decoration: none; color: #f03;}
		.odd {background-color: #ccc;}
	--></style>
</head>
<body>
	<h1>MY MUSIC LIBRARY</h1>
	<p>Created on %_date%</p>

	<table>
$loop(%album%)
		<tr>
		<td colspan="6"><hr></td>
		</tr>
		<tr>
		<td bgcolor="#000000" align="left" colspan="6"><h2><p>&nbsp;Album: %album%</p></h2><p align="right">
  		<ul><li>Year: %year%</li><li>Genre: %genre%</li><li>Total Tracks: %_total_files%</li><li>Total Length: %_total_time2%</li><li>Total Size: %_total_size%</li></ul>
    </td>
		</tr>
			<th align="left" bgcolor="#FFCC66">Artist</th>
			<th align="center" bgcolor="#FFCC66">#</th>
			<th align="left" bgcolor="#FFCC66">Title</th>
			<th align="center" bgcolor="#FFCC66">Length</th>
			<th align="center" bgcolor="#FFCC66">Bitrate (Kbps)</th>

			<th class="title" align="center" bgcolor="#FFCC66">Size</th>
		$loop(%track%)
		<tr $if($odd(%_counter%), class="odd",)>
			<td><b>&nbsp;%artist%</b></td>
			<td align="center"><b>%track%</b></td>
			<td><b>&nbsp;%title%</b></td>
			<td align="center">%_length%</td>
			<td align="center">%_bitrate%</td>
			<td align="center">%_file_size_mb% MB</td>
		</tr>
		$loopend()
$loopend()

	</table>
	

	<hr>
	<div align="center">
	<tr>
	Generated with <b>%_app%</b> - the universal Tag Editor  (<a href="http://www.mp3tag.de/en/" title="Mp3tag Website">www.mp3tag.de</a>)
	</tr>
	
<hr>
    • 7

    i have a cover.jpg in all my folders but covers won´t show up in the html file.
    otherwise looks beautiful

    8

    same here.
    it works for me with a little change, though. just change to this in line27:

    img src="file:///%_folderpath%

    ie you have to add this

    file:///

    to the src-attribute

    hth, thomas