Create a Team Module

Showcasing your Team on your website puts a face to a name and adds a human element to your brand. In this article we will show you the basics of creating a team module in Solodev using shortcodes.


Creating a Team Module

All modules should be built inside the modules folder under /web files/modules/ to make them easy to find and access. Note: If you haven't already done so, create a "modules" folder under "web files." Each module should have its own folder within this directory. Click here for more information on how to add a folder.

Step 1

Open the folder to which you want to add your team module. Hover over the Add button and select Calendar.

Add Calendar


Step 2

Name your calendar and select 'Custom' from the Choose Type dropdown. You need to create a form using one of the three methods:

  • Table schema
  • Select a form previously created with the form builder
  • Upload an HTML form

Click here to learn more about creating a calendar and adding forms.

For purposes of this tutorial, we have provided the form code. The code below will add the appropriate fields to the module. First you will need to save this code to your computer. Either use a text editor such as Sublime, or Text Edit. Save the file as a simple text document with .tpl at the end of the file name.

team-form.tpl

<div class="row">
<div class="form-group col-md-6">
<label for="">Title</label>
<input class="form-control" name="position_title" type="text">
</div>
<div class="form-group col-md-6">
<label for="">Division</label>
<input class="form-control" name="position_division" type="text">
</div>
</div>

<div class="row">
<div class="form-group col-md-6">
<label for="">Email</label>
<input class="form-control" name="position_email" type="email">
</div>
<div class="form-group col-md-6">
<label for="">Phone</label>
<input class="form-control" name="position_phone" type="text">
</div>
</div>

<div class="row">
<div class="form-group col-md-6">
<label for="event_intro">Intro</label>
<textarea class="form-control" cols="50" id="position_intro" name="position_intro" rows="5"></textarea>
</div>

<div class="form-group col-md-3">
<label for="people_order">Sort Order (number ranking)</label>
<input class="form-control" id="position_order" name="position_order" type="text" value="999">
</div>
</div>

<div class="row">
<div class="form-group col-md-12">
<label for="event_description">Bio</label>
<textarea class="wysiwyg" cols="50" id="position_description" name="position_description" rows="5"></textarea>
</div>
</div>
<div class="row">
<div class="form-group col-md-12">
<label for="event_large_image">Large Image</label>
<input id="position_large_image" name="position_large_image" type="file">
</div>
</div>

Click on Upload Form and select the file you just saved.


Adding a Repeater Template

The repeater template displays all team entries on your web page. This generally goes into the index.stml file, but it depends on the website. In this instance we will use the index.stml file.

Step 1

You will need to add a new file in the same folder you created the Team Module. Open that folder from the left hand file tree and hover over the Add button and click File.


Step 2

Name the file and add the extension .tpl at the end of the file name.

The file name should be written in lowercase with no spaces. Add a dash (-) between words. Click here for more information on adding a File.

Now you can write the code to make the entries show. Please refer to the Shortcodes section to find more information on this topic.

However, we have provided a repeater template for this tutorial. Navigate to the folder that contains the Team Module. Hover over Add button and click File. Copy the code below and make the edit that is required to pull the ID of the correct Module. Then click Save.

Note - the only thing that needs to be edited in this code, is the following section:

[repeater id="" limit="0,9"]

The repeater id="" needs the ID of the Team Module. Open the Team Module, and look for the ID at the top left under the name of the Module. Place the ID number inside the quotes ("").

The image below outlines where to find the ID of the Module.

team-repeater.tpl

<div id="theBioGrid">
<ul class="row biogrid" id="biogrid">

[repeater id="15" limit="0,4"]

<li class="col-xs-3" id="{{calendar_entry_id}}">
  <div class="imgHolder">
   <a href="{{path}}"><img alt="[get_asset_file_url id={{position_large_image}}]" class="img-responsive" src="[get_asset_file_url id={{position_large_image}}]"></a>
   <div class="description-box animateBottomName">
   {{event_title}} <br>
   {{position_title}}
   </div>
  </div>
</li>
[/repeater]

</ul>
</div>

Step 3

If you haven't already, create an web page that will hold your repeater template. Click here for more information about adding a page.

Navigate to the index page that will contain your repeater template. In order to place the file into your STML, you need to click on the Dynamic Div into which you would like to place it. Once it turns blue, select the file from the left hand file tree. Click here for more information on adding content to a page.


Creating the Detail Template

The detail template displays the detail information for each team member entry. In this case it will contain the team member's name, division, job title, an intro, and a description of their experience. Follow these steps to create the detail template and detail STML.

