Posted at

DjangoでBootstrapを用いて写真を一覧表示させたい時

DjangoでBootstrapのグリッド機能を用いて写真を横列にある枚数分だけ

一覧表示させたい時がある。

イメージとしてはこんな感じ。

pic pic pic

pic pic pic

pic pic pic

具体的な方法はforloop.counterを用いると解決できる。

ドキュメントにも詳しく書いてある。

http://djangoproject.jp/doc/ja/1.0/ref/templates/builtins.html

ソースの例はこちら


sample.html

<div class = "container" style = "max-width:80%;">

{% for post in posts.all %}
{% if forloop.counter|divisibleby:4 or forloop.first %}
<div class="row">
{% endif %}
<div class="col-md-4">
<img class="" src="">
</div>
{% if forloop.counter|divisibleby:3 %}
</div>
{% endif %}
{% endfor %}

</div>