将PHP生成的表格布局转换为div

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.

我正在构建一个使用视频插件的网站来生成视频链接库。问题是这些图像和链接被放入一个表格中,这与我网站的响应式设计不兼容。作为一名网页设计师,而不是一名PHP开发人员,在查看这段代码时,我不知道如何取出生成表的所有元素并用简单的div容器替换它们,尽管它看起来应该很漂亮对于一个PHP人来说很简单。

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

任何有关这方面的帮助将非常感谢!!

1 个解决方案

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

我不知道$ spread的价值是多少,但是使用上面的代码你将输出如下内容:

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

上面的例子假设扩展为2(所以2列)。你可以将每个div浮动但是使用clear来为每个div开始一个新行,并使用“first”类。