Displaying an image stored in a Django database

I have a website dedicated to pets (dead ones), and I have some stock images in the database stored under the pet using a manytomany field (so, any number of pets can be in an image, and a pet can have any number of images associated with it--seems logical so far). I am trying to display the pet photos in any way at all in one of the templates.

My problem is, I have no idea of the correct syntax for iterating over a `context_dictionary data structure I have made to store pets and pet photos for the purpose of accessing in the associated template file. I am having to do this because I think (correct me if I'm wrong) a view can only have one associated model, and I need a few models, their data, to display in one view. So. It is what it is.

I think it's probably about time I showed some of my code. Here is one after another:

pet_profile/models.py

from django.db import models
from django.utils.crypto import get_random_string
import uuid
from django.urls import reverse

class PetPhoto(models.Model):
    slug = models.SlugField(max_length = 5, primary_key = True, blank = True, null=False)
    title = models.CharField(max_length = 255)
    id = models.CharField(max_length = 261, default=uuid.uuid1)
    photo = models.ImageField(blank = False)

    def save(self, *args, **kwargs):  # new
        slug_save(self)
        get_ID2(self)
        return super().save(*args, **kwargs)

    def __str__(self):
        return self.title


class PetStory(models.Model):
    slug = models.SlugField(max_length = 5, primary_key = True, blank = True, null=False)
    title = models.CharField(max_length = 255)
    content = models.TextField(max_length = 1000)
    
    def save(self, *args, **kwargs):  # new
        slug_save(self)
        get_ID(self)
        return super().save(*args, **kwargs)

    def __str__(self):
        return self.title

    class Meta:
        verbose_name_plural = "PetStories"


ANIMALTYPE_CHOICES = (
    ('dog', 'the one that barks'),
    ('cat', 'the one that meows'),
    ('lizard', 'the one that eats crickets'),
    ('snake', 'the one that slithers'),
    ('rabbit/bunny', 'the one that hops'),
    ('bird', 'the one that flaps'),
    ('fish', 'the one that swims'),
    ('frog', 'the one that croaks'),
)

class Pet(models.Model):
    slug = models.SlugField(max_length = 5, primary_key = True, blank = True, null=False)
    name = models.CharField(max_length = 255, unique = False)
    id = models.CharField(max_length = 261, unique = True, default = uuid.uuid1)
    animaltype = models.CharField(choices = ANIMALTYPE_CHOICES, max_length = 255, default="the one that barks")
    age = models.PositiveIntegerField()
    pet_photos = models.ManyToManyField(PetPhoto, related_name = "pets", blank = True)
    pet_stories = models.ManyToManyField(PetStory, related_name = "pets", blank = True)

    def save(self, *args, **kwargs):  # new
        slug_save(self)
        get_ID(self)
        return super().save(*args, **kwargs)

    def __str__(self):
        return self.name


class PetOwner(models.Model):
    slug = models.SlugField(max_length = 5, primary_key = True, blank = True, null=False)
    name = models.CharField(max_length = 255)
    id = models.CharField(max_length = 261, unique = True, default=uuid.uuid1)
    age = models.PositiveIntegerField()
    location = models.CharField(max_length = 255)
    profile_photo = models.ImageField(blank = True)
    pets = models.ManyToManyField(Pet, related_name = "Owners")

    def get_absolute_url(self):
        return reverse("owner_profile", kwargs={"slug": self.slug})  

    def save(self, *args, **kwargs):  # new
        slug_save(self)
        get_ID(self)
        return super().save(*args, **kwargs)

    def __str__(self):
        return self.name

def slug_save(obj):
    """ A function to generate a 5 character slug and see if it has been used and contains naughty words."""
    if not obj.slug: # if there isn't a slug
        obj.slug = get_random_string(5) # create one
        slug_is_wrong = True  
        while slug_is_wrong: # keep checking until we have a valid slug
            slug_is_wrong = False
            other_objs_with_slug = type(obj).objects.filter(slug=obj.slug)
            if len(other_objs_with_slug) > 0:
                # if any other objects have current slug
                slug_is_wrong = True
            #if predict(obj.slug):
            #    slug_is_wrong = True
            if slug_is_wrong:
                # create another slug and check it again
                obj.slug = get_random_string(5)

def get_ID(obj):
    obj.id = obj.name + '-' + obj.slug

def get_ID2(obj):
    obj.id = obj.title + '-' + obj.slug

Of relevance are Pet and PetPhoto. Pay attention to those. Notice that Pet stores associated pet_photos in a manytomany field, and afaik you don't need to reverse the data interaction--you can just access it using a reverse set query or something like that.

pet_profile/views.py

from django.shortcuts import render
from django.views.generic import (ListView,
                                  DetailView)
from pet_profile.models import PetOwner, Pet, PetPhoto, PetStory

class PetOwnerListView(ListView):
    model = PetOwner
    context_object_name = "owner_list"
    template_name = "home.html"

class PetOwnerDetailView(DetailView):
    model = PetOwner
    context_object_name = "owner"
    template_name = "pet_owner_profile.html"
    def get_context_data(self, *args, **kwargs):
        context = super().get_context_data(**kwargs)
        context['pet_photos'] = {}
        pets = PetOwner.objects.filter(name = "pets")
        for pet in pets:
            context['pet_photos'][pet] = []
            for photo in pet.pet_photos:
                context['pet_photos'][pet] += photo
        # context['pet_photos'] = {pet1: [photo1, photo2, photo3], pet2: [photo1, photo2]}
        return context

class PetListView(ListView):
    model = Pet
    context_object_name = "pet_list"

class PetDetailView(DetailView):
    model = Pet
    context_object_name = "pet"

class PetPhotoListView(ListView):
    model = PetPhoto
    context_object_name = "pet_photo_list"

class PetPhotoDetailView(DetailView):
    model = PetPhoto
    context_object_name = "pet_photo"

class PetStoryListView(ListView):
    model = PetStory
    context_object_name = "pet_story_list"

class PetStoryDetailView(DetailView):
    model = PetStory
    context_object_name = "pet_story"

Most of the action here is in PetOwnerDetailView. By most I mean all of it.

This is where I tried to make a data structure to store pets and their photos because I didn't know how to access the endogenous data structure of the manytomany field. Also you can't iterate over a manytomanyfield in django.

I stored pets as keys in a dict, and associated photos in respective lists as the values. Don't get too hung up on the syntax of my stuff, I know it's probably wrong, and it is, in fact, like the hundredth iteration of how I've tried to do things (store the data for access in the template downstream). So. Apologies.

I learned that you can't iterate over manytomanyfields, even with .all(), so I tried a filter but I am new to filters, and I don't know if "name" refers to the title of the parameter in the model, or to a parameter named "name". I think it's the latter but the internet isn't good at discerning fine-grained questions like this. Why I'm here.

And the template, finally:
pet_owner_profile.html

{% extends "base.html" %}
{% block header %}
{% endblock %}
{% block content %}
    {{ owner.name }}
    {{ owner.age }}
    {{ owner.location }}
    {{ owner.profile_photo }}
    {% for pet in owner.pets.all %}
        {{ pet.name }}
        {{ pet.animaltype }}
        {{ pet.age }}
        <!-- context['pet_photos'] = {pet1: [photo1, photo2, photo3], pet2: [photo1, photo2]} -->
        {% for photo in pet_photos.pet.photos %}
            <img src = "{{ photo.photo.url }}">
        {% endfor %}
    {% endfor %}
{% endblock %}

All the weird stuff, like photo.photo.url instead of just photo (wouldn't that be nice), are mostly from suggestions on the internet because I don't ad hoc know how to display an image in django, from a database. Although, photo is the iterable, and .photo is the model parameter. The former is the PetPhoto object, and the latter is the photos parameter. I hope that's clear. .url is something I found on the internet. Yes, I am rationalizing everything, thinking it through, and testing, not blindly, but cautiously.

The second half of this is, whether I am using my static/ directory structure correctly.

So far, I have a static/ folder under the master pet_memorial folder (NOT the project-level pet_memorial sub-folder--nor the pet_profile app folder).

Here are my parameters in settings:

STATIC_URL = '/static/'
STATIC_ROOT = os.path.join(BASE_DIR, 'static/')

I hope that's right but I was hoping someone could correct me if it's wrong.

Assuming that MEDIA_ROOT and MEDIA_URL settings are correctly configured in your settings.py file to display the pet photos in the template.

To display the pet photos in a template, you need to pass the pets and their associated photos to the template as context. Since you want to display data from multiple models in one view, so creating a dictionary would be better, like so:

from django.shortcuts import render
from .models import Pet, PetPhoto

def all_pet_photos(request):
    pets = Pet.objects.all()
    pet_data = {}
    for pet in pets:
        pet_data[pet] = PetPhoto.objects.filter(pets=pet)
    context = {'pet_data': pet_data}
    return render(request, 'pet_owner_profile.html', context)

Then in your template, you can iterate over the pet_data dictionary using a for loop, like so:

{% extends 'base.html' %}

{% block content %}
    <h1>Pet Photos</h1>
    {% for pet, photos in pet_data.items %}
        <h2>{{ pet.name }}</h2>
        {% for photo in photos %}
            <img src="{{ photo.photo.url }}" alt="{{ photo.title }}">
        {% endfor %}
    {% endfor %}
{% endblock %}