Campsite

Template Quickstart Guide: "How do I..."

In this chapter:
  1. How to create a list of the most popular articles in a section
  2. How to create breadcrumbs
  3. How to do article pagination?
  4. How to display the most recently published articles?
  5. How to make a hard-coded link to an article?
  6. How to check if there are any articles in a section?
  7. How to display content based on the day of the weeek or date
  8. How to add an audio player, playing mp3-files attached to an article

 

Dive right in to the template language using the examples provided here.  These examples are meant to answer the most of the basic "getting started" questions laid out as questions in the form of "How do I...<do something>".


If you are looking for more in-depth information on templates, see "Templates In-depth" chapter.

 

1. How to Create a List of the Most Popular Articles in a Section

The following code snippet works insiction or article page and will display links to the most popular articles in this section.

<?
<ul>
{{ list_articles length=5 order="byPopularity desc"}}
<li><a href="{{ uri }}">{{ $campsite->article->name }}</a></li>
{{ /list_articles }}
</ul>
?>

 

2. How to Create Breadcrumbs

The easiest way to make breadcrumbs is following the two level structure of "Home" and "Section" and create something like this:

<?
<a href="{{ uri options="publication" }}">Home</a>
&gt;
<a href="{{ uri options="section" }}">{{ $campsite->section->name }}</a>
?>

This will first display the link to the home page and then the link to the current section where you are. Include this breadcrumb in your section page.

If you run an issue driven magazine, you might even add an additional level to your breadcrumbs: the current issue:

<?
<a href="{{ uri options="publication" }}">Home</a>
&gt;
<a href="{{ uri options="issue" }}">{{ $campsite->issue->name }}</a>
&gt;
<a href="{{ uri options="section" }}">{{ $campsite->section->name }}</a>
?>

 

3. How to do article pagination?

This example will show you how to split an article on multiple pages. We assume the article type is fastnews and has three fields: date (date field type), intro (body field type) and Full_text (body field type). You'll find this example implemented in the Campsite demo package here. The field Full_text is the one that contains the pagination (subheads).

Here is the code:

{{ list_subtitles field_name="Full_text" }}
  <p>
 {{ if $campsite->article->full_text->subtitle_is_current }}
    <b>{{ $campsite->current_list->index }}. {{ $campsite->subtitle->name }}</b>
  {{ else }}
    <a href="{{ uri }}">{{ $campsite->current_list->index }}. {{ $campsite->subtitle->name }}</a>
  {{ /if }}
  </p>
{{ /list_subtitles }}
<p>View subtitle:
{{ if $campsite->article->full_text->has_previous_subtitles }}
  <a href="{{ uri options="previous_subtitle full_text" }}">Previous</a>
{{ else }}
  Previous
{{ /if }}
|
{{ if $campsite->article->full_text->has_next_subtitles }}
  <a href="{{ uri options="next_subtitle full_text" }}">Next</a>
{{ else }}
  Next
{{ /if }}
|
{{ if $campsite->article->full_text->has_next_subtitles || $campsite->article->full_text->has_previous_subtitles }}
  <a href="{{ uri options="all_subtitles full_text" }}">All</a>
{{ else }}
  All
{{ /if }}
</p>
<p>{{ $campsite->article->full_text }}</p>

Lines 1-9 display the list of article subtitles (see "List of Subtitles" in "Template Language Reference" chapter):

  • display the subtitle name as simple text for the current subtitle - the one that's being viewed - (if $campsite->article->full_text->subtitle_is_current)
  • display the subtitle name as link for other subtitles (else branch)
Lines 11-27 create links to navigate to the previous or next subtitle (uri options="previous_subtitle full_text", uri options="previous_subtitle full_text"), or to display all subtitles (uri options="all_subtitles full_text").

Line 29 displays the actual article content, in this case the current subtitle ($campsite->article->full_text).

The example given above will make your page look something like this:

1210427881_3article_pagination_1.jpg 

4. How to display the most recently published articles?

This example will show you how to list the most recent news.  It also demonstrates how to display an image that is linked to an article, and how to make a hyperlink to an article.

The example given below will make your page look something like this:

1124982377_1Screenshot_4.png

 

Note: CSS styles have been removed from the example below to make it easier to read, so if you use the code below, it will not look exactly as shown above; the colors will not be there, and the spacing will be a bit different.

 

{{ local }}
{{ set_current_issue }}
{{ unset_section }}

<!-- Display all news articles on the front page, most recent first -->
{{ list_articles length="10" constraints="type is news OnFrontPage is on" order="bydate desc" }}
  {{ if $campsite->current_list->at_beginning }}
    <table width="100%">
  {{ /if }}
       
  <tr>
  <td valign="top" align="left">
      <!-- Article date -->
       {{ $campsite->article->publish_date | camp_date_format:"%M %d, %Y" }}
      <br />

     
<!-- Article Headline -->

     
<a href="{{ uri }}">{{ $campsite->article->name }}</a>
      <br />

     
<!-- Article Intro -->

      {{ $campsite->article->intro }}
      <br />

     