Step 1

Open your team module folder by clicking on it in the left hand nav. Hover over Add button and select File. Name the file and make sure you use .tpl at the end of the file name. Paste the code below into the file. Then click Save.

team-detail.tpl

[entry]

<div class="row">
<div class="col-md-12 blue-box bio-detail">
<div class="biogrid container">
<div class="row">
<div class="col-lg-4 col-md-5 col-sm-6 col-xs-5 bioimage">
<img alt="{{event_title}}" class="grid-image img-responsive" src="[get_asset_file_url id={{position_large_image}}]">
</div>
<div class="col-lg-8 col-md-7 col-sm-6 col-xs-7 biodescription">
<div class="bio-info">
<a href="/about-us/team/"><img alt="Close" class="close-backex" src="/core/fileparse.php/21/urlt/images/backex.png"></a>
<h2>{{event_title}}</h2>
<p class="bio-subtitle"><strong>{{position_division}} <br> {{position_title}}</strong></p>
<p class="bio-quote">{{position_intro}}</p>
</div>
</div>
</div>
</div>
</div>
</div>

<div class="row">
<div class="col-md-12">
<div class="col-max-960">
<h3>Experience</h3>
<p>{{position_description}}</p>
</div>
</div>
</div>

[/entry]

Step 2

To display the detail information of a team module entry you will need to create a detail page. Check these links for more information on adding a page and updating a page.

Step 3

In order to place the detail template in your Detail STML page, you will need to navigate to the new detail page you created. Click on the Dynamic Div into which you would like to place the detail template. Once it turns blue, select the file from the left hand file tree. Once your template is in the STML, click Publish.

Click here for more information on adding content to a page.


Mapping Module to the STML

Now that you have created the team module and have the index and detail pages in place, you will need to map the Module to the correct page.

Step 1

Open the team module by selecting it from the left hand file tree. Click the Modify button.


Step 2

Open the Website Properties tab. Scroll down until you see the SEO URL Encoding field and click Browse.


Step 3

A new window will open with the file tree. Click Browse and select the detail.stml page for your module. After selecting the STML, you MUST click OK at the top of the window.

Step 4

Next to the SEO URL Encoding Input Field is the Asset Category Map Anchor (Folder Anchor) field. Click Browse and a new modal will popup displaying various folders - select the folder storing the index.stml and detail.stml pages of your module and click Okthen click Submit in the bottom right of the page.


Adding Categories

Categories are a good way to group up content, or tag multiple things within the same group. Follow these steps to create categories and add them to the module.

Step 1

Open the folder that contains the client module by clicking on it in the left hand file tree. Hover over Add button and click Datatable Category Group.

Client Module


Step 2

Give the category group a name and click Save.


Step 3

Open the category group module that was created by clicking on it in the left hand file tree. Type the name of the category in the name window and click the Add button. This can be repeated as many times as necessary.


Step 4

The next step is to link the category group to the module. Navigate back to the team module and click Modify. Open up the Advanced Options tab.

In the Datatable Category Group field add the ID of the module to the field or click Browse. A new window will open with the file tree. Select the category group that was just created. Click OK then click Submit. The category group is now connected to the news module.


Adding Team Entries

Now that you have created the team module it's time to add entries.

Step 1

Open the team module by clicking on it in the left hand file tree. Click the Add Entry button.


Step 2

Fill out your form fields (created when you uploaded your form) and click Save.


Step 3

Add the CSS below to the main stylesheet of your website.

team.css

