Page 1 of 2
VESPA output in 2 columns
Posted: Sat May 08, 2010 7:52 pm
by jayt75
I'm using a script to play mp3 sermons for a church web site. The script takes MP3's found in a directory or sub directories and out puts them to a page and plays them with Yahoo's media player. You can read more about it here:
http://vespa.willinger.cc
I want the output to be in column format 2 maybe 3 (about 30 mp3's per column). It currently outputs to 1 column. I added the code from the file below. Thanks for any help.
Code: Select all
<?php
// VESPA outputs a single MP3s
$filearray = array();
$handle = opendir($absolute_dir);
while (false !== ($file = readdir($handle))) {
if ($file == "." OR $file == "..") { continue; } // VESPA does not want the root or parent directory
if (strstr($file, ".mp3") OR strstr($file, ".MP3")) array_push($filearray,$file); // VESPA pushes the files into an array
}
natcasesort($filearray);
foreach ($filearray as $file) {
//Yahoo's Media Player requires an absolute Web-URL
echo "<div class=\"singlelink\"><a href=\"http://".$domain.$webdir.$weburl."/".$file."\">".$file."</a>";
// VESPA reads the MP3 text file if available
if (strstr($file, ".mp3")) { $mp3textfile = ereg_replace(".mp3", $replacement, $file); }
else { $mp3textfile = ereg_replace(".MP3", $replacement, $file); }
$mp3 = $absolute_dir . "/" . $mp3textfile . ".txt";
if (file_exists($mp3)) {
echo "<div class=\"mp3text\">";
$mp3text = fopen($mp3,"r");
if ($mp3text) {
while(!feof($mp3text)) {
$text = fgets($mp3text);
echo $text;
}
fclose($mp3text);
}
echo "</div>";
}
echo "</div>";
}
echo "</div>";
closedir($handle);
?>
Re: VESPA output in 2 columns
Posted: Mon May 10, 2010 4:49 pm
by mecha_godzilla
I'm not sure what level your PHP knowledge is at so I'll make a couple of suggestions first:
1. The layout is using <div> tags, so you'll need to make sure you've created a style setting each for your left and right columns. You'll probably need to use the float value in your CSS to make sure the right column appears next to the left column rather than underneath it. You also need to use the clear value as well for anything that need to appear beneath the columns.
2. You need a counter in your script so that it knows when it's generated the left column (so it can then generate the code for the right column) and then reset this so it goes back to generate the left column again. This approach works with tables because you generate a set of <tr></tr> tags once and as many <td></td> tags as you need, but I would suggest that to do this with <div> tags would be sub-optimal - what you really want to do is generate a <div> for the left column, a <div> for the right column, then fill up each column depending on how many MP3s you have, otherwise you end up with 30 lots of <div> tags in your page.
HTH,
Mecha Godzilla
Re: VESPA output in 2 columns
Posted: Mon May 10, 2010 8:29 pm
by jayt75
mecha_godzilla,
Thanks for your comment. I understand the CSS and divs but not very much on php. Lets say I named the left div (mp3_left) and the right div (mp3_right). How do I incorporate the counter in my script to work with this?
Re: VESPA output in 2 columns
Posted: Tue May 11, 2010 6:02 pm
by mecha_godzilla
As using <div> tags will be more complicated (for the reasons that have already been detailed) I've put together a sample script to show you how it would work with tables. It's probably a little crude (bearing in mind it's been written in 5 minutes) but it illustrates the concept:
Code: Select all
<?php
$music_array = array(
1 => array(array(Name => "Beethoven", File => "beethoven.mp3")),
2 => array(array(Name => "Frescobaldi", File => "frescobaldi.mpg")),
3 => array(array(Name => "Couperin", File => "couperin.mp3"))
);
$how_many_files = count($music_array,0);
$counter = 0;
// don't run this part of the script if there are no values in the array
if ($how_many_files > 0) {
echo '<table>';
for ($row = 1; $row <= $how_many_files; $row++) {
foreach($music_array[$row] as $key => $value) {
if ($counter == 0) {
echo '<tr>';
echo '<td bgcolor="#FF0000">';
echo '<a href="' . $value['File'] . '">' . $value['Name'] . '</a><br />';
echo '</td>';
$counter = 1;
} else {
echo '<td bgcolor="#00FF00">';
echo '<a href="' . $value['File'] . '">' . $value['Name'] . '</a><br />';
echo '</td>';
echo '</tr>';
$counter = 0;
}
}
}
// use the modulo operator to see whether the number is odd or even
// will return 0 if even, will return 1 if odd
if (($how_many_files % 2) == 1) {
echo '<td bgcolor="#0000FF">';
echo ' ';
echo '</td>';
echo '</tr>';
}
echo '</table>';
}
?>
That should be a useful starting point, but if you need me to actually write the script for you then I'll forward you my PayPal details
Regards,
M_G
Re: VESPA output in 2 columns
Posted: Tue May 11, 2010 6:07 pm
by John Cartwright
You can accomplish this with CSS alone. Something along the lines of,
Code: Select all
foreach ($foo as $bar) {
echo '<div style="float: left; width: 49%;">Foobar</div>';
}
echo '<div style="clear: both;"></div>'; //clean up floats
will generate two column rows. You can adjust the width % if you need more columns.
Re: VESPA output in 2 columns
Posted: Wed May 12, 2010 8:15 am
by jayt75
Thanks Mecha for your help. I will contact you if I need further help.
John, I didn't think it could be done with CSS... I will definetly give this a try first.
Re: VESPA output in 2 columns
Posted: Wed May 12, 2010 3:52 pm
by mecha_godzilla
jayt75 wrote:I didn't think it could be done with CSS... I will definetly give this a try first.
That CSS example should work but it is (for me at least) a little bit counter-intuitive because it wasn't immediately obvious why it would only generate 2 columns. This approach will work with <div> tags but you end up with as many divs as you do results - I'm not sure how optimal this is as opposed to just populating two divs next to each other. Thinking about it, what you'd need to do is get the total number of results, divide it by two and use a counter variable to generate the first <div> tag, then the code for half of the results, then the first </div> tag, then repeat for the other column.
BTW the "send me the money if you want the solution" was just mischief-making on my part, if you get really stuck I'll try and sort some working code out for you when I have a moment.
M_G
Re: VESPA output in 2 columns
Posted: Wed May 12, 2010 11:11 pm
by jayt75
M_G
I'm trying to learn a little php. I'll play around with the code more this weekend because it's not quite working like I want it to. I'm running out of time though because the Army is sending me back to Iraq for a year the end of June. I want to get the church website posted before I leave though

I placed all the code I'm gonna be playing around with this weekend below. I plan to move the css to an external file when its complete. For anyone who is just joining this post here is the breakdown of what I'm trying to accomplish... now with css and a php count variable. Any input is greatly appreciated
I'm using a script to play mp3 sermons for a church web site. The script takes MP3's found in a directory or sub directories and out puts them to a page and plays them with Yahoo's media player. You can read more about it here:
http://vespa.willinger.cc
I want the output to be in column format 2 maybe 3 (about 30 mp3's per column). It currently outputs to 1 column. I added the code from the file below. Thanks for any help.
The complete php code I am trying to conquer
Code: Select all
<?php
// VESPA needs to figure some things out first
$weburl = $HTTP_GET_VARS["dir"]; // VESPA reads the URI
$weburl = "/" . $weburl;
$replacement = '';
$getcwd = getcwd(); // VESPA checks out the working directory
if ($weburl != '') { $weburl = str_replace( "/..", $replacement, $weburl); } // VESPA purges the URI from '/..' to ensure security
if (empty($absolute_dir)) { $absolute_dir = $getcwd; } // If no value was handed over the directory is set
$absolute_dir = realpath($getcwd . $weburl); // Absolute path without '/..' to the MP3s is built
$weburl = ereg_replace($getcwd, $replacement, $absolute_dir); // VESPA extracts the Web-URL from the absolute path to have a nice URL to pass on
$dir = opendir($absolute_dir); // VESPA opens the absolute directory
$domain = $_SERVER['SERVER_NAME']; // The domain is found
$maindirectory = $_SERVER['PHP_SELF'];
$scriptplace = $_SERVER['SCRIPT_FILENAME']; // The name of this script is found
$scriptname = ereg_replace($getcwd, $replacement, $scriptplace); // The exact name of this script is extracted
$webdir = ereg_replace($scriptname, $replacement, $maindirectory); // The name of the web directory containing this script is extracted
$testrun = $absolute_dir . $scriptname; // VESPA builds a possible location for this script for a later check whether true
$basename = basename($absolute_dir);
$parent_weburl = ereg_replace($basename, $replacement, $weburl); // VESPA builds URI for parent directory
// HTML starts here
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Sermons</title>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="MP3 files" />
<meta name="keywords" content="" />
<meta name="robots" content="index,follow" />
<script type="text/javascript" src="http://mediaplayer.yahoo.com/js"></script>
<style type="text/css">
body {
font-family: Tahoma, Arial, Sans Serif;
font-size: 14px;
background-color: #ffffff;
}
a {
color: #003300;
text-decoration: none;
}
a.hover, a.active {
text-decoration: underline;
}
h1 {
font-size: 16px;
}
h2, h3, h4, h5, h6 {
font-size: 14px;
}
.main {
width: 792px;
}
.header {
border: 1px solid #ECFFD1;
background: #ECFFD1;
padding: 10px;
margin-bottom: 16px;
}
.directories {
border: 1px solid #ECFFD1;
background: #ECFFD1;
padding: 12px;
float: left;
width: 170px;
margin-bottom: 20px;
overflow: hidden;
}
.content {
width: 586px;
float: left;
margin-bottom: 20px;
margin-left: 10px;
}
.indextext {
border: 1px solid #ECFFD1;
padding: 12px;
clear: both;
margin-bottom: 10px;
}
.mp3s {
border: 1px solid #ECFFD1;
padding: 12px;
clear: both;
}
.singlelink {
margin-bottom: 12px;
}
.mp3text {
margin-left: 20px;
font-size: 12px;
}
.footer {
border: 1px solid #ECFFD1;
padding: 4px;
clear: both;
width: 782px;
font-size: 10px;
text-align: center;
}
li {
margin-left: -10px;
margin-bottom: 10px;
}
img { border: 0px; }
</style>
</head>
<body>
<div class="main">
<div class="content">
<?php
$index = $absolute_dir . "/index.txt"; // VESPA reads the index.txt if available
if (file_exists($index)) {
echo "<div class=\"indextext\">";
$indextext = fopen($index,"r");
if ($indextext) {
while(!feof($indextext)) {
$text = fgets($indextext);
echo "$text";
}
fclose($indextext);
}
echo "</div>";
}
?>
<div class="mp3s">
<?php
// VESPA outputs a single MP3s
$filearray = array();
$handle = opendir($absolute_dir);
while (false !== ($file = readdir($handle))) {
if ($file == "." OR $file == "..") { continue; } // VESPA does not want the root or parent directory
if (strstr($file, ".mp3") OR strstr($file, ".MP3")) array_push($filearray,$file); // VESPA pushes the files into an array
}
natcasesort($filearray);
foreach ($filearray as $file) {
//Yahoo's Media Player requires an absolute Web-URL
echo "<div class=\"singlelink\"><a href=\"http://".$domain.$webdir.$weburl."/".$file."\">".$file."</a>";
// VESPA reads the MP3 text file if available
if (strstr($file, ".mp3")) { $mp3textfile = ereg_replace(".mp3", $replacement, $file); }
else { $mp3textfile = ereg_replace(".MP3", $replacement, $file); }
$mp3 = $absolute_dir . "/" . $mp3textfile . ".txt";
if (file_exists($mp3)) {
echo "<div class=\"mp3text\">";
$mp3text = fopen($mp3,"r");
if ($mp3text) {
while(!feof($mp3text)) {
$text = fgets($mp3text);
echo $text;
}
fclose($mp3text);
}
echo "</div>";
}
echo "</div>";
}
echo "</div>";
closedir($handle);
?>
</div>
</div>
</body>
</html>
Thanks again everyone for your support!!!
Re: VESPA output in 2 columns
Posted: Thu May 13, 2010 3:33 pm
by mecha_godzilla
I had a look at the Vespa code and it seems to work quite nicely. As John mentioned, you could pretty much do what you want just with CSS - all you need to do is add the
float: left; width: 49%; code that he suggested into the relevant style rule (either .singlelink or .mp3text from the looks of it.) You then just need PHP to generate some code that looks like:
after it's created the columns, just so that any text that needs to appear underneath the columns isn't 'floated' to the right of them (this is usually more of a problem if you have a very wide, fixed-width <div> because you sometimes have to set up the browser window size to be
very wide before the problem is apparent).
Good luck anyway - the help's here if you need it. Remember, the simplest solution is usually the best one!
M_G
Re: VESPA output in 2 columns
Posted: Sat May 15, 2010 7:33 pm
by jayt75
So I thought I was going to figure it out.

I don't have a clue where to start with php. Based off what John and Mecha... can someone help me figure out where to put the code in the php below
Code: Select all
<?php
// VESPA needs to figure some things out first
$weburl = $HTTP_GET_VARS["dir"]; // VESPA reads the URI
$weburl = "/" . $weburl;
$replacement = '';
$getcwd = getcwd(); // VESPA checks out the working directory
if ($weburl != '') { $weburl = str_replace( "/..", $replacement, $weburl); } // VESPA purges the URI from '/..' to ensure security
if (empty($absolute_dir)) { $absolute_dir = $getcwd; } // If no value was handed over the directory is set
$absolute_dir = realpath($getcwd . $weburl); // Absolute path without '/..' to the MP3s is built
$weburl = ereg_replace($getcwd, $replacement, $absolute_dir); // VESPA extracts the Web-URL from the absolute path to have a nice URL to pass on
$dir = opendir($absolute_dir); // VESPA opens the absolute directory
$domain = $_SERVER['SERVER_NAME']; // The domain is found
$maindirectory = $_SERVER['PHP_SELF'];
$scriptplace = $_SERVER['SCRIPT_FILENAME']; // The name of this script is found
$scriptname = ereg_replace($getcwd, $replacement, $scriptplace); // The exact name of this script is extracted
$webdir = ereg_replace($scriptname, $replacement, $maindirectory); // The name of the web directory containing this script is extracted
$testrun = $absolute_dir . $scriptname; // VESPA builds a possible location for this script for a later check whether true
$basename = basename($absolute_dir);
$parent_weburl = ereg_replace($basename, $replacement, $weburl); // VESPA builds URI for parent directory
// HTML starts here
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>VESPA</title>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="MP3 files" />
<meta name="keywords" content="" />
<meta name="robots" content="index,follow" />
<script type="text/javascript" src="http://mediaplayer.yahoo.com/js"></script>
<style type="text/css">
body {
font-family: Tahoma, Arial, Sans Serif;
font-size: 14px;
background-color: #ffffff;
}
a {
color: #003300;
text-decoration: none;
}
a.hover, a.active {
text-decoration: underline;
}
h1 {
font-size: 16px;
}
h2, h3, h4, h5, h6 {
font-size: 14px;
}
.main {
width: 792px;
}
.header {
border: 1px solid #ECFFD1;
background: #ECFFD1;
padding: 10px;
margin-bottom: 16px;
}
.directories {
border: 1px solid #ECFFD1;
background: #ECFFD1;
padding: 12px;
float: left;
width: 170px;
margin-bottom: 20px;
overflow: hidden;
}
.content {
width: 586px;
float: left;
margin-bottom: 20px;
margin-left: 10px;
}
.indextext {
border: 1px solid #ECFFD1;
padding: 12px;
clear: both;
margin-bottom: 10px;
}
.mp3s {
border: 1px solid #ECFFD1;
padding: 12px;
clear: both;
}
.singlelink {
margin-bottom: 12px;
}
.mp3text {
margin-left: 20px;
font-size: 12px;
}
.footer {
border: 1px solid #ECFFD1;
padding: 4px;
clear: both;
width: 782px;
font-size: 10px;
text-align: center;
}
li {
margin-left: -10px;
margin-bottom: 10px;
}
img { border: 0px; }
</style>
</head>
<body>
<div class="main">
<div class="header">
<h1><?php echo basename($absolute_dir) // VESPA outputs the current directory as name ?></h1>
</div>
<div class="directories"><ul>
<?php
$dirarray = array();
while ($entry = readdir($dir)) { // VESPA starts running through all files in the given directory
if ($entry == ".") { // VESPA doesn't want the root
continue;
}
$scan_dir = $absolute_dir . "/" . $entry; // VESPA builds absolute path for scanning
if(is_dir($scan_dir)) array_push($dirarray,$entry);
}
natcasesort($dirarray);
foreach ($dirarray as $entry) { //VESPA figures out what to do with this particular directory
if (($entry == "..") AND (file_exists( $testrun ) == '1')) { echo ""; }
elseif ($entry == "..") { echo "<li><a href=\"" . $PHP_SELF . "?dir=" . $parent_weburl . "\">" . $entry . "</a></li>\n"; }
else { echo "<li><a href=\"" . $PHP_SELF . "?dir=" . $weburl . "/" . $entry . "\">" . $entry . "</a></li>\n"; }
}
closedir($dir);
?>
</ul></div>
<div class="content">
<?php
$index = $absolute_dir . "/index.txt"; // VESPA reads the index.txt if available
if (file_exists($index)) {
echo "<div class=\"indextext\">";
$indextext = fopen($index,"r");
if ($indextext) {
while(!feof($indextext)) {
$text = fgets($indextext);
echo "$text";
}
fclose($indextext);
}
echo "</div>";
}
?>
<div class="mp3s">
<?php
// VESPA outputs a single MP3s
$filearray = array();
$handle = opendir($absolute_dir);
while (false !== ($file = readdir($handle))) {
if ($file == "." OR $file == "..") { continue; } // VESPA does not want the root or parent directory
if (strstr($file, ".mp3") OR strstr($file, ".MP3")) array_push($filearray,$file); // VESPA pushes the files into an array
}
natcasesort($filearray);
foreach ($filearray as $file) {
//Yahoo's Media Player requires an absolute Web-URL
echo "<div class=\"singlelink\"><a href=\"http://".$domain.$webdir.$weburl."/".$file."\">".$file."</a>";
// VESPA reads the MP3 text file if available
if (strstr($file, ".mp3")) { $mp3textfile = ereg_replace(".mp3", $replacement, $file); }
else { $mp3textfile = ereg_replace(".MP3", $replacement, $file); }
$mp3 = $absolute_dir . "/" . $mp3textfile . ".txt";
if (file_exists($mp3)) {
echo "<div class=\"mp3text\">";
$mp3text = fopen($mp3,"r");
if ($mp3text) {
while(!feof($mp3text)) {
$text = fgets($mp3text);
echo $text;
}
fclose($mp3text);
}
echo "</div>";
}
echo "</div>";
}
echo "</div>";
closedir($handle);
?>
</div>
</div>
<div class="footer">Powered by <a href="http://vespa.willinger.cc">VESPA</a></div>
</body>
</html>
Re: VESPA output in 2 columns
Posted: Sun May 16, 2010 4:32 pm
by mecha_godzilla
Ok - I've used the script from the VESPA site as a starting point to get the script working. I should point out that I didn't have to make any changes to the PHP code, just the style settings.
Create a new file called
index.php then copy-and-paste the following code into it:
Code: Select all
<?php
/****************************************************************************
VESPA 0.7.3 - VEry Simple Parser for directories with Audio files - 15.05.2010
by Dieter Willinger - http://vespa.willinger.cc
****************************************************************************/
// VESPA needs to figure some things out first
$weburl = $HTTP_GET_VARS["dir"]; // VESPA reads the URI
$weburl = "/" . $weburl;
$replacement = '';
$getcwd = getcwd(); // VESPA checks out the working directory
if ($weburl != '') { $weburl = str_replace( "/..", $replacement, $weburl); } // VESPA purges the URI from '/..' to ensure security
if (empty($absolute_dir)) { $absolute_dir = $getcwd; } // If no value was handed over the directory is set
$absolute_dir = realpath($getcwd . $weburl); // Absolute path without '/..' to the MP3s is built
$weburl = str_replace($getcwd, $replacement, $absolute_dir); // VESPA extracts the Web-URL from the absolute path to have a nice URL to pass on
$dir = opendir($absolute_dir); // VESPA opens the absolute directory
$domain = $_SERVER['SERVER_NAME']; // The domain is found
$maindirectory = $_SERVER['PHP_SELF'];
$scriptplace = $_SERVER['SCRIPT_FILENAME']; // The name of this script is found
$scriptname = str_replace($getcwd, $replacement, $scriptplace); // The exact name of this script is extracted
$webdir = str_replace($scriptname, $replacement, $maindirectory); // The name of the web directory containing this script is extracted
$testrun = $absolute_dir . $scriptname; // VESPA builds a possible location for this script for a later check whether true
$basename = basename($absolute_dir);
$parent_weburl = str_replace($basename, $replacement, $weburl); // VESPA builds URI for parent directory
// HTML starts here
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>VESPA</title>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="MP3 files" />
<meta name="keywords" content="VESPA Script MP3 Audio" />
<meta name="robots" content="index,follow" />
<script type="text/javascript" src="http://mediaplayer.yahoo.com/js"></script>
<link href="stylesheet.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="main">
<div class="header">
<h1><?php echo basename($absolute_dir) // VESPA outputs the current directory as name ?></h1>
</div>
<div class="directories"><ul>
<?php
$dirarray = array();
while ($entry = readdir($dir)) { // VESPA starts running through all files in the given directory
if ($entry == ".") { // VESPA doesn't want the root
continue;
}
$scan_dir = $absolute_dir . "/" . $entry; // VESPA builds absolute path for scanning
if(is_dir($scan_dir)) array_push($dirarray,$entry);
}
natcasesort($dirarray);
foreach ($dirarray as $entry) { //VESPA figures out what to do with this particular directory
if (($entry == "..") AND (file_exists( $testrun ) == '1')) { echo ""; }
elseif ($entry == "..") { echo "<li><a href=\"" . $PHP_SELF . "?dir=" . $parent_weburl . "\">" . $entry . "</a></li>\n"; }
else { echo "<li><a href=\"" . $PHP_SELF . "?dir=" . $weburl . "/" . $entry . "\">" . $entry . "</a></li>\n"; }
}
closedir($dir);
?>
</ul></div>
<div class="content">
<?php
$index = $absolute_dir . "/index.txt"; // VESPA reads the index.txt if available
if (file_exists($index)) {
echo "<div class=\"indextext\">";
$indextext = fopen($index,"r");
if ($indextext) {
while(!feof($indextext)) {
$text = fgets($indextext);
echo "$text";
}
fclose($indextext);
}
echo "</div>";
}
?>
<div class="mp3s">
<?php
// VESPA outputs a single MP3s
$filearray = array();
$handle = opendir($absolute_dir);
while (false !== ($file = readdir($handle))) {
if ($file == "." OR $file == "..") { continue; } // VESPA does not want the root or parent directory
if (strstr($file, ".mp3") OR strstr($file, ".MP3")) array_push($filearray,$file); // VESPA pushes the files into an array
}
natcasesort($filearray);
foreach ($filearray as $file) {
//Yahoo's Media Player requires an absolute Web-URL
echo "<div class=\"singlelink\"><a href=\"http://".$domain.$webdir.$weburl."/".$file."\">".$file."</a>";
// VESPA reads the MP3 text file if available
if (strstr($file, ".mp3")) { $mp3textfile = str_replace(".mp3", $replacement, $file); }
else { $mp3textfile = str_replace(".MP3", $replacement, $file); }
$mp3 = $absolute_dir . "/" . $mp3textfile . ".txt";
if (file_exists($mp3)) {
echo "<div class=\"mp3text\">";
$mp3text = fopen($mp3,"r");
if ($mp3text) {
while(!feof($mp3text)) {
$text = fgets($mp3text);
echo $text;
}
fclose($mp3text);
}
echo "</div>";
}
echo "</div>";
}
echo "</div>";
closedir($handle);
?>
</div>
</div>
<div class="footer">Powered by <a href="http://vespa.willinger.cc">VESPA</a></div>
</body>
</html>
then create a new stylesheet called - wait for it -
stylesheet.css and paste the following in to it:
Code: Select all
body {
font-family: Tahoma, Arial, Sans Serif;
font-size: 14px;
background-color: #ffffff;
}
a {
color: #003300;
text-decoration: none;
}
a.hover, a.active {
text-decoration: underline;
}
h1 {
font-size: 16px;
}
h2, h3, h4, h5, h6 {
font-size: 14px;
}
.main {
width: 792px;
}
.header {
border: 1px solid #ECFFD1;
background: #ECFFD1;
padding: 10px;
margin-bottom: 16px;
}
.directories {
border: 1px solid #ECFFD1;
background: #ECFFD1;
padding: 12px;
float: left;
width: 170px;
margin-bottom: 20px;
overflow: hidden;
}
.content {
width: 586px;
float: left;
margin-bottom: 20px;
margin-left: 10px;
}
.indextext {
border: 1px solid #ECFFD1;
padding: 12px;
clear: both;
margin-bottom: 10px;
}
.mp3s {
float: left;
border: 1px solid #ff0000;
padding: 12px;
clear: both;
}
.singlelink {
margin-bottom: 12px;
float: left;
width: 49%;
}
.mp3text {
margin-left: 20px;
font-size: 12px;
}
.footer {
border: 1px solid #ECFFD1;
padding: 4px;
clear: both;
width: 782px;
font-size: 10px;
text-align: center;
}
li {
margin-left: -10px;
margin-bottom: 10px;
}
img {
border: 0px;
}
If you look at the stylesheet you'll see that the
float: and
width: settings are applied to the .singlelink class. I also had to add a
float: setting to the .mp3s class because it wasn't encapsulating the "singlelink" divs (which was obvious because the border didn't extend around all the filenames.) The .mp3s class already has a
clear: setting so you don't need to manually generate one.
With a bit of luck that should work for you! If you want to change the number of columns then you just need to change the
width: setting in the .singlelink class to match the number of columns (IE if you want two columns then the width of each is 49%, for three it's 33%, etc.)
M_G
Re: VESPA output in 2 columns
Posted: Sun May 16, 2010 10:28 pm
by jayt75
Mecha_godzilla,
Great! Thanks for the support!
Is there away to make the columns straight up and down on the 3rd or 4th column?
Once again, I really appreciate your support

Re: VESPA output in 2 columns
Posted: Mon May 17, 2010 3:58 pm
by mecha_godzilla
jayt75 wrote:Is there away to make the columns straight up and down on the 3rd or 4th column?
Sorry, I'm not sure what you mean by this - do you mean that you want to change the order of the files, or that you want to fill all the available space in the preceding columns IE if you have 19 files, then columns 1, 2 and 3 will have 5 files in them, while column 4 will have 4 files in it? If its the latter, the code that's been used won't help you because it's designed to put the files next to each other in a row, then when you have two files next to each other it moves down to the next row because the two <div> layers take up nearly 100% of the width and this forces the
float: tag to start a new 'row' beneath them. So you're not really creating a set of columns as such, because there's a <div> layer for every filename.
One thing that is obvious is that the sermons are out of sequence, but even if you change the filenames to reorder them then you need to bear in mind that they will appear from left-to-right rather than in a list as expected. There might be a way round this but it would probably involve finding some convoluted way of sorting the filenames array (e.g. with a three column layout, the first file is in array position 0, the second file is in array position 3, the third file is in array position 6, etc.)
M_G
Re: VESPA output in 2 columns
Posted: Mon May 17, 2010 6:27 pm
by jayt75
Oops.. meant to say 2nd, 3rd, and 4th column. Like the image below (just not a repeat of row one like I did in the image

).

- sermons.jpg (17.13 KiB) Viewed 582 times
I do plan on renaming them to make them go in order eventualy.
Could I order them by date? then AM, then PM??? I will use 17-May-2010 AM.mp3 (for todays date)... Thank you M_G... couldn't have done this without your knowledge.
Re: VESPA output in 2 columns
Posted: Tue May 18, 2010 5:51 pm
by mecha_godzilla
You can order the files by date, but you have to be careful how you name them. Say I've got three files, and I name them
1-January-2010
21-April-2010
17-May-2010
then the sort order is actually
1-January-2010
17-May-2010
21-April-2010
If two filenames start with the same numbers
21-January-2010
21-April-2010
then the sort order will be
21-April-2010
21-January-2010
The conventional way to ensure that files are ordered correctly by date (but which is not very intuitive) is to use a format like 2010-01-01 (YYYY-MM-DD). As I mentioned in my last post, even if you rename the files and sort them then they won't necessarily appear ordered - this is because if you reverse the order (newest files first) then the newest file would appear in column 1, the second newest would appear in column 2, etc. That might be close enough for what you want but it doesn't quite fit in with how I would expect the ordering to work (I would expect the files to be listed sequentially underneath each other in the first column, then when this column has been populated I would expect the list to carry over to the next one.)
If you think this approach is what you want then we either need to write some new PHP code or find a clever way to sort the filenames array so the dates are reordered based on where they need to appear in the 'grid'.
BTW Just a quick point about the site's appearance - in both of my browsers (Safari and Firefox) the border around the filenames is getting cut-off on the right-hand side. Unless this is what you intended, you might want to just decrease the width of the <iframe> a little.
Regards,
M_G