Adopting a Template - Part 2 - Template Inheritance

In this installment we will describe converting the page template to use smarty template inheritance, and begin making or homepage dynamic.

Scroll down for more details

In the previous installment, I described that I had purchased the ARUS Personal portfolio template from ThemeForest,  and had placed it into a CMSMS template, and a design.  I also created a simple content page in CMSMS.   The template worked, and our homepage worked.  But the content was not dynamic in the way that a CMS is.

The new page template looked alot like this:

<!DOCTYPE html>
{process_pagedata}{content assign=junk}
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="description" content="arus is a Personal Portfolio Template">
        <meta name="author" content="Mahamudul Hasan">
        <title>ARUS - Personal Portfolio Template</title>
        <link rel="shortcut icon" href="images/favicon.png" type="image/png">
        <!-- CSS stuff (removed for brevity) -->
    </head>
    <body>
         <div class="preloader">
             <div class="spinner">
                 <div class="double-bounce1"></div>
                 <div class="double-bounce2"></div>
             </div>
         </div>
 
         <div class="intro-section parallax-section" id="home">
             <header class="navbar custom-navbar navbar-fixed-top">
                 <!-- navigation, removed for brevity -->
             </header>
 
             <div class="welcome-area">
                 <!-- displays welcome stuff, removed for brevity -->
             </div>
         </div>
 
         <section id="about" class="about-section parallax-section">
              <!-- removed for brevity -->
         </section>
 
         <section id="services" class="services-section parallax-section">
              <!-- removed for brevity -->
         </section>
 
         <section id="services" class="services-section parallax-section">
              <!-- removed for brevity -->
         </section>
 
         <div id="divider" class="quotes-area parallax-section">
              <!-- removed for brevity -->
         </div>
 
         <section id="work" class="parallax-section">
              <!-- removed for brevity -->
         </section>
 
         <div id="testimonial" class="review-section parallax-section">
              <!-- removed for brevity -->
         </div>
 
         <section id="contact" class="contact-info-section parallax-section">
              <!-- removed for brevity -->
         </section>
 
         <footer class="footer">
              <!-- removed for brevity -->
         </footer>
 
         <!-- javascript stuff, removed for brevity -->
         <script src="js/main.js"></script>
    </body>
</html>

Note, I have trimmed a lot of the divs from the template for the purposes of brevity.

Next, just to get things started, I edited a few meta tags, so that it would start to look like a CMSMS template.  My head section now looked like:

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="{description|strip_tags}">
    <meta name="author" content="Mahamudul Hasan">{* take care of this later *}
    <title>{title} - {sitename}</title>
    <link rel="shortcut icon" href="images/favicon.png" type="image/png">
    <!-- CSS stuff (removed for brevity) -->
</head>

I am going to use template inheritance for this project to allow me to create a parent-child relationship between pages, and to eliminate dupllication of content without having to have a whole bunch of {include} or {global_content} tags everywhere that can quickly get confusing if logic is required.  The master template will contain the head area, the header, navigation and footer.   A homepage template that will extend the master template will set my welcome-text to use a funky javascript library, and display all of the parallax sections.  I also want to generate a simple detail template that looks similar to my home page, but without all of the hardcoded sections. 

I also want the ability to generate child pages that look similar to my home page, but without all of the hardcoded sections.  i.e.: for module detail views, etc. 

Ignoring the navigation for now,  I create a new page template called ARUS-Homepage and copy/paste some code around between the two templates to look something like:

ARUS-Master:

