4 users online. Create an account or sign in to join them.Users

Search

I created my first site not so long ago, however being a one page site, the template was straight forward - one .xls file. So I thought I’d create a discussion to help try understand best practices for templating a typical site (more than one page) in Symphony.

I’ve been reading DesignProjectX - very informative! Still having slight trouble getting my head around the template system though; so here are my thoughts (based on the understanding there is more than one page on the site);

Utilities - these contain snippets of code used shared by many pages, such as the navigation. So, is it also good to use these for things such as the header and footer? And what about Javascript and CSS bits?

Looking on DesignProjectX, I see the Javascript and CSS placed in a “master.xls” template, with the header and footer also. Is this generally the better way to do it, rather than use separate utilities for the Javascript, CSS, header and footer?

Same question for the master template file (master.xls), is it best practice to use one?

One other thing that crossed my mind (and possibly a stupid question!), the XML bit… is this stored in the database or actually generated to a file?

Once I get my head around the best practices for templates, I think I’ll be well on my way!

Thanks!

If your site is fairly simple, it’s probably overkill to spread that code across three or four separate utilities. But I’ve worked on sites where I split out the utility responsible for generating the <head> portion of the page because it made things easier to maintain.

Same question for the master template file (master.xls), is it best practice to use one?

I consider it to be, yes, but again, depends on exactly what you’re doing. I’d say in 90% of cases it’s a good idea. By the way, the file extension is .xsl :)

the XML bit… is this stored in the database or actually generated to a file?

Neither. It’s generated on-the-fly.

Once I get my head around the best practices for templates, I think I’ll be well on my way!

Best of luck!

I’m only getting started with Symphony but a good place to look is in the Ensembles that you can download. Looking through them (and also the utilities) is a great way to see how other people do things and learn a few tricks.

The current default ensemble is really good for showing how all the different elements fit together - I’m assuming what’s in there would be considered by most to be ‘best practice’ for the needs of that site.

Whoops.. just noticed you said you were reading DesignProjectX… so you’re obviously already getting in to ensembles. Yep.

What are best practices? When I created my first Symphony site I didn’t quite understand the whole master.xsl-utility principle, but now I do.

I used to work in a CMS where each page had it’s own template from <html> to </html>, so in my first website each page-template started and ended with these, using various utilities to re-use elements such as navigation, header and footer.

Now I use one master template called master.xsl in my utilities-folder, which has the global layout for the whole html-page. A Master template could look something like this:

<xsl:template match="/">
    <html>
        <head>
            <title><xsl:value-of select="$page-title" /></title>
            ...some meta-tags...
            ...some script-tags...
            ...some link(stylesheet)-tags...
        </head>
        <body>
            <div id="top">
                ...header, navigation, etc...
            </div>
            <div id="content"> 
                <xsl:apply-templates select="data" />
            </div>
            <div id="footer">
                ...copyright notice, some links, etc...
            </div>
        </body>
    </html>
</xsl:template>

As you can see, this utility matches the root of the XML page (/), and in <div id="content">, I apply the templates that match data.

So a page template could now look something like this:

<xsl:stylesheet>
    <xsl:import href="../utilities/master.xsl" />
    <xsl:template match="data">
        <h1><xsl:value-of select="$page-title" /></h1>
        ...some more content here...
    </xsl:template>
</xsl:stylesheet>

You see that because the page-template imports the master.xsl-file, it is quite short and only let you worry about the part in the <div id="content">.

Now sometimes you need something specific, like for example aditional scripts added to the header on certain pages. When I know something like this could happen on my website, I change my master template like this:

<xsl:stylesheet>
    <xsl:template name="head" /> <!-- empty template -->  
    <xsl:template match="/">
        <html>
            <head>
                <title><xsl:value-of select="$page-title" /></title>
                ...some meta-tags...
                ...some script-tags...
                ...some link(stylesheet)-tags...
                <xsl:call-template name="head" />
            </head>
            <body>
                ...the rest of your site...
            </body>
        </html>
    </xsl:template>
</xsl:stylesheet>

