Certificate Template Resource Structure using File Collections
Adding new certificate templates which use file collections to reference resources should have the following folder and file structure to support versioning and keep it clean.
cshtml Certificate Template File Location
The base directory to hold all certificate template files (cshtml) is configured in the service app.config
(key: Paths.CertificateTemplates
).
The directory structure within the base directory is as follows:
[org name]\[cert file name].cshtml
The cshtml certificate template file will be overwritten to release a new versions of the certificate template. Usually the new version will reference new files in the file collection’s CertificateResources
(see below). Once overwritten, any newly awarded certificate (or re-rendered) will reference the new version. Any previously awarded certificates will remain using the previous version. A rendered certificate is stored in the DB. File references in the cshtml file will be loaded from disk (file collection) when displayed.
Note: Every certificate template file 'belongs' to a specific organization because all referenced files are in the corresponding org's file collection. To avoid confusion every certificate template cshtml file in the certificate template directory is added to a sub-directory with the org's name.
Directory/file structure in the Org's file collection
A rendered certificate is stored in the DB. To keep the certificate’s DB footprint small, any larger data used to render a certificate (i.e. css, images) are not rendered into the certificate itself but referenced via content links. Therefore, a rendered certificate (in html form) will have references to external resources like images (as LMS content link). The external resources (aka certificate resources) are stored in the org’s file collection on disk. This allows to minimize redundancy in the DB as well. An image of a certificate stays the same for awarded certificates. For every awarded certificate the image would be stored as a copy in the DB. Referencing the image within the certificate instead, reduces the certificate size in the DB significantly.
templates\CertificateResources\[cert file name (without .cshtml)]\[css files + version number]
templates\CertificateResources\[cert file name (without .cshtml)]\[cert image file names + version number]
templates\CertificateResources\[cert file name (without .cshtml)]\[any other files referenced by a certificate template + version number]
Example to add new Certificate Template Version
1. Existing certificate template (v1):
Files in org file collection:
\templates\CertificateResources\HAGroupCertificate\Logo_v1.jpg
\templates\CertificateResources\common\GeneralPrint_v1.css
File in Certificate Template directory:
\HA Group\HAGroupCert.cshtml
ShortId: HAGroupCourseCompletion1Y
2. Replace/overwrite the certificate template file HAGroupCert.cshtml
with a new version (v2). If the new cshtml file is referencing different files, add those files to the org's file collection. Never overwrite an existing referenced file (i.e. css/image) because all referenced files on disc are used by awarded certificates.
Files in org file collection for v2:
\templates\CertificateResources\HAGroupCertificate\Logo_v2.jpg
(only if picture has changed)\templates\CertificateResources\common\GeneralPrint_v2.css
(only if css has changed)
Any existing files from v1 remain unchanged since they are still referenced by awarded certificates from v1.
File in Certificate Template directory:
\HAGroup\HAGroupCert.cshtml
ShortId: HAGroupCourseCompletion1Y
New Metatag Introduced in Template for PDF Rendering
Following meta tags are introduced in certificate template file to define page size and orientation which are used for downloading certificates (Manage > Reports > Grades (by student) Report > Download Certificates)
It is recommended to use these tags in the head section of cshtml file which ensures pdf is rendered in proper size and orientation. If these tags are not found/invalid default configuration is considered (pageSize: Letter
, pageOrientation: Portrait
).
pageSize: Size of the rendered PDF (
A4
orLetter
)pageOrientation: Orientation of the rendered PDF (
Portrait
orLandscape
)
<meta name="pageSize" content="Letter">
<meta name="pageOrientation" content="Landscape">