For the past few days, I have been attempting to provide the admin user with the ability to upload multiple images/slides for each individual post. One idea that came to mind was nesting a for loop inside the posts' for loop so that for every post, all associated images are also rendered. However, it seems that I am struggling to get this implementation right.
class Post(models.Model):
title = models.CharField(max_length=128)
image = models.ImageField(default='default.jpg', upload_to='post_pics')
content = models.TextField()
date_posted = models.DateTimeField(default=timezone.now)
category = models.ForeignKey(Category, on_delete=models.CASCADE)
def __str__(self):
return f"{self.title} - {self.category}"
def get_image_filename(instance, filename):
title = instance.post.title
slug = slugify(title)
return "post_images/%s-%s" % (slug, filename)
class Images(models.Model):
post = models.ForeignKey(Post, default=None, on_delete=models.CASCADE, related_name='Images')
image = models.ImageField(upload_to=get_image_filename, verbose_name='Images')
def __str__(self):
return f"imazh per {self.post}"
and my HTML:
<div class="post-list-container">
{% for post in posts %}
<article class="post-container">
<div class="post-top">
>Pay attention to the for loop here
{% for post.Images in post.Images %}
<img src="{{ post.Images.url }}">
{% endfor %}
<div class="post-title"><a href="#"><h1>{{ post.title }} </h1></a></div>
<div class="post-images">
<img class="rounded" src="{{ post.image.url }}">
</div>
</div>
<div class="post-middle">
<div class="post-content"><p> {{ post.content }}</p> </div>
</div>
<div class="post-bottom">
<div class="post-category"><a href="{% url 'by-category' post.category %}"><h2>{{ post.category }}</h2></a>
</div>
<div class="post-date_posted"><h1>{{ post.date_posted|date:"F d, Y" }}</h1>
</div>
</div>
</article>
{% endfor %}
</div>Can anyone recommend a solution for rendering these images in this manner?