Django: How to go about loading multiple images from multiple objects on same render in html

Question

I have been searching and came across this (Multiple images per Model) which explains how to get all the images for a specific object but how would I load multiple images for a list of 2,000+ objects - I know I could loop and grab all the objects from each image but then how would I display the correct images with the correct objects in the html?

While writing this, I was wondering if this is a good use for template_tags but I am extremely new to them.

Working with these basic cut down models as an example.

class Auction(models.Model):
    auction_title = models.CharField(max_length=255, null=True)

class Listing(models.Model):
    auction_id = models.ForeignKey(Auction, on_delete=models.CASCADE)
    title = models.CharField(max_length=255)

class ListingImage(models.Model):
    listing_id = models.ForeignKey(Listing, on_delete=models.CASCADE, related_name='images')
    image = models.ImageField()

view example to run off of, expecting anything up to thousands of items returned.  
listings = Listing.objects.filter(time_ending__gte=datetime.now()).order_by('time_starting')

so with that example view above how would I go about grabbing each image for each of those listings and then more of an issue was finding the way to display those in html in loops or in any order or specifically chosen. Thank you so much for your help!

score 1 · Accepted Answer · edited Aug 30 '20 at 04:06

1

Suppose you want to list all the images (you can include more info as per your choice).

Within the same app:

views.py

from django.views.generic import ListView
from .models import ListingImage

class ImageListView(ListView):
    template_name = 'ImageView.html'
    model =  ListingImage

    def get_context_data(self):
        image_list = ListingImage.objects.all()
        context = {'image_list': image_list}
        return context

templates/ImageView.html

...
{% for image in image_list %}
    <li> {{ image.image }} </li>
{% endfor %}
...

You also have to define the URL in urls.py for that page. This is the minimum application. You can customize it as you want.

Edit
What ended up being the big solve that I did not understand, I was able to access the images from the object they were linked to. So in the end it was simply by having a view with the context being Listings = Listing.objects.all() and then by using this loop

{% for listing in listings %}  
  {% for image in listing.images.all %}  
    <img src="{{ image.image.url }}" />   
  {% endfor %}
{% endfor %}

I am not sure what the second loop would be if I did not have related_name on the image model, listing_id = models.ForeignKey(Listing, on_delete=models.CASCADE, related_name='images')

edited Aug 30 '20 at 04:06

Ober

49
10

answered Aug 25 '20 at 08:55

PhysicistSouravDas

355
4
17

1

Yeah, that is perfect for dumping out all the images, though I am trying for the images of each object. IE: Object A, object A's image/images, object B, object B's images ect... random number of images per object, possible to be none. – Ober Aug 28 '20 at 04:27
1

So if you want to list images for a particular listing in different URLs, then, in your urls.py, `'listing//images/', ImageListView.as_view(), name='image_list'`, and modify the query, `image_list = Listing.objects.all()`, and in your template, use `{% for image in image_list.image %}`. The link which after clicking will lead to respective listing's image should be like: `View Listing and Images`. You can add more features on top of it. – PhysicistSouravDas Aug 28 '20 at 08:34
1

Almost the right idea, trying to do it all through just the one view and one url, to display it all in a single html – Ober Aug 28 '20 at 09:19
1

Then it's easy! Just in your HTML file, add `{% for listing in object_list %}`, `{{ listing.title }}`, and then `{% for image in listing.images.all %}`, `{{ image }}`. This should do the trick! You can use `def get_context_data(self)`inside your **views.py** to define `object_list`. – PhysicistSouravDas Aug 28 '20 at 16:47
The result I am getting is for example "Listing Object (86)" for {{ image }} -- when I inspect the data in Pycharm it seems to know everything about it, file location ect, but no idea what to do to turn that image tag into the src location to display the image, when i type {{ image. no suggestions come up either. Is the information from listings.objects.all enough to get the images or will I need a listingimages.objects.all in the query as well? Thanks you so much, almost there! lol – Ober Aug 29 '20 at 06:07
1

Oh! I forgot about the `` tag. Your images are saved somewhere. Suppose your images are stored in the static folder of your root project directory (`root/static/images/`). Then each image is getting a unique name (maybe `.jpg`). Then include the relative URL as the src value inside `` tag. First, try with hardcoded values. Then try to access them via the Django way (``. Try yourself several times (since I don't know your file structure and your **views.py**). You will succeed. – PhysicistSouravDas Aug 29 '20 at 08:02
1

Thank you so much! This was what finally worked, with your suggestions and help! Greatly appreciated for your continued help! src="{{ image.image.url }}" – Ober Aug 29 '20 at 10:41
I am glad it finally worked for you! I also request you to add edits to the answer to make the appropriate changes, how it worked for you. Because everyone will not go through the comments, and if someone faces the same issue as you, then the answer will help him/her. – PhysicistSouravDas Aug 29 '20 at 15:07

Django: How to go about loading multiple images from multiple objects on same render in html

1 Answers1