Campsite

Templates In-depth

In this chapter:
  • Modular Structure of Templates
  • Building a Navigation Template
  • Linking to Issues, Sections and Articles
  • Building an Article Template
  • Building a Section Template
  • Building a Home Page Template
  • Advanced Search
  • Creating reader subscriptions through the template language
  • Powerful Lists and Ordering
  • Adding PHP Scripts to Your Campsite Templates

 

This section is an in-depth guide to the templates. 

 

Modular structure of templates

A glance at all articles of an online publication reveals that generally there are many layout similarities even across different sections of the publication. Taking advantage of such similarities is what the template structure of Campsite was meant to do. In other words: design features that remain the same for all articles only need to be specified once, e.g. the navigation from an article back to section and home, font type and size, background color and the like.

On the other hand, there are article components that vary between articles. For example, the top of the article might contain some specific logo to indicate which section it belongs to. In such a case, the templates are designed to work in a modular fashion, allowing you to call up templates within templates.

The modular structure of the templates can be illustrated well by the following example: If background color, font size and type are the same for all articles, they will be specified as plain HTML in the template. But differences between sections will be indicated within the structure of the template (see below) indicating "if this article belongs to the politics section, insert such-and-such template here, if it is sports, insert such-and-such, else: just use the following."

Templates can be stacked within each other. A template can be made to call another template and include the layout information at the position where it was called in the main template. The easiest way to illustrate this modular structure is by looking at a usual tree structure of folders on a computer. Starting from general categories, the deeper the structure, the more precise and specific the folder names and information.

The modular structure was introduced to keep redundancy to zero and therefore the layout work minimal. Any design changes need to be made only once in the templates, never even twice, if you make full use of this modularity potential.

 

Building a Navigation Template

As described above, the template structure can be nested, meaning one template can call another template. This, for example, makes a lot of sense for the navigation. To jump between sections, you might only need one navigation template that can be used by all other templates (article, section, home page).

To nest another template within another, use the following Campsite tag:

{{ include file="navigationtemplate.tpl" }}

The 'include' command is Campsite lingo; the name of the template needs to be adjusted to whatever you called it. Let's assume we add this tag in the article template we created earlier, and we can now go on and build the template.

First thing to do when you are building something like the navigation is to take control over the environmental variables. Our navigation needs to follow some standard rules and should not be affected too much by the environmental setting of the current position of the user.

In terms of Campsite lingo, we need to introduce a 'local' tag, which allows us to specify some environmental variables for a local section inside the template. In other words, we can switch off the environmental variables, set our own and then switch them on again. In that way we can use the same template for the navigation for all articles, sections, even issues (not publications, obviously).

In order to make sure you enter the current issue in the navigation bar, set the environment variables to:

{{ local }}{{ set_current_issue }}

Here, 'local' allows you to set the parameters inside a template to the values you want to be specified. Once the parser finds the '/local' tag, it will switch back to the environment variables it arrived with (for example a back issue).

Then the issue parameter is set to 'current'. This is done in order to make sure that the navigation will always jump to the 'section' (or whatever you want) of the current (latest published) issue.

Then you would need to specify which section you would want to link to. This is done with the 'section number' tag.

{{ set_section number="1" }}

The above tag would set the local section parameter to 1, which will be looked up in the Campsite database under section entries (each section is assigned a number when it is created, see chapter "Creating a section" of this manual).

Now we have set all necessary values for the link: we will link to section 1 in the current issue. All we need to do now is create the link to the section, or - to be more precise - the template that is used to build section pages.

<a href="{{ uri options="section" }}">NEWS</a>

This will create an ordinary link, using the anchor tag of HTML. This link will generate the URI for the section 1.

Finally, we need to end the local parameters with the tag:

{{ /local }}

A complete navigation template could look like this:

{{ local }}

{{ set_current_issue }}

{{ set_section number="1" }}
<a href="{{ uri options="section" }}">News</a><br>

{{ set_section number="2" }}
<a href="{{ uri options="section" }}">Politics</a><br>

{{ set_section number="3" }}
<a href="{{ uri options="section" }}">Sport</a><br>

