336

Product support

Get help in the plugin support forum.

  • Added on Jan 21, 2019
  • Current version: 1.0.3
  • Created by

Categories

Displays a list of your employees in two ways.

  • Employee cards with pagination (Employees component)
  • List of all employees in the short form (OurTeam component OurTeam)

It is also possible to display detailed information about the employee. (EmployeeById component)

Live Demo

Live Demo

Employees List

Implementing front-end pages

The plugin provides several components for building the employees list.

It is recommended to use with Bootstrap 4 and Font Awesome 5.

Employees list with pagination

Use the Employees component to display a list of employees on a page with pagination. The component has the following properties:

  • Employees per page - how many posts to display on a single page. The default value is 5.

  • EmployeeByIdLink - activate link to the employe details page.

  • EmployeeIdPage - path to the EmployeeById page. This property is used in the default component partial for creating links to the employe details page.

  • EmployeeByIdPageSlug - name of EmployeeById page url slug. Default ":slug".

The next example shows the basic component usage:

title = "Employees"
url = "/employees"
layout = "default"
is_hidden = 0

[employees]
paginationCount = 5
EmployeeByIdLink = 1
EmployeeIdPage = "employees-id"
==
<div class="container">

    <div class="page-header mb-5 mt-4">
        <h2>Overview | <small>Employees component</small></h2>
    </div>

    {% component 'employees' %}

</div>

example css:

div.employe-box {
    background-color: #F8F9FA;
    padding: 3rem;
    margin-bottom: 2rem;
}

EmployeeById with details

Use the EmployeeById component to display a employe data with details. The component has the following properties:

  • EmployeeId - id of employe.

The next example shows the basic component usage:

title = "EmployeesById"
url = "/employees-id/:slug"
layout = "default"
is_hidden = 0

[employeesbyid]
EmployeeId = "{{ :slug }}"
==
<div class="container">

    <div class="page-header mb-5 mt-4">
        <h2>Overview | <small>EmployeById # {{ this.param.slug }}</small></h2>
    </div>

    {% component 'employeesbyid' %}

</div>

OurTeam list

Use the OurTeam component to display a list of employees on a page (in "Our Team" style). The component has the following properties:

  • EmployeeByIdLink - activate link to the employe details page.

  • EmployeeIdPage - path to the EmployeeById page. This property is used in the default component partial for creating links to the employe details page.

  • EmployeeByIdPageSlug - name of EmployeeById page url slug. Default ":slug".

The next example shows the basic component usage:

title = "Our Team"
url = "/our-team"
layout = "default"
is_hidden = 0

[ourteam]
EmployeeByIdLink = 1
EmployeeIdPage = "employees-id"
==
<div class="container">

    <div class="page-header mb-5 mt-4">
        <h2>Overview | <small>Our Team</small></h2>
    </div>

{% component 'ourteam' %}

</div>
1.0.3

Add EmployeeByIdPageSlug property

Jan 22, 2019

1.0.2

Small fix

Jan 22, 2019

1.0.1

Run table migrations

Jan 19, 2019