CODEWITHSUNDEEP
djangodjango-templates
Raf Rasenberg
Raf Rasenberg

Reputation: 684

For loop in Django template while changing the HTML each iteration

So I have this piece of HTML:

                     <div class="core-features-single">
                         <div class="row">
                            <div class="col-sm-6">
                                <div class="core-feature-img">
                                    <img src="assets/images/watch-4.png" class="img-responsive" alt="Image">
                                </div>
                            </div>

                            <div class="col-sm-6">
                                <div class="core-feature-content arrow-left">
                                    <i class="icofont icofont-brand-android-robot"></i>
                                    <h4>Android and iOS Apps Install</h4>
                                    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat.</p>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="core-features-single">
                        <div class="row">
                            <div class="col-sm-6">
                                <div class="core-feature-content arrow-right">
                                    <i class="icofont icofont-ui-text-chat"></i>
                                    <h4>Live Chat With Friends</h4>
                                    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat.</p>
                                </div>
                            </div>

                            <div class="col-sm-6">
                                <div class="core-feature-img">
                                    <img src="assets/images/watch-5.png" class="img-responsive" alt="Image">
                                </div>
                            </div>
                        </div>
                    </div>

Which generates this kind output in the webpage:

enter image description here

But how do I iterate an HTML element like this? Because the text and image block order are changing each iteration.

What I came up with:

                    {% for entry in page.product_features_showcase.all %}
                    {% image entry.image height-1000 as img %}
                    <div class="core-features-single">
                        <div class="row">
                            <div class="col-sm-6">
                                <div class="core-feature-content arrow-{% cycle 'left' 'right' 'left' 'right' 'left' 'right' 'left' 'right' %}">
                                    <i class="icofont icofont-phone"></i>
                                    <h4>{{ page.product_features_showcase_title }}</h4>
                                    <p>{{ page.product_features_showcase_description }}</p>
                                </div>
                            </div>

                            <div class="col-sm-6">
                                <div class="core-feature-img">
                                    <img src="{{ img.url }}" class="img-responsive" alt="Image">
                                </div>
                            </div>
                        </div>
                    </div>
                    {% endfor %}

I know I can use cycle to make different CSS classes each iteration. But how to change the order of the HTML element? To make this HTML work in a loop.

Upvotes: 0

Views: 713

Answers (1)

Roman Miroshnychenko
Roman Miroshnychenko

Reputation: 1564

Use forloop.counter and divisibleby inside a for loop to render different HTML blocks in odd and even loops:

{% if forloop.counter|divisibleby:2 %}
Right-arrow block
{% else %}
Left-arrow block
{% endif %}

In Django docs: https://docs.djangoproject.com/en/2.2/ref/templates/builtins/#divisibleby

Upvotes: 3

Related Questions