JonMifsud
Web Developer & Consultant

Extending Static Pages in Symphony CMS

04 June 2013

With Symphony CMS being so flexible, reducing yourself to static-content pages is a very big understatement to what Symphony CMS is capable of. This post will explore how one could extend the simple Static Page concept to handle website hierarchy on the front-end as well as customized templates.

If you've just came across this post and you're interested in implementing a Website Hierarchy in Symphony CMS I'd suggest you go through the linked post which explains how to implement this in the back-end. This post is meant to built on the previous one so if you want to try this out please work through the previous one first.

In order to be able to give examples and explain; I shall assume that you have added two entries in your backend.

  1. An about page, where the title is About and the handle is about so that would be accessible under

    http://yoursite.com/about/
    
  2. A contact page, where the title is Contact us and the handle is contact having the About page as parent, thus accessible under

    http://yoursite.com/about/contact/
    

Knowing the Current Page

As per the datasources we created; one of the datasources was named page. This datasource contains only a single entry representing the current page. For simplicity's sake I would suggest inserting the following line in the top of your static.xsl template.

              <xsl:variable name='current-node' select='/data/page/entry'/>

            

This will add a variable $current-node in your xsl giving you a shortcut, so if you want to output the title in an h1 all you need to do is the following:

              <h1><xsl:value-of select='$current-node/title'/></h1>

            

Building Links to your static pages

In the previous article, I mentioned the need of creating a Navigation datasource; this is required in order to be able to generate links and menus. The output of this datasource would be something as follows:

              <navigation>
  <section id="1" handle="pages">Pages</section>
  <entry id="1">
    <title mode="formatted" word-count="1">About</title>
    <menu-title mode="formatted" word-count="1">About</menu-title>
    <url-handle mode="formatted" handle="about" word-count="1">about</url-handle>
  </entry>
  <entry id="2">
    <title mode="formatted" word-count="2">Contact Us</title>
    <menu-title mode="formatted" word-count="2">Contact Us</menu-title>
    <url-handle mode="formatted" handle="contact" word-count="1">contact</url-handle>
    <parent>
      <item id="1" handle="about" section-handle="pages" section-name="Pages">About</item>
    </parent>
  </entry>
</navigation>

            

In order to build links we would need to traverse the nodes recursively whenever we find a parent. Thus I would suggest the use of a template such as the one below:

              <xsl:template match="*[section/@handle='pages']/entry" mode='link'>
    <xsl:choose>
        <xsl:when test="parent/item">
            <xsl:apply-templates select='../../navigation/entry[@id=current()/parent/item/@id]' mode='link'/>
        </xsl:when>
        <xsl:otherwise>
            <xsl:value-of select='$root'/><xsl:text>/</xsl:text>
        </xsl:otherwise>
    </xsl:choose>

    <xsl:choose>
        <xsl:when test='url-handle/@handle = "home"'>
            <!-- home page do not append a handle -->
        </xsl:when>
        <xsl:otherwise>
            <xsl:value-of select="url-handle/@handle"/>
        </xsl:otherwise>
    </xsl:choose>
</xsl:template>

            

So then if you'd like to build a canonical you can just do

              <xsl:variable name='current-page-link'>
    <xsl:apply-templates select='$current-node' mode='link'/>
</xsl:variable>
<link rel='canonical' href='{$current-page-link}'/>

            

And if you were looping over items to create a navigation menu; it's just

              <xsl:variable name='link'>
    <xsl:apply-templates select='current()' mode='link'/>
</xsl:variable>
<a href='{$current-page-link}'><xsl:value-of select='title'/></a>

            

Custom templates not just Static Pages

This approach can also be used for custom Symphony Pages, which require other datasources & templates. Just make sure of the following:

  1. Your Symphony page handle and handle in the pages section match together.

  2. You've attached the Navigation datasource & Page datasource in the symphony page.

  3. Included your templates to generate links & Other utilities.

If you've followed up and think this is a very interesting approach keep in mind that you can make other things simple. Same way as I gave the canonical example, it could be possible to generate a canonical for other things such as blog entries where each of your relevant sections would implement a mode='link' template. Similarly one can implement Title Tags and meta descriptions amongst other things, thus your call-template could very easily reside in Master and be consistent throughout.

I invite you to explore what's possible using these techniques, I'm also planning a follow up for multilingual content; highlighting minor changes required as well as a way to implement a Language Switcher. Where from one page you can link to translated content of the same page. Meanwhile you're welcome to explore, share your opinions and/or ask questions.

Written by Jonathan Mifsud

Jonathan Mifsud is a web developer by day and an SEO enthusiast by night. He provides freelance web development and consultancy services and is available for hire. You can get in touch with him on twitter and Google+

Comments

Leave a Comment
Andrew Minton

Great post Jon, really helpful stuff.

I've implemented a template similar to the above but am having trouble visualising how a nested Ul > li navigation template can benefit from the match above...

Did you post something on the forum referencing nested Ul > li's at all?

Reply

07 Aug 2013 @8:19pm

Post a new Comment

Please write your name.
Please enter your comment
Please enter your email address.