CODEWITHSUNDEEP
djangodjango-modelsdjango-viewsdjango-templates
Godda
Godda

Reputation: 1001

How to display multiple images in a django template img element

I am having a challenge displaying multiple images users post to one img template element, for one reason if i try fetching images with the default related name it wouldn't show in the template and i wonder what i am doing wrong. Can anyone be of help! Here is my model for post.

class Post(models.Model):
    page = models.ForeignKey(Page, on_delete=models.CASCADE, related_name="page")
    username = models.ForeignKey(settings.AUTH_USER_MODEL,on_delete=models.CASCADE ,related_name="page_user")
    description = models.TextField(max_length=500, blank=True)
    video = models.FileField(upload_to="PageVideos", blank=True)
    pic = models.ImageField(blank=True)
    date_posted = models.DateTimeField(auto_now_add=True)
    tags = models.CharField(max_length=100, blank=True)

    class Mete:
        ordering = ['-date_posted']
    
    def __str__(self):
        return self.description
   

class PostImage(models.Model):
    #page = models.ForeignKey(Page, on_delete=models.CASCADE, related_name="pg")
    post = models.ForeignKey(Post, default=None, on_delete=models.CASCADE)
    images= models.ImageField(upload_to="postimages/")

Here is my Detail view

def page_detail(request,id):
    post = get_object_or_404(Post, id=id)
    photos = PostImage.objects.filter(post=post)

    context = {
        'post':post,
        'photos':photos
    }
    return render(request, 'page/detail.html',context)

These my Template to display users images

 <div class="p-3 border-b dark:border-gray-700">
      {{ post.description }}
     </div>
     <div uk-lightbox>
        <div class="grid grid-cols-2 gap-2 p-2">
         {% for p in photos.images_set.all %}
         
            <a id="images" href="{{ p.images.url }}"  class="col-span-2" >  
                <img src="{{ p.images.url }}"  alt="" class="rounded-md w-full lg:h-76 object-cover">
            </a>
            <a href="">  
                <img src="" alt="" class="rounded-md w-full h-full">
            </a>
            <a href="" class="relative">  
                <img src="" alt="" class="rounded-md w-full h-full">
                <div class="absolute bg-gray-900 bg-opacity-30 flex justify-center items-center text-white rounded-md inset-0 text-2xl"> + see more </div>
            </a>
   
       {% endfor %}
        </div>
     </div>

Upvotes: 0

Views: 502

Answers (1)

rgermain
rgermain

Reputation: 708

your photos is a list you dont need reverse m2m (the "images_set") simply change this in html

....
<div class="grid grid-cols-2 gap-2 p-2">
 {% for p in photos %}
  ....

for optimize you can do this

from django.http import Http404
...
def page_detail(request,id):
    try:
       # with prefetch you do only one sql request
       post = Post.objects.select_related('images_set').get(id=id)
    expect Post.DoesNotExist as err:
        raise Http404(err)

    context = {
        'post': post,
        'photos': post.images_set.all()
    }
    return render(request, 'page/detail.html',context)

Upvotes: 1

Related Questions