<!DOCTYPE html>
{process_pagedata}
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="description" content="arus is a Personal Portfolio Template">
        <meta name="author" content="Mahamudul Hasan">
        <title>ARUS - Personal Portfolio Template</title>
        <link rel="shortcut icon" href="images/favicon.png" type="image/png">
        <!-- CSS stuff (removed for brevity) -->
    </head>
    <body>
         <div class="preloader">
             <div class="spinner">
                 <div class="double-bounce1"></div>
                 <div class="double-bounce2"></div>
             </div>
         </div>
 
         <div class="intro-section parallax-section" id="home">
             <header class="navbar custom-navbar navbar-fixed-top">
                 <!-- navigation, removed for brevity -->
             </header>
 
             <div class="welcome-area">
                 <div id="particles-js"></div>
                 <div class="welcome-table">
                     <div class="welcome-cell">
                        <div class="container">
                            <div class="row">
                                <div class="col-md-12 text-center">
                                    <div class="welcome-text">
                                        {block name='welcome'}
                                            <h1>Welcome</h1>
                                            <h4>News and stories about me, my projects and CMSMS.</h4>
                                        {/block}
                                    </div>
                                </div>
                           </div><!--/.row-->
                        </div><!--/.container-->
                    </div>
                </div>
             </div>
         </div><!-- .intro-section -->
 
        {block name='content'}
            {content}
        {/block}
 
         <footer class="footer">
              <!-- removed for brevity -->
         </footer>
 
         <!-- javascript stuff, removed for brevity -->
         <script src="js/main.js"></script>
    </body>
</html>

ARUS-HomePage:

{extends file='cms_template:ARUS2-Master'}
{block name='welcome'}
    <h1>calguy1000</h1>
    <h4>A cool and creative <span id="typer"></span></h4>
{/block}
{block name='content'}
         {content assign=junk}{* we will take care of this later *}
         <section id="about" class="about-section parallax-section">
              <!-- removed for brevity -->
         </section>
 
         <section id="services" class="services-section parallax-section">
              <!-- removed for brevity -->
         </section>
 
         <section id="services" class="services-section parallax-section">
              <!-- removed for brevity -->
         </section>
 
         <div id="divider" class="quotes-area parallax-section">
              <!-- removed for brevity -->
         </div>
 
         <section id="work" class="parallax-section">
              <!-- removed for brevity -->
         </section>
 
         <div id="testimonial" class="review-section parallax-section">
              <!-- removed for brevity -->
         </div>
 
         <section id="contact" class="contact-info-section parallax-section">
              <!-- removed for brevity -->
         </section>
{/block}

Now I modify my home page, and tell it to use the ARUS-Homepage template instead of ARUS-Master, and look at my home page in the browser.  It all works as before, but now is organized into logical sections.

Take Note. The {extends} tag in the ARUS-Homepage template.  It uses the cms_template smarty resource, which tells smarty to look in the CMSMS Design manager for that template. 

If you look carefully, you will see that we only have two page templates:  ARUS-Master, and ARUS- Homepage.  The ARUS-Master page should be able to work nicely for child pages.  The ARUS-Homepage template has a {content} tag that assigns the output to junk.  displays a custom welcome block, and displays all of the subsections required for the homepage.   The <head> section, header, navigation, footer, css, and javascripts are all embedded in the master template.   Everything is nice and clean.

Next we will modify the portfolio section of the ARUS-Homepage CMSMS template to use News so that we can add portfolio pages easily.  This is a two step process:

  1. Create a new News summary template that displays the News in a way we want
  2. Call the News module from within the ARUS-Homepage template inside the portfolio section and tell it to use our new News summary template.

I created a new news summary template called ARUS-Portfolio-Summary, and copied and pasted the code inside the <section id="work"> into this new template.  I will leave the exercise of converting that into a proper news template for another article, however, for now, a simple copy and paste will work.

I then modified the portfolio section to look like this:

<!--============ PORTFOLIO SECTION ===========-->
<section id="work" class="parallax-section">
   {News summarytemplate='ARUS2-Portfolio-Summary'}
</section>

Conclusion:

In this article, we began replacing hardcoded text with some smarty tags that CMSMS understands so that we can create multiple pages that look alike, share the same javascript and abilities, but have different content.   We used template inheritance to separate our primary template into two pieces one for the home page, and a base template that could also be used for secondary child pages, and we started making the homepage more dynamic by using the News module for our portfolio section.

The next article in this series will work on finishing off our portfolio display using the News module summary and detail views and using content blocks to make it easier to edit some of the hard-coded text in the ARUS-Homepage template.