# Html Export Configuration design by Sasori

**URL:** https://community.mp3tag.de/t/html-export-configuration-design-by-sasori/8421
**Category:** Export
**Created:** [June 9, 2009, 1:35am UTC](https://community.mp3tag.de/t/html-export-configuration-design-by-sasori/8421 "2009-06-09T01:35:33Z")
**Posts on this page:** 8
**Page:** 1

<div class="post-metadata">

### Author: ![lisbonsasori](https://community.mp3tag.de/letter_avatar_proxy/v4/letter/l/a6a055/32.png) [@lisbonsasori](https://community.mp3tag.de/u/lisbonsasori)
#### Post date: [June 9, 2009, 1:35am UTC](https://community.mp3tag.de/t/html-export-configuration-design-by-sasori/8421/1 "2009-06-09T01:35:33Z")

</div>

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](http://mp3tagexport.host56.com/html_sasori_en_WithoutPlayButton.html)

**Without Covers And With Play Music Button**  
[Preview](http://mp3tagexport.host56.com/html_sasori_en_WithPlayButton.html)

**With Covers And Without Play Music Button**  
[Preview](http://mp3tagexport.host56.com/html_sasori_en_covers_WithoutPlayButton.html)

**With Covers And With Play Music Button**  
[Preview](http://mp3tagexport.host56.com/html_sasori_en_covers_WithPlayButton.html)

Download Links:

**English Version**  
[Download](http://mp3tagexport.host56.com/sasori_en.rar)

**Portuguese Version**  
[Download](http://mp3tagexport.host56.com/sasori_pt.rar)

---

<div class="post-metadata">

### Author: ![MisterBig2000](https://community.mp3tag.de/letter_avatar_proxy/v4/letter/m/4af34b/32.png) [@MisterBig2000](https://community.mp3tag.de/u/MisterBig2000)
#### Post date: [March 3, 2011, 6:07pm UTC](https://community.mp3tag.de/t/html-export-configuration-design-by-sasori/8421/2 "2011-03-03T18:07:17Z")

</div>

It looks better if you:

Replace: &nbsp  
with: &nbsp;

---

<div class="post-metadata">

### Author: ![tiggerle](https://community.mp3tag.de/letter_avatar_proxy/v4/letter/t/c77e96/32.png) [@tiggerle](https://community.mp3tag.de/u/tiggerle)
#### Post date: [March 7, 2011, 8:24pm UTC](https://community.mp3tag.de/t/html-export-configuration-design-by-sasori/8421/3 "2011-03-07T20:24:08Z")

</div>

Very nice and work! Congrats!! 🙂

---

<div class="post-metadata">

### Author: ![Beluna](https://community.mp3tag.de/letter_avatar_proxy/v4/letter/b/ed655f/32.png) [@Beluna](https://community.mp3tag.de/u/Beluna)
#### Post date: [June 24, 2011, 1:00pm UTC](https://community.mp3tag.de/t/html-export-configuration-design-by-sasori/8421/4 "2011-06-24T13:00:55Z")

</div>

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...

---

<div class="post-metadata">

### Author: ![lisbonsasori](https://community.mp3tag.de/letter_avatar_proxy/v4/letter/l/a6a055/32.png) [@lisbonsasori](https://community.mp3tag.de/u/lisbonsasori)
#### Post date: [July 6, 2011, 5:40pm UTC](https://community.mp3tag.de/t/html-export-configuration-design-by-sasori/8421/5 "2011-07-06T17:40:14Z")

</div>

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!

---

<div class="post-metadata">

### Author: ![BlueScreenJunky](https://community.mp3tag.de/letter_avatar_proxy/v4/letter/b/d07c76/32.png) [@BlueScreenJunky](https://community.mp3tag.de/u/BlueScreenJunky)
#### Post date: [August 28, 2011, 11:02am UTC](https://community.mp3tag.de/t/html-export-configuration-design-by-sasori/8421/6 "2011-08-28T11:02:19Z")

</div>

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 

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

- The noshade attribute of the 

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>

```

---

<div class="post-metadata">

### Author: ![holzboa](https://community.mp3tag.de/letter_avatar_proxy/v4/letter/h/c2a13f/32.png) [@holzboa](https://community.mp3tag.de/u/holzboa)
#### Post date: [November 27, 2011, 10:24am UTC](https://community.mp3tag.de/t/html-export-configuration-design-by-sasori/8421/7 "2011-11-27T10:24:47Z")

</div>

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

---

<div class="post-metadata">

### Author: ![tawulf](https://community.mp3tag.de/letter_avatar_proxy/v4/letter/t/7c8e57/32.png) [@tawulf](https://community.mp3tag.de/u/tawulf)
#### Post date: [May 31, 2012, 3:13pm UTC](https://community.mp3tag.de/t/html-export-configuration-design-by-sasori/8421/8 "2012-05-31T15:13:15Z")

</div>

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