Develop Reference

Quick question: CSS alteration for DMs on social media site

I am trying to get the image to line up above the sent message as you would have it in most standard DMs: https://prnt.sc/IR__3qyiXqlI (what I want it to look like)
But for some reason, the text attached to the image proceeds to layer itself beside the image rather than below the image, as shown in the screenshot below. When I add float: right; to my CSS the image and the text layer horizontally in a strange manner: what it looks like currently
Ideally, the image should be on the same side as the texts from the person who sent the image and should be just above the message that was attached to the image (as is commonplace).
The HTML doc the DMs are stored on:
thread.html:
> {% extends 'landing/base.html' %} {% load crispy_forms_tags %}
>
> {% block content %}
>
> <div class="container">
> <div class="row">
> <div class="card col-md-12 mt-5 p-3 shadow-sm">
> {% if thread.receiver == request.user %}
> <h5><a href="{% url 'profile' thread.user.profile.pk %}"><img class="rounded-circle post-img" height="50" width="50"
> src="{{ thread.user.profile.picture.url }}" /></a> #{{ thread.user
> }}</h5>
> {% else %}
> <h5>#{{ thread.receiver }}</h5>
> {% endif %}
> </div>
> </div>
>
> {% if message_list.all.count == 0 %}
> <div class="row my-5">
> <div class="col-md-12">
> <p class="empty-text">No messages yet.</p>
> </div>
> </div>
> {% endif %}
>
> {% for message in message_list %}
> <div class="row">
> {% if message.sender_user == request.user %}
> <div class="col-md-12 my-1">
>
> <div class="message-sender-container ms-auto">
> {% if message.image %}
> <img src="{{ message.image.url }}" class="message-image-sent" />
> {% endif %}
> <div class="sent-message my-1">
> <p>{{ message.body }}</p>
> </div>
> </div>
>
>
> </div>
> {% elif message.receiver_user == request.user %}
> <div class="col-md-12">
> {% if message.image %}
> <div class="message-receiver-container offset-6">
> <img src="{{ message.image.url }}" class="message-image-received" />
> </div>
> {% endif %}
> <div class="received-message my-3">
> <p>{{ message.body }}</p>
> </div>
> </div>
> {% endif %}
> </div>
> {% endfor %}
>
>
> <div class="row">
> <div class="card col-md-12 p-3 shadow-sm">
> <form method="POST" action="{% url 'create-message' thread.pk %}" enctype="multipart/form-data">
> {% csrf_token %}
> {{ form | crispy }}
>
> <div class="d-grid gap-2 mt-3">
> <button btn btn-light type="submit">Send Message</button>
> </div>
> </form>
> </div>
> </div> </div>
>
> {% endblock content %}
the relevant CSS file:
style.css:
.empty-text {
color: #777;
font-size: 1.5rem;
text-align: center;
}
.sent-message {
background-color: #d7a5eb;
border-radius: 30px;
padding: 10px 25px;
width: 25%;
float: right;
}
.received-message {
background-color: #cc64c3;
color: #000;
border-radius: 30px;
padding: 10px 25px;
width: 25%;
}
.message-receiver-container {
margin-left: auto;
margin-right: 0;
}
.message-sender-container {
margin-left: 0;
margin-right: auto;
}
.message-image-received {
border-radius: 10px;
max-width: 35%;
height: auto;
}
.message-image-sent {
border-radius: 10px;
max-width: 35%;
height: auto;
float: right;
}
.shared-post {
margin-left: 30px;
}

