Показывать связанные изображения к товару в Django?

Здравствуйте, я пытаюсь отобразить все изображения, относящиеся к определенному продукту, во всплывающем окне. Моя проблема в том, что когда я загружаю фотографию для одного из этих объектов, она отображается на обоих объектах, как я могу отфильтровать их для отображения на соответствующем объекте? Все эти объекты на одной странице

Фото 1

Popup

Панель администратора

my models.py

class Portfolio_Detail(models.Model):
title = models.CharField(max_length=50)
image = models.ImageField(upload_to='Portfolio/')

def __str__(self):
    return self.title

class Portfolio_Image(models.Model):
portfolio = models.ForeignKey(Portfolio_Detail,on_delete=models.CASCADE,related_name="portfolio")
image = models.ImageField(upload_to='Portfolio_Image/')

my views.py

def home(request):
portfolios = Portfolio_Detail.objects.all()
portfolio_images = Portfolio_Image.objects.filter()

context = {
    'portfolios' : portfolios,
    'portfolio_images' : portfolio_images,
}

return render(request, "index.html", context)

Мой шаблон

       <!-- Portfolio Section Start  -->
<section class="portfolio-section sec-padding" id="portfolio">
  <div class="container">
    <div class="row">
      <div class="section-title">
        <h2>Recent Works</h2>
      </div>
    </div>
    <div class="row">
      <!-- Portfolio Item1 Start -->
      {% for item in portfolios %}
      <div class="portfolio-item">
        <div class="portfolio-item-thumbnail">
          <img src="{{item.image.url}}" alt="portfolio item Thumb">
        </div>
        <h3 class="portfolio-item-title">{{item.title}}</h3>
        <button type="button" class="btn view-project-btn">View Project</button>
        <div class="portfolio-item-details">
          <div class="description">
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
          </div>
          <div class="general-info">
            <ul>
              <li>Created : <span>4 dec 2020</span></li>
              <li>Technology : <span>Html</span></li>
              <li>Role : <span>Frontend</span></li>
              <li>View Online : <span><a href="#" target="_blank">www.domain.com</a></span></li>
            </ul>
          </div>
        </div>
      </div>
      <!-- Portfolio Item1 End -->
      {% endfor %}
    </div>
  </div>
</section>

   <div class="portfolio-popup">
<div class="pp-inner">
  <div class="pp-content">
    <div class="pp-header">
      <button type="button" class="btn pp-close"><i class="fas fa-times"></i></button>
      <div class="pp-thumbnail">
      {% for item in portfolio_images %}
        <img src="{{item.image.url}}" alt="">
      {% endfor %}
      </div>
      <h3></h3>
    </div>
    <div class="pp-body">
    </div>
  </div>
</div>

Вы можете изменить ваш models.py как показано ниже:

   class PortfolioImage(models.Model):
        image = models.ImageField(upload_to='portfolio_image/')
    
    
    class PortfolioDetail(models.Model):
        title = models.CharField(max_length=50)
        images = models.ManyToManyField(PortfolioImage)
    
        def __str__(self):
            return self.title

затем в вашем HTML:

Вернуться на верх