/* ==================================
# Team Index Page
================================== */
.biodescription h2 {
font-weight: 400;
line-height: normal;
text-transform: uppercase;
color: #fff;
}
.biogrid li {
list-style-type: none;
}
.biodescription .fa {
font-size: 40px;
color: #fff;
}
.bio-subtitle {
font-size: 16px;
margin-bottom: 20px;
color: #fff;
}
.bio-quote {
font-size: 16px;
font-style: italic;
line-height: 25px;
color: #fff;
}
.imgHolder .description-box {
background-color: #00bff3;
float: left;
height: 60px;
padding: 5px 10px;
position: absolute;
}
.biogrid .animateBottomName {
bottom: -70px;
color: #fff;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
transition: all 0.3s ease;
width: 100%;
}
.dim {
opacity: 0.5;
}
.biogrid li .biodescription {
background-color: #00a7e8;
color: #fff;
display: none;
height: 100%;
margin: 0;
min-height: 380px;
padding: 60px;
max-height: 355px;
}
.biodescription {
padding: 50px 30px 80px;
}
.biodescription h2 {
font-size: 45px !important;
font-weight: 400;
line-height: normal;
text-transform: uppercase;
color: #fff;
}
.biodescription p {
font-weight: 400;
}
.biogrid li:hover .animateBottomName {
bottom: -9px;
}
.biogrid li .imgHolder {
margin: 0;
overflow: hidden;
padding: 0;
position: relative;
}
.biogrid li.col-xs-12 .biodescription {
display: block;
}
.propertiesLink {
background: #fff;
color: #666;
cursor: pointer;
display: block;
float: right;
padding: 8px 12px;
text-decoration: none;
width: 175px;
}
.propertiesLink:hover {
background: #0298C1;
color: #fff;
text-decoration: none;
}
.propertiesLink span {
float: right;
}
.linkedinLink,
.mailLink,
.vCardLink {
float: right;
display: block;
height: 38px;
margin-right: 15px;
width: 47px;
}
.bio-detail .linkedinLink,
.bio-detail .mailLink,
.bio-detail .vCardLink,
.bio-detail .phoneLink,
.bio-detail .numberSlid {
margin-right: 10px;
}
.readMoreBox {
background-color: #F38B00;
color: #FFF;
display: block;
margin: 20px 0;
padding: 5px 10px;
text-decoration: none;
width: 120px;
}
.readMoreBox span {
float: right;
}
.readMoreBox:hover {
background-color: #ff5000;
color: #fff;
text-decoration: none;
}
.col-max-960 h3 {
color: #00bff3;
}
.biogrid {
list-style: none;
margin: 0;
padding: 0;
}
.biogrid li {
cursor: pointer;
margin: 0;
padding: 0;
position: relative;
}
.biogrid img {
width: 380px;
}
.biogrid img.close-backex {
float: right;
width: inherit;
}
.phoneLink {
display: block;
float: right;
height: 38px;
margin-top: 4px;
margin-right: 14px;
padding-left: 1px;
text-align: center;
width: 41px;
}
.phoneLink:hover,
.mailLink:hover {
color: #0073B2;
}
.closeButtonBio {
cursor: pointer;
color: #FFF;
position: absolute;
right: 30px;
top: 20px;
}
.closeButtonBio:hover {
color: #00529A;
}
/* ==============================
# Team Filter
============================== */
.input-group input#table_filter {
height: 45px;
border-radius: 0;
border-color: #ccc;
line-height: 20px;
}
.input-group-btn button#searchBtn {
background-color: #00bff3;
color: #fff;
padding: 1.25rem 2.6rem;
}
.team-bottom-section #pagingTotal {
margin-top: 38px;
}
.team-bottom-section #pagingTotal p {
margin-top: 10px;
font-size: 14px;
}
.team-bottom-section .fa {
padding: 3.5px 0;
}
.container .pagination {
float: right;
cursor: pointer;
}
.pagination>li:last-child>a,
.pagination>li:last-child>span {
border-radius: 0;
}
.team-bottom-section .page_filter,
.team-blue-border,
.team-page.filter-bar {
margin-top: 30px;
}
.selectize-input.items {
border-radius: 0;
}
.team-page.filter-bar .team-dropdown .selectize-input {
height: 45px !important;
line-height: 28px;
}
.team-dropdown .selectize-input {
border-radius: 0;
}
/* ===================================
# Team Detail
=================================== */
.blue-box {
background-color: #00bff3;
height: 100%;
margin: 0;
margin-bottom: 20px;
padding: 0 15px 0 0;
color: #fff;
}
.ct-content p.bio-subtitle {
padding-top: 0;
}
.bio-detail {
min-height: inherit;
margin-top: 20px;
}
.bio-detail .biodescription {
padding-bottom: 40px;
}
/* ==============================
# Media Queries
============================== */
@media only screen and (max-width: 767px) {
.filter-bar-title-span {
float: left;
}
.location-class,
.more-class {
display: none;
}
.name-class,
.title-class {
width: inherit;
}
.pic-class {
width: 90px;
}
.input-group-btn button#searchBtn {
padding: 1.4rem 2.6rem;
}
.input-group input#table_filter {
height: 43px;
}
}
@media only screen and (max-width: 480px) {
.biodescription,
.bioimage {
width: 100%;
}
}

Congratulations! You have created your team module. If you followed the steps correctly, your index page should look just like the first screenshot in the article. After clicking on an entry, it should take you to the detail page, which should look like the image below.

 

0 Comments

Please sign in to leave a comment.
Have more questions? Submit a request