#Eduardo Tolmasquim
I've tried adding that and even with trial and error it didn't change anything. Despite this, I've managed to ~half way~ fix it, only problem is now the sent messages and received messages are on the wrong side! (i.e. the messages sent by the logged in user are on the left and the messages they received are on the right, on most apps like Whatsapp it is the other way round). This is what it looks like now.
thread.html:
{% extends 'landing/base.html' %}
{% load crispy_forms_tags %}
{% block content %}
<div class="container">
<div class="row">
<div class="card col-md-12 mt-5 p-3 shadow-sm">
{% if thread.receiver == request.user %}
<h5><img class="rounded-circle post-img" height="50" width="50" src="{{ thread.user.profile.picture.url }}" /> #{{ thread.user }}</h5>
{% else %}
<h5>#{{ thread.receiver }}</h5>
{% endif %}
</div>
</div>
{% if message_list.all.count == 0 %}
<div class="row my-5">
<div class="col-md-12">
<p class="empty-text">No messages yet.</p>
</div>
</div>
{% endif %}
{% for message in message_list %}
<div class="row">
{% if message.sender_user == request.user %}
<div class="col-md-12 my-1">
{% if message.image %}
<div class="message-sender-container ms-auto">
<img src="{{ message.image.url }}" class="message-image" />
</div>
{% endif %}
<div class="sent-message my-3">
<p>{{ message.body }}</p>
</div>
</div>
{% elif message.receiver_user == request.user %}
<div class="col-md-12 offset-6">
{% if message.image %}
<div>
<img src="{{ message.image.url }}" class="message-image" />
</div>
{% endif %}
<div class="received-message my-3">
<p>{{ message.body }}</p>
</div>
</div>
{% endif %}
</div>
{% endfor %}
<div class="row">
<div class="card col-md-12 p-3 shadow-sm">
<form method="POST" action="{% url 'create-message' thread.pk %}" enctype="multipart/form-data">
{% csrf_token %}
{{ form | crispy }}
<div class="d-grid gap-2 mt-3">
<button btn btn-light type="submit">Send Message</button>
</div>
</form>
</div>
</div>
</div>
{% endblock content %}
style.css:
.empty-text {
color: #777;
font-size: 1.5rem;
text-align: center;
}
.sent-message {
background-color: #d7a5eb;
border-radius: 30px;
padding: 10px 25px;
width: 35%;
}
.received-message {
background-color: #cc64c3;
color: #000;
border-radius: 30px;
padding: 10px 25px;
width: 35%;
}
.message-sender-container {
margin-left: auto;
margin-right: 0;
}
.message-image {
border-radius: 10px;
max-width: 35%;
height: auto;
}
.shared-post {
margin-left: 30px;
}

Creating Relational database with user model in Django. I think i have created relational database but i don't know whats going wrong

