Показывать связанные изображения к товару в Django?
Здравствуйте, я пытаюсь отобразить все изображения, относящиеся к определенному продукту, во всплывающем окне. Моя проблема в том, что когда я загружаю фотографию для одного из этих объектов, она отображается на обоих объектах, как я могу отфильтровать их для отображения на соответствующем объекте? Все эти объекты на одной странице
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: