Confusion with templates in django - django

Question

I was learning django and I have the following template:
{% load static ax_base %}
{% for tm in team_list %}
<div>
<div class="card our-team-slider-card mb-3">
<div class="row no-gutters">
<div class="col-sm-4">
<a href="" class="card-img-wrap" data-toggle="modal"
data-target=".our-team-photo">
<img src="{% static tm.img %}"
class="card-img" alt="...">
</a>
</div>
<div class="col-sm-8">
<div class="card-body">
<h5 class="card-title mb-4">{{ tm.name }}</h5>
<div class="profession mb-4 fz14 opa05">{{ tm.position }}</div>
<p class="card-text fz14 opa05">{{ tm.bio }}</p>
<div class="contacts mb-2">
<a href=""
class="styled-link text-black">{{ tm.phone }}</a><span> , </span>{{ tm.email }}
</div>
Send message
</div>
</div>
</div>
</div>
</div>
{% endfor %}
So, the problem is I have two places where the above template is reused but what I want to do is to use col-sm-4 class in one place but not use col-sm-4 in the other place. Should I create two separate templates for that, that is, one template that uses col-sm-4 and the other template that does not use col-sm-4? Would that be correct?

Answer 1

{% load static ax_base %}
{% for tm in team_list %}
<div>
<div class="card our-team-slider-card mb-3">
<div class="row no-gutters">
{% if not hide %}
<div class="col-sm-4">
<a href="" class="card-img-wrap" data-toggle="modal"
data-target=".our-team-photo">
<img src="{% static tm.img %}"
class="card-img" alt="...">
</a>
</div>
{% endif %}
<div class="col-sm-8">
<div class="card-body">
<h5 class="card-title mb-4">{{ tm.name }}</h5>
<div class="profession mb-4 fz14 opa05">{{ tm.position }}</div>
<p class="card-text fz14 opa05">{{ tm.bio }}</p>
<div class="contacts mb-2">
<a href=""
class="styled-link text-black">{{ tm.phone }}</a><span> , </span>{{ tm.email }}
</div>
Send message
</div>
</div>
</div>
</div>
</div>
{% endfor %}

Answer 2

I guess your were wrong when you passed the image with {% static tm.img %} better change it to {{ tm.img }}
{% load static ax_base %}
{% for tm in team_list %}
<div>
<div class="card our-team-slider-card mb-3">
<div class="row no-gutters">
<div class="col-sm-4">
<a href="" class="card-img-wrap" data-toggle="modal"
data-target=".our-team-photo">
<img src="{{ tm.img }}"
class="card-img" alt="...">
</a>
</div>
<div class="col-sm-8">
<div class="card-body">
<h5 class="card-title mb-4">{{ tm.name }}</h5>
<div class="profession mb-4 fz14 opa05">{{ tm.position }}</div>
<p class="card-text fz14 opa05">{{ tm.bio }}</p>
<div class="contacts mb-2">
<a href=""
class="styled-link text-black">{{ tm.phone }}</a><span> , </span><a>
href="" class="styled-link text-black">{{ tm.email }}</a>
</div>
Send message
</div>
</div>
</div>
</div>
</div>
{% endfor %}

Answer 3

You should just pass a variable in render context dict and use that for the conditionally shown block:
{% if show_photo %}
<div class="col-sm-4">
...
</div>
{% endif %}
If it is the actual class you want or don't want to use, it can also be handled in exactly same syntax:
<div class="{% if use_sm_4 %} col-sm-4 {% else %} some-other-class {% endif %}">
...
</div>