php - 以两种不同的 div 样式显示数据库中一个表中的图像

Question

首先我对标题感到抱歉，但我想不出其他方式来解释这个案例。如果有人想要可以编辑它。所以这就是我遇到的情况，但我真的不知道如何制作它。这是 HTML 部分，其中我有两个不同的 div 和 3 列图像。问题是第 1 列和第 3 列上有大图像。 HTML 是这样的:

<div class="row"> <!-- Start Row -->
    <div class="col-sm-4 col-md-4 col-lg-4 nopadding"> <!-- First Column -->
       <div class="small-box">
              // image 800x533
       </div> 
       <div class="large-box">
              // image 860x1068
       </div>
    </div> <!-- End First Column -->

    <div class="col-sm-4 col-md-4 col-lg-4 nopadding"> <!-- Second Column -->
       <div class="small-box">
             // image 800x533
       </div>
       <div class="small-box">
             // image 800x533
       </div>
       <div class="small-box">
            // image 800x533
       </div>
    </div> <!-- End Second Column -->

    <div class="col-sm-4 col-md-4 col-lg-4 nopadding"> <!-- Third Column -->
       <div class="large-box">
            // image 860x1068
       </div>
       <div class="small-box">
            // image 800x533
       </div>
 </div>

这是我打算使用的 PHP 部分。非常简单，只需从数据库中加载一些图像即可。

 $pdo = Database::connect();

 foreach($pdo->query("SELECT * FROM images ORDER BY image_id LIMIT 7") as $row) 
 {
        // load images images
 }
 Database::disconnect(); 

如何将它们加载到这 3 列中？有没有人有想法可以做到这一点？所有图像都在一个表中。

这是我制作的 Jsfiddle，它看起来像画廊。带有 Pandas 的那两张图片是大盒子..其他是小盒子。 JSFIDDLE

Answer 1

假设有一个像 IMAGES[id|path|caption] 这样的简单数据库表。然后，检索图像将类似于:

 $images = [];
 $pdo = Database::connect();

 foreach($pdo->query("SELECT * FROM images ORDER BY image_id LIMIT 7") as $row) 
 {
        // load images images
        $images[] = [
            'path' => $row['path'],
            'caption' => $row['caption']
        ];
 }
 Database::disconnect(); 

接下来，您可以只使用 HTML 并使用一些简单的函数来输出图像。首先，创建图像的 PHP 函数:

function image_html($image, $size = 'small') {
  return '<img src="' . $image['path'] . '" title="' . $image['caption'] . '" class="' . $size . '"/>';
}

然后是您的 HTML:

<div class="row"> <!-- Start Row -->
    <div class="col-sm-4 col-md-4 col-lg-4 nopadding"> <!-- First Column -->
       <div class="small-box">
              // image 800x533
              <?php echo image_html($images[0]); ?>
       </div> 
       <div class="large-box">
              // image 860x1068
              <?php echo image_html($images[1], 'large'); ?>
       </div>
    </div> <!-- End First Column -->

    <div class="col-sm-4 col-md-4 col-lg-4 nopadding"> <!-- Second Column -->
       <div class="small-box">
             // image 800x533
              <?php echo image_html($images[2]); ?>
       </div>
       <div class="small-box">
             // image 800x533
              <?php echo image_html($images[3]); ?>
       </div>
       <div class="small-box">
            // image 800x533
              <?php echo image_html($images[4]); ?>
       </div>
    </div> <!-- End Second Column -->

    <div class="col-sm-4 col-md-4 col-lg-4 nopadding"> <!-- Third Column -->
       <div class="large-box">
            // image 860x1068
              <?php echo image_html($images[5], 'large'); ?>
       </div>
       <div class="small-box">
            // image 800x533
              <?php echo image_html($images[6]); ?>
       </div>
 </div>