I think i have successfully created relation between user model and another table called shop_details but the data is not been inserted. i don't know what is going wrong.
the code is here.
models.py
from django.db import models
from django.contrib.auth.models import User
class Shop_Details(models.Model):
user = models.ForeignKey(User, on_delete=models.CASCADE)
shop_name = models.CharField(max_length=50)
shop_street = models.TextField()
shop_area = models.TextField()
city = models.CharField(max_length=50)
state = models.CharField(max_length=50)
pin_code = models.TextField()
my views.py is here
views.py
def shop_detils(request):
if request.method == "POST":
shop_name = request.POST['shop_name']
shop_street = request.POST['shop_street']
shop_area = request.POST['shop_area']
city = request.POST['city']
state = request.POST['state']
pin_code = request.POST['pin_code']
if(len(str(pin_code))!=6):
messages.info(request,"please provide a valid address pin-code")
print("niceee...........................")
return render(request,'shop_details.html')
else:
if(is_number(int(pin_code))):
shop = Shop_Details(shop_name=shop_name,shop_street=shop_street,shop_area=shop_area,city=city,state=state,pin_code=pin_code,user=request.user)
shop.save()
messages.info(request,"Shop Details Updated")
shop_data = Shop_Details.objects.filter(user = request.user)
print(shop_data[1])
print("congrats...........................")
return redirect('home',{'data':shop_data})
else:
messages.info(request,"please provide a valid address")
print("nice2222222222222222222222222")
return render(request,'shop_details.html')
else:
return render(request,'shop_details.html')
my shop_details.html is here
shop_detsils.html
enter code here
{% extends 'layout.html' %}
{% csrf_token %}
{% if user.is_authenticated %}
{% csrf_token %}
{% load static %}
{% csrf_token %}
<meta name="viewport" content="width=device-width, initial-scale=1">
{% csrf_token %}
<body align="center">
{% csrf_token %}
{% csrf_token %}
{% csrf_token %}
{% block content %}
<form action="shop_detils" method="POST">
{% csrf_token %}
<div align="center" class='resp_code frms'>
{% csrf_token %}
<p align='center'<h5><font style='font: 1em/1.3em Tahoma,Geneva,sans-serif;'>
<b>Shop Details</b></font></h5></p>
<div id="selection">
{% csrf_token %}
<table>
{% csrf_token %}
<tr><td>Shop Name: </td><td><input required style="width:200%;" name="shop_name" type="text"></td></tr>
<tr><td>Shop Street: </td><td><input required style="width:200%;" name="shop_street" type="text"></td></tr>
<tr><td>Shop Area: </td><td><input required style="width:200%;" name="shop_area" type="text"></td></tr>
<tr><td>City: </td><td><input required style="width:200%;" name="city" type="text"></td></tr>
<tr><td>State: </td><td><input required style="width:200%" list="state" name="state" type="text"></td></tr>
<datalist id="state">
<option value="Andhra Pradesh">Andhra Pradesh</option>
<option value="Andaman and Nicobar Islands">Andaman and Nicobar Islands</option>
<option value="Arunachal Pradesh">Arunachal Pradesh</option>
<option value="Assam">Assam</option>
<option value="Bihar">Bihar</option>
<option value="Chandigarh">Chandigarh</option>
<option value="Chhattisgarh">Chhattisgarh</option>
<option value="Dadar and Nagar Haveli">Dadar and Nagar Haveli</option>
<option value="Daman and Diu">Daman and Diu</option>
<option value="Delhi">Delhi</option>
<option value="Lakshadweep">Lakshadweep</option>
<option value="Puducherry">Puducherry</option>
<option value="Goa">Goa</option>
<option value="Gujarat">Gujarat</option>
<option value="Haryana">Haryana</option>
<option value="Himachal Pradesh">Himachal Pradesh</option>
<option value="Jammu and Kashmir">Jammu and Kashmir</option>
<option value="Jharkhand">Jharkhand</option>
<option value="Karnataka">Karnataka</option>
<option value="Kerala">Kerala</option>
<option value="Madhya Pradesh">Madhya Pradesh</option>
<option value="Maharashtra">Maharashtra</option>
<option value="Manipur">Manipur</option>
<option value="Meghalaya">Meghalaya</option>
<option value="Mizoram">Mizoram</option>
<option value="Nagaland">Nagaland</option>
<option value="Odisha">Odisha</option>
<option value="Punjab">Punjab</option>
<option value="Rajasthan">Rajasthan</option>
<option value="Sikkim">Sikkim</option>
<option value="Tamil Nadu">Tamil Nadu</option>
<option value="Telangana">Telangana</option>
<option value="Tripura">Tripura</option>
<option value="Uttar Pradesh">Uttar Pradesh</option>
<option value="Uttarakhand">Uttarakhand</option>
<option value="West Bengal">West Bengal</option>
</datalist>
<tr><td>Pin-code: </td><td><input required name="pin_code" type="text"></td></tr>
</table>
<input style="border-radius: 0.5em; background-color:rgba(2, 2, 253, 0.753);
width:2.5cm;height:0.8cm; font-family: sans-serif;" type="submit" value="Submit">
</div>
</div>
</form>
{% endblock %}
</body>
{% endif %}
my layout.html is here. basically Iam extending layout.html in all html files.
layout.html
<!DOCTYPE html>
{% load static %}
{% csrf_token %}
<html>
<title>GrocSale</title>
<head>
<script language="Javascript" href="{% static 'js/jquery.js' %}"></script>
<script type="text/JavaScript" href="{% static 'js/state.js'%}"></script>
<link rel="stylesheet" type="text/css" href="{% static 'style.css'%}">
</head>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
{% csrf_token %}
<style>
* {box-sizing: border-box}
body{
background:url("{% static 'groc.jpeg' %}") no-repeat;
background-size:cover ;
background-attachment:fixed;
}
body:after {
content: "";
position: fixed;
top: 0; bottom: 0; left: 0; right: 0;
background: hsla(180,0%,50%,0.25);
pointer-events: none;
}
.tab {
float: left;
border: 1px solid #ccc;
background-color: #f1f1f1;
width: 20%;
height: 1000px;
}
/* Style the buttons that are used to open the tab content */
.tab button {
display: block;
background-color: inherit;
color: black;
padding: 22px 16px;
width: 100%;
border: none;
outline: none;
text-align: left;
cursor: pointer;
transition: 0.3s;
}
/* Change background color of buttons on hover */
.tab button:hover {
background-color: #ddd;
}
/* Create an active/current "tab button" class */
.tab button.active {
background-color: #ccc;
}
/* Style the tab content */
.tabcontent {
float: left;
padding: 0px 12px;
border: 1px solid #ccc;
width: 70%;
border-left: none;
height: 300px;
}
.divs{
width: 300px;
height: 300px;
border: 1px solid green;
padding: 50px;
float: left;
border-radius: 1em;
box-shadow: 10px 10px;
margin-right: 15px;
margin-left: 15px;
margin-top: 15px;
}
.divs:hover:not(.active) {
background-color: gold;
cursor: grab;
}
</style>
<body>
{% csrf_token %}
<header align="center" style="height: 150px;background-color:orange">
{% csrf_token %}
<strong>
{% csrf_token %}
{% for detail in data%}
<h1>{{detail.shop_name}}</h1>
<h4>Arokya,Hatsun,Arun All Products Available Here</h4>
<h6>{{detail.shop_street}}{{detail.shop_area}}, {{detail.city}}, {{detail.state}} - {{detail.pin_code}}</h6>
{% endfor %}
</strong>
</header>
<div style="background-color:orange;" class="tab" >
{% csrf_token %}
<button class="w3-bar-item w3-button" >Home</button>
<button class="w3-bar-item w3-button" >Add/Update Product</button>
<button class="w3-bar-item w3-button" >Add Stock/Update Stock</button>
<button class="w3-bar-item w3-button" >Add Sale</button>
<button class="w3-bar-item w3-button" >Total Sale</button>
<button class="w3-bar-item w3-button" >Daily Collection Customers</button>
<button class="w3-bar-item w3-button" >Today's Collection Status</button>
<button class="w3-bar-item w3-button" >Show Products</button>
<button class="w3-bar-item w3-button" >All Stock Orders</button>
<button class="w3-bar-item w3-button" >Settings</button>
<a href="{% url 'shop_detils' %}" ><button class="w3-bar-item w3-button" >Shop Details</button></a>
<button class="w3-bar-item w3-button" >Contact Us</button>
<button class="w3-bar-item w3-button" >Logout</button>
</div>
{% block content %}
{% endblock %}
</body>
</html>
Iam still a learner in Django.
Thanks in advance.
my error is shown in image
enter image description here

