Skip to content

Instantly share code, notes, and snippets.

@kevincolten

kevincolten/template.jinja2

Last active July 15, 2020 15:07
Show Gist options
  • Save kevincolten/d46ebd0e9bbf9356aa938c0de9e0ad56 to your computer and use it in GitHub Desktop.
Save kevincolten/d46ebd0e9bbf9356aa938c0de9e0ad56 to your computer and use it in GitHub Desktop.
Download ZIP
Certificate Template
Raw
template.jinja2
<%namespace name='static' file='/static_content.html'/>
<%!
from django.utils.translation import ugettext as _
from student.models import anonymous_id_for_user
from opaque_keys.edx.keys import CourseKey
from hashlib import sha256
from datetime import date
%>
<%
# set doc language direction
from django.utils.translation import get_language_bidi
dir_rtl = 'rtl' if get_language_bidi() else 'ltr'
course_mode_class = course_mode if course_mode else ''
%>
<!DOCTYPE html>
<html class="no-js" lang="en">
<head dir="${dir_rtl}">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>${document_title}</title>
<%static:css group='style-certificates'/>
<link rel="stylesheet" type="text/css" href="https://d1uwn6yupg8lfo.cloudfront.net/edxsites/certificates/ednxt_certificate.1621326.css">
<link rel="stylesheet" href="https://openedx.zollege.com/assets/certificate.css">
<style>
.linkedin-button, .download-button {
margin-top: 24px;
margin-bottom: 0;
}
</style>
<%static:optional_include_mako file="cert-head-extra.html" is_theming_enabled="True" />
</head>
<body class="layout-accomplishment view-valid-accomplishment ${dir_rtl} certificate certificate-${course_mode_class} ednxt-certificate__container" data-view="valid-accomplishment">
<div class="wrapper-view" dir="${dir_rtl}">
<p></p>
<p></p>
<hr class="divider sr-only">
% if user.is_authenticated() and user.id == int(accomplishment_user_id):
<%include file="/certificates/_accomplishment-banner.html" />
<div class="wrapper-banner wrapper-banner-user">
<section class="banner banner-user">
<div class="message message-block message-notice">
<div class="wrapper-copy-and-actions">
<div class="message-actions">
<div class="linkedin-button"><a href="https://www.linkedin.com/profile/add" target="_blank"><img src="https://download.linkedin.com/desktop/add2profile/buttons/en_US.png " alt="LinkedIn Add to Profile button"></a></div>
<div class="download-button"><a href="https://pdf-ace.com/pdfme?url=https%3A%2F%2Fdemo.edunext.io%2Fcertificates%2F${certificate_id_number}" target="_blank">Download as PDF</a></div>
<div class="get-badge-button"><a href="#" target="_self">Claim my badge</a></div>
</div>
</div>
</div>
</section>
<section>
<%
hook_url = getattr(settings, 'WEBHOOK_LIGHTBEND_CERTIFICATE_URL', 'https://hooks.zapier.com/hooks/catch/105048/o6sz0kt/')
anonymous_id = anonymous_id_for_user(user, CourseKey.from_string(course_id))
badge_id = '20e978ad-c2c2-46ce-bea7-aff699a21dc'
signature = sha256(user.email + badge_id + anonymous_id + 'SALTED_123_SECRET').hexdigest()
%>
<script type="text/javascript">
var data = {
firstName: '${ user.first_name | h}',
lastName: '${ user.last_name | h}',
fullname: '${ user.profile.name | h}',
email: '${ user.email | h}',
badgeTemplate: '${ badge_id }',
signature: '${ signature }',
anonymousId: '${ anonymous_id }',
url: '${ hook_url }'
};
// Naive way to get the first and last names from the fullname
if (!data['firstName']) {
data['firstName'] = data['fullname'].split(' ')[0];
}
if (!data['lastName']) {
data['lastName'] = data['fullname'].split(' ').slice(-1)[0];
}
$('.get-badge-button').click(function() {
$.ajax({
type: 'POST',
url: data['url'],
dataType: 'jsonp',
data: {
'issued_to_first_name': data['firstName'],
'issued_to_last_name': data['fullname'],
'recipient_email': data['email'],
'badge_template': data['badge_template'],
'anonymous_user_id': data['anonymousId']
}
});
});
</script>
</section>
</div>
% endif
<div class="ednxt-container">
<div class="ednxt-certificate">
<div class="ednxt-certificate__header">
<div class="ednxt-certificate__header-logo" style="width: 100%;">
<a href="${certificate_url_large if certificate_url_large else logo_url}">
<!--
<img src="${certificate_logo_large if certificate_logo_large else logo_src}" alt="${certificate_logo_large_alt if certificate_logo_large_alt else platform_name}" style="max-height: none;">
-->
</a>
</div>
</div>
<div class="ednxt-certificate__header">
<!--
<h1 class="ednxt-certificate__header-title" style="width: 99%; text-transform: none;">${document_title}</h1>
-->
<!--
*************
THIS IS FROM accomplishment_copy_course_description, THE CENTER HEADING SUCH AS 'LAS VEGAS MEDICAL SCHOOL'
**************
-->
<h1 class="ednxt-certificate__header-title" style="font-size:75px;width: 99%; text-transform: none;text-align:center;padding-left:55px;padding-right:55px;margin-top:60px">${accomplishment_copy_course_description}</h1>
</div>
<div class="ednxt-certificate__content">
<!--
*************
WHATEVER TEXT NEEDS TO BE ABOVE THE STUDENT NAME
**************
-->
<div style="text-align:center" >${course_number}</div>
<!--
*************
I ADDED THIS AS A HARD CODED PART OF THE CERTIFICATE TEMPLATE. IT DOESN'T NEED A VARIABLE
***********
-->
<div style="text-align:center" class="certifies" >THIS CERTIFIES THAT</div>
<!--
*************
NAME OF THE STUDENT
**************
-->
<span style="text-align:center" class="ednxt-certificate__content-recipient">${accomplishment_copy_name | h}</span>
<!--
*************
THIS IS WHATEVER TEXT NEEDS TO BE HERE. Has successfully completed the Orthodontic Assistant Seminar approved by the Texas Workforce Commission, and is therefore awarded this
*************
-->
<div style="text-align:center" class="accomplishment_copy_description_full" >${accomplishment_copy_description_full}</div>
<div style="text-align:center" class="completion" >CERTIFICATE OF COMPLETION</div>
<!--
*************
HOW TO PRINT OUT THE CURRENT DATE IN PYTHON
*************
-->
<div style="text-align:center" class="date">GIVEN THIS ${date.today().strftime("%d OF %B , %Y")}</div>
<!-- Certificate Web/HTML View Overrides MEDICAL-->
<!-- Certificate Web/HTML View Overrides ASSISTING-->
</span>
<!--
*************Certificate Web/HTML View Overrides at Las Vegas Medical Assistant School
<span style="text-align:center" class="ednxt-certificate__content-description">${accomplishment_copy_course_description} </span>
*************
-->
</div>
<div class="ednxt-certificate__footer">
<div style="margin:auto" class="ednxt-certificate__footer-signatures">
% if mode != 'base':
<h3 class="sr-only">${_("Noted by")}</h3>
<div class="ednxt-certificate__footer-signatories">
% if certificate_data:
% for signatory in certificate_data.get('signatories', []):
% if signatory['name']:
<div class="ednxt-certificate__footer-signatory">
<img class="ednxt-certificate__footer-signatory_signature" src="${static.url(signatory['signature_image_path'])}" alt="${signatory['name']}">
<h4 class="ednxt-certificate__footer-signatory_name">${signatory['name']}</h4>
<p class="ednxt-certificate__footer-signatory_credentials">
<span class="role">${signatory['title']}</span>
<span class="organization">${signatory['organization']}</span>
</p>
</div>
<!-- ***************
SPACE OUT THE SIGNATURES
*************
-->
<div style="display: inline-block; width: 200px"></div>
% endif
% endfor
% endif
</div>
% endif
</div>
<!--
<div class="ednxt-certificate__footer-information">
<div class="ednxt-certificate__footer-information_logo">
<h3 class="sr-only">${_("Supported by the following organizations")}</h3>
<img src="${logo_src}" alt="${platform_name}">
</div>
<div class="ednxt-certificate__footer-information_date">
<span class="title">${certificate_date_issued_title}</span>
<span class="value">${certificate_date_issued}</span>
</div>
<div class="ednxt-certificate__footer-information_id">
<span class="title">${certificate_id_number_title}${certificate_id_number_separator if certificate_id_number_separator else ':'}</span>
<span class="value"><a href="${logo_url}/certificates/${certificate_id_number}">${certificate_id_number}</a></span>
</div>
</div>
-->
<!--
<div class="ednxt-certificate__footer-link">
<a href="${logo_url}/certificates/${certificate_id_number}">${logo_url}/certificates/${certificate_id_number}</a>
</div> -->
</div>
</div>
</div>
<div class="wrapper-about">
<aside role="complementary" class="about" aria-label="About edX Certificates">
<%include file="/certificates/_about-edx.html" />
<%include file="/certificates/_about-accomplishments.html" />
</aside>
</div>
<%include file="/certificates/_accomplishment-footer.html" />
<hr class="divider sr-only">
</div>
<%include file="/certificates/_assets-secondary.html" />
%if badge:
<%include file="/certificates/_badges-modal.html" />
%endif
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment