VESPA output in 2 columns

PHP programming forum. Ask questions or help people concerning PHP code. Don't understand a function? Need help implementing a class? Don't understand a class? Here is where to ask. Remember to do your homework!

Moderator: General Moderators

jayt75
Forum Newbie
Posts: 8
Joined: Sat May 08, 2010 7:32 pm

VESPA output in 2 columns

Post 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);
?>
User avatar
mecha_godzilla
Forum Contributor
Posts: 375
Joined: Wed Apr 14, 2010 4:45 pm
Location: UK

Re: VESPA output in 2 columns

Post 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
jayt75
Forum Newbie
Posts: 8
Joined: Sat May 08, 2010 7:32 pm

Re: VESPA output in 2 columns

Post 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?
User avatar
mecha_godzilla
Forum Contributor
Posts: 375
Joined: Wed Apr 14, 2010 4:45 pm
Location: UK

Re: VESPA output in 2 columns

Post 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 '&nbsp';
      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
User avatar
John Cartwright
Site Admin
Posts: 11470
Joined: Tue Dec 23, 2003 2:10 am
Location: Toronto
Contact:

Re: VESPA output in 2 columns

Post 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.
jayt75
Forum Newbie
Posts: 8
Joined: Sat May 08, 2010 7:32 pm

Re: VESPA output in 2 columns

Post 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.
User avatar
mecha_godzilla
Forum Contributor
Posts: 375
Joined: Wed Apr 14, 2010 4:45 pm
Location: UK

Re: VESPA output in 2 columns

Post 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
jayt75
Forum Newbie
Posts: 8
Joined: Sat May 08, 2010 7:32 pm

Re: VESPA output in 2 columns

Post 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 :wink: 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 :D
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!!!
User avatar
mecha_godzilla
Forum Contributor
Posts: 375
Joined: Wed Apr 14, 2010 4:45 pm
Location: UK

Re: VESPA output in 2 columns

Post 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:

Code: Select all

<div style="clear: both;"></div>
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
jayt75
Forum Newbie
Posts: 8
Joined: Sat May 08, 2010 7:32 pm

Re: VESPA output in 2 columns

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

User avatar
mecha_godzilla
Forum Contributor
Posts: 375
Joined: Wed Apr 14, 2010 4:45 pm
Location: UK

Re: VESPA output in 2 columns

Post 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
jayt75
Forum Newbie
Posts: 8
Joined: Sat May 08, 2010 7:32 pm

Re: VESPA output in 2 columns

Post 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 :D
Last edited by jayt75 on Thu May 27, 2010 1:21 am, edited 1 time in total.
User avatar
mecha_godzilla
Forum Contributor
Posts: 375
Joined: Wed Apr 14, 2010 4:45 pm
Location: UK

Re: VESPA output in 2 columns

Post 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
jayt75
Forum Newbie
Posts: 8
Joined: Sat May 08, 2010 7:32 pm

Re: VESPA output in 2 columns

Post 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 :D ).
sermons.jpg
sermons.jpg (17.13 KiB) Viewed 580 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.
User avatar
mecha_godzilla
Forum Contributor
Posts: 375
Joined: Wed Apr 14, 2010 4:45 pm
Location: UK

Re: VESPA output in 2 columns

Post 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
Post Reply