Templates – Talented Team

Templates let you customise the styling of your team’s profiles when you choose to download or share.

The template is simple HTML which is used to render a PDF document from the content of the profile.

The templates support standard HTML 5 with CSS 2.

Creating a new template

The most simple way to create a template is to duplicate an existing template. Simply click click “New Template” and in the “Copy From” field, choose the existing template to copy the template from.

Create a new Template

A new template can be created simply be adding standard HTML. At the most basic level, a template can be created as follows. Clicking “Demo” on the Edit form will show a demo of the rendered PDF template.

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>@profile.user.fullname</title>
    </head>
    <style>
	
    </style>
    <body>
        This is a template
    </body>
</html>

Adding profile data

Profile data can be added with the following tags:

@profile.user.fullname
@profile.user.email
@profile.user.department
@profile.user.photoUrl
@profile.headline
@profile.summary

eg.

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>@profile.user.fullname</title>
    </head>
    <style>
	
    </style>
    <body>
        <h1>@profile.user.fullname</h1>
        <h2>@profile.headline</h2>
        <div class="summary">
	        @profile.summary
	</div>        
    </body>
</html>

Adding Experience

Experience can be added by first specifying a loop tag which will loop through each of the experience records associated with a profile. The loop is defined with a start and end tag as follows. The start tag can also be optionally preceded with a bracketed number specifying the maximum number of items that will be repeated. If this number is not included, all experience records will be rendered.

@experience-items:start(max:5)
    /* this is repeated for the first 5 experience records
@experience-items:end

For each experience, the following data can be added:

@experience.title
@experience.organisation
@experience.startDate(MMM-yy)
@experience.endDate(MMM-yy)
@experience.description
@experience.summary

Adding Education

Education can be added by first specifying a loop tag which will loop through each of the education records associated with a profile. The loop is defined with a start and end tagas follows. The start tag can also be optionally preceded with a bracketed number specifying the maximum number of items that will be repeated. If this number is not included, all education records will be rendered.

@education-items:start(max:4)
    /* this is repeated for the first 4 education records
@education-items:end

For each education record, the following data can be added:

@education.title
@education.organisation
@education.endDate(MMM-yy)

Adding Skills

Skills can be added by first specifying a loop tag which will loop through each of the skill records associated with a profile. The loop is defined with a start and end tag as follows. The start tag can also be optionally preceded with a bracketed number specifying the maximum number of items that will be repeated. If this number is not included, all skill records will be rendered.

@skill-items:start(max:6)
    /* this is repeated for the first 6 skills, ordered by strength
@skill-items:end

For each education record, the following data can be added:

@skill.title

Adding Features

Features can be added by first specifying a loop tag which will loop through each of the feature records associated with a profile. The loop is defined with a start and end tag, as follows. The start tag can also be optionally preceded with a bracketed number specifying the maximum number of items that will be repeated. If this number is not included, all experience records will be rendered.

@feature-items:start(max:4)
    /* this is repeated for each education
@feature-items:end

For each feature record, the following data can be added:

@feature.name
@feature.value

Blocks

It is sometimes useful to define a block of content that is only included when certain content is available. For example, a photo block can also be used to include content only when the profile has a photo. The content between the photo:start and photo:end tags will only be included for profiles with photos, otherwise the whole block will not be included in the rendered template:

@photo:start
    <div class="photo-panel">
        <div class="photo" 
            style="background-image: url('@profile.user.photoUrl');" 
        />				
    </div>
@photo:end

Each Block is defined by a start tag and a matching end tag. The following blocks types are supported:

@photo:start … @photo:end
@experience:start … @experience:end
@education:start … @education:end
@skill:start … @skill:end
@feature:start(filter:filterValue) … @feature:end

The feature block tag also supports an optional filter setting allowing the block content to be rendered only when a feature with a name matching the filter value is found on the profile.

System Tags

The following system tags can be applied to bring in system level data:

@system.profile-url: Providing a web link to the profile
@system.today(MMM-yy): A reference to today’s date. A date format can be supplied in the brackets.

Fonts

Fonts can be customised by adding a @font-face tag in the style and referencing the full url of a ttf font.

@font-face {
 	font-family: "Exo 2";
 	src: url("https://github.com/google/fonts/raw/master/ofl/exo2/Exo2- Regular.ttf");
 	font-weight: 600
 }