You see I call the template named head in my <head>-section. By default, head is an empty template, which I have defined in the top of the document.

Now on my page template, for example a portfolio page, I add the following template in page.xsl:

<xsl:template name="head">
    ‹script type="text/javascript" src="portfolio.js">‹/script>
    <link rel="stylesheet" type="text/css" href="portfolio.css" />
</xsl:template>

Now because I have redefined this template in my page-xsl, it overwrites the empty template in my master-xsl. Therefore, the additional JavaScript and CSS get injected in the header on that specific page. This can done with all kind of chunks, as long as you have an empty template predefined for it in the master template.

I think this is the most optimal way of working. If someone has comments or suggestions on this way of working, please let me know. Like many, I’m also still in a learning process.

Nevertheless, if you’re new to Symphony, I also suggest to try and create a simple website from scratch instead of expanding a predefined ensemble. It allows you to explore the functionality of Symphony and XSL(T) on a smaller scale.

kanduvisla, thanks for this synopsis. It’s a great example of using overriding templates. I’ll just throw in that your method utilizes the override behavior of the import function (as opposed to include).

For anyone interested, you can read more about overriding templates in the docs.

Great responses, thanks!

@czheng - thanks for the correction, I just realized .xls is Microsoft Excel! :P And interesting to know the xml file it’s not physically stored anywhere - I like that.

@timchesney - I’ve just looked at the online version, but I think I’ll check out the Ensemble of it!

@kanduvisla - Brilliant examples there, I guess actually doing it would help loads, I think I’ll take a more complex site I’ve built before and convert it into Symphony! By best practices, I’m meaning the most efficient way of setting thing out. For example, best practice of a navigation in HTML is typically by using unordered lists and keeping all style in the CSS file, rather than using inline styling in the markup - that sort of thing.

I think one of the things I’ve not fully understood is how the master.xsl works in conjunction with another page template.

From kanduvisla’s master.xsl example:

<div id="content"> 
      <xsl:apply-templates select="data" />
</div>

What is the apply-templates bit doing? In the DesignProjectX master template, it doesn’t have the select=”data” bit in it; is there much difference going on?

Edit: I think it’s just clicked to what it’s doing! Obviously, the page template is including the master template, so thats just defining the node it’s selecting in the XML. I think thats right anyway!

I guess it’s time to have a play with Symphony!

I believe that

<xsl:apply-templates select="data" />

and

<xsl:apply-templates />

are the same, but when you omit the select-attribute, by default the first node in the XML is taken (which is <data>). Don’t know sure about this, so please correct me if I’m wrong…

The only reason I add the select="data"-attribute is because it reads pretier :-P

@ashooner: I’ve never used include before. Should I use this in this scenario above import? And why? (or why not?)

So if you use <xsl:apply-templates select="data" /> in the master template, do you need do use <xsl:template match="data"> in the specific page template?

@kanduvisla

No, you’ve got it right. include doesn’t give the including xslt priority like import does. In your case, switching to include would produce an error, since you would have 2 named templates with the same name.

Regarding the use of apply-templates without an @select, this just means you are applying templates to all children of the context node. When you begin the transformation, I think your context node is the root, so “/” = “/data” = “data” (if I’m not mistaken).

Applying templates without an @select gets trickier when you get within the root node, since you will probably be applying it to multiple child nodes, and might see unexpected output caused by XSLT’s default templates.

This might help. It’s Allen Chang’s Apply-Templates basics (which used to be available on the old forum).

http://vimeo.com/groups/symphonycms/videos/15234803

@ashooner, thanks for the explanation of the difference between include and import. I didn't think there was a way around the duplicate name error until now. Yet another Symphony 'power up'!

Create an account or sign in to comment.

Symphony • Open Source XSLT CMS

Server Requirements

  • PHP 5.2 or above
  • PHP's LibXML module, with the XSLT extension enabled (--with-xsl)
  • MySQL 5.0 or above
  • An Apache or Litespeed webserver
  • Apache's mod_rewrite module or equivalent

Compatible Hosts

Sign in

Login details