I am using the wkhtmltopdf bundle to convert my html page to a .pdf file. I want to use this so customers can print the content on a label paper seized 3 x 7. The exact size of a label is 70 x 42,3mm. The problem is, i cant seem to get the sizing right.
I used the css of float right and 33% width to get 3 columns, and now im trying to get 7 rows. I thought dividing it by 14.2% (7 rows) would do the trick. However it will then only print 1 label. When i remove the height it will print all the labels, but more then 7 per page. Anyone help me figure out how to get a 3x7 a4 format for labels?
{% set labels = 1 %}
{% block body %}
{% for sale in webstore.getSales %}
{% for orderItem in sale.getOrderItems %}
{% if labels == 21 %}
<div style="page-break-after: before;" class="newPage"></div>
{% set labels = 1 %}
<br>
</div>
{%endif%}
<div class="stickerWidth" id="stickerWidth" >
<div class="text">
<div >{{sale.getWebstoreOrderId}} : <span style="float:right; margin-right:5px; font-size:20px" > {{sale.getDate.date | date("d/m/Y")}}</span> </div> <br><br>
<div style=" text-align:center;font-size: 24px;">{{orderItem.getAmount}} x {{orderItem.getItemName}}</div> <br>
<div>
{% if webstore.name %}
<span style="font-size:20px">
{{webstore.id}}<br>
{{webstore.name}}</span>
{% endif %}
</div>
</div>
</div>
{% set labels = labels + 1 %}
{% endfor %}
{% endfor %}
{% endblock %}
{% block styleSheets%}
<link rel="stylesheet" href="{{ base_dir ~ asset('css/main.css') }}">
<style>
.newPage {
page-break-after: always;
page-break-inside: avoid;
}
.stickerWidth{
height: 180px;
width: 33%;
float: left;
background-color: green;
}
.text{
background-color: red;
margin-right: 5px;
margin-top: 5px;
margin-top: 5px;
}
</style>
{% endblock %}
EDIT: added the latest code, used labels to count if i reach 21 then new page
The quick solution here:
To create a new page every 21 labels:
{% for orderItem in sale.getOrderItems %}
{% if (loop.index % (7*3) == 0) %}
<div class="newPage"></div>
{% endif %}
{# ... #}
css:
.newPage {
page-break-before:always
}
My own implementation:
Controller:
public function export() {
$html = $this->get('yourPDFservice')->getHtml($someParams);
//echo $html;exit; // use that to debug your html
$snappyPdf = $this->getLibExportPDF();
return new Response(
$snappyPdf->getOutputFromHtml($html),
200,
array(
'Content-Type' => 'application/pdf',
'Content-Disposition' => 'attachment; filename="filename.pdf"'
)
);
private function getLibExportPDF() {
$snappyPdf = $this->get('knp_snappy.pdf');
$snappyPdf->setOption('page-size', 'A4');// 21x29.7 cm
$snappyPdf->setOption('zoom', 1 );
$snappyPdf->setOption('dpi', 300 );// 21x29.7 (300dpi)
return $snappyPdf;
}
The html:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style>
.nobreak {
page-break-inside:avoid;
}
.newPage {
page-break-before:always;
}
</style>
</head>
<body>
{# Your html code here #}
</body>
</html>
Related
this is my code i want to give different colors to comments
like grey(#eee) to odd and blue (#e6f9ff) to even
here this line is giving me error
background-color: {{ bg_color }}
{% extends 'base.html' %}
{% block content %}
<h1>{% block title %} Comments {% endblock %}</h1>
<div style="width: 50%; margin: auto">
{% for comment in comments %}
{% if loop.index % 2 == 0 %}
{% set bg_color = '#e6f9ff' %}
{% else %}
{% set bg_color = '#eee' %}
{% endif %}
<div style="padding: 10px; background-color: {{ bg_color }}; margin: 20px">
<p>#{{ loop.index }}</p>
<p style="font-size: 24px">{{ comment }}</p>
</div>
{% endfor %}
</div>
{% endblock %}
I think jinja version is updated and my course which Im following is old
so anyone who knows to answer me
You should note the scope for the variables. If you define a variable within an if-else block, it is only valid there.
<div style="width: 50%; margin: auto">
{% for comment in comments -%}
{% set bg_color = '#e6f9ff' if loop.index % 2 == 0 else '#eee' %}
<div style="padding: 10px; background-color: {{ bg_color }}; margin: 20px">
<p>#{{ loop.index }}</p>
<p style="font-size: 24px">{{ comment }}</p>
</div>
{% endfor -%}
</div>
Instead of using jinja you can also use css to assign a different background color to every other line.
<div class="comments">
{% for comment in comments -%}
<div>
<p>#{{ loop.index }}</p>
<p class="text">{{ comment }}</p>
</div>
{% endfor -%}
</div>
<style type="text/css">
.comments {
width: 50%;
margin: auto;
}
.comments div {
padding: 10px;
background-color: #e6f9ff;
margin: 20px
}
.comments div:nth-child(odd) {
background-color: #eee;
}
.comments .text {
font-size: 24px
}
</style>
This is probably a silly question, but can you put a <div> stage around Django's {% block content %}?
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Title</title>
{% load static %}
<link rel="stylesheet" type="text/css" href="{% static 'property/style.css' %}">
{% block head %}
{% endblock %}
</head>
<body>
<div class = "row">
<div class = "column left">
{% block left %}
{% endblock %}
</div>
<div class = "column center">
{% block center %}
{% endblock %}
<div class = "column right">
{% block right %}
{% endblock %}
</div>
</div>
</body>
<HTML>
and my CSS
* {
box-sizing: border-box;
}
body {
color: var(--text_color);
background-color: var(--background_color);
font-family: var(--font);
font-size: var(--font_size);
}
.column {
float: left;
padding: var(--padding);
height: 300px;
}
.left, .right {
width: 25%;
}
.center {
width: 50%;
}
.row:after {
content: "";
display: table;
clear: both;
}
I am trying to make each {% block %} be a column without having to write the <div> for each template. However, my HTML output is stacking them on top of each other instead of side by side.
**edit: Post the rendererd HTML document, so we know what Django has done to it.
Yes you can do that... But your problem is that a ending </div> tag is missing:
<div class = "row">
<div class = "column left">
{% block left %}
{% endblock %}
</div>
<div class = "column center">
{% block center %}
{% endblock %}
</div>
<div class = "column right">
{% block right %}
{% endblock %}
</div>
</div>
Checkout this structure.
Here is my code for base_site.html
{% extends "admin/base.html" %}
{% load static %}
{% block title %}{% if subtitle %}{{ subtitle }} | {% endif %}{{ title }} |
{{ site_title|default:_('Admin') }}
{% endblock %}
{% block extrastyle %}
<style type="text/css">
#branding h1{
color: #fff !important;
}
#branding h1 a:link, #branding h1 a:visited {
color: #fff !important;
}
.submit-row input{
background-color: #00b388;
}
#header {
background-color: #000000;
color: #fff !important;
}
.module caption{
background-color: #00b388;
}
div.breadcrumbs {
background: #00b388;
}
.object-tools a.addlink{
background-color: #00b388;
}
input[type=submit].default, .submit-row input.default{
background-color: #00b388;
}
</style>
{% endblock %}
{% block branding %}
<form method="post">{% csrf_token %}
<h1 id="site-name"><img src="{% static 'img/logo.PNG' %}" height="30px" /></h1>
{% endblock %}
{% block nav-global %}
{% endblock %}
unfortunately i have added the <form> tag in the above code, just to over come with CSRF issue and it does.
unfortunately, this approach gives me another error,
i.e, i have 3 file fields in my Model, and even though, i have mentioned the files during the upload and when i hit submit, it is not working and keep showing me This field is required error.
I am new to Django and your response helps me great.
versions:-
Django - 2.2
python - 3.6.2
You need to close the form tag :
<form method="post">{% csrf_token %}
</form>
<h1 id="site-name"><img src="{% static 'img/logo.PNG' %}" height="30px" /></h1>
{% endblock %}
{% block nav-global %}
{% endblock %}
Hello I have a HTML that shows all the artworks based on their collections as bellow:now, the collection "No_COLLECTION" is empty but it shows it's collection name and an empty space. I tried to remove it but i couldn't. Please help me to remove all the collections that doesn't have artworks in them.
{% extends "base.html" %}
{% load static %}
{% block content %}
<div id="main" style='min-height:800px;'>
{% with 'No_COLLECTION woodtest Test-2 Culture KASHAN HUMAN mine' as list %}
{% for i in list.split %}
<script>
var level = 0;
</script>
<div class="row" style="position: relative;margin-bottom: 30px;">
<div>{{i}}</div>
<div class="workSeriesThumbnailStrip">
{% for obj in object_list %}
{% if obj.collection == i %}
<script>
var level = level+1;
</script>
<a href="{{ obj.get_absolute_url }}"><img src="{{ obj.image.url }}"
style="float:left;width:67px;height:87px;margin:10px;" ></a>
{% endif %}
{% endfor %}
</div>
<script>
document.write(level);
</script>
</div>
{% endfor %}
<script>
if ($('.workSeriesThumbnailStrip').is(':empty')) {
$('.row').remove();
}
</script>
{% endwith %}
</div>
<div class="clear"></div>
{% endblock content %}
Add if statement. If the list is not empty, put your div inside that if statement body. else just div an empty div.
I'm trying to use tamplates for the site. I have base.html
<!DOCTYPE html>
<html>
{% load staticfiles %}
<head>
<title>{% block title %}{% endblock %}</title>
{% block url %}{% endblock %}
<link rel = "stylesheet" href="{% static "app/css/base.css" %}"/>
</head>
<body link="#FFFFFF" alink="#fefefe" alink="#FFFFFF" vlink="#FFFFFF">
<div class="page-wrap">{% block content %}{% endblock %}</div>
<footer class="site-footer">
footer information
</footer>
</body>
</html>
base.css
* {
margin: 0%;
}
html, body {
height: 100%;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.page-wrap {
min-height: 100%;
margin-bottom: -100px;
}
.page-wrap:after {
content: "";
display: block;
}
.site-footer, .page-wrap:after {
height: 100px;
}
.site-footer {
width: 100%;
background: #222222;
opacity: 1;
}
The footer at the index.html is working correctly, but on the other's html footer is standing under divs, and don't stick to footer. Is it possible to fix it? Thank u!
UPD:
There seems a little bag at the index.
{% extends "app/base.html" %}
{% load staticfiles %}
{% block title %}Feedbacker{% endblock %}
{% block url %}
{% endblock %}
{% block content %}
<div id="content">
{% if user.is_authenticated %}
<div id="usDescr"> Welcome, {{user.username}} </div>
<p class="myBtn"><a href="/my" >My Cab</a></p>
{% else %}
<header class = "descr">
header information
</header>
<div class="login-card">
login box
</form>
</div>
</div>
{% endif %}
{% endblock %}
If I'm stay not logged in footer works correctly, but if I log in and content changes to the {% if user.is_authenticated %} footer will leave his palce and stay under div = "Content"
It was pretty small error - I used {% endblock %} on the one up line