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!

Ober · Accepted Answer · 2020-08-30 04:06:01Z

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, 2020 at 4:06

Ober

491 silver badge11 bronze badges

answered Aug 25, 2020 at 8:55

PhysicistSouravDas

3855 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

Ober Over a year ago

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.

PhysicistSouravDas Over a year ago

So if you want to list images for a particular listing in different URLs, then, in your urls.py, 'listing/<int:pk>/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: <a href="{% url 'image_list' listing.id %}">View Listing and Images</a>. You can add more features on top of it.

Ober Over a year ago

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

PhysicistSouravDas Over a year ago

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 Over a year ago

Oh! I forgot about the <img> 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 <id>.jpg). Then include the relative URL as the src value inside <img> tag. First, try with hardcoded values. Then try to access them via the Django way (<img src="../../static/images/{{ image.id }}.jpg">. Try yourself several times (since I don't know your file structure and your views.py). You will succeed.

|

Collectives™ on Stack Overflow

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

1 Answer 1

8 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related