checkbox from a bootstrap for loop from python/flask

HTML file (+Flask+Bootstrap)
{% extends "bootstrap/base.html" %}
{% block content %}
<html>
<head>
<style>
table, th, td {
background: #f5f5f5;
border-collapse: separate;
box-shadow: inset 0 1px 0 #fff;
font-size: 12px;
line-height: 24px;
margin: 30px auto;
text-align: left;
width: 800px;
}
.center {
text-align: center;
margin: auto;
width: 80%;
border: 3px solid rgba(0, 0, 0, 0);
padding: 20px;
}
.footer {
position: absolute;
right: 0;
bottom: 0;
left: 0;
padding: 1rem;
background-color: #efefef00;
text-align: center;
}
</style>
</head>
<body>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<ul class="nav navbar-nav">
<a class="navbar-brand"> TMS </a>
<li>Routing</li>
</ul>
</div>
</nav>
<table style="width:auto" align="center">
<tr>
<th>
<p>Select the route sheet:</p>
<div class='center'>
<form ip="upload-form" action="{{ url_for('routing') }}" method="POST"
enctype="multipart/form-data">
<input type="file" name="file" accept="/" multiple>
<input type="submit" action="submit" value="send">
</div>
</th>
</tr>
</table>
{% if ifHTMLConditional %}
<form method='POST' action="{{ url_for('routing') }}">
<table>
<tr>
<th>Name</th>
<th>Meters</th>
</tr>
{% for i in returnFromObjectClassRoute %}
<tr>
<td>
<input type="checkbox" name="vehicle" value= {{ i[1] }}>
{{ i[1] }}
</input>
</td>
<td>
{{ i[2] }}
</td>
</tr>
{% endfor %}
</table>
<input type="submit" value = {{ test.test }}>
{% endif %}
</form>
</body>
</html>
{% endblock %}
How could I use this for loop to create the number of checkboxes but with returns for using them in next functionalities.
The goal of the program is to create a Short Route. With the checkbox I want to let the user to select where is the startPoint for the algorithm
Python Code
#app.route('/routing', methods=['GET', 'POST'])
def routing():
test = Reference()
print(test.test.data)
if test == True:
return redirect('/home')
else:
if request.method == 'POST':
directory = os.path.join(APP_ROOT)
ifHTMLConditional = False
if not os.path.isdir(directory):
os.mkdir(directory)
for file in request.files.getlist("file"):
filename = file.filename
destination = "/".join([directory, filename])
if file.filename != '':
file.save(destination)
objectFromClassRoute = Route(filename, 'totalDistances_AB_BA_12012018.csv')
returnFromObjectClassRoute = objectFromClassRoute.routing1()
ifHTMLConditional = True
else:
returnFromObjectClassRoute = []
ifHTMLConditional = False
return redirect ('/home')
return render_template('routing.html', test=test, returnFromObjectClassRoute=returnFromObjectClassRoute, ifHTMLConditional=ifHTMLConditional)
return render_template('routing.html')
returnFromObjectClassRoute returns a list as a value.

