CODEWITHSUNDEEP
django
Phasin Opaspilai
Phasin Opaspilai

Reputation: 39

How to run for loops in a Django template?

I want to run the for loop to show all images but the problem is that I have to change the "id" of each image (pic-1 -> pic-2 ...so on) I know how to do it in normal Python but I'm lost on how to do this in template of Django.

<div class="preview-pic tab-content">
      <div class="tab-pane active" id="pic-1"><img src="{{product.image.url}}"></div>
          {% for image in image_list %}
          <div class="tab-pane" id="pic-2"><img src="http://placekitten.com/400/252" /></div>
          <div class="tab-pane" id="pic-3"><img src="http://placekitten.com/400/252" /></div>
          <div class="tab-pane" id="pic-4"><img src="http://placekitten.com/400/252" /></div>
          <div class="tab-pane" id="pic-5"><img src="http://placekitten.com/400/252" /></div>
          {% endfor %}
    </div>
    <ul class="preview-thumbnail nav nav-tabs">
          <li class="active"><a data-target="#pic-1" data-toggle="tab"><img src="http://placekitten.com/200/126" /></a></li>
          {% for image in image_list %}
          <li><a data-target="#pic-2" data-toggle="tab"><img src="http://placekitten.com/200/126" /></a></li>
          <li><a data-target="#pic-3" data-toggle="tab"><img src="http://placekitten.com/200/126" /></a></li>
          <li><a data-target="#pic-4" data-toggle="tab"><img src="http://placekitten.com/200/126" /></a></li>
          <li><a data-target="#pic-5" data-toggle="tab"><img src="http://placekitten.com/200/126" /></a></li>
          {% endfor %}
    </ul>
</div>

Upvotes: 1

Views: 195

Answers (3)

dotslash227
dotslash227

Reputation: 408

You can use the {{forloop.counter}} variable. This will return the index of the loop.

forloop.counter     The current iteration of the loop (1-indexed)
forloop.counter0    The current iteration of the loop (0-indexed)
forloop.revcounter  The number of iterations from the end of the loop (1-indexed)
forloop.revcounter0 The number of iterations from the end of the loop (0-indexed)
forloop.first       True if this is the first time through the loop
forloop.last        True if this is the last time through the loop
forloop.parentloop  For nested loops, this is the loop surrounding the current one

For more information on built-in templates tags and filters : https://docs.djangoproject.com/en/2.2/ref/templates/builtins/

Upvotes: 0

Daniel Holmes
Daniel Holmes

Reputation: 2002

You can use the forloop.counter to get the loop index:

{% for image in image_list %}
    <div class="tab-pane" id="pic-{{ forloop.counter }}"><img src={{ image.url }} />
{% endfor %}

If you have your pic counter starting at 2, you can use the add template tag:

{% for image in image_list %}
    <div class="tab-pane" id="pic-={{ forloop.counter|add:1 }}"><img src={{ image.url }} />
{% endfor %}

Upvotes: 0

shafikshaon
shafikshaon

Reputation: 6414

You can use {{ forloop.counter }} or {{ forloop.counter0 }}

{% for image in image_list %}
     <div class="tab-pane" id="pic-{{ forloop.counter }}"><img src="http://placekitten.com/400/252" /></div>
{% endfor %}

Note that

{{ forloop.counter }} starting index 1

{{ forloop.counter0 }} starting index 0

Upvotes: 1

Related Questions