How to loop through the multiple items in Django Template

Question

How can I loop through items in django template on the following way

    {% for brand in categories%}
    <div class="brand-col">
        <figure class="brand-wrapper">
            <img src="{{brand.product_feature_image.image.url}}" alt="Brand" width="410" height="186" /> (item1)
        </figure>
         <img src="{{brand.product_feature_image.image.url}}" alt="Brand" width="410" height="186" /> (item2)
        </figure>
    </div>
    {% endfor %}
    

<div class="brand-col">
        <figure class="brand-wrapper">
            <img src="{{brand.product_feature_image.image.url}}" alt="Brand" width="410" height="186" /> (item3)
        </figure>
         <img src="{{brand.product_feature_image.image.url}}" alt="Brand" width="410" height="186" /> (item4)
        </figure>
    </div>

<div class="brand-col">
        <figure class="brand-wrapper">
            <img src="{{brand.product_feature_image.image.url}}" alt="Brand" width="410" height="186" /> (item5)
        </figure>
         <img src="{{brand.product_feature_image.image.url}}" alt="Brand" width="410" height="186" /> (item6)
        </figure>
    </div>

Reference: (item number inside bracket is just for reference) Here, first I want to loop 1 and loop 2 on figure tag and again I want to loop entire div and loop 3 and loop 4 inside the div on figure tag.

I tried to do with cycle, but no luck. Any help will be highly appreciated.

This question lacks clarity unfortunately. What are item 1 and 2 and so on? — Yusuf Ertas, Jan 03 '22 at 13:55
Hi Yusuf, thank your for the comment. Actually I tried to represent loop count as item1, so on and so forth — Madhav Dhungana, Jan 03 '22 at 13:57

Yusuf Ertas · Accepted Answer · 2022-01-04T10:37:30.043

2

Here is an outline of how this can be achieved. Have an enumerated object in your view function such as

enumerated_brands = enumerate(categories)

Then pass this object to the context variable in the render method for the return statement of your view function such as:

def brand_view(request,...):
    ...
    enumerated_brands = enumerate(categories)
    ...
    return render(..., context={'enumerated_brands': enumerated_brands})

Then, use the enumerated_brands in your html file with:

{% for brand in brands %} 
{% if forloop.counter0|divisibleby:2 %} 
<div class="brand-col"> 
{% endif %} 
<figure class="brand-wrapper"> 
<img src="{{brand.product_feature_image.image.url}}" alt="{{brand.name}}" width="410" height="186" /> 
</figure> 
{% if forloop.counter|divisibleby:2 or forloop.last %} 
</div> 
{% endif %} 
{% endfor %}

edited Jan 04 '22 at 10:37

answered Jan 03 '22 at 14:13

Yusuf Ertas

261
1
5

I got this error: Exception Type: TemplateSyntaxError Exception Value: Could not parse the remainder: '(index+1)' from '(index+1)' – Madhav Dhungana Jan 04 '22 at 05:33
1

Try using this instead: `{% if index+1|modulo:3 == 0 %}` – Yusuf Ertas Jan 04 '22 at 06:06
Still same problem: Exception Type: TemplateSyntaxError Exception Value: Could not parse some characters: index|+1||modulo:3 – Madhav Dhungana Jan 04 '22 at 06:15
You are typing it incorrectly I think. Have you copy and pasted my reply which I edited above? – Yusuf Ertas Jan 04 '22 at 06:30
Also can you try: `{% if index|add:"1"|divisibleby:3 %}` – Yusuf Ertas Jan 04 '22 at 06:34
Figure is looping but its outside div. I want to loop like this: https://imgur.com/hO0VJCz But its looping like this: https://imgur.com/uGbC4u2 – Madhav Dhungana Jan 04 '22 at 06:55
As far as I understand, you want to take one figure at a time for the loop index and then a div for the third element in the cycle. This should not be so difficult to achieve with the code given above though. Is not replacing two figure tags with just one sufficient? – Yusuf Ertas Jan 04 '22 at 07:13
Just carry the div tag outside the for loop and see what happens. – Yusuf Ertas Jan 04 '22 at 07:13
Yes, I want to loop figure inside div for two times and again loop the div where figure inside div will be looped again two times. – Madhav Dhungana Jan 04 '22 at 07:32
div tag outside for lopp is not working – Madhav Dhungana Jan 04 '22 at 07:34
Ok, will try but I need some time. – Yusuf Ertas Jan 04 '22 at 07:37
I have made an edit to the code up in my original reply. Can you please take a look? – Yusuf Ertas Jan 04 '22 at 08:20
{ endif } {% else %} here is error. I updated with {% endif %} {%empty%} with else it throws following error: Invalid block tag on line 55: 'else', expected 'empty' or 'endfor'. Did you forget to register or load this tag? – Madhav Dhungana Jan 04 '22 at 08:37
For your further clarification I have edited the question, could you please check? – Madhav Dhungana Jan 04 '22 at 08:41
I understood what you are trying to achieve. Sorry, I forgot to close the if tag in my reply. Can you try again with the edited answer above? – Yusuf Ertas Jan 04 '22 at 09:02
Yes, I tried unfortunately its not printing anything. Entire div is no visible. – Madhav Dhungana Jan 04 '22 at 10:07
With this: https://imgur.com/2cNwba9 I am getting this result: https://imgur.com/tbSPGGv – Madhav Dhungana Jan 04 '22 at 10:13
Thank you so much for the effort. With your resource,I found the solution. – Madhav Dhungana Jan 04 '22 at 10:32
Can you accept my answer to mark this as closed? – Yusuf Ertas Jan 04 '22 at 10:33
Edit the answer to this: {% for brand in brands %} {% if forloop.counter0|divisibleby:2 %}
{% endif %}

{% if forloop.counter|divisibleby:2 or forloop.last %}
{% endif %} {% endfor %} I will close then. – Madhav Dhungana Jan 04 '22 at 10:35
I just did. Thanks. – Yusuf Ertas Jan 04 '22 at 10:37
I am stuck with Django MPTT since long, if you could help. I will be thankful. Question is already asked – Madhav Dhungana Jan 04 '22 at 10:39
Please provide a link to it. – Yusuf Ertas Jan 04 '22 at 10:40
https://stackoverflow.com/questions/70569395/how-to-display-child-element-in-django-mptt Here it is. Thank you – Madhav Dhungana Jan 04 '22 at 10:41

How to loop through the multiple items in Django Template

1 Answers1