How to iterate for loop in django python template

Question

I am currently creating a template and I want to iterate a list however this is going to be tricky because I would like to display only 5 items per line then the next items will go to the next line. I would Like the display an image between every 5 items.

this is my list:

    myList = [{'id':1, 'image':'image1.jpg'},
{'id':2, 'image':'image2.jpg'},
{'id':3, 'image':'image3.jpg'},
{'id':4, 'image':'image4.jpg'},
{'id':5, 'image':'image5.jpg'},
{'id':6, 'image':'image6.jpg'},
{'id':7, 'image':'image7.jpg'},
{'id':8, 'image':'image8.jpg'},
{'id':9, 'image':'image9.jpg'},
{'id':10, 'image':'image10.jpg'},
{'id':11, 'image':'image11.jpg'},]

this is my template

myList.html

{% for a in myList %}

<a href="{{a.image}}">{{a.id}}</a>
{% if forloop.counter == 5%}
 <img src="{{a.image}}">
{% endif %}

{% endfor %}

and those images are link from each items.

this is what i would like to see

1 2 3 4 5
<image>
6 7 8 9 10
<image>
11

if I click each item, the image will display in the next line.

Here is a sample image on how it works IMAGE LINK

If number 1 is clicked the image1 will be shown in the green box, the same way for number 2 to number 5.
If number 9 is clicked the image9 will be shown in the green box, the same way for number 6 to number 10.

Nils Werner · Accepted Answer · 2016-07-13 08:54:07Z

1

You need to use the divisibleby filter

{% if forloop.counter0|divisibleby:5 %}

answered Jul 13, 2016 at 8:54

Nils Werner

37.2k7 gold badges85 silver badges108 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

jack rackham Over a year ago

Thank you but I still can not make it work as to what I expect to be seen. I really appreciate your help

Nils Werner Over a year ago

That click logic is another question to which you haven't stated what you have already tried so far.

e-nouri · Accepted Answer · 2016-07-13 09:00:47Z

1

You can use divisibleby like this: {% for a in myList %}

<a href="{{a.image}}">{{a.id}}</a>
{% if forloop.counter0|divisibleby:5 %}
 <img src="{{a.image}}">
{% endif %}

{% endfor %}

Link to the documentation.

answered Jul 13, 2016 at 9:00

e-nouri

2,6262 gold badges23 silver badges38 bronze badges

1 Comment

jack rackham Over a year ago

I have tried it however it gives me the same result. I could only click the link of every 5th item. But I can not show the images of the 1st to 4th item. :(

Collectives™ on Stack Overflow

How to iterate for loop in django python template

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related