Arrange Django Model Rows in Template

Question

I have a Model object containing images field. Now I want to get the images in template by a sequence like one image floating left and another one floating right order from last entry.

models.py

    # models.py
    class Image(models.Model):
        icon = models.ImageField(upload_to='static/img')

views.py

    # views.py
    def index():
        image = Image.objects.all()
        return render(request, 'index.html', {'images': image})

index.html

    {% for image in images %}
        <div class="item">
            <div class="float-left">
                {{ image }}
            </div>
            <div class="float-right">
                This is Image Description.
            </div>
        </div>

        <div class="item">
            <div class="float-left">
                This is Image Description.
            </div>
            <div class="float-right">
                {{ image }}
            </div>
        </div>
    {% endfor %}

Assume all imports are ok. HTML Look: This is what i want

tim-mccurrach · Answer 1 · 2020-05-23T14:23:53.383

There are two problems here, one is that you are only sending one image to the template to render. Look at this line:

image = Image.objects.latest('id')

This says set image equal to the very latest image out of all the images I have. Really you want to select all of your images:

images = Image.objects.all()

or some subset of them...

images = Image.objects.filter(...something here)

The other problem is in your template, I'm guessing you only want to display each image once, so do that will need to be the following:

    {% for image in images %}
        <div class="item">
            <div class="float-left">
                <img src={image.icon.url} />
            </div>
            <div class="float-right">
                This is Image Description.
            </div>
        </div>
    {% endfor %}

You may want to add some addition formatting inside your <img> tag but I'll leave that up to you.

To then get the alternating behaviour that you describe you can use a variable django adds called forloop.counter. The final result will look as follows:

    {% for image in images %}
        <div class="item">
            <div class="float-{% if forloop.counter|divisibleby:2 %}right{% else %}left{% endif %}">
                <img src={image.icon.url} />
            </div>
            <div class="float-{% if forloop.counter|divisibleby:2 %}left{% else %}right{% endif %}">
                This is Image Description.
            </div>
        </div>
    {% endfor %}

Note that forloop.counter starts at 1

Your answer is not exactly which I want. I want my images in template in an order that first image will float left with description of its right and second image will float right with description of its left and so on. Thank You — Alpha, May 23 '20 at 11:16
@Alpha I have updated my answer to add the alternating behaviour. — tim-mccurrach, May 23 '20 at 14:24

score 0 · Answer 2 · answered May 23 '20 at 15:19

Thanks a lot. I found an alternating way, that's "cycle".

{% for image in images %}
        <div class="item">
            <div class="{% cycle 'float-left' 'float-right' %}">
                {{ image.icon }}
            </div>
            <div class="{% cycle 'float-right' 'float-left' %}">
                This is Image Description.
            </div>
        </div>
    {% endfor %}

Arrange Django Model Rows in Template

2 Answers2