Template Customization

Good to know: your product docs aren't just a reference of all your features! use them to encourage folks to perform certain actions and discover the value in your product.

Jump Straight to the video

The basics

We use Smarty Templating Engine to Render Template. Here is the current structure. and how it works.

For each file that Person is landed on we load the HTML file of it using Smarty. E.g

When user open /watch_video.php, for smarty, we have watch_video.html file present in /styles/template/layout/ folder

template_directory is basically a placeholder by default template_directory is cb_28

Directory Structure

/styles 
|--/template_directory 
   |--/layout 
   |--/theme 
   |--/images 
   |--/template.xml

/Layout Directory

it has all the HTML files of the template and that is where you edit the files. to access this folder dynamically use {$tyles_dir}

//Home Page is index.php and we load index.html file
{include file="$styles_dir/my_file.html}

//This will load file that is present in /styles/template_directory/layout/my_file.html

/theme Directory

this is where we place our CSS files, this is to include them easily and place them seperately.

<link rel="stylesheet" href="{$theme}/css/bootstrap.min.css?cache={$cache_buster}" />
/images Directory
//This will load css from /styles/template_directory/theme/css/bootstrap.min.css

/images Directory

This directory is where we place our images file required for any template and to access it

<img src="{$imageurl}/logo.png" />

Common Variables

$baseurl

returns the base url of the website

$imageurl

to access the images folder URL of the template

$theme_url

to access the theme folder of the URL

Objects & Methods That you can use

$vdo object from Video.class.php

$userquery object from User.class.php

Basically all is mentioned in /includes/common.php

Methods

userid();

get_videos();

get_video();

and all PHP functions...because smarty support PHP

in Vodlix we use two parenthesis {{ }} for smarty while for ClipBucket we use single.

So in case of ClipBucket if you enter a JS code such as data({'yes','test'}) it will throw an error so you will have to wrap this kind of a code in {literal} ... {/literal}

Template Editing in Action