Access ForeignKey set directly in template in Django - django

Question

I have this simplified model:
class Item(models.Model):
name = models.CharField(max_length=120)
class ItemImage(models.Model):
image = models.ImageField(upload_to='upload_dir')
item = models.ForeignKey(Item)
An Item can have many ItemImages. I also have a template rendering the following data set from the view:
items = Item.objects.all()
So now I would want to do something like this in the template:
{% for item in items %}
<div>
{{ item.name }}<br>
<img src="{{ item.itemimage_set.all()[0] }}">
</div>
{% endfor %}
But obviously that's not possible. Not from the template directly, at least.
What is the proper way to get the equivalent of the first image inside the template?

Answer 1

{% with item.itemimage_set.all|first as image %}
<img src="{{ image.url }}" />
{% endwith %}

Answer 2

Or you could add a method to your Item model:
def get_first_image(self):
return self.itemimage_set.all()[0]
and then call this method in your template:
{{ item.get_first_image }}
Or you could use:
{{ item.itemimage_set.all.0 }}
and to get the first image's url:
<img src="{{ item.itemimage_set.all.0.url }}">
Though if you need more flexibility (more than one picture in certain cases, etc.) it's probably best to write a little templatetag.

Answer 3

One possible way would be to iterate over all the ItemImages like so:
{% for item in items %}
<div>
{{ item.name }}<br>
{% for image in item.itemimage_set.all %}
<img src="{{ image.image.url }}">
{% endfor %}
</div>
{% endfor %}

Answer 4

This worked for me, use the related_name in your models.
models.py
class Building(models.Model):
address = models.CharField(max_length=200, blank=True, null=True)
city = models.CharField(max_length=200, blank=True, null=True)
class Space(models.Model):
title = models.CharField(max_length=200, blank=True, null=True)
building = models.ForeignKey(Building, related_name="spaces_of_this_building")
buildings.html
{% for space in building.spaces_of_this_building.all %}
{{ space.title }}
{% endfor %}

Answer 5

If you want the first picture from set you can do:
{% for item in item.image_set.all %}
{{if forloop.first }}
<img src="{{ item.url }}">
{% endif %}
{% endfor %}
But i also love Andray solution with 'with'