以兩種不同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列中？有沒有人有想法可以做到這一點？ Al圖像在一張桌子裏。

這是Jsfiddle我已經讓它看起來像畫廊。這兩張熊貓圖像是大盒子。其他人則是小盒子。 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>