How to insert the number into the bottom right of each page by TWIG and CSS

Question

I'm a newbie in TWIG. But I have to resolve some trouble with the page numbering.
I have the follow TWIG template

{% extends 'agreement/report_base_template.html.twig' %}
{% block title %}Personal card{% endblock %}
{% block content %}
{% for Person in AllPersons %}
{% set pageNum = 1 %}
<div id="content" class="page">
<!-- generate the frist page as a table //-->
<div style="page-break-after:always;"></div>
</div>
{% set pageNum = pageNum + 1 %}
<div id="content" class="page">
<!-- generate the second page as a table //-->
<div style="page-break-after:always;"></div>
</div>
<!-- other pages generated the same way //-->
{% endfor %}    
{% endblock %}

That template generates the multi-page documents for each Person.
UPD: added after 20 mins
There is the need to insert the number into the bottom right of each page as it's shown below.

And for each document, the number of the first page must be 1.

UPD: added after 7 hours
The use of JavaScript is also possible.

score 0 · Answer 1 · answered May 16 '16 at 06:17

I'm not completely sure what do you mean by page numbering, but if I have to guess from your code snippet you want to replace the pageNum variable and if you read the twig documentation carefully you'll find The loop variable

here's an example:

{% for Person in AllPersons %}
    Person #{% loop.index %}
{% endfor %}

this will print:

Person #1
Person #2

and so on for each iteration

score 0 · Accepted Answer · edited May 23 '17 at 12:31

UPD: Added on May 5th
I've finished my work with the next solving which was compiled from some other answers:

Now, I can see the numbers on the each page.
IMPORTANT
This solution doesn't show the total number of pages.
See at the end of this post how to display the total number of the pages.

I changed the TWIG template

{% for Person in AllPersons %}
    {% set pageNum = 1 %}
    <div class="page">
        <div class="content">
            <!-- there is some the content of the first page //-->
        </div>
    <div class="break">{{pageNum}}</div>
    </div>
    {% set pageNum = pageNum + 1 %}
    <div class="page">
        <div class="content">
            <!-- there is some the content of the second page //-->
        </div>
    <div class="break">{{pageNum}}</div>
    </div>
    <!-- other pages generated the same way //-->
{% endfor %}

and CSS

.page {
  background: white;
  margin: 0 auto;
  margin-bottom: 0.5cm;
  box-shadow: 0 0 0.5cm rgba(0,0,0,0.5);
  width: 21cm;
  height: 29.7cm;
  position: relative;
}
.content {
    padding: 0.5cm 1cm 0.5cm 2cm;
}
.break{
    page-break-after: always;
    position: absolute;
    bottom: 5mm;
    right: 5mm;
}
.break:before{
    white-space: nowrap; 
    -moz-border-radius: 5px; 
    -moz-box-shadow: 0px 0px 4px #222;  
    background-image: -moz-linear-gradient(top, #eeeeee, #cccccc);  
    background-image: -moz-linear-gradient(top, #eeeeee, #cccccc);
}

UPD: Added after 4 hours
To display the total number of the pages, I used the next script

$( document ).ready(function() {
    $(".person").each( function(){
        var totalNumber = $(this).children(".page").length;
        $(this).children(".page").each( function (index){
           $(this).children(".break").append("page "+(index+1)+" of "+ totalNumber);
        })
    })
});

And a little bit, I changed the TWIG template

{% for Person in AllPersons %}
    {% set pageNum = 1 %}
    <div class="person"> <!-- This tag was addaed //-->
        <div class="page">

You also can use the table layout by inserting the follow lines in CSS `.page { display: block;` and `.break{ display: table-footer-group;` — Konstantin, May 18 '16 at 06:33

How to insert the number into the bottom right of each page by TWIG and CSS

2 Answers2