Django шаблон, отображающий изображения в неправильном положении - PullRequest
Новая
       22

Django шаблон, отображающий изображения в неправильном положении

0 голосов
/ 02 мая 2020

Я новичок в Django, поэтому извиняюсь, если это глупо. У меня есть шаблон Django с тремя точками для изображений, и я пытаюсь позволить пользователю с правами администратора выбрать, какое изображение в базе данных должно go в каком месте (слева, в центре или справа). Тем не менее,

Моя модель выглядит так: 

from django.db import models
from django.urls import reverse
from django.utils.text import slugify

class Artwork(models.Model):

    art = models.ImageField(upload_to='artworks/%Y')
    title = models.CharField(max_length=200)
    description = models.TextField(null=True, blank=True)
    date = models.DateField(auto_now_add=True)
    herochoices = [('left', 'left'), ('middle', 'middle'), ('right', 'right')]
    hero = models.CharField(choices=herochoices, max_length=6, unique=True, null=True, blank=True, error_messages={'unique':'Another artwork already uses this hero position.'})  
    slug = slugify(title, allow_unicode=False)

    def get_absolute_urls(self):
        return reverse('artwork_list', kwargs={'slug': self.slug})

А мой шаблон выглядит так: 

{% extends 'base.html' %}

{% block content %}

<div class="container">
    <div class="row">
        {% for artwork in object_list %}
            {% if artwork.hero == 'left' %}
                <div class="col-sm p-3 align-items-center">
                    <img class="img-fluid rounded" src="{{ artwork.art.url }}" />
                    <p>{{ artwork.hero }}</p> <!--for testing-->
                </div>
            {% elif artwork.hero == 'middle' %}
                <div class="col-sm p-3 align-items-center">
                    <img class="img-fluid rounded" src="{{ artwork.art.url }}" />
                    <p>{{ artwork.hero }}</p> <!--for testing-->
                </div>
            {% elif artwork.hero == 'right' %}
                <div class="col-sm p-3 align-items-center">
                    <img class="img-fluid rounded" src="{{ artwork.art.url }}" />
                    <p>{{ artwork.hero }}</p> <!--for testing-->
                </div>
            {% endif %}
        {% endfor %}
    </div>
</div>

{% endblock content %}

Почему-то изображения отображаются в неправильном порядке :

enter image description here

Я смотрю на это вечно, любая помощь очень ценится!

1 Ответ

1 голос
/ 02 мая 2020

Шаблон, который вы генерируете с помощью Django, не является следующим, поскольку for l oop просто следует порядку элементов набора запросов. 

<div class="container">
  <div class="row">
    <div class="col-sm p-3 align-items-center">
      <img class="img-fluid rounded" src="{{ LEFT URL }}" />
      <p>{{ LEFT HERO }}</p>
    </div>
    <div class="col-sm p-3 align-items-center">
      <img class="img-fluid rounded" src="{{ MIDDLE URL }}" />
      <p>{{ MIDDLE HERO }}</p>
    </div>
    <div class="col-sm p-3 align-items-center">
      <img class="img-fluid rounded" src="{{ RIGHT URL }}" />
      <p>{{ RIGHT URL }}</p>
    </div>
  </div>
</div>

В этом фрагменте будут упорядочены три изображения , Если у вас более трех, вы должны сделать набор запросов «умнее» (т. Е. Простое получение не будет работать).

URL : 

def example(request):
    qs = Artwork.objects.all()
    objects_list = [qs.get(hero=position) for position in ["left", "middle", "right"]]
    return render("test.html", { "objects_list": objects_list})

HTML: 

{% extends 'base.html' %}

{% block content %}

<div class="container">
  <div class="row">
    {% for artwork in object_list %}
    <div class="col-sm p-3 align-items-center">
      <img class="img-fluid rounded" src="{{ artwork.art.url }}" />
      <p>{{ artwork.hero }}</p>
      <!--for testing-->
    </div>
    {% endfor %}
  </div>
</div>

{% endblock content %}
...