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" >
        <a href="{% url 'item' listing.item %}">
        <div >
            <div >
                <img id="itemImage"  src="{% if listing.image %}{{listing.image}}{% else %}{{'https://upload.wikimedia.org/wikipedia/commons/1/14/No_Image_Available.jpg'}}{% endif %}">
            </div>
            <div id="content" >
                <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 >
<div >
    <div >
        <div >
            <div >
                <h5 >Card title</h5>
                <p >Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                <a href="#" >Go somewhere</a>
            </div>
        </div>
    </div>
    <div >
        <div >
            <div >
                <h5 >Card title</h5>
                <p >Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                <a href="#" >Go somewhere</a>
            </div>
        </div>
    </div>
</div>

CodePudding user response：

In template

{% block body %}
    <div >
        <div >
            {% for listing in myvar %}
                <div >
                    <div >
                        <div >
                            <h5 >Card title</h5>
                            <p >Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                            <a href="#" >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.

CodePudding user response：

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" >
        <a href="{% url 'item' listing.item %}">
        <div >
            <div >
                <img id="itemImage"  src="{% if listing.image %}{{listing.image}}{% else %}{{'https://upload.wikimedia.org/wikipedia/commons/1/14/No_Image_Available.jpg'}}{% endif %}">
            </div>
            <div id="content" >
                <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