Python code
An example for what I was looking for:
from flask import Flask, render_template, request
app = Flask(__name__)
app.config['SECRET_KEY'] = 'ThisIsSecret'
class Reference():
def testList(self):
testList = ['ABC', 'DEF', 'GHI']
return testList
#app.route('/home', methods=['GET', 'POST'])
def home():
test1 = Reference()
test = test1.testList()
print(test1.testList())
if request.method == "POST":
selected_contacts = request.form.getlist("test")
return render_template('checkBoxTest.html', test=test)
if __name__ == '__main__':
app.run(debug=True)
Html + Jinja2 code
<html>
<head>
</head>
<body>
<form method='POST' action="{{ url_for('home') }}">
{{ test.csrf_token }}
{% for i in test %}
<input type="checkbox" name="test" value="{{i}}">
<label>{{i}}</label>
{% endfor %}
<input type="submit" action="submit">
</form>
</body>
</html>
It returns all the check list you had activate before submitting and return a list of the values where you can used them as you want

Django weasyprint HTML to PDF convert is working very slow

I am covering HTML to PDF file using weasyprint in Django web app. Everything is working fine but It is working is very slow when converting HTML to PDF. It takes more than two minutes long When I convert it.
I am using Bangla font in my HTML file.
this is my views.py code
def get_pdf_file(request, customer_id, sys_type):
sys_type = customer_id
area = "pdf"
site_credit = site_credit1
time_now = timezone.now()
customers = get_object_or_404(CustomerInfo, pk=customer_id)
due_taka_track = customers.duetaka_set.all()
if due_taka_track == None:
due_taka_track = 0
unpaid_taka = int(customers.customer_price -
customers.customer_due_taka_info)
due_taka_track = customers.duetaka_set.all()
sum_cost_taka = due_taka_track.aggregate(
sp=Sum('customer_due')).get('sp', 0)
if sum_cost_taka == None:
sum_cost_taka = 0
total_paid_taka = sum_cost_taka + customers.customer_due_taka_info
payment_status = 'complete'
payment_message = 'Full Paid'
remain_taka='PAID'
remain_msg=''
if customers.customer_due_taka_info < customers.customer_price:
payment_status = 'incomplete'
payment_message = 'সম্পূর্ন টাকা পরিষোধ করা হয়নি'
remain_msg='টাকা বাকী আছে'
baki_ase="পাওনা আছে "
remain_taka = customers.customer_price - customers.customer_due_taka_info
context = {'customers': customers,
'sys_type': sys_type,
'area': area,
'site_credit': site_credit,
'site_name': 'Moon Telecom',
'sys_type': sys_type,
'due_taka_track': due_taka_track,
'total_paid_taka': total_paid_taka,
'payment_message': payment_message,
'time_now': time_now,
'unpaid_taka': unpaid_taka,
'payment_message': payment_message,
'remain_taka': remain_taka,
'sum_cost_taka': sum_cost_taka,
'remain_msg': remain_msg}
html_string = render_to_string('shop/pdf_invoice.html', context)
html = HTML(string=html_string)
result = html.write_pdf()
response = HttpResponse(content_type='application/pdf;')
response['Content-Disposition'] = 'inline; filename=invoice'+sys_type+'.pdf'
response['Content-Transfer-Encoding'] = 'UTF-8'
with tempfile.NamedTemporaryFile(delete=True) as output:
output.write(result)
output.flush()
output = open(output.name, 'rb')
response.write(output.read())
return response
This is my HTML file. This file I am convering HTML to PDF
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Moon Telecom</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://fonts.maateen.me/kalpurush/font.css" rel="stylesheet">
<style>
p,
td,
tr {
font-size: 10px;
line-height: 12px;
}
body {
font-family: 'Kalpurush', Arial, sans-serif !important;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="site_title" style="text-align:center; margin:0 auto">
<p style="font-size:15px">মুন টেলিকম</p>
<div class="invoice_info_one" style="width:100%; text-align:center">
<p>সকল প্রকার মোবাইল সেট, সীম কার্ড, মেমোরী কার্ড, MP-3, সোলার চার্জার, সোলার ফ্যান, মোবাইল ফোনের ব্যাটারী,
চার্জার, ক্যাচিং,কাভার,হেডফোন, রেবন, ডিসপ্লে এবং ইলেট্রিক মালামাল বিক্রেতা</p>
</div>
<div class="invoice_location">
<p>জাহাঙ্গীর সুপার মার্কেট, ব্রীজ রোড, ফুলহাতা বাজার, মোডেলগঞ্জ।</p>
</div>
<div class="invoice_contact">
<p>01717-051200(সুকান্ত) 01828-163858(দোকান)</p>
<p>
<b>Email:</b> moontelecom2008#gmail.com</p>
</div>
<hr>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="customer_info">
{% if customers.customer_name %}
<p style="font-size:15px">Customer Name:
<b> {{customers.customer_name}}</b>
<span style="color:red">{{customers.customer_first_due_info}}</span>
</p>
{% else %}
<p> Name: দেওয়া হয়নি</p> {% endif %}
<p style="font-size:14px">Phone Number: {% if customers.customer_mobile_no %} {{customers.customer_mobile_no}} {% else %} No Mobile
Number {% endif %}
</p>
<p style="font-size:14px">Purchase Time: {{customers.customer_sell_date}}</p>
<p style="font-size:14px">invoice id:
<b>{{customers.customer_uid}}</b>
</p>
<p>{{customers.product_warrenty}}</p>
</div>
</div>
</div>
</div>
<div class="customer_product_and_paid_info">
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="">
<table class="table table-bordered">
<thead>
<tr>
<th>Product Name</th>
<th colspan="">Price</th>
<th>ID or IME</th>
<th>Warrenty</th>
<th>QN</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<b>{{customers.customer_product_name}}</b>
</td>
<td>
<b>{{customers.customer_price}}</b> TK
<i>{% if customers.customer_discount_taka %} Discount added TK: {{customers.customer_discount_taka}}
TK {% else %} {% endif %}</i>
</td>
<td>{{customers.customer_product_id}}</td>
<td>
{% if customers.customer_product_warrenty %} {{customers.customer_product_warrenty}} Months {% else %} No {% endif %}
</td>
<td>{{customers.customer_product_quantity}}</td>
</tr>
<th>
<hr> First Time Payment</th>
<th>
<hr> {{customers.customer_first_time_payment}} TK
<span style="color:red">{{customers.customer_first_due_info}}</span>
</th>
<td>
<hr> {{customers.customer_sell_date}}
</td>
{% if due_taka_track %}
<thead>
<tr>
<th>SL</th>
<th>Taka</th>
<th>Paid Date</th>
<td>Due Info</td>
</tr>
</thead>
<tbody>
<hr> {% for track in due_taka_track %}
<tr>
<td>{{forloop.counter}}</td>
<td>
<i>{{track.customer_due}}</i> TK</td>
<td>{{track.customer_due_date}}</td>
<td>{{track.customer_due_info}}</td>
</tr>
{% endfor %}
</tbody>
{% else %} {% endif %} {% if sum_cost_taka %}
<tr>
<td>Total Due Complete </td>
<th>{{sum_cost_taka}} TK</th>
</tr>
{% else %} {% endif %}
<tr>
<td>
<b>Total Paid</b>
</td>
<th>
{% if payment_message %}
{{customers.customer_due_taka_info}} TK
<span style="color:red">{{payment_message}}</span>
<br>
<button type="button" class="btn btn-danger">{{remain_msg}} {{remain_taka}} TK</button>
{%else %}
{{customers.customer_due_taka_info}} TK
<button type="button" class="btn btn-success">Payment Completed</button>
{% endif %}
</th>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<div class="customer_notifications">
<div class="container">
<div class="row">
<div class="col-lg-6">
{% if customers.customer_conditions %}
<div class="warning">
<p style="font-size:8px; width:500px;line-height:15px;">
<i>{{customers.customer_product_name}} {{customers.customer_conditions}}</i>
</p>
</div>
{% else %} {% endif %}
</div>
</div>
</div>
</div>
<div class="footer" style="display:block">
<div class="footer_info">
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="footer_info">
<p>Print date: {{time_now}}</p>
<p>
<b>বিঃদ্রঃ ডেলিভারির সময় মাল বুঝিয়া নিবেন। পরে কোন আপত্তী গ্রহনযোগ্য নয়</b>
</p>
<p>বিক্রিত মাল ফেরত নেওয়া হয় না</p>
</div>
<div class="copy_right">
{% if site_credit %}
<p>{{site_credit}}</p>
{% else %}
{% endif %}
</div>
</div>
</div>
</div>
</div>
</div>
</body>

Tile images in html table using django template syntax

I am trying to tile images with the logic, if there are an even amount of images - tile them (2 per row) and then go on to the next row, if there is only one image - center it, if there are an odd number of images - tile the images but for the last one, center it.
<table style="border-spacing: 0px; margin: 0 auto; width: 100%">
<tbody>
<tr>{% for item in event.Items %}{% if forloop.counter|divisibleby:2 %}
<td style="margin-top: 5px;">
<p style="text-align: center; letter-spacing:0px; font-family:Noto Sans, Helvetica; font-weight:700; font-size:16px; padding: 15px 0;">{{ item.Name }}</p>
<img src="{{ item.ImageURL }}" style="width: 250px;" /></td>
</tr>
<tr>{% endif %}{% endfor %}
</tr>
</tbody>
I have also been trying to use {% if event.Items|length == 1 %}, {% elif forloop.last and forloop.counter|divisibleby:2 == False %} but have not been able to figure out exactly how to lay everything out. This example below is not tiled - figured using the html table would allow me to do this easier
For Example:
{% for item in event.Items %}{% if event.Items|length == 1 %}
<div style="margin:0 auto; text-align: center; clear: both;"><br />
<p style="display: block;"><a href="{{ item.ProductURL }}"><img src="{{ item.ImageURL }}" style="width: 200px; margin: 0 auto; display: block;" />
</a></p>
<p style="letter-spacing:0px; font-family:Noto Sans, Helvetica; font-weight:700; font-size:16px; text-align: center;">{{ item.Name }}</p>
</div>
{% elif forloop.last and forloop.counter|divisibleby:2 == False %}
<div style="clear: both;">def <br>
<a href="{{ item.ProductURL }}"><img src="{{ item.ImageURL }}" style="width: 200px; margin: 0 auto; display: block;" />
<p style="letter-spacing:0px; font-family:Noto Sans, Helvetica; font-weight:700; font-size:16px; text-align: center;">{{ item.Name }}</p>
</div>
{% elif forloop.counter|divisibleby:2 == False %}
<div style="float: left;margin:0 auto; padding-left: 30px;">a
<p><img src="{{ item.ImageURL }}" style="width: 200px; margin: 0 auto; display: block;" /></p>
<p style="letter-spacing:0px; font-family:Noto Sans, Helvetica; font-weight:700; font-size:16px; text-align: center;">{{ item.Name }}</p>
</div>
{% elif forloop.counter|divisibleby:2 %}
<div style="float:right;margin:0 auto; padding-right: 30px;">b
<p><img src="{{ item.ImageURL }}" style="width: 200px; margin: 0 auto; display: block;" /></p>
<p style="letter-spacing:0px; font-family:Noto Sans, Helvetica; font-weight:700; font-size:16px; text-align: center;">{{ item.Name }}</p>
</div>
{% endif %} {% endfor %}
PS - forgive my inline styling!