Challenge: How to give next template a specific object as context

Using Django
1

Hi everyone,

I am writing a website for my company. It will have two html files, one for the team and for each member. I have written a model for each member. The team page has a for loop that places the picture and name of each member object on the team page.

I would like to have each picture/name to be clickable, which sends you to the member.html. The member html will then automatically add the name, title, role, picture and bio of that specific member object.

My challenge is, how do I get the picture/name on the team.html to be clickable, then send you to the member.html, while referencing that specific member object to be used to genereate the member.html?

image
image1304×625 109 KB

Thank you for your time, and I would appreciate any help given.

2

One idea I had was to place each name and picture on the team.html inside a form, which would post the object name to the member.html. The member view would then get that name from the form to select the member object then generate the divs with info specific to that object.

Is there an easier more Django way?

3

Hi @sad_man,

I would approach this by wrapping the image with an <a> element with a url that identifies the member.

{% for member in members %}
<a href="{% url "member" id=member.id %}">
    <img ... />
    ...
</a>
{% endfor %}

This assumes you have a url path in your urls.py file named member that takes a keyword argument named id. The view for that would be something like this:

from django.shortcuts import get_object_or_404

def member_view(request, id):
    member = get_object_or_404(Member, id=id)
    ...
1 Like
4

Hi @CodenameTim! Thanks very much for your reply. Seems like an elegant solution. I’m trying to do as you said, but I’m getting an error.

I get an error when trying to load the team.html template. Error is as follows. I’ve censored out tech.name in the error message.

NoReverseMatch at /genie/team

Reverse for ‘member2’ with keyword arguments ‘{‘object_key’: ‘tech.name’}’ not found. 1 pattern(s) tried: [‘genie/member2$’]

Here is my template teams.html:

    <h2>Lab Technicians (New Link Technique)</h2>  
    <div class="member-container">
        {% for tech in techs %}
            <a href="{% url 'genie:member2' object_key=tech.name %}">
                <div class="team-card">
                    <img src="{{ tech.picture.url }}" class="team-pic">
                    <h4>{{tech.name}}</h4>
                </div>
            </a>
        {% endfor %}
    </div>

Here is my view for the member2.html:

def member2(request, object_key):
    try: 
        member = Postdoc.objects.get(name=object_key)
        return render(request, 'genie/member2.html', {'member':member})
    except:
        member=None
    try: 
        member = Phd.objects.get(name=object_key)
        return render(request, 'genie/member2.html', {'member':member})
    except:
        member=None
    try: 
        member = Tech.objects.get(name=object_key)
        return render(request, 'genie/member2.html', {'member':member})
    except:
        member=None

I don’t get the error when I leave out ‘object_key=tech.name’ from the ‘{% url’ part. Any clue what I’m doing wrong? Many thanks.

5

Hi @sad_man,

It seems like the problem is with the URL patterns. Here’s the relevant part of the docs that should help. Give it a shot on your own first. Let me know if you’re still having issues.

1 Like