Themes and Smarty

From ExponentCMS Docs

Themes and Smarty

This page contains information about using the Smarty Template Engine when creating Exponent Themes.

About Exponent and Smarty

Exponent utilises the Smarty Template Engine for Module Views and Site-Wide Views.

Module Views

Views files for each module are located in the /views/ sub-folder of the given module. For example, the views files for the Navigation Module are located in the folder:

/modules/navigationmodule/views/

ALERT! You should NEVER modify a View file in the module folder as this will be overwritten when you upgrade your Exponent website.

To modify a Module View:

1. Locate the view you want to modify in the relevant module folder, for example:

   /modules/navigationmodule/views/Breadcrumb.tpl

2. Copy the file to your active theme's module sub-folder, for example:

   themes/defaulttheme/modules/navigationmodule/views/Breadcrumb.tpl

3. Make any changes to the view and save them to this file.

Site-Wide Views

Views files for some Site-Wide functions are located in the main /views/ folder:

/views/loginredirect.tpl
/views/index.html
/views/popup_printerfriendly.tpl
/views/popup_general.tpl
/views/orphaned_content.tpl
/views/_maintenance.tpl
/views/viewnotfound.tpl

ALERT! You should NEVER modify a View file in the views folder as this will be overwritten when you upgrade your Exponent website.

To modify a Site-Wide View:

1. Locate the view you want to modify in the relevant module folder, for example:

   /views/loginredirect.tpl

2. Copy the file to your active theme's main views folder, for example:

   themes/defaulttheme/views/loginredirect.tpl

3. Make any changes to the view and save them to this file.

Exponent Specific Smarty Functions

File Paths

These are the file paths used in a Smarty template to access specific Exponent locations. They are called by the smarty.const. plus the Exponent Constants which are set in the files /exponent.php and /exponent_variables.php.

Base Path

The absolute path on the server's file system:

{$smarty.const.BASE}
/home/domain/public_html/exponent/                    (result)
{$smarty.const.BASE}&file={$project->picpath}         (example)

Path Relative

The web path the the Exponent directory:

{$smarty.const.PATH_RELATIVE}
/                                                     (result, exponent installed at root)
/exponent/                                            (result, exponent installed in sub-folder)
{$smarty.const.PATH_RELATIVE}modules/textmodule/      (example)

Host Name

The website host or domain name of your Exponent site:

{$smarty.const.HOSTNAME}
www.yoursite.com                                      (result)
{$smarty.const.HOSTNAME}modules/textmodule/           (example)

URL Base

The base URL of your Exponent site's domain:

{$smarty.const.URL_BASE}
http://www.yoursite.com                               (result)
{$smarty.const.URL_BASE}modules/textmodule/           (example)

URL Full

The full URL of your Exponent site's domain:

{$smarty.const.URL_FULL}
http://www.yoursite.com/                              (result, exponent installed at root)
http://www.yoursite.com/exponent/                     (result, exponent installed in sub-folder)
{$smarty.const.URL_FULL}modules/textmodule/           (example)

Script Paths

Script file variables:

{$smarty.const.SCRIPT_RELATIVE}
{$smarty.const.SCRIPT_ABSOLUTE}
{$smarty.const.SCRIPT_FILENAME}

Icon Folder Path

Relative web path to icon set:

{$smarty.const.ICON_RELATIVE}
/themes/common/images/icons/                          (result)
{$smarty.const.ICON_RELATIVE}userperms.gif            (example)

MIME Icon Folder Path

Relative web path to MIME icon set:

{$smarty.const.MIMEICON_RELATIVE}
/themes/common/images/icons/mimetypes/                (result)
{$smarty.const.MIMEICON_RELATIVE}userperms.gif        (example)

Themes Folder Path

Absolute and relative paths to themes folder:

{$smarty.const.THEME_ABSOLUTE}
/home/domain/public_html/themes/exponenttheme/        (result)
{$smarty.const.THEME_ABSOLUTE}style.css               (example)
 
{$smarty.const.THEME_RELATIVE}
/themes/exponenttheme/                                (result)
{$smarty.const.THEME_RELATIVE}style.css               (example)

Themes Folder

Name of the current theme's folder:

{$smarty.const.DISPLAY_THEME}
exponenttheme                                         (result)
{$smarty.const.DISPLAY_THEME}style.css                (example)

File Paths

These can be used in a Smarty template to display configuration variables. They are called by the smarty.const. plus the Configuration Variables which are set in the file /config.php.

Site Keywords

Displays the site's meta keywords:

{$smarty.const.SITE_KEYWORDS}
Exponent, Literature, Portal                          (result)

Site Description

Displays the site's meta description:

{$smarty.const.SITE_DESCRIPTION}
This is My Exponent Site full of nice things.         (result)

Site Title

Displays the site title:

{$smarty.const.SITE_TITLE}
My Exponent Site                                      (result)

URLs

Other's which might be useful are the site URL and SSL URL: {$smarty.const.NONSSL_URL} {$smarty.const.SSL_URL}

Generic Smarty Functions

These are Generic Smarty Functions which can be used in Exponent Themes.

Date and Year Display

To display the current date or year, use:

{$smarty.now}                               <!-- displays the current date -->
{$smarty.now|format_date:"%Y"}              <!-- displays the current year -->
{$item->thisdate|format_date:"%H %y"}       <!-- formats date of variable -->

For more info see Smarty Manual date_format.

Literal Text

Use the Literal Text tag to insert text you want to be ignored by Smarty, such as in-page scripts.

{literal}insert code here{/literal}

Math Equations

Smarty supports math equations on numeric and integer fields, use:

{math equation="(x-y)/60" x=$item->eventend y=$item->eventstart assign=dur}

Parsing Values for Javascript in a Smarty Template

You need to parse values into correct Javascript formats. You also need to go in and out of Literal Text mode to call template fields:

var startZoom = parseInt({$googlemap->map_zoom});
var centerLatitude = parseFloat({/literal}{$googlemap->map_lat}{literal});
var centerLongitude = parseFloat({/literal}{$googlemap->map_lon}{literal});

Temporary Variables

To assign a temporary template variable, use:

{assign var=starthour value=$item->eventstart|format_date:"%H"}

Designers Resources

• Download Themes
• Designers Guide — doesn't really exist yet!
• Zimmer Tech Themes Tutorial — excellent Exponent CMS Theme tutorial.
• 4webhelp.net — Unix timestamp converter to change timestamps into dates.
• 01-scripts.de — Unix timestamp converter to change timestamps into dates and dates into timestamps.
• Smarty Template Engine — official website.
• Smarty Manual — excellent reference guide.
• Smarty Wiki — excellent unofficial Wiki guide.