CODEWITHSUNDEEP
djangodjango-templates
Sombre Dreamer
Sombre Dreamer

Reputation: 113

how to populate two different columns with one for loop

I have an object, I want to loop through the object and populate a page with two columns I don't know how to seperate the object into two columns. if I make a div in a loop for each item they just go under each other.

{% for listing in listings %}
<div id="listing" class="mb-4 col-md-5 col-sm-3 align-items-center">
        <a href="{% url 'item' listing.item %}">
        <div class="row">
            <div class="itemImage col-md-2 col-sm-1">
                <img id="itemImage" class="w-100" src="{% if listing.image %}{{listing.image}}{% else %}{{'https://upload.wikimedia.org/wikipedia/commons/1/14/No_Image_Available.jpg'}}{% endif %}">
            </div>
            <div id="content" class="col-md-10 col-sm-11">
                <h3 id="title">Item: {{listing.item}}</h3>
                <p id="description">Description: {{listing.description}}</p>
                <p id="startingbid">Current Price: {{listing.currentprice}}$</p>
            </div>
        </div>
        </a>
    </div>
    {%empty%}
    <p id="nolisting">No items on auction yet.</p>
{% endfor %}

this is what I want but I want there to be a new card on the left when forloop count is odd and one on the right when forloopcount is even for example

<div class="container-fluid">
<div class="row">
    <div class="col-md-6">
        <div class="card">
            <div class="card-body">
                <h5 class="card-title">Card title</h5>
                <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                <a href="#" class="btn btn-primary">Go somewhere</a>
            </div>
        </div>
    </div>
    <div class="col-md-6">
        <div class="card">
            <div class="card-body">
                <h5 class="card-title">Card title</h5>
                <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                <a href="#" class="btn btn-primary">Go somewhere</a>
            </div>
        </div>
    </div>
</div>

Upvotes: 1

Views: 878

Answers (2)

shah sawood
shah sawood

Reputation: 414

In template

{% block body %}
    <div class="container-fluid">
        <div class="row g-1">
            {% for listing in myvar %}
                <div class="col-md-6">
                    <div class="card">
                        <div class="card-body">
                            <h5 class="card-title">Card title</h5>
                            <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                            <a href="#" class="btn btn-primary">Go somewhere</a>
                        </div>
                    </div>
                </div>
            {% endfor %}
        </div>
    </div>
{% endblock %}
  • You were looping outside the row, but what you need to loop inside the loop and create as many columns as there is data in listings.
  • I tried this, it works.

Upvotes: 2

Abdelhamed Abdin
Abdelhamed Abdin

Reputation: 594

actually, you can achieve this with a custom filter.

  • go to your app folder that contains those files: "views.py", "urls.py", etc
  • then, create a new folder that is called "templatetags"
  • add init.py file into it and then you can create your custom py file let's call it "even_odd.py"
  • add these few lines of code into it.

from django import template

register = template.Library()

@register.filter()
def mod(value):
    number = int(value)
    if number % 2 == 0:
        return "even"
    return "odd"

then, in your HTML file, you can filter by this function like so:

  • place the file that you created on top of the target file like so:

    {% load even_odd %}

then you can like that pseudo code:

{% for listing in listings %}
{% with name=forloop.counter|mod %}
{% if name == "even" %}
<div id="listing" class="mb-4 col-md-5 col-sm-3 align-items-center">
        <a href="{% url 'item' listing.item %}">
        <div class="row">
            <div class="itemImage col-md-2 col-sm-1">
                <img id="itemImage" class="w-100" src="{% if listing.image %}{{listing.image}}{% else %}{{'https://upload.wikimedia.org/wikipedia/commons/1/14/No_Image_Available.jpg'}}{% endif %}">
            </div>
            <div id="content" class="col-md-10 col-sm-11">
                <h3 id="title">Item: {{listing.item}}</h3>
                <p id="description">Description: {{listing.description}}</p>
                <p id="startingbid">Current Price: {{listing.currentprice}}$</p>
            </div>
        </div>
        </a>
    </div>
    {% else %}
        # do something else
    {% endif %}
    {% endwith %}
    {%empty%}
    <p id="nolisting">No items on auction yet.</p>
{% endfor %}

this operation has been tested by me

Upvotes: 1

Related Questions