在 django 管理站点上添加多个图像并显示在详细信息页面上

Question

我正在做一个投资组合项目，我想在 Django 管理站点上添加多张图片，然后在 home/list 页面上显示 header_image 和项目标题之一（例如bootstrap 中的卡片 class 功能）和详细信息页面上的其他图像。是否可以？

Models.py

class MultiImage(models.Model): 
    header_image = models.ImageField(upload_to='media/')
    title = models.CharField(max_length=100)
    other_images = models.ImageField(upload_to='media/') # want this to be multiple image field
    description = models.TextField()
    link = models.URLField()
    created = models.DateTimeField(auto_now_add=True)
    updated = models.DateTimeField(auto_now=True)
    publish = models.BooleanField(default=True)

    class Meta:
        ordering = ('created', 'updated')

    def __str__(self):
        return self.title

index.html

{% for project in projects %}
 <div class="col-lg-4 col-md-6 portfolio-item filter-app">
  <div class="portfolio-wrap">
   <img src="{{ project.image.url }}" class="img-fluid" alt="">
   <div class="portfolio-links">
    <a href="{{ project.image.url }}" data-gall="portfolioGallery" class="venobox" title="{{ project.title }}"><i class="bx bx-plus"></i></a>
    <a href="{% url 'detail' project.id %}" title="More Details"><i class="bx bx-link"></i></a>
   </div>
  </div>
 </div>
{% endfor %}

detail.html

<div class="container">
 <div class="portfolio-details-container">

  <div class="owl-carousel portfolio-details-carousel">
   <img src="{% static 'img/portfolio-details-1.jpg' %}" class="img-fluid" alt=""> 
   <!-- all the images goes here -->
  </div>

  <div class="portfolio-info">
   <h3>Project Information</h3>
   <ul>
    <li><strong>Project </strong>: {{ project.title }}</li>
    <li><strong>Project Link to GitHub:</strong>: <a href="{{ project.link }}">{{ project.title }}</a </li>
   </ul>
  </div>

 </div>
</div>

list/index page img

detail page img1 detail page img2

Answer 1

如果您想针对单个 MultiImage 对象存储多个图像，最好的方法是创建一个单独的图像模型（您将在其中存储所有图像）然后指向它们回到带有外键的 MultiImage 实例。它看起来像这样：

class Image(models.Model):
    # add in anything else you want here
    image = models.ImageField((upload_to='media/')
    multiImage = models.ForeignKey(Reporter, on_delete=models.CASCADE, related_name='other_images')

这意味着，您创建的每个图像 'points' 到一个 MultiImage 实例。 related_name 属性是您获取所需所有图像的方式。例如：

multi_image_instance = MultiImage.objects.get(id=...)
images = multi_image_instance.other_images # this will return a QuerySet

在详细视图中，您可以执行以下操作：

{% for image in images %}
    <img src={image.image.url} />
{% endfor %}

在 django 管理站点上添加多个图像并显示在详细信息页面上

Adding multiple images on django admin site and showing on detail page

django

django-templates

django-admin