Create a Client Module

Creating a module to manage clients can be a great way to show off a list of clients, as well as dynamically generating detail pages for each client. This can be useful for anything from 4 to 1,000+ clients. Follow this tutorial to create your first client module.

This type of module requires the use of two different STML pages. Generally these pages would be an index and a detail page. The index page will hold the repeater template and the detail page holds the detail template.

Client Module


Creating Client Module

All modules should be built inside the managers folder under /web files/managers/ to make them easy to find and access. 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 client 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 learns more about creating a calendar and adding forms.

Client Module

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.

Form.tpl

<div class="row">
  <div class="col-md-12 form-group">
    <label for="supporting_text">Supporting Text</label>
    <input class="form-control" id="supporting_text" name="supporting_text" type="text">
  </div>
</div>
<div class="row">
  <div class="col-md-12 form-group">
    <label for="intro">Intro</label>
    <input class="form-control" id="intro" name="intro" type="text">
  </div>
</div>
<div class="row">
  <div class="col-md-6 form-group">
    <label for="clientLogo">Client Logo</label>
    <input id="clientLogo" name="clientLogo" type="file">
  </div>
</div>
<div class="row">
  <div class="col-md-12 form-group">
    <label for="description">Description</label>
    <textarea class="form-control wysiwyg" id="description" name="description"></textarea>
  </div>
</div>
<div class="row">
  <div class="col-md-6 form-group">
    <label for="asseturl">URL</label>
    <input class="form-control" id="asseturl" name="asseturl" type="url">
  </div>
</div>
  

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


Step 3

Open the Website Properties Tab and check the Enable Photo Gallery checkbox. Then click Submit.

Enable Gallery


Adding a Repeater Template

The repeater template displays all client logos across the client 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 Client 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 Client 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 Client Module. Open the Client 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.

client-repeater.tpl

<link href="/_resources/css/clients.css" rel="stylesheet" type="text/css">
<section class="clients-home">
  <div class="container">
    <div class="clients-logos text-center">
      <div class="row">
        [repeater id="" limit="0,9"] 

        [cond type=is subject="{{index}}%3" value=0] [sub_cond type=is_not subject="{{index}}" value=0]
        </div>
        <div class="row">
          [/sub_cond] [/cond]

        <div class="col-md-4 client-logos-repeater" onclick="window.location = '{{path}}'">
          <a class="[no_spaces][lower_case]{{event_title}}[/lower_case][no_spaces]">
            <img alt="[get_asset_file_url id={{clientLogo}}]" src="[get_asset_file_url id={{clientLogo}}]">
          </a>
          <div class="logo-title">
            <div class="displayTable">
              <div class="displayTableCell">{{event_title}} - {{index}}</div>
            </div>
          </div>
        </div>
        [/repeater]
        
      </div>
    </div>
  </div>
</section>
  

Step 3

If you haven't already, create an index 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 entry. In this case it will contain the main image, the title, the client intro and the client description. It will also show the categories associated with the entry. Follow these steps to create the detail template and detail STML.

Step 1


Open your client 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.

client-detail.tpl

<link href="/_resources/css/clients.css" rel="stylesheet" type="text/css">

[entry]

<div class="container">
  <div class="clients-title text-center">
    <h1>{{event_title}}</h1>
    <p>{{supporting_text}}</p>
  </div>
</div>
<div class="clients-slider-wrapper">
  <div class="container">
    <div class="row">
        [calendar_entry_attachments_repeat id="{{calendar_entry_id}}"]
          <div class="clients-slider text-center col-md-8 col-md-offset-2"><img alt="{{{name}}}" src="[get_asset_file_url id="{{{asset_file_id}}}"]"></div>
        [/calendar_entry_attachments_repeat]
    </div>
  </div>
</div>
<div class="container">
  <div class="row">

    <div class="col-md-4 clients-sub-text">
      <div class="social-share">
        <h3 class="share">Share</h3>
        [social_share_fa domain="www.webcorpco.com" protocol="http" facebook="true" twitter="true" linkedin="true"]
      </div>

      <div class="clearfix"></div>
      
      <div class="clients-line"></div>
      <div class="services">
        <h3>Services Included</h3>
        [entry_categories_repeat id="{{calendar_entry_id}}"]
          <p>{{{title}}}</p>
        [/entry_categories_repeat]
      </div>
    </div>
    
    <div class="col-md-6 col-md-offset-2 clients-text">
      <h2>{{intro}}</h2>
      {{description}}

      <div class="launch-site-btn text-center">
        <a href="#" class="btn btn-client" target="blank">LAUNCH SITE</a>
      </div>

    </div>

  </div>
