Vodpod Wiki

Laminate Coders Tutorial

Page history last edited by Scott Persinger 2 mos ago

Introduction

The VodSpot 2.0 product introduces a new dynamic template system called Laminate.

The Laminate system is designed primarily to allow you full control over the HTML / CSS / Javascript that make up your VodSpot pages. However, Laminate is also a complete page generation lanuage. It allows you to completely control the logic used to generate your VodSpot pages much the same as editing the .php files used in a Wordpress template.

For example, here is a simple PHP script that shows the result of adding 2 numbers together:

     Vistor count is: <?php echo(5 + 20) ?>

and here is the same logic in Laminate:

     Visitor count is: {{ 5 + 20 }}

Laminate

Laminate is a template system that uses the Lua language to enable dynamic logic to be embedded inside of HTML pages. Laminate is built as plugin for Ruby on Rails, and will be published as an open source project. The Lua language was chosen because it's quite powerful, has a simple syntax similar to Ruby, and yet is secure for use as a template language.

Working with existing templates

All built-in VodSpot templates include embedded Lua code which extacts the videos from your Vodpod collection and outputs them to your VodSpot pages. The easiest way to learn about working with Laminate templates is to examine the code inside of an existing template and try experiementing with small changes.

To learn about using the VodSpot template editor to edit the code for your VodSpot template, please read the Simple Laminate Tutorial.

A Short Tutorial

For this tutorial, we are going to show how to modify the template file for your VodSpot header so that it shows "quick links" to most recent 4 videos from your Vodpod collection.

Most VodSpot templates will include a header template file. This file does not define a whole HTML page, but rather defines the common header portion for every page.

Open the Template Editor for your VodSpot template, and click header to open the header template file.

Now add this snippet of Lua code:

     {{ latest_vids = vodspot.videos({per_page = 4}) }}

This code invokes the vodspot.videos function which retrieves video records from your Vodpod collection you have attached to your VodSpot. The arguments "{per_page=4}" tells the function to return 4 records. The returned records are assigned to a local variable 'latest_vids'.

Now add the following code. This code loops over the video records and generates a link for each one using the video title:

<a href="{{ video.url }}">{{ video.title }}</a>

{{ if index < 3 then }} | {{ end }}

The "for idx,val in ipairs(array) do" syntax is Lua syntax for looping over an array. Inside the loop, the video variable holds the value of each video record, and we can use "video.url" for the link to the video page, and "video.title" for the title of the video. Finally the "if .." block at the end prints a "|" separator between each link but not after the last one.

Now click the Save Changes button. Your changes to the template file have been saved, but not yet published publically. To view the changes in action, click the Preview button. This will open a new window showing your VodSpot in draft mode. Once you're happy with changes you've made and reviewed in draft mode, click the Publish button to publish your changes publically.