Template Guidelines
From LifeType Wiki
[edit] Template Guidelines
This document contains a set of basic guidelines that should be followed when porting, updating or creating new templates to make sure that all templates offer the same set of features and functionality.
[edit] Page titles
Since LifeType 1.2, the core code will automatically generate a sensitive page title for all possible page. This means that for post pages we will get the post title as part of the title, for category pages we will get the category name and so on. This feature is not mandatory and we can easily customize our templates to use our own specially crafted titles but the ones generated by LifeType should be good enough for most of the cases and at the same time, provide meaningful information about pages to search engines (some of them seem to value the information in page titles quite a bit)
In order to use this feature, make sure that you have this line in your file header.template:
<title>{$pageTitle|escape:"html"}</title>
The $pageTitle variable is a "magic" variable that holds the pre-calculated title for the page. The escape Smarty modifier ensures that post titles whose content includes characters such as '<', '>' or '&' will still appear correctly and not break the validity and the layout of the page.
[edit] Integration with Bad Behavior
Now that LifeType 1.2 comes with Bad Behaviour integrate in the core package, all templates should be made aware of this integration and include the necessary code.
Bad Behavior needs some Javascript code to be executed in each page to be able to track clients in order to determine whether they are spam or not. Please make sure that youre template includes the following lines at the top of file header.template:
{if $badbehavior}
{$badbehavior->showBB2JavaScript()}
{/if}
[edit] Displaying the user picture
Templates must provide conditional support for showing the blog owner's picture in the template if there is one. The location of this picture will vary but to be in line with the functionality provided by the standard template, all custom templates should implement the same features.
Although the HTML code might differ, the following snippet will show the user picture if there is one:
{assign var=blogOwner value=$blog->getOwnerInfo()}
{assign var=AboutMyself value=$blogOwner->getAboutMyself()}
{if $blogOwner->hasPicture() && $AboutMyself}
<h2>{$locale->tr("about_myself")}</h2>
<div id="AboutMyself">
{assign var=picture value=$blogOwner->getPicture()}
<img id="UserPicture" src="{$picture->getPreviewLink()}" alt="{$blogOwner->getUsername()}" />
<p>{$AboutMyself}</p>
</div>
{/if}
[edit] Comment form for authenticated users
Since LifeType 1.2, LifeType is able to recognize if there is a user currently logged in when posting a comment. If there is, LifeType will automatically pre-fill the username field with the name of the user who is currently logged in.
The code necessary to achieve this is as follows:
{if $authuser}
{$authuser->getUsername()} (<b>{$locale->tr("form_authenticated")}</b>)<br />
<input type="hidden" name="userName" id="userName" value="{if $authuser}{$authuser->getUsername()}{/if}" />^M
{else}
<input tabindex="2" id="author" name="userName" /><br /><br />
{/if}
However the code above will not be necessary. Also as of LifeType 1.2, all templates in the same site can and should share the same commentform.template to make maintenance easier so that for example the authimage plugin can be installed to all blogs just by editing one template file.
An alternative approach is to make a copy of the default commentform.template and store it in our template. However, site administrators may have configured the template layer to always load first the contents of the default template (under templates/default/) and ignore the user content. It is advisable not to code our templates expecting that users will be allowed to use their version.
[edit] Global commentform.template
Templates in LifeType 1.2 come configured out of the box to take advantage of the global commentform.template that is available in folder templates/default/commentform.template. LifeType 1.2 works so that if a .template file cannot be found in the current template set, it will automatically look for it in the templates/default folder.
This means that custom templates should be ready to work with this file.
There is more information about this feature and the CSS identifiers that can be used to tweak the appearance of this form in order to match the style of our template set here in "using the global comment form"
[edit] Displaying the user picture of comment posters
In addition to the feature, LifeType now also stores wethe the poster of a comment was an authenticated user and if so mark the comment as authenticated.
This means that every comment can be linked to a user, and therefore we can also show his or her user picture. The code necessary to do so is:
{if $comment->IsPosterAuthenticated()}
{assign var=poster value=$comment->getUser()}
{if $poster->hasPicture()}
{assign var=posterimg value=$poster->getPicture()}
<img src="{$posterimg->getPreviewLink()}" alt="{$poster->getUserName()}" align="right" />
{/if}
{/if}
[edit] Paging
[edit] Paging for articles
Paging is used for articles in the front page, files and albums and for search results.
LifeType 1.1 automatically uses a pager in the front page, adjusting it to the number of articles available in either the whole blog, in the given section of the archives or in the given category. However, we need to add some extra Smarty code to get the pager displayed.
The easiest way to display the pager is to use the {pager} Smarty function which already includes all the logic necessary to display the pager.
It is advisable to include the call to {pager} inside footer.template, as the pager itself is used in several other templates. Having it in a common page will ensure that it is displayed when needed only.
{pager style="links"}
The style parameter can take any of the following values:
- links will display a basic horizontal list of links, with a "Next" and "Prev" links which appear or not depending on the current page and the number of pages.
- forwardonly will only display the forward link, but only if it is necessary.
- backonly will only display the link to the previous page, but only if it is necessary (i.e. will not appear if we are at the first page of the list)
The following parameters are also supported by the pager:
- separator: character used to separate pager links when using the "links" style. It defaults to a blank space.
- disablediv: whether to surround the pager with a &div> pair of tags. Defaults to false.
- next: Name or translation given to the link pointing to the next page. It defaults to the value given to the next_post key in the current locale.
- previous: Name or translation given to the link pointing to the next page. It defaults to the value given to the previous_post key in the current locale.
The look of the pager can be further enhanced via the following CSS classes:
- pagerLink: used for any of the links in the pager.
- pagerLinkPrevPage: used for the "Prev" link.
- pagerLinkNextPage: used for the "Next" link.
- pagerCurrent: used for the current page, which will not be linked.
Usually it will be enough to add the Smarty code listed above and make sure that the pager fits with the overall design of the page. In cases where further customization is needed, it is possible to use the different available styles and even create your own custom pager.
[edit] Paging for resources
As with articles, resources are also displayed in a paged fashion since LifeType 1.1.
Unlike with articles, it is necessary to make an additional change to our template in order to get a paged display of resources. If these changes are not made, we will get the normal non-paged display of resources where all of them are displayed in one single page.
In album.template we should make sure that we're using the following loop to process the list of resources available in the album:
{foreach from=$resources item=resource}
In order to display the pager, we will have to use the {pager} tag again. If this call was placed in footer.template as advised in the previous section, it won't be necessary to include it in album.template
[edit] Paging for comments
LifeType 1.2 provides support for post pages with comments split in several different pages.
If we placed our {pager} tag in footer.template as previously recommended, there really isn't anything to do. The list of comments provided via the $comments array will only contain the right section of the comments to show and the pager will show the current page.
Just make sure that your version of postandcomments.template loops over $comments and not over $post->getComments(), or else you will be displaying all comments instead of the ones corresponding to the current page. Use this:
{foreach from=$comments item=comment}
...
{/foreach}
instead of:
{foreach from=$post->getComments() item=comment}
...
{/foreach}
[edit] Paging for search results
LifeType 1.1 also introduced a paged display of search results, so we should make sure that our template set supports it.
Again, if we make sure that our {pager} is located in footer.template, there will be no need for us to do anything. If not, then we will have to add a call to the pager in searchresults.template so that users can comfortably navigate through the generated search results.
[edit] Number of comments and trackbacks
Up to version 1.0 of LifeType, the call $post->getTotalComments() returned the number of non-spam comments while $post->getNumTrackbacks() returned the number of non-spam trackbacks. For consistency reasons, this issue was fixed in LifeType 1.1 and these are the available methods and their results:
- $post->getTotalComments(): returns the total number of comments (both spam and non-spam)
- $post->getTotalTrackbacks(): returns the total number of trackbacks (both spam and non-spam)
- $post->getNumComments(): returns the number of non-spam comments. This is the one you want to use in your templates.
- $post->getNumTrackbacks(): returns the number of non-spam trackbacks. This is the one you want to use in your templates.
[edit] Provide a screenshot
If the template provides a file called screenshot.jpg in its folder, LifeType will be able to show it to users so that they can have a quick glimpse of the template.
It doesn't take too long to take this screenshot, and it a very easy way to enhance the user experience.
Screenshots should be of a reasonable size in order to keep the downloadable template package at a reasonable size too.
[edit] Favicon.ico
Please include Lifetype's official favicon.ico in your templates so Lifetype sites are easily recognizable when looking at the browser bar (or tabs in Firefox) and increase users' awareness that they're reading a Lifetype site.
The file favicon.ico can be found in the templates/standard/ folder in every Lifetype package or from the official site here: http://www.lifetype.net/templates/standard/favicon.ico
In order to make your template use this favicon file, add the following to your header.template:
<link rel="shortcut icon" type="image/x-icon" href="{$url->getTemplateFile("favicon.ico")}" />
[edit] Powered by Lifetype
Although not strictly necessary, it would help the project if all templates included a "Powered by Lifetype" link at the bottom of each template linking back to the project page at http://www.lifetype.net. This link does not have to be exclusive, so it can go next to the link to the service or the designer:
Add the following to your footer.template:
<a href="http://www.lifetype.net">Powered by Lifetype</a>
