It is important to have a well designed and appealing certificate. In this section, we will discover how to draw lines, display pictures, set a background image, and insert fields within the certificate.
The example XML schema below specifies where elements of the certificate will appear.
Next, we will look at each of the elements and explain their properties.
<?xml version="1.0" encoding="utf-8" ?> <certificates> <certificate> <organization text="eFront" font="Freeserif" weight="bold" size="60" color="#005b7f" x="120" y="13"></organization> <student font="Freeserif" weight="" size="35" color="#000000" x="5" y="95" align="center"></student> <course font="Freeserif" weight="" size="28" color="#000000" x="5" y="133" align="center"></course> <grade font="Freeserif" weight="bold" size="28" color="#000000" x="160" y="150" align="center"></grade> <date font="Freeserif" weight="" size="15" color="#575757" x="225" y="182"></date> <serial font="Freeserif" weight="" size="14" color="#575757" x="107" y="182"></serial> <logo file="default" x="14" y="14"></logo> <background file="medium.png"></background> <orientation name="landscape"></orientation> <creator name="eFront"></creator> <author name="eFront"></author> <subject name="Certificate for "></subject> <keywords name="This is a list of keywords"></keywords> <labels> <label text="NOT JUST ANOTHER ELEARNING COMPANY" font="Freeserif" size="20" color="#000000" x="80" y="41"></label> <label text="We Make e-Learning Special" font="Freeserif" weight="" size="18" color="#000000" x="110" y="51"></label> <label text="Certificate of Achievement" font="Freeserif" weight="" size="35" color="#000000" x="80" y="67"></label> <label text="This Certificate is Awarded to:" font="Freeserif" weight="" size="24" color="#000000" x="97" y="82"></label> <label text="For the successful completion of:" font="Freeserif" weight="" size="22" color="#000000" x="95" y="120"></label> <label text="With grade:" font="Freeserif" weight="" size="22" color="#000000" x="120" y="152"></label> <label text="Instructor" font="Freeserif" weight="" size="10" color="#000000" x="20" y="192"></label> <label text="Serial Number" font="Freeserif" weight="" size="10" color="#000000" x="110" y="192"></label> <label text="Date" font="Freeserif" weight="" size="10" color="#000000" x="200" y="192"></label> </labels> <lines> <line x1="5" y1="5" x2="292" y2="5" color="#005b7f" thickness="2" note="Top Thick"></line> <line x1="292" y1="5" x2="292" y2="204" color="#005b7f" thickness="2" note="Right Thick"></line> <line x1="5" y1="204" x2="292" y2="204" color="#005b7f" thickness="2" note="Bottom Thick"></line> <line x1="5" y1="5" x2="5" y2="204" color="#005b7f" thickness="2" note="Left Thick"></line> <line x1="7" y1="7" x2="290" y2="7" color="#005b7f" thickness=".25" note="Top Thin Border"></line> <line x1="290" y1="7" x2="290" y2="202" color="#005b7f" thickness=".25" note="Right Thin Border"></line> <line x1="7" y1="202" x2="290" y2="202" color="#005b7f" thickness=".25" note="Bottom Thin Border"></line> <line x1="7" y1="7" x2="7" y2="202" color="#005b7f" thickness=".25" note="Left Thin"></line> <line x1="17" y1="190" x2="97" y2="190" color="#000000" thickness=".25" note="Signature Line"></line> <line x1="107" y1="190" x2="187" y2="190" color="#000000" thickness=".25" note="Serial Line"></line> <line x1="197" y1="190" x2="277" y2="190" color="#000000" thickness=".25" note="Date Line"></line> </lines> <images> <image file="certificate.gif" x="238" y="14"></image> <image file="signature.gif" x="18" y="176"></image> </images> </certificate> </certificates>
-
creator: to populate with the creator of the PDF document header (it does not appear on the document)
-
author: to populate with the author of the PDF document header (it does not appear on the document)
-
subject: to populate the subject for the PDF document header (it does not appear on the document)
-
keywords: to populate the list of keywords for the PDF document header (they do not appear on the document)
-
organization: to display the organization name on the certificate
-
student: to display the full name of the Learner on the certificate
- user_login: to show the Learner's username
- course: to display the name of the course on the certificate (for long course titles you can add an attribute 'truncated' to the <course> tag to show only a part of the course title. If you use this option, you'll need to add a numeric value; for example, to have the title truncated and to keep just 55 characters of it:
<course font="Freeserif" weight="" size="28" truncated="55" color="#000000" x="5" y="133" align="center"></course>
-
grade: to display the overall grade of the course on the certificate
-
date: to display the date the certificate was issued
- course_start_date: to display the course's start date
- course_end_date: to display the course's end date
- training_session_start_date: to display the date when the student began the first session event in a blended course
- training_session_end_date: to display the date when the student finished the last session event in a blended course
-
description: to display the description of the course on the certificate
-
ceus: to display the CEUs of the course on the certificate
-
trainer: to display the trainer(s) of the course on the certificate
- trainer_name: to display the course's trainer(s) names
- date: to display the issue date
- completion_date: for the course completion date (when different than the issue date)
-
expire: to display the expiration date of the certificate on the certificate
-
print_date: to display the date the certificate is printed on the certificate
-
serial: to display the serial number of the certificate
- branch: to show the name of r the learner's branch
-
logo: to display a logo image on the certificate. You can either display the default logo of your eFront installation or an external image, by supplying its URL
-
background: to display a background image on the certificate. The medium.png file corresponds to the background image of the Medium Decoration template (the heavy.png file refers to the background image of the Heavy Decoration template; apart from these background images, you can display an external image, by supplying its URL — image width should be equal to 840 pixels)
-
orientation: to define the page's orientation
-
label: a label is a line of text that will appear on the certificate. A label element must appear within the labels section. You can add as many labels as you need
-
line: a line is a graphical line that is drawn on the certificate. A line element must appear within the lines section. You can add as many lines as you need
-
image: an image is a graphic that will appear on the certificate. An image must appear within the images section. You can add as many images as you need
Properties for student, course, grade, date, serial, and organization elements
| Property | |
|---|---|
| font | Name of the font. |
| weight | The font weight. Possible values: bold, italic, bold|italic. For the normal font, leave the value empty. |
| size | Size of the font. |
| color | Hex value for text color (i.e: #000000 is black). |
| x | X coordinate. |
| y | Y coordinate. |
| align | The text alignment. Possible values: center, left, right. |
| text |
Text to appear on the certificate. It applies only to the organization element. |
| w |
Adjust the width of the text for Course Name & Course Description (i.e. w="105" ) |
Properties for the creator, author, subject, and keywords elements
| Property | |
|---|---|
| name | The value that will appear in the PDF document header. |
Properties for image, logo, and background elements
| Property | |
|---|---|
| file | Name of the image to use or the URL of an external image. |
| x | X coordinate. It applies only to the image and logo elements. |
| y | Y coordinate. It applies only to the image and logo elements. |
Properties for orientation element
| Property | |
|---|---|
| name | The page orientation. Possible values: landscape, portrait. |
Properties for label elements
| Property | |
|---|---|
| text | Text to appear on the certificate. |
| font | Name of the font. |
| size | Size of the font. |
| weight | The font weight. Possible values: bold, italic, bold|italic. For the normal font, leave the value empty. |
| color | Hex value for text color (i.e: #000000 is black). |
| x | X coordinate. |
| y | Y coordinate. |
Properties for line elements
| Property | |
|---|---|
| color | Hex value for line color (i.e: #000000 is black). |
| note | A note for user reference. It does not appear on the document. |
| thickness | The line thickness (i.e: Thin: .25, Thick: 2). |
| x1 | Starting X coordinate. |
| x2 | Ending X coordinate. |
| y1 | Starting Y coordinate. |
| y2 | Ending Y coordinate. |
Templates with two or more pages
If you need a certificate with more than one page, you should include each page within a <certificate> tag. You should include all the properties for the creator, author, subject, and keywords within your first <certificate> tag and you do not need to repeat them again in your second (or third…etc) <certificate> tag. For example
<?xml version="1.0" encoding="utf-8" ?> <certificates> <certificate> content of page 1 </certificate> <certificate> content of page 2 </certificate> </certificates>
Adding custom images to certificate templates
To add new background images to your certificate template you should upload your image files into the following folder:
<efront-installation-folder>/www/assets/images/certificate_logos/<your_image_file>
later, in your certificate template, you can type
<images> <image file="<your_image_file>" x="238" y="14"></image> </images>
Adding custom fonts to certificate templates
eFront uses TCPDF, a FLOSS PHP class to generate PDF documents, and create certificates.
To add new fonts for your certificate template you should first add them to the TCPDF engine. In order to do this you can do it in two ways:
The first way is to use TCPDF's addTTFfont method and send as a parameter a TTF (possibly another type too):
$font = $this->addTTFfont("filename.ttf");
then you can use the font name when you need it like this:
$this->SetFont($font,'',10);
The second way is to “install” the new fonts in the TCPDF engine manually. In order to do so, you can use the tcpdf_addfont.php script which is included in the TCPDF tools.
Go to
<efront-installation-folder>/libraries/external/tcpdf6/tools/
in order to install a custom font use the tcpdf_addfont.php script as in the following example:
php tcpdf_addfont.php -i /home/prountzos/Downloads/FranklinGothicBookRegular.ttf
if everything works ok you would see in your results something like the following:
>>> Converting fonts for TCPDF: *** Output dir set to /var/www/efront/libraries/external/tcpdf6/fonts/ +++ OK : /home/prountzos/Downloads/FranklinGothicBookRegular.ttf added as franklingothicbook >>> Process successfully completed!
later you can use your newly installed fonts in your certificate as in the following example:
<student font="franklingothicbook" weight="" size="35" color="#000000" x="5" y="95" align="center"></student>
Fonts
The following fonts are available for use:
| Font Name | Certificate font value |
|---|---|
| AeAlArabiya | aealarabiya |
| AeFurat | aefurat |
| Courier | courier |
| DejaVu Sans | dejavusans |
| FreeMono | freemono |
| FreeSans | freesans |
| FreeSerif | freeserif |
| Helvetica | helvetica |
| KozGoPro | kozminproregular |
| MSung Light | msungstdlight |
| PDF Courier | pdfacourier |
| PDF Helvetica | pdfahelvetica |
| PDF Symbol | pdfasymbol |
| PDF Times | pdfatimes |
| Roboto | roboto |
| STSong Light | stsongstdlight |
| Symbol | symbol Greek |
| Times | times |
| ZapfDingbats | zapfdingbats |