</div>
[/entry]
  

Step 2

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

Client Module

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 client 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 client 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 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 Data 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.

Client Module


Step 4

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

Client Module

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 client module.

Client Module


Adding Clients

Now that you have created the client module it's time to add clients.

Step 1

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


Step 2

Add a client name, supporting text, an intro, upload a client logo, add a description and select a category for the entry.

To add a category to the entry, select one of the categories in the list on the right side of the screen.

Click Save after you have finished adding your information.

Client Module

To add a main image using the gallery function, you must create and save your entry. Once the entry has been saved or created, you can then scroll to the bottom of the entry. Open the gallery tab, and click Upload to start adding gallery images.


Step 3

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

clients.css

/* ================================
# Clients Page
================================= */
section.clients-home .clients-logos .client-logos-repeater {
height: 260px;
border-right: 1px solid #ccc;
border-bottom: 1px solid #ccc;
cursor: pointer;
}
section.clients-home .clients-logos .client-logos-repeater:hover {
background-color: #ebebeb;
}
section.clients-home {
margin-top: 20px;
}
section.clients-home .clients-logos .client-logos-repeater:nth-child(3n) {
border-right: none;
}
section.clients-home .clients-logos .row:last-of-type .client-logos-repeater {
border-bottom: none;
}
section.clients-home .clients-logos .client-logos-repeater img {
position: absolute;
top: 0;
bottom: 0;
margin: auto;
left: 0;
right: 0;
}
.clients-title {
padding-top: 120px;
}
.clients-title h1 {
line-height: 72px;
margin-top: 30px;
font-family: "open sans condensed", sans-serif;
font-weight: bold;
font-size: 3.750em;
color: #000;
text-transform: uppercase;
}
.clients-title p {
font-size: 1.500em;
margin-bottom: 40px;
}
.clients-slider-wrapper {
background-color: #f5f5f5;
margin-bottom: 60px;
}
.container .clients-text h2 {
margin-bottom: 40px;
font-family: "open sans condensed", sans-serif;
font-size: 1.750em;
}
.container .clients-text p {
font-size: 18px;
margin-bottom: 20px;
}
.clients-sub-text {
padding-left: 80px;
}
.clients-sub-text h3.share {
font-size: 1.200em;
}
.clients-sub-text .social-share h3 {
display: block;
float: left;
margin-right: 10px;
color: #434343;
}
.clients-sub-text h3 {
text-transform: capitalize;
font-family: "open sans condensed", sans-serif;
font-size: 1.500em;
font-weight: normal;
margin-top: 25px;
}
.clients-sub-text .services h3 {
color: #434343;
}
.clients-sub-text .social-share a {
display: inline-block;
margin-top: 23px;
margin-left: 10px;
}
.clients-sub-text .social-share a .fa {
font-size: 1.563em;
color: #636363;
}
.clients-line {
border-bottom: 1px solid #ccc;
width: 48%;
padding-top: 0;
}
.logo-title {
position: absolute;
display: none;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
font-size: 16px;
font-weight: 700;
line-height: 16px;
text-transform: uppercase;
color: #FFF;
background-color: #0079c2;
}
.displayTable {
display: table;
width: 100%;
height: 100%;
overflow: hidden;
}
.logo-title .displayTableCell {
text-align: center;
padding: 5px 15px;
}
.clients-sub-text p {
text-transform: capitalize;
}
.launch-site-btn {
margin: 40px 0;
}
.launch-site-btn a.btn.btn-client {
border: 2px solid #676666;
color: #676666;
font-size: 18px;
}
.social-share ul.socials {
margin-top: 0;
float: none;
}
.clients-sub-text {
float: right;
}
/* ================================
# Media Queries
================================= */
@media screen and (max-width: 1200px) {
.clients-line {
width: 70%;
}
}
@media screen and (max-width: 991px) {
section.clients-home .clients-logos .client-logos-repeater {
border-right: none;
}
section.clients-home .clients-logos .row:last-of-type .client-logos-repeater {
border-bottom: 1px solid #ccc;
}
.clients-sub-text {
width: 100%;
float: left;
padding-left: 15px;
}
.clients-text {
float: right;
}
.clients-slider-wrapper {
margin-bottom: 20px;
}
.clients-line {
width: 30%;
padding-top: 10px;
}
.clients-title {
padding-top: 80px;
}
}

Congratulations! you have created your first client module. If you followed the steps correctly, your index page should look just like the first screenshot in the article. After clicking on a client, 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