LoginSignup
0
0

More than 5 years have passed since last update.

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

Posted at

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

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0