<!-- Read more -->

     
<a href="{{ uri }}"><nobreak>Read
More...</nobreak></a>
    </td>

   
<td valign="top" align="right">
     
<!-- Optional image -->


      {{ if $campsite->article->has_image(1) }}
     
<img src="../{{ uri options="image 1" }}"
border="0">

      {{ /if }}

    </td>
  </tr>
  {{ if $campsite->current_list->at_end }}
    </table>
  {{ /if }}
<!-- END Article -->
{{ /list_articles }}
{{ /local }}

5. How to make a hard-coded link to an article?

To make a hard-coded link to an article, do the following (replacing the values with the values for your particular article).  This will make a link to an "About Us" page:

{{ local }}
{{ set_issue number="1" }}
{{ set_section number="5" }}
{{ set_article name="About Us" }}
<a href="{{ uri }}">About Us</a>
{{ /local }} 

6. How to check if there are any articles in a section?

This example shows you how to do something only if there is at least one article in a section.  In the example below, substitute the name of your article type for "news". This also assumes that publication, issue, and section variables have been set already.

{{ list_articles constraints="type is news OnSection is On }}
    {{ if $campsite->current_list->at_beginning }}
        {{ $campsite->section->name }}
    {{ /if }}
{{ /list_articles }} 

7. How to display content based on the day of the weeek or date 

To invoke a certain action within templates (e.g. display a particular article headline) you can use the following smarty code:

{{ if $smarty.now|date_format:'%l' == 'Monday' }}
{{ $campsite->article->name }}
{{ /if }}

 or in the case of lower case comparison:

{{ if $smarty.now|date_format:'%l'|lower == 'monday'  }}
{{ $campsite->article->name }}
{{ /if }}

Furthermore, you can use all smarty  date_format conversion specifiers for this or similar purpose:

  • %a - abbreviated weekday name according to the current locale

  • %A - full weekday name according to the current locale

  • %b - abbreviated month name according to the current locale

  • %B - full month name according to the current locale

  • %c - preferred date and time representation for the current locale

  • %C - century number (the year divided by 100 and truncated to an integer, range 00 to 99)

  • %d - day of the month as a decimal number (range 01 to 31)

  • %D - same as %m/%d/%y

  • %e - day of the month as a decimal number, a single digit is preceded by a space (range 1 to 31)

  • %g - Week-based year within century [00,99]

  • %G - Week-based year, including the century [0000,9999]

  • %h - same as %b

  • %H - hour as a decimal number using a 24-hour clock (range 00 to 23)

  • %I - hour as a decimal number using a 12-hour clock (range 01 to 12)

  • %j - day of the year as a decimal number (range 001 to 366)

  • %k - Hour (24-hour clock) single digits are preceded by a blank. (range 0 to 23)

  • %l - hour as a decimal number using a 12-hour clock, single digits preceeded by a space (range 1 to 12)

  • %m - month as a decimal number (range 01 to 12)

  • %M - minute as a decimal number

  • %n - newline character

  • %p - either `am' or `pm' according to the given time value, or the corresponding strings for the current locale

  • %r - time in a.m. and p.m. notation

  • %R - time in 24 hour notation

  • %S - second as a decimal number

  • %t - tab character

  • %T - current time, equal to %H:%M:%S

  • %u - weekday as a decimal number [1,7], with 1 representing Monday

  • %U - week number of the current year as a decimal number, starting with the first Sunday as the first day of the first week

  • %V - The ISO 8601:1988 week number of the current year as a decimal number, range 01 to 53, where week 1 is the first week that has at least 4 days in the current year, and with Monday as the first day of the week.

  • %w - day of the week as a decimal, Sunday being 0

  • %W - week number of the current year as a decimal number, starting with the first Monday as the first day of the first week

  • %x - preferred date representation for the current locale without the time

  • %X - preferred time representation for the current locale without the date

  • %y - year as a decimal number without a century (range 00 to 99)

  • %Y - year as a decimal number including the century

  • %Z - time zone or name or abbreviation

  • %% - a literal `%' character 

 

8. How to add an audio player, playing mp3-files attached to an article

By using a combination of the list of articles and the uri options, you can create a playlist of files which are attached to an article. This is the code I used:

<?smarty
{{ list_article_attachments }}
 {{ if $campsite->current_list->at_beginning }}
 {{ /if }}
 {{ if $campsite->attachment->extension == "mp3" }}
<div  <param name="movie" value="/templates/radioactive/apps/player_mp3_maxi.swf" />
 <param name="bgcolor" value="#444444"/>
 <param name="FlashVars" value="mp3={{ uri options="articleattachment" }}" />
<!-- player home: http://flash-mp3-player.net/ -->
</object>
 {{ /if }}
{{ /list_article_attachments }}
?> 

Note that there is a special if condition: checking if the attached file is actually an mp3 file. If you want to play with this, you could extend this and e.g. also embed flv video players or other embedded objects according to the mime-type (i.e. ending) of the attached file.



your comment:
name :
comment :

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