如何在Django模板系統中顯示圖像表？

Question

我正在開發一個基於Django的網站以獲得樂趣，並且想知道是否有人知道如何解決這個問題。我想在模板內的表格中顯示圖片，如圖庫。有誰知道如何做到這一點？我嘗試了一個多維列表，但我無處可去。

Answer 1

我相信問題比Django的關係更多的CSS。

所有的圖像都是相同的大小？如果是的話，只需將它們全部浮起來，讓邊界div打破圖像。你的模板看起來像這樣（忽略內聯CSS！）：

<div style="width:400px"> 
{% for image in image_list%} 
    <div style="float:left; width:100px; height:100px;"> 
     {{ image.whatever }} 
    </div> 
{% endfor%} 
</div> 

這會給你一個有4列的「表」。

如果您的圖像有不同的寬度和高度，我會像display:inline-block去，這文章解釋它是如何工作的：

http://robertnyman.com/2010/02/24/css-display-inline-block-why-it-rocks-and-why-it-sucks/

編輯如果你想要的是一個列表轉換成一張桌子，我猜你可以用這個模板：

{% for image in image_list %} 
    {% if forloop.first %} 
     <tr> 
    {% endif %} 

    <td>{{ forloop.counter }} - {{ image }}</td> 

    {% if forloop.last %} 
     </tr> 
    {% else %} 
     {% if forloop.counter|divisibleby:"4" %} 
      </tr><tr> 
     {% endif %} 
    {% endif %} 
{% endfor %} 

但是這段代碼沒有經過測試！我只是寫了:)

Answer 2

爲什麼不使用字典？然後，你可以代表點(0,0), (1,1), (0,1)等像這樣的東西，

mydict = {0: [0, 1, 2], 
      1: [0, 1, 2], 
      2: [0, 1, 2]} 

在列表中的元素是你的形象的名字。

0: ["image1.jpg", "image2.jpg", "image3.jpg"] .. } {

在這種情況下，mydict[0][0]是指第一行的第一個元素，依此類推。

-

要訪問的字典在模板（Django Doc），你可以使用類似，

# (key would be 0, value would be a list [0,1,2,3..] 
{% for key, value in mydict.items %} 
    {% for img in value %} 
     <img src="{{img}}"> 
    {% endfor %} 
{% endfor %} 

Answer 3

你真的需要使用表來按照你需要的方式調整圖像嗎？如果您需要獲得類似http://blog.mozilla.com/webdev/files/2009/02/gallery-view.jpg的內容，請查看inline-block CSS屬性。它受到包括IE6 +在內的所有主流瀏覽器的支持（稍加修改）。

http://blog.mozilla.com/webdev/2009/02/20/cross-browser-inline-block/

Answer 4

這裏有一個更簡單得多的方式，別人怎麼回答：

的目標是顯示的每個圖像4後，創建一個新的行。 1維列表是你需要的。

一個選項是關閉每個第四後。您可以使用forloop.counter，也可以在創建每個標籤後使用{％cycle''''''''％}。 注意：我在推測一下你的HTML結構。 {％cycle''''''''％}也可以做得很好。

這裏是週期做：http://docs.djangoproject.com/en/dev/ref/templates/builtins/#cycle

如果您正在使用S浮動到左側，使用相同的週期但每4之後添加一個換行符。