Create a Template File

A template file is necessary to render the data defined by the view.

To create a template:

1. In your CCT module’s Templates directory, create a new .tpl file.

2. Name this file to intuitively relate to your module as a template.

   For example:

   ../SC.CCT.ImageViewer@0.0.1/Templates/sc_cct_imageviewer.tpl

3. Create the HTML required to render the data defined by the view.

   For the example ImageViewer CCT, your template might look similar to:

                   <div class="sc-cct-imageviewer">
      <div class="sc-cct-imageviewer-slider-container">
         <div class="sc-cct-imageviewer-image-slider">
            <ul data-sc-cct-imageviewer class="sc-cct-imageviewer-image-slider-list">
                  <li>
                     <div class="sc-cct-imageviewer-slide-main-container">
                        {{#if hasImage}}
                           <img src="{{resizeImage imageUrl 'main'}}" alt="{{imageAlt}}" />
                        {{/if}}
                        {{#if hasText}}
                           <div class="sc-cct-imageviewer-slide-caption sc-cct-imageviewer-slide-caption-{{valign}}">
                              {{#each texts}}
                                 <h2 class="sc-cct-imageviewer-slide-caption-title">{{this}}</h2>
                              {{/each}}
                           </div>
                        {{/if}}
                     </div>
                  </li>
            </ul>
         </div>
      </div>
   </div> 
   
                 

4. Save the template.

Related Topics

Create Custom Content Types for SMT

Create a Custom Module for Your CCT

Create an Entry Point File

Create a View File

Set Up Your ns.package.json and distro.json Files

General Notices