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

Question

I'm working on a portfolio project and I want to add multiple images on the Django admin site then displaying one of the header_image and title of a project on the home/list page (like card class functionality in bootstrap) and other images on the detail page. Is it possible?
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">
<i class="bx bx-plus"></i>
<i class="bx bx-link"></i>
</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

If you want to have several images stored against a single MultiImage object, the best way to do this is to create a separate image model (where you will store all of the images) and then point them back to the MultiImage instance with a foreign key. It will look something like this:
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')
This will mean, each image you create 'points' to a MultiImage instance. The related_name property is how you get all of the images you need. For example:
multi_image_instance = MultiImage.objects.get(id=...)
images = multi_image_instance.other_images # this will return a QuerySet
In the detail view you can do something like:
{% for image in images %}
<img src={image.image.url} />
{% endfor %}