Custom article templates

Arlima uses Mustache templates, both on back-end (when rendering the list on your front page) and front-end (when you preview your Arlima articles in wp-admin). Arlima comes with three default templates (templates/article.tmpl, templates/giant.tmpl and templates/widget.tmpl). The template rendering class will search for the template file in your theme and if not found fall back on template files located in the Arlima template directory. If you only want to modify a certain part of a template you probably don't need to create an entirely new template, use the template filters instead

Here's how you create your own templates:

1) Copy the directory named templates in the Arlima plugin directory to your theme.

2) Rename the file article.tmpl located in the copied template directory to something suitable, the file must have the extension .tmpl.

In the template you will have access to the aricle data and the following variables (see the template example for more info):

{{class}}  // Class names that describes how the article is configured
{{{article_begin}}}  // Content added via the filter arlima_article_begin 
{{{article_end}}}  // Content added via the filter arlima_article_end 
{{{html_streamer}}} // The HTML code of possible streamer
{{{html_title}}} // The HTML code for the article title
{{{html_content}}} // The HTML code of the article text
{{{related}}} // Array with posts that is related to the article
{{{child_articles}}} // HTML content of rendered child articles
{{is_child}} // Whether or not this article is a child article

Notice! The first element in your article template should wrap all the content of your article. This wrapping element must have the attribute data-post="{{post}}". You should also add class="{{class}}" on the same element to get the article preview in the list manager to be displayed properly.

3) Add the following code to the file functions.php located in your theme directory:

<?php
function my_arlima_template_path($paths) {
  array_unshift($paths, dirname(__FILE__).'/templates/');
  return $paths;
}
add_filter('arlima_template_paths', 'my_arlima_template_path');

You can have several different templates, you select which template to use when you create the article list (wp-admin/ -> Article lists -> Edit). Here you can read more about jQuery TMPL:

Combining template files

We have added a template function that makes it possible to include a template within another template. The function is called like {{include parts/my-template-footer.tmpl}}.

Image support

By default the editor can choose between the six different image sizes full, half, third, quarter, fifth and sixth. By using the template function {{image-support}} you can restrict which image sizes that the editor can choose from. The function can be called anywhere in the template.

Template example

<div data-post="{{post}}" class="{{class}} tmpl-article">
    <article>

        <!-- Make it possible to insert content via PHP using the filter arlima_article_begin -->
        {{{article_begin}}}

        <!-- Bullet point 5 in the interface walkthrough -->
        <div class="streamer-wrapper">
            {{{html_streamer}}}
        </div>

        <!-- only allow image sizes third and quarter on parent articles, allow any image size on child articles -->
        {{image-support size="third, quarter" children-size="*"}}

        <!-- Bullet point 7 in the interface walkthrough -->
        {{{html_image}}}

        <!-- Article title -->
        {{{html_title}}}

        <!-- The article text, use the filter arlima_article_content to modify the content -->
        {{{html_content}}}

        <!-- Display posts related to the post that is connected to this article. This will automatically
         be taken care of if you install the plugin "Microkids Related Posts" -->
        {{#related}}
            <div class="teaser-related-posts">
                <aside>
                    {{#related.single}}
                        <h3>Read more</h3>
                    {{/related.single}}
                    {{^related.single}}
                        <h3>Related articles</h3>
                    {{/related.single}}
                    <ul>
                        {{#related.posts}}
                            <li>
                                <a href="{{url}}" class="related">{{post_title}}</a>
                                {{#html_comment_stats}}
                                    <span title="Number of comments" class="num-comments">
                                        {{{html_comment_stats}}}
                                    </span>
                                {{/html_comment_stats}}
                            </li>
                        {{/related.posts}}
                    </ul>
                </aside>
            </div>
        {{/related}}
    </article>

    <!-- Make it possible to insert content via PHP using the filter arlima_article_end -->                    
    {{{article_end}}}

    {{#child_articles}}
        <div class="teaser-children">
            {{{child_articles}}}
        </div>
    {{/child_articles}}

</div>