时间戳

首页 > 解决方案 > Django 模板循环遍历具有父 ID 或 PK 的项目

django - Django 模板循环遍历具有父 ID 或 PK 的项目

问题描述

我正在尝试在 django 上设置宏伟的弹出窗口。我的目标是在主页概览图库视图中有一张主图片，当点击它时，将打开一个弹出窗口，其中包含来自同一张照片的相关图像，即具有相同 ID 或 PK 的图像。

我尝试应用以下方法 ，但我无法让它工作，也许有人可以帮助我

我的模型.py

class Item(models.Model):
name           = models.CharField(blank=False, max_length=200)    
category       = models.ForeignKey(Category, blank=True, null=True, on_delete=models.SET_NULL)
order          = models.IntegerField(blank=True, null=True)
active         = models.BooleanField(blank=True, default=False)
objects        = models.Manager()

class Meta:
    verbose_name_plural = 'items'

def __str__(self):
    return self.name

class ItemImage(models.Model):
image          = ProcessedImageField( 
                                blank=True, 
                                null=True,
                                processors=[ResizeToFit(width=1680, upscale=False)],
                                format='JPEG',
                                options={'quality':90})
order          = models.IntegerField(blank=True, null=True)
main           = models.BooleanField(blank=True, default=False)
cover          = models.BooleanField(blank=True, default=False)
item           = models.ForeignKey(Item, related_name='items', blank=True, null=True, on_delete=models.SET_NULL)
objects        = models.Manager()

class Meta:
    verbose_name_plural = 'item images'

视图.py

def portraits(request):
port = ItemImage.objects.filter(item__category__slug='portraits', item__active=True, main=True,).order_by('item__order')
portall = ItemImage.objects.filter(item__category__slug='portraits', item__active=True).order_by('item__order')
context = {
    'main_portraits': port,
    'all_portraits': portall
        }
return render(request, 'gallery/portraits.html', context)

和模板：

{% block content %}

<div class="grid">
  {% for pic in main_portraits %}
    <div class="item">
      <div class="item">
          <div class="outer-text">
            <div class="text">
              {{ pic.item.name }}
              <p>Click to view gallery</p>
            </div>
          </div>
          <a><img class="lazy" alt=""
          sizes="(min-width:1400px) 1220px
                (min-width:1000px) 1000px,
                (min-width:500px) 700px,
                (min-width:320px) 420px,
                280px"
          srcset="{{ pic.image_xs.url }} 280w, 
                  {{ pic.image_s.url }} 420w,
                  {{ pic.image_m.url }} 700w,
                  {{ pic.image_l.url }} 1000w,
                  {{ pic.image_xl.url }} 1220w" />
          </a> {{ pic.item.pk }}
      </div>                
      <div class="lazy">
        {% for p in all_portraits %}
          <a href="{{ z.item.pk }}"></a>
        {% endfor %}
      </div>
    </div>
  {% endfor %}
</div>

{% endblock %}

我已经设定

z.item.pk

只是作为一个测试，看看我的任何操作是否会导致 pk 聚集。例如，第一个 for-loop 返回 PK “24”的图片，我需要第二个 for-lop 只返回具有相同 PK 的图片；对于每张图片也是如此。我认为答案可能与 _set.all 函数有关，就像上面的相关问题一样，但我似乎无法让它在我的情况下工作。感觉好像我在这里遗漏了一些东西。

电流输出：

<div class="grid">

    <div class="item">
      <div class="item">
          <div class="outer-text">
            <div class="text">
              Palagā tītā
              <p>Click to view gallery</p>
            </div>
          </div>
          <a><img class="lazy" alt=""
          sizes="(min-width:1400px) 1220px
                (min-width:1000px) 1000px,
                (min-width:500px) 700px,
                (min-width:320px) 420px,
                280px"
          srcset="/media/CACHE/images/IMG_8329_3Vi8mYO_GD621ql/958ba5dbee5efe28fd2f5054b8f819e1.jpg 280w, 
                  /media/CACHE/images/IMG_8329_3Vi8mYO_GD621ql/02d12ca7f0633fee2fc762cf96f7889e.jpg 420w,
                  /media/CACHE/images/IMG_8329_3Vi8mYO_GD621ql/ba5fa6633e92a288e3b2f47a713d64c2.jpg 700w,
                  /media/CACHE/images/IMG_8329_3Vi8mYO_GD621ql/fe0d559fef5b02434c43f841005d4961.jpg 1000w,
                  /media/CACHE/images/IMG_8329_3Vi8mYO_GD621ql/96d0e52dff14d1bc4b60bbec674565db.jpg 1220w" />
          </a> 24
      </div>                
      <div class="lazy">

          <a href="24"></a>

          <a href="24"></a>

          <a href="24"></a>

          <a href="26"></a>

          <a href="27"></a>

          <a href="27"></a>

          <a href="30"></a>

          <a href="31"></a>

      </div>
    </div>

标签： djangodjango-modelsdjango-templatesdjango-views

解决方案

您可以像这样分解模型，这将使​​查询更容易。

# models.py
class Item(mdoels.Model):
    name = models.CharField(blank=False, max_length=200)
    category = models.ForeignKey(Category, blank=True, null=True, on_delete=models.SET_NULL)
    ...
    display_image = models.ProcessedImageField(...)


class ItemImage(models.Model):
    item = models.ForeignKey(Item, related_name='images', blank=True, null=True, on_delete=models.SET_NULL)
    image = models.ProcessedImageField(...)
    ...


#views.py
def portraits(request):
    items = Item.objects.filter(category__slug='portraits', active=True)
    return render(request, 'gallery/portraits.html', context={items: items})

#template
{% for item in items %}

    <h1> {{item.name}} </h1>
    <img src={{item.display_image}} />

    {% for item_image in item.images.all %}
        <img src={{item_image.image}} />
    {% endfor %}

{% endfor %}

推荐阅读