Convert PHP-generated table layout to div - php

Question

I'm building a site that uses a video plugin to generate a gallery of links to videos. The problem is that these images and links are put into a table, which is incompatible with the responsive design of my site. Being a web designer and not a PHP-developer, I'm at a loss when looking at this code about how to take out all the elements that generate the table and replace them with simple div containers, though it looks like it should be pretty straightforward for a PHP person.
<table id="media_galery">
<?php
$t = 0;
for ($i = 0; $i < count($cArray); $i++ ) {
$t++;
$file = $cArray[$i];
$remote = null;
$name = $file->getFileName();
$file_path = BASE_URL.DIR_REL.$file->getDownloadURL();
$ak_d = FileAttributeKey::getByHandle('media_date');
$date = $file->getAttribute($ak_d);
$ak_a = FileAttributeKey::getByHandle('media_artwork');
$image = $file->getAttribute($ak_a);
if($image==null){
$image_path=$uh->getBlockTypeAssetsURL($bt).'/tools/mp3.png';
}else{
$image = File::getByID($image->fID);
$image_path=$image->getURL();
}
$file_src = BASE_URL.DIR_REL.$file->getRelativePath();
$ak_s = FileAttributeKey::getByHandle('media_audio');
$audio = $file->getAttribute($ak_s);
if($audio){
$audio_array = $mh->getMediaTypeOutput($audio);
$audio_path = $audio_array['path'];
$file_src = $audio_path;
}
$video = null;
$ak_s = FileAttributeKey::getByHandle('media_video');
$video = $file->getAttribute($ak_s);
if($video){
$video_array = $mh->getMediaTypeOutput($video);
$video_path = $video_array['path'];
var_dump($video_array['id']);
$image_path = $mh->getMediaThumbnail($video_array['id'],$video_array['type']);
//$video_src = $video_path.'?width='.$width.'&height='.$height;
//$file_src = $video_src;
if($video_array['type'] == 'vimeo'){
$file_src = 'http://player.vimeo.com/video/'.$video_array['id'];
}else{
$file_src = $video_path;
}
}
?>
<td valign="top">
</a><img src="<?php echo $image_path?>" href="#popup_prep" alt="<?php echo $file_src?>" class="<?php echo $playerID?>player_get<?php echo $i?> gallery_thumb" href="<?php echo $file_src?>"/>
</td>
<?php
if($t == $spread){
$t=0;
echo '</tr>';
}
}
for($d=$t;$d<$spread;$d++){
echo '<td></td>';
if($t == $spread){
echo '</tr>';
}
}
?>
</table>
Any help on this would be very much appreciated!!

Answer 1

<div id="media_galery">
<?php
$t = 0;
for ($i = 0; $i < count($cArray); $i++ ) {
$t++;
$file = $cArray[$i];
$remote = null;
$name = $file->getFileName();
$file_path = BASE_URL.DIR_REL.$file->getDownloadURL();
$ak_d = FileAttributeKey::getByHandle('media_date');
$date = $file->getAttribute($ak_d);
$ak_a = FileAttributeKey::getByHandle('media_artwork');
$image = $file->getAttribute($ak_a);
if($image==null){
$image_path=$uh->getBlockTypeAssetsURL($bt).'/tools/mp3.png';
}else{
$image = File::getByID($image->fID);
$image_path=$image->getURL();
}
$file_src = BASE_URL.DIR_REL.$file->getRelativePath();
$ak_s = FileAttributeKey::getByHandle('media_audio');
$audio = $file->getAttribute($ak_s);
if($audio){
$audio_array = $mh->getMediaTypeOutput($audio);
$audio_path = $audio_array['path'];
$file_src = $audio_path;
}
$video = null;
$ak_s = FileAttributeKey::getByHandle('media_video');
$video = $file->getAttribute($ak_s);
if($video){
$video_array = $mh->getMediaTypeOutput($video);
$video_path = $video_array['path'];
var_dump($video_array['id']);
$image_path = $mh->getMediaThumbnail($video_array['id'],$video_array['type']);
//$video_src = $video_path.'?width='.$width.'&height='.$height;
//$file_src = $video_src;
if($video_array['type'] == 'vimeo'){
$file_src = 'http://player.vimeo.com/video/'.$video_array['id'];
}else{
$file_src = $video_path;
}
}
?>
<div class="img_div<?php if($t == ($spread + 1)){$t=0; echo ' first';}?>">
</a><img src="<?php echo $image_path?>" href="#popup_prep" alt="<?php echo $file_src?>" class="<?php echo $playerID?>player_get<?php echo $i?> gallery_thumb" href="<?php echo $file_src?>"/>
</div>
<?php
}
?>
</div>
I don't know what the value of $spread is, but with the code above you will output something like this:
<div id="meda_galery">
<div class="img_div">
...
<div>
<div class="img_div">
...
<div>
<div class="img_div first">
...
<div>
<div class="img_div">
...
<div>
</div>
The example above assumes a spread of 2 (so 2 columns). You could float each div left but use clear to start a new row for each one with a class of "first".