In the previous section, we had seen to display workshop details and style it. Here we will be looking as how we can add the instructor details of the particular workshop.
In the template we can use the workshop.workshopinstructor_set.all
to get the list of all instructors associated with a particular workshop. This allows to display them using a for loop further.
In the event/workshop_detail.html
make the following changes :
{% extends 'base.html' %}
{% block content %}
<div class="p-6 mb-6 rounded-lg m-4">
<h2 class="text-3xl font-semibold mb-4 text-center">{{ workshop.name }}</h2>
<h2 class="text-2xl font-semibold mb-4 text-center">{{ workshop.workshop_title }}</h2>
<p class="text-1xl font-bold mb-4 text-center">({{ workshop.event_type|upper }} WORKSHOP)</p>
{% if workshop.poster %}
<img src="{{workshop.poster.url}}" class="w-50 h-50 mx-auto mb-4"/>
{% endif %}
<p class="text-gray-200">{{ workshop.description }}</p>
<p class="text-gray-200 text-center">A <b>{{workshop.workshop_title}}</b> for <b>{{workshop.target_audience}}</b>
From <b>{{workshop.start_date}} - {{workshop.end_date}}</b> in <b>{{workshop.venue}}</b>
</p>
{% with workshop.workshopinstructor_set.all as instructors %}
{% if instructors %}
<h2 class="text-3xl text-orange-500 font-semibold mb-4 text-center mt-2">Instructors</h2>
{% endif %}
<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4">
{% for instructor in instructors %}
<div class="bg-gray-700 p-6 mb-6 rounded-lg">
<h3 class="text-xl text-green-500 font-bold mb-1 text-center">{{ instructor.instructor_name }}</h3>
{% if instructor.image %}
<img src="{{instructor.image.url}}" alt="Profile 1" class="rounded-full h-40 w-40 mx-auto mb-2">
{% endif %}
<p class="text-gray-200 text-center">{{ instructor.company_name }}</p>
<p class="text-gray-200 text-center">({{ instructor.designation }})</p>
</div>
{% endfor %}
</div>
{% endwith %}
</div>
{% endblock %}
So now with this, even the instructor details for a particular workshop would be displayed on the web page.