{{ set_section number="4" }}
<a href="{{ uri options="section" }}">Weather</a><br>

{{ /local }}

Make sure that the section numbers assigned correlate with the names of the sections, as you assigned them when building the publication in the first place.

Now we can advance into a more conditional environment, the section pages.

Linking to Issues, Sections, and Articles

When building your navigation template, you will most likely want to link to internal content.  Two statements will help you do this: uri and uripath. You can find the full description at "Displaying the URL" in "Template Language Reference" chapter. These statements help you build a URL.  In the admin interface, you will assign each issue, section, and article a "URL Name".  These names are used to contruct a link like so:

http://test.com/en/may30/news/summer_is_coming

where:

  • test.com is the publication's site name
  • en is the publication's language code
  • may30 is the latest issue number
  • news is the section short name
  • summer_is_coming is the article short name

To produce such a link you only have to write the following:

<a href="{{ uri }}">text</a>

This is equivalent to:

<a href="{{ uripath }}?{{ urlparameters }}">text</a>

uripath displays the 'path' part of the URI: /en/may30/news/summer_is_coming. urlparameters displays the rest of the parameters if any. uri combines both these statements. All these statements work for both old style URLs (named template path) and new type of URLs (named short name).

Creating Links to Issues, Sections, etc.

Use language, publication, issue, section and article arguments in order to specify the scope of the link. Suppose we are in the article template and we want to return to the last issue, current issue, section or article page.

<a href="{{ uri options="language" }}">text</a>
will display:

<a href=/en>text</a>

this will redirect us to the last published issue page.

<a href="{{ uri options="publication" }}">text</a>

will display:

<a href=/en>text</a>

this will redirect us to the last published issue page.

Publication argument has the same effect as language because short name URLs do not have the publication parameter in the URI. Instead, the publication is identified by the site name.

<a href="{{ uri options="issue" }}">text</a>

will display:

<a href=/en/may30>text</a>

this will take us to the current issue page.

<a href="{{ uri options="section" }}">text</a>

will display:

<a href=/en/may30/news>text</a>

this will take us to the current section page.

<a href="{{ uri options="article" }}">text</a>

 will display:

<a href=/en/may30/summer_is_coming>text</a>

this will take us to the current article page.

Language, publication, issue, section and article arguments cannot be combined.

Creating a Link to a Template

Sometimes we may need to create a link to a template that is not an issue, section or article template; with short name URLs this can be done the following way:

<a href="{{ uri options="template login.tpl" }}">text</a>

will display:

<a href=/en/may30/summer_is_coming?tpl=tpl_id>text</a>

this will display the login.tpl template in the current context of variables (publication, language, issue etc.).

 

Building an Article Template

Building an article template is the easiest option. All you need to do is generate your HTML layout and substitute the dynamic sections (title, author, intro, text...) with the simple tag:

{{ $campsite->article->title }}

The command is 'print article'; the 'title' part varies. This is the name of the variable that you assigned when building the Article Types. So it could also read:

{{ $campsite->article->sportsitemdeck }}

As the rest of the HTML layout remains as it is, a simple template might look like this:

<body>
<h1>{{ $campsite->article->title }}</h1>
<h3>{{ $campsite->article->subtitle }}</h3>
<p><i>Written by {{ $campsite->article->authorname }}
   on the {{ $campsite->article->date }}</i><p>
{{ $campsite->article->text }}
</body>
</html>

The reason we can reduce the templates to such a simple solution is, because Campsite will remember where it comes from and where it is. So by the time the user arrives at one particular article, Campsite knows the publication, the issue, the section, and even the article ID and can simply generate the HTML page from the database by using the environmental variables together with the layout information in the template.

Obviously, your design can be far more advanced than this page. And Campsite can also perform far more advanced functions than this. In order to get a feel for this, let's jump into the next example, building the navigation. (A full list of tag commands can be found at the end of this chapter.)

Building a Section Template

In this article:
  • The 'Feature' article of the section
  • Displaying only the most recent feature article on a section page
  • Including Images in the Section Listing
<h3


your comment:
name :
comment :

If you can